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.

Helloworld Spring 4 MVC in Eclipse Luna

In this post I'm going to explain steps to install Spring Tools for eclipse.

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 later version in your PC. (If you have some other Eclipse version first check whether it supports to install Spring and if so install spring in to it using Install new software)

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 SharedResourceWeb as Figure 1). 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.

Figure 1 : Create dynamic web project

Figure 2: Add new Server Runtime if TomCat 7 not available

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 interface similar to Figure 4 and click Finish.

Figure 4: Convert to Maven project interface

Then right click on project and go to Properties -> Project Facts as show in Figure. Then Select Dynamic Web Module and apply changers.

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 folder on src->main folder as show in below.

 Then we have to remove previous WebContent folder 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 in your project. Fina details will be similar to below image.

Then lets create deployment descriptor in to the project for that right click on the project and then go to Java EE Tools -> Generate Deployment Descriptor stub.

Then you can see Eclipse will generate WEB-INF folder inside your webapp folder with web.xml file.I believe that your Eclipse has already setuped tomcat server. If you don't have the please refer my previous post it contains how to install tomcats server step by step. 

Step 3 Update POM.xml file

Then lets add our dependencies in to the project. This can be done in ways. First one will be from Eclipse interface and other one is updating POM.XML file. First I will show how to do this dependency adding in to using Eclipse interface.
First change following properties on Project properties under Maven. Then check on  Download repository index on Startup. As below image




First double click on POM.XML file and then click on dependencies as below image shows.

Then click on Add dependency section and then type "org.springframework" on input under Enter groupid artifactid or sha1 prefix of pattern (*) in loading dialog. Then select org.springframework spring.webmvc as show in below image. Then click OK.

Then lets add logging jar dependencies for that click add on dependencies section again and type slf4j-log4j then select slf4j-log4j and click OK.

Again click on add button and type log4j then select log4j log4j then click OK.
 

After that in dependency section Log4J as bundle but we need to have the jar so to change that select Log4J and click on manage. Then change the Type to Jar on dependency properties interface. Then click OK.

Then again click on Add and type jstl then select jstl jstl and click OK. As show in below image.

Then we need to add log4J property file right click on src-> main->resources and add new file call "log4J.properties" then copy and past following configurations in to that file then save it.

# Root logger option
log4j.rootLogger=INFO, stdout

# Direct log messages to stdout
log4j.appender.stdout=org.apache.log4j.ConsoleAppender
log4j.appender.stdout.Target=System.out
log4j.appender.stdout.layout=org.apache.log4j.PatternLayout
log4j.appender.stdout.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss} %-5p %c{1}:%L - %m%n
 
If You are not interested about above GUI then just needed to add following bold section in to POM.xml. Here is whole POM.xml file for my project.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>SpringFirstWeb</groupId>
  <artifactId>SpringFirstWeb</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <dependencies>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>4.1.1.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
      <dependency>
          <groupId>org.slf4j</groupId>
          <artifactId>slf4j-log4j13</artifactId>
          <version>1.0.1</version>
      </dependency>
      <dependency>
          <groupId>log4j</groupId>
          <artifactId>log4j</artifactId>
          <version>1.2.17</version>
      </dependency>
    </dependencies>
  <build>
    <sourceDirectory>src</sourceDirectory>
    <plugins>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>3.1</version>
        <configuration>
          <source>1.7</source>
          <target>1.7</target>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>


Step 4 Create Spring configuration file

Create springfirst-servlet.xml inside WEB-INF folder. Add below content in to that file.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-4.2.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd">

<mvc:annotation-driven/>
<context:component-scan base-package="spring.first.controller"></context:component-scan>
<bean id="viewResolver"
class="org.springframework.web.servlet.view.UrlBasedViewResolver">
<property name="viewClass"
value="org.springframework.web.servlet.view.JstlView" />
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp" />
</bean>

<mvc:resources location="/resources/" mapping="/resources/**"></mvc:resources>
</beans>

In above file we define following tags.
context:component-scan
This tag use to specify the component scan location for Spring. In this example it will scan in spring.first.controller folder and it's sub folders.

viewResolver
This bean use to define resolve view. In that prefix use to define the location where Spring framework search for views.

Step 5 Create web.xml file
Add web.xml file in to WEB-INF folder 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" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" version="3.0">
  <display-name>SpringMVCTutorial</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
 
    <servlet>
        <servlet-name>springfirst</servlet-name>
        <servlet-class>
            org.springframework.web.servlet.DispatcherServlet
        </servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springfirst</servlet-name>
        <url-pattern>/welcome.jsp</url-pattern>
        <url-pattern>/helloworld.html</url-pattern>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>
 
</web-app>


Step 5 Create controller for application

Lets create controller for our application. Go to folder structure and create SpringFirstHelloWorld.java controller class inside package spring.first.controller under src folder with below content.

package spring.first.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

/*
 * author: Nirmal Balasooriya
 *
 */

@Controller
public class SpringFirstHelloWorld {
    @RequestMapping("/helloworld")
    public ModelAndView helloWorld() {

        String message = "<br><div style='text-align:center;'>"
                + "<h3> Hello World, Spring MVC Tutorial</h3>"
                + "This message is coming from SpringFirstHelloWorld.java "
                + "</div>"
                + ""
                + "<br><br>";
        return new ModelAndView("welcome", "message", message);
    }

}

Step 6 Create views

Lets create two views for our application. index.jsp  inside the WebContet folder and welcome.jsp inside WEB-INF/jsp folder

index.jsp should contains following content.

<html>
<head>
<title>Spring MVC</title>
<style type="text/css">
</style>
</head>
<body>
    <br>
    <div style="text-align:center">
        <div><h2>
            Spring MCV Tutorial<br>
        </h2>
        </div>
        <h3>
            <a href="helloworld.html">Click here</a>(Get message from
            Spring MVC Controller... @RequestMapping("/helloworld"))
        </h3>
    </div>
</body>
</html>

welcome.jsp with below content.

<html>
<head>
<title>Hello World Spring MVC
    Example</title></head>
<body>${message}

    <br>
    <br>
    <div style="font-family: verdana; padding: 10px; border-radius: 10px; font-size: 12px; text-align:center;">

        Spring MCV Tutorial by <a href="http://nirmalbalasooriya.blogspot.com/">nirmalbalasooriya.blogspot.com</a>.
            <p>Click here for this tutorial <a
            href="http://nirmalbalasooriya.blogspot.com/2015/08/install-spring-tools-in-eclipse-luna.html"
            target="_blank">here</a></p>       
    </div>
</body>
</html>

After all above steps you can see project structure similar to Figure 5

Figure 5: Final project structure

Then right click on project and go to Run As -> Run on server . Then you will be able to access MVC Spring project you created from URL similar to http://localhost:8888/SpringFirstWeb/. 

From this URL you will able to access interface similar to Figure 6.

Figure 6: initial page of the project you created

You can download the entire project on following GitHub location https://github.com/NirmalBalasooriya/SpringWeb. I will add some advanced features of Spring framework in upcoming posts.