JSF 2 textbox example

2022-07-20 17:38:27

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>