Main Tutorials

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 Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
8 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
Karan Dua
6 years ago

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
8 years ago

hi to all..

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

Ravi
11 years ago
Nice Example 
Abraão Isvi
11 years ago

Thank you!

hossein
11 years ago

thank you very very………………

Prasath
11 years ago

Not able to run

Prasath
11 years ago

there is no faces-config.xml file

Mohamed
12 years ago

“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