Form handling in JSF 2

On my previous post "JSF2 Hello World Example" I have described setup Java Server Faces(JSF) project in Eclipse step by step. In this post I will describe basic JSF form handling process. I will use the same project which I used in previous post to demonstrate this post as well and you can download the previous project source from on following GitHub location https://github.com/NirmalBalasooriya/JSF4Biginner.

Step 1 Create required model classes
First of lets create a "User" model classes that we are going to use in this demonstration.  Right click on "java" folder then go to New->Class. I will provide package as src.main.java (You can use preferred package name you like) and class name as "User".  Lets add following content in to that model class.

import java.util.HashMap;
import java.util.Map;
import javax.faces.bean.ManagedBean;

@ManagedBean
public class User implements Serializable {

    private static final long serialVersionUID = 1L;
    private String firstName;
    private String lastName;

    private String gender;
    private String role;
    private boolean adminUser;
   
    private String email;
    private String contactNumber;
   
    private String userName;
    private String password;

    private static Map<String, String> genderMap = new HashMap<String, String>();
    private static Map<String, String> userRoleMap = new HashMap<String, String>();

    static {
        genderMap.put( "Male","M");
        genderMap.put( "Feale","F");
        userRoleMap.put( "Admin","ADM");
        userRoleMap.put( "Regular","NML");
    }

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public boolean isAdminUser() {
        return adminUser;
    }

    public void setAdminUser(boolean adminUser) {
        this.adminUser = adminUser;
    }

    public Map<String, String> getGenderMap() {
        return genderMap;
    }

    public void setGenderMap(Map<String, String> genderMap) {
        this.genderMap = genderMap;
    }

    public Map<String, String> getUserRoleMap() {
        return userRoleMap;
    }

    public void setUserRoleMap(Map<String, String> userRoleMap) {
        this.userRoleMap = userRoleMap;
    }

    public String getRole() {
        return role;
    }

