Integrating Spring Web Flow with JSF

November 11, 2010

Making use of model

In this section, we will extend the knowledge that we gained in the last section by writing a simple search application that will perform search on a list of employees. When running the application, the interface will prompt the user to provide the name of the employee and will do the search accordingly. For brevity, we will omit the code snippets for the most commonly used files such as web.xml, faces-config.xml etc in this section.

Download Source Code

Spring Web Flow and JSF Sample Code

Flow Definition file

The content of the flow definition file is given below. Note that the file also illustrates the usage of flow variables and flow transitions.

<?xml version="1.0" encoding="UTF-8"?>
<flow xmlns="http://www.springframework.org/schema/webflow"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://www.springframework.org/schema/webflow http://www.springframework.org/schema/webflow/spring-webflow-2.0.xsd">
 
    <var name="employeeSearchCriteria" class="net.javabeat.spring.webflow.jsf.search.employee.EmployeeCriteria" />
 
	<view-state id="showSearchPage">
        <transition on="searchEmployee" to="showSearchResults">
        </transition>        
	</view-state>
 
	<view-state id="showSearchResults">
		<on-render>
			<evaluate expression="employeeSearchService.findEmployees(employeeSearchCriteria)"
                result="viewScope.allEmployees" result-type="dataModel" />
		</on-render>
	</view-state>
 
</flow>

We have declared a flow variable ‘employeeSearchCriteria’ of type ‘EmployeeCriteria’ and have used this in one of the state definitions. Initially the state ‘showSearchPage’ will be set which will display a simple facelets page for collecting the search parameter which is the ‘name of the employee’. When the user clicks the search button, then a transition occurs, which changes the state to ‘showSearchResults’. Note that the state ‘showSearchResults’ in turn will map to a facelets page that will display the results of the search. For finding out the matching employees, we have used the ‘findEmplyees’ service defined on the object ‘employeeSearchService’ and the results were stored in the variable ‘allEmployees’. We will look into the contents of both the facelets files in the next section.

Search Page

The content of the search page is given below. As you can see, it provides a simple form for collecting the name of the employee as the search criteria from the user.

<?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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:sf="http://www.springframework.org/tags/faces">
    <body>
 
        <ui:composition template="../template.xhtml">
 
            <ui:define name="heading">
                <p>Employee Search Page</p>
            </ui:define>
 
            <ui:define name="body">
                <h:form id="mainForm">
                    <h:outputLabel for="searchString">Search Employee:</h:outputLabel>
                    <sf:clientTextValidator promptMessage="Search employees by name">
                        <h:inputText id="empName" value="#{employeeSearchCriteria.empName}" />
                    </sf:clientTextValidator>
                    <br/><br/>
                    <sf:commandButton id="searchEmployees" value="Find Employees" processIds="*" action="searchEmployee" />
                </h:form>
            </ui:define>
 
        </ui:composition>
 
    </body>
</html>

Also note that the name of the action is ‘searchEmployee’ which happens to be the identifier for the state transition in the flow definition file. We have bound the user inputs to the model object ‘EmployeeSearchCriteria’ which we will be looking at shortly.

Search Results Page

This page will display the search results to the user. We are making use of the ‘dataTable’ element for displaying the results. Note that when the action is triggered, we use the search service for finding out the list of employees matching the criteria and the results of the search are stored in the flow variable ‘allEmployees’.

