JSF UI Components Example

JSF provides inbuilt components to create web pages. Here, we are creating a user registration for with the help of JSF components. Follow the following steps to create the form.

1) Creating a User Registration Form

// index.xhtml

<!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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>User Registration Form</title>
</h:head>
<h:body>
<h:form id="form">
<table>
<tr>
<td><h:outputLabel for="username">User Name</h:outputLabel></td>
<td><h:inputText id="name-id" value="#{user.name}"/></td>
</tr>
<tr>
<td><h:outputLabel for="email">Your Email</h:outputLabel></td>
<td><h:inputText id="email-id" value="#{user.email}"/></td>
</tr>
<tr>
<td><h:outputLabel for="password">Password</h:outputLabel></td>
<td><h:inputSecret id="password-id" value="#{user.password}"/></td>
</tr>

<tr>
<td><h:outputLabel for="gender">Gender</h:outputLabel></td>
<td><h:selectOneRadio value="#{user.gender}">
<f:selectItem itemValue="Male" itemLabel="Male" />
<f:selectItem itemValue="Female" itemLabel="Female" />
</h:selectOneRadio></td>
</tr>
<tr><td><h:outputLabel for="address">Address</h:outputLabel></td>
<td><h:inputTextarea value="#{user.address}" cols="50" rows="5"/></td></tr>
</table>
<h:commandButton value="Submit" action="response.xhtml"></h:commandButton>
</h:form>
</h:body>
</html>

2) Creating a Managed Bean

// User.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User{
String name;
String email;
String password;
String gender;
String address;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}

public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}    
}

3) Creating an Output Page

// response.xhtml

<!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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>User Details</title>
</h:head>
<h:body>
<h2><h:outputText value="Hello #{user.name}"/></h2>
<h4><h:outputText value="You have Registered with us Successfully, Your Details are The Following."/></h4>
<table>
<tr>
<td><b>Email: </b></td>
<td><h:outputText value="#{user.email}"/><br/></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td><h:outputText value="#{user.password}"/><br/></td>
</tr>
<tr>
<td><b>Gender:</b></td>
<td><h:outputText value="#{user.gender}"/><br/></td>
</tr>
<tr>
<td><b>Address: </b></td>
<td><h:outputText value="#{user.address}"/></td>
</tr>
</table>
</h:body>
</html>