    public void setRole(String role) {
        this.role = role;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getContactNumber() {
        return contactNumber;
    }

    public void setContactNumber(String contactNumber) {
        this.contactNumber = contactNumber;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

}
 

Step 2 Create User controller class
Now lets create Controller class which handles the requests related to the user activities in this project. Right click onsrc.main.java  package then go to add -> class. The set class name as Controller and click add button on interface section. Then type serializable and select Serializable interface and click Ok. Then add following content in to Controller.
 
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;


@ManagedBean(name="mainController")
@SessionScoped
public class Controller implements Serializable{
   
    private static final long serialVersionUID = 1L;
   

}

Then lets add following method in to controller. This will load newUser.XHTML in webapp folder. Next step lets add this XHTML file in to webapp folder.

    public String getUser()
    {
        return "newUser";
    }

Then lets add newUser.XHTML file in to webapp folder with following content. Right click on webapp folder and go to New -> File type name as newUser.xhtml then click Ok.


<?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"
      xmlns:f="http://java.sun.com/jsf/core">

<h:head>
<title>JSF Form Validation Tutorial</title>
</h:head>
<h:body>
 Please fill user details

 <br />
    <h:form>
       
        <table style="width: 100%">
            <tr>
                <td><h:outputLabel>First Name</h:outputLabel></td>
                <td><h:inputText value="#{user.firstName}"></h:inputText> </td>
            </tr>
            <tr>
                <td><h:outputLabel>Last Name</h:outputLabel></td>
                <td><h:inputText value="#{user.lastName}"></h:inputText> </td>
            </tr>
            <tr>
                <td><h:outputLabel>Gender</h:outputLabel></td>
                <td>
                <h:selectOneRadio value="#{user.gender}">
                    <f:selectItems value="#{user.genderMap}"></f:selectItems>
                </h:selectOneRadio>
                </td>
            </tr>
            <tr>
                <td><h:outputLabel>User role</h:outputLabel></td>
                <td>
                <h:selectOneMenu value="#{user.role}">
                    <f:selectItems value="#{user.userRoleMap}" var="c"
                    itemLabel="#{c.code}" itemDescription="#{c.name}"></f:selectItems>
                </h:selectOneMenu>
                </td>
            </tr>
            <tr>
                <td><h:outputLabel>Contact Number</h:outputLabel></td>
                <td><h:inputText value="#{user.contactNumber}"></h:inputText> </td>
            </tr>
            <tr>
                <td><h:outputLabel>Email</h:outputLabel></td>
                <td><h:inputText value="#{user.email}"></h:inputText> </td>
            </tr>
            <tr>
                <td><h:outputLabel>User Name</h:outputLabel></td>
                <td><h:inputText value="#{user.userName}"></h:inputText> </td>
            </tr>
            <tr>
                <td><h:outputLabel>Password</h:outputLabel></td>
                <td><h:inputSecret ></h:inputSecret> </td>
            </tr>
            <tr>
                <td><h:outputLabel>Reenter Password</h:outputLabel></td>
                <td><h:inputSecret value="#{user.password}"></h:inputSecret> </td>
            </tr>
            <tr>
                <td> </td>
                <td> </td>
            </tr>
            <tr>
                <td></td>
                <td>
                <h:commandButton value="Submit" action="#{mainController.saveUser()}"></h:commandButton>
                </td>
            </tr>
        </table>
    </h:form>
 <br />
</h:body>
</html>

Lets add following two controller methods to load the newUser xhtml file and then handle the saveUser call in form sumbit action on newUser interface.

    public String getUser()
    {
        return "newUser";
    }
   
    public String saveUser()
    {
        return "user";
    }

Lets add new link in to default.xhtml file in webapp folder. Here value attribute will contain the word which see on link and the outcome attribute will be redirecting URL on click event on link.

    <h:link value="#{mainController.getUser()}" outcome="#{mainController.getUser()}"></h:link>

This will provide link to new user xhtml file.

Next lets add user.xhtml file in to webapp folder. This will responsible to load user entered details to the client in new page. Right click on webapp folder and go to New -> File type name as user.xhtml then click Ok. Then add following content in to that file.


<?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"
    xmlns:f="http://java.sun.com/jsf/core">
<h:head>
    <title>JSF Form Validation Tutorial</title>
</h:head>

<h:body>
    User Details
 <br />
    <h:form>
        <table style="width: 100%">
            <tr>
                <td><h:outputLabel>First Name</h:outputLabel></td>
                <td><h:outputLabel value="#{user.firstName}"></h:outputLabel></td>
            </tr>
            <tr>
                <td><h:outputLabel>Last Name</h:outputLabel></td>
                <td><h:outputLabel value="#{user.lastName}"></h:outputLabel></td>
            </tr>
            <tr>
                <td><h:outputLabel>Gender</h:outputLabel></td>
                <td><h:outputLabel value="#{user.gender}"></h:outputLabel></td>
            </tr>
            <tr>
                <td><h:outputLabel>User role</h:outputLabel></td>
                <td><h:outputLabel value="#{user.role}"></h:outputLabel></td>
            </tr>
            <tr>
                <td><h:outputLabel>Contact Number</h:outputLabel></td>
                <td><h:outputLabel value="#{user.contactNumber}"></h:outputLabel>
                </td>
            </tr>
            <tr>
                <td><h:outputLabel>Email</h:outputLabel></td>
                <td><h:outputLabel value="#{user.email}"></h:outputLabel></td>
            </tr>
            <tr>
                <td><h:outputLabel>User Name</h:outputLabel></td>
                <td><h:outputLabel value="#{user.userName}"></h:outputLabel></td>
            </tr>
            <tr>
                <td><h:outputLabel>Reenter Password</h:outputLabel></td>
                <td><h:outputLabel value="#{user.password}"></h:outputLabel></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </h:form>
    <br />
</h:body>
</html>

Final project structure will be similar to below image.

 

To the run the project right click on project and go to Run As -> Run on Server then select the installed Tomcat 7 and click finished. 

Then click on newUser link and fill the User details form.

Then click on Submit button and you will see similar to below image.

We have completed our form handling tutorial using JSF. You can access the project on following URL Repository https://github.com/NirmalBalasooriya/JSFFormHandling. In future post I will provide more advance features in form handling using JSF.

JSF2 hello world example

Java Server Faces 2 (JSF) is server side MVC web framework to implement web applications using reusable UI components which already available as different vender's. JSF applications are event driven. Main content of JSP can be described as set of API's which use to represent and manage the state of components which helps to validate, data conversion, event handling, page navigation etc.

Main idea behind using JSF is to develop web applications with in less time period with out any hassles. Lets create simple hello world example using JSF 2.

Prerequisites 

1. You should have install java in your PC and set path variable correctly (JAVA_HOME, JRE_HOME)
2. You should have install Eclipse Java EE LUNA 4.4 IDE or any IDE you preferred (In this post I'm Using Eclipse )

Step 1 Create Dynamic web project

As first step lets create simple Dynamic Web Project using Eclipse. Go to File->New->New Dynamic Web Project. Give preferred name to the project (Here I will user project name as JSF4Biginner as below Figure). Make sure you have selected Apache Tomcat 7 as target run time. If it's not available click on New Runtime button Then provide tomcat installation directory. Here you should provide installed JDK in JRE selection. This is really important otherwise it will give run-time errors when project deployed in to server.

Then select Configuration as Default Configuration For Apache Tomcat v7.0 as show in figure.

Step 2 Convert to Maven Project

Then convert project in to maven project my right click on project and go to Configure -> Convert to Maven Project(Figure 3)

Figure 3: Convert to Maven Project

Then you will see popup interface do not change any parameter on it click Finish.

Then go to Java Build Path and the JRE System Library and you have to set installed JDK version.  Do not user J2SE default selected one you will get run time errors if you keep default one .

Then we have to change our project structure to commence with Maven standards there for lets delete the WebContent folder on project and added new webapps,java,resource folder on src->main folder as show in below. (This main folder also newly added folder)

Since we have change our source default location we have to change that to do that right click on peoject and go proprties theyn select Java Build Path. Then go to source tab. Then select the JSF4Biggeners/src node and remove it. Then click on add Folder and select our newly added src.main.java folder location. Final source tab will be similar to below image.

 
Then we have to remove previous WebContent folder and below items show in image from deploying structure and add new webapp folder in to deployment. Go to project properties -> Deployment Assembly then remove the WebContent folder.

Then click on add -> Folder then select webapp folder and java folder in your project. Final interface will be similar to below image.

Step 3 Update POM.xml file

Then lets add dependencies to this project. First change following properties on Project properties under Maven. Then check on  Download repository index on Startup. As below image. Then click Ok and restart the Eclipse.



Double click on pom.xml file and click on dependencies tab as show in below screen shot. then click on add button on dependencies section.

Then type "jsf-api" and select "JSF-API 2.0" as show in below image.Then click OK.

Then again click on Add and type "jsf-impl". Then select com.sun.faces JSF-impl. Then click OK.

Step 4 Lets add bean class 

Lets add bean class inside src.main.java folder by right click on folder and New -> Class and provide class name as "JSFBean.java" then add interface "Serializable" clcik finish. Then add following content in to that.

package main.java;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;

import javax.faces.bean.SessionScoped;

@ManagedBean(name="beenObj")

@SessionScoped

public class JSFBean implements Serializable {

private String greeting="Hello World JSF :D";

public String getGreeting() {

return greeting;

}

public void setGreeting(String greeting) {

this.greeting = greeting;

}

}

Step 5 Lets add default faces 

Then lets add our default JSF page call default.xhtml inside the webapp folder. Right click on webapp folder and go to New-> Other then select file. type file name as default.xhtml then click finished.

add following content in to that file.

<?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:head>

<title>Hello World JSF Tutorial</title>

</h:head>

<h:body>

This is our first JSF page

<br />

       #{beenObj.greeting}

<br />

</h:body>

</html>

Step 6 Update web.xml file

Since we have delete the WebContent folder in our previous steps we need to add deployment descripter file in to our new project structure. To do that right click on project then go to Java EE tools -> Generate Deployment Descriptor Stub. Then you can see new web.xml file has created on WEB-INF folder in webapp folder. Then need to update web.xml file with following content.

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

id="WebApp_ID" version="2.5">

  <display-name>JSF4Beginner</display-name>

  <!-- Change to "Production" when you are ready to deploy -->

<context-param>

<param-name>javax.faces.PROJECT_STAGE</param-name>

<param-value>Development</param-value>

</context-param>

  

  <welcome-file-list>

    <welcome-file>faces/default.xhtml</welcome-file>

  </welcome-file-list>

<!-- JSF mapping -->

<servlet>

<servlet-name>Faces Servlet</servlet-name>

<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>

<load-on-startup>1</load-on-startup>

</servlet>

<!-- Map these files with JSF -->

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>/faces/*</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>*.jsf</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>*.faces</url-pattern>

</servlet-mapping>

<servlet-mapping>

<servlet-name>Faces Servlet</servlet-name>

<url-pattern>*.xhtml</url-pattern>

</servlet-mapping>

  

</web-app>

Now we are ready to run our first JSF example. To the run the project right click on project and go to Run As -> Run on Server then select the installed Tomcat 7 and click finished. 
 

Then using follwoing link http://localhost:8080/JSF4Bigginer/ You will see similar result to below image.

You can download the project on following GitHub location https://github.com/NirmalBalasooriya/JSF4Biginner. This is simple hello world programe using JSF 2 and In future posts I will add some advance features of JSF.