JSF UI Components Example

by Online Tutorials Library July 14, 2022

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> 

4) Run the Application

Output:

User Registration Form (index page).

JSF User registration form example 1

After submitting form, JSF renders response.xhtml file as a result web page.

// response page

JSF User registration form example 2

Next TopicJSF h:inputText

JSF UI Components Example

JSF UI Components Example

1) Creating a User Registration Form

2) Creating a Managed Bean

3) Creating an Output Page

4) Run the Application

What is jQuery

Downloading File from the Server in JSP

You may also like