JSF 2 InputText Example

JavaServer Faces (JSF 2) provides a number of user interfaces components that cover the most common requirements, one of the most important component is a <h:inputText/> component. The inputText is a component that both displays the current value of the component to the user and processes request parameters on the subsequent request that need to be decoded. This tutorial highlights the usage of JSF InputText field and finally a demo using the source code.

Also Read:

1. Managed Bean

The following lines of code should provide you the proper ManagedBean for handling the user greetings.

  • Managed bean should provide a holder for the greeting message.
  • Managed bean should provide an action that the user could deal with for sending the greetings.
  • The default value of the greeting is Hello World !
package net.javabeat.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class UserBean {
	private String userHelloWords = "Hello World !";

	public String getUserHelloWords() {
		return userHelloWords;
	}

	public void setUserHelloWords(String userHelloWords) {
		this.userHelloWords = userHelloWords;
	}

	public String sayHello() {
		return "response";
	}

}

2. The Views (Pages)

The scenario that we are going to achieve it, is to display a view for that allow the end user to enter its greetings words. An action (sayHello) should be developed for change the default value of the greeting that the bean already had. Once the user has clicked the (Say Hello) action, a new view (page) has been displayed to show the user the hello message that has been entered.

index.xhtml View (Page)

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
        <title>JavaBeat JSF InputText</title>
</h:head>
<f:view>
	<h:form>
		<h2>
			<h:outputText style="font-style:bold;" value="JSF 2.2 InputText Example"/>
		</h2>
		<br/>
		<h:inputText value="#{userBean.userHelloWords}" />
		<h:commandButton value="Say Hello" action="#{userBean.sayHello}"></h:commandButton>
	</h:form>
</f:view>
</html>

response.xhtml View (Page)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<f:view>
	<h2>
		<h:outputText style="font-family:bold;" value="JSF 2.2 InputText Example"/>
	</h2>
	<br/>
	<h:outputText value="#{userBean.userHelloWords}" />
</f:view>
</html>

3. JSF 2 InputText Demo

The below snapshots shows you the scenario while running.

Index JSF View

 

Response JSF View

Comments

comments

About Amr Mohammed

Speak Your Mind

*