<?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:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:sf="http://www.springframework.org/tags/faces">
    <body>
 
        <ui:composition template="../template.xhtml">
 
            <ui:define name="heading">
                <h2>Search Results</h2>
            </ui:define>
 
            <ui:define name="body">
 
            <h:dataTable id="allEmployees" var="employee" value="#{allEmployees}"  cellspacing="0" cellpadding="0" border="1">
                <h:column>
                    <f:facet name="header">Emp Id</f:facet>
                    <h:outputText value="#{employee.id}" align="left" />
                </h:column>
                <h:column>
                    <f:facet name="header">Name</f:facet>
                    <h:outputText value="#{employee.name}" align="left" />
                </h:column>
                <h:column>
                    <f:facet name="header">Date of Birth</f:facet>
                    <h:outputText value="#{employee.dob}" align="left" />
                </h:column>
                <h:column>
                    <f:facet name="header">Designation</f:facet>
                    <h:outputText value="#{employee.designation}" align="left" />
                </h:column>
            </h:dataTable>
 
            <p align="left">
                <a href="search">Search Again</a>
            </p>
 
            </ui:define>
 
        </ui:composition>
 
    </body>
</html>

Within the ‘dataTable’ element, we iterate over the search results for displaying the various properties of an employee such as id, name, date of birth. We still haven’t looked into the Employee model that we used in the above page which we will be discussing it shortly.

Employee Model object

The definition of the employee object is given below. The model comprises several properties such as id, name, date of birth and designation for an employee.

package net.javabeat.spring.webflow.jsf.search.employee;
 
import java.io.Serializable;
import java.util.Date;
 
public class Employee implements Serializable{
 
    private String id;
    private String name;
    private Date dob;
    private String designation;
 
    public String getDesignation() {
        return designation;
    }
 
    public void setDesignation(String designation) {
        this.designation = designation;
    }
 
    public Date getDob() {
        return dob;
    }
 
    public void setDob(Date dob) {
        this.dob = dob;
    }
 
    public String getId() {
        return id;
    }
 
    public void setId(String id) {
        this.id = id;
    }
 
    public String getName() {
        return name;
    }
 
    public void setName(String name) {
        this.name = name;
    }
 
}

Employee Search Criteria

If we could remember, in the employee search page, we use binding for collecting the user parameters in a model object which happens to be ‘EmployeeCriteria’, the definition of which is given below. Note that this is the object that will be passed to the Employee Service for finding out the matching employees.

package net.javabeat.spring.webflow.jsf.search.employee;
 
import java.io.Serializable;
 
public class EmployeeCriteria implements Serializable{
 
    private static final long serialVersionUID = 1L;
    private String empName;
 
    public String getEmpName() {
        return empName;
    }
 
    public void setEmpName(String empName) {
        this.empName = empName;
    }
 
}

Employee Search Service

The search service for employee object is given below. Note that we are not performing real-time search by hitting the database for finding out the matching employees, instead we create and load dummy employee objects and search against them.

package net.javabeat.spring.webflow.jsf.search.employee;
 
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
 
public class EmployeeSearchService {
 
    private static List<Employee> allEmployees;
 
    public List<Employee> findEmployees(EmployeeCriteria criteria){
 
        List<Employee> searchedEmployees = new ArrayList<Employee>();
        if (criteria == null){
            return allEmployees;
        }
 
        String searchEmpName = criteria.getEmpName();
        if (searchEmpName != null && searchEmpName.trim().length() > 0){
 
            for (Employee anEmployee : allEmployees){
 
                if (anEmployee.getName().contains(searchEmpName)){
                    searchedEmployees.add(anEmployee);
                }
            }
            return searchedEmployees;
        }else{
            return allEmployees;
        }
    }
 
    static{
 
        allEmployees = new ArrayList<Employee>();
        allEmployees.add(employee("10000", "Steve Clark", new Date(1960, 6, 12), "Employee"));
        allEmployees.add(employee("10000", "Alfred Ray", new Date(1954, 4, 17), "Manager"));
        allEmployees.add(employee("10000", "Robert Woulsh", new Date(1944, 2, 16), "Director"));
    }
 
    static Employee employee(String id, String name, Date dob, String designation){
 
        Employee employee = new Employee();
        employee.setId(id);
        employee.setName(name);
        employee.setDob(dob);
        employee.setDesignation(designation);
        return employee;
    }
}

The above method findEmpoyees() was used in the expression definition for finding out the matched employees against the search criteria.