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

About the Author

author image
mkyong
Founder of Mkyong.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

Leave a Reply

avatar
newest oldest most voted
Karan Dua
Guest
Karan Dua

Hello everyone,
I’m new to JSF 2.0 and primefaces 5.0
I’ve a doubt. When is the setter method called in the lifecycle? of the application in view scope
I’ve a text box. I enter a value in it and click out. Will setter be called here itself in view scope bean? Or i’ve to submit form only then the setter would be called?

vajja bageeradha
Guest
vajja bageeradha

hi to all..

any one can help me ..
.how to create dynamic text filed s creation by using jsf ?

Ravi
Guest
Ravi
Nice Example 
Abraão Isvi
Guest
Abraão Isvi

Thank you!

hossein
Guest
hossein

thank you very very………………

Prasath
Guest
Prasath

there is no faces-config.xml file

Prasath
Guest
Prasath

Not able to run

Mohamed
Guest
Mohamed

“zone de text pour entere l’id de user”

je suis débutant et je suis entrain de creer un formulaire pour inscription(a l’aide de framework JSF),
aprés execution il m’affiche dans la zone de texte :
#{UserBean.id_profile}, que je dois faire pour que l affichage soit normale?
merci d’avance