JSF 2 textbox example

In JSF, you can use the <h:inputText /> tag to render a HTML input of type=”text”, text box. For example,

JSF tag…

<h:inputText />

Render this HTML code…

<input type="text" name="j_idt6:j_idt7" />

P.S The name attribute value is randomly generated by JSF.

JSF textbox example

A full JSF 2 example to render a textbox input field via <h:inputText /> tag.

1. Managed Bean

A simple managed bean, with an “userName” property.

package com.mkyong.form;
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.io.Serializable;
 
@ManagedBean
@SessionScoped
public class UserBean implements Serializable {
 
	private String userName;
 
	public String getUserName() {
		return userName;
	}
 
	public void setUserName(String userName) {
		this.userName = userName;
	}
}

2. View Page

Two pages for the demonstration.

demo.xhtml – render a textbox via “h:inputText”, button via “h:commandButton”, if the button is clicked, textbox value will be submitted to the “userBean.userName’ property via setUserName() method, and forward to “user.xhtml”.

<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html">
 
    <h:body>
    	<h1>JSF 2 textbox example</h1>
 
	  <h:form>
    		<h:inputText value="#{userBean.userName}" />
    		<h:commandButton value="Submit" action="user" />
    	  </h:form>
 
    </h:body>
</html>

user.xhtml – display the submitted textbox value via “h:outputText”

<?xml version="1.0" encoding="UTF-8"?>
<!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:h="http://java.sun.com/jsf/html">
 
    <h:body>
    	<h1>JSF 2 textbox example</h1>
 
	Submitted value : <h:outputText value="#{userBean.userName}" />
 
    </h:body>
</html>

3. Demo

URL : http://localhost:8080/JavaServerFaces/

Display “demo.xhtml” page

jsf2-textbox-example-1

If the button is clicked, display “user.xhtml” page, and the submitted textbox value

jsf2-textbox-example-2

Download Source Code

Download It – JSF-2-TextBox-Example.zip (9KB)

Reference

  1. JSF <h:inputText /> JavaDoc
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments