Monday, May 2, 2011

JSF Part 2: Navigation and Ajax

This blog illustrates how to develop page navigation including simple ajax functionality. We shall use the project from JSF Part 1 tutorial.

Step 1
Develop DeptService and DeptBean classes that return list of all departments

DeptService.java
public class DeptService {
    public List<String> getAllDepts() {
        ....
    }
}

DeptBean.java
@ManagedBean
public class DeptBean {
    private DeptService deptService = new DeptService();

    public List<String> getAllDepts() {
        return deptService.getAllDepts();
    }
}

Step 2
Develop EmployeeBean and set up selectedDept variable that will hold the value of selected department name

EmployeeBean.java
@ManagedBean
public class EmployeeBean {
    private String selectedDept;
  
    public String getSelectedDept() {
        return selectedDept;
    }

    public void setSelectedDept(String selectedDept) {
        this.selectedDept = selectedDept;
    }
}

Step 3
Develop index.xhtml that displays list of departments and allows user to select a department

index.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
    <title>Departments</title>
</h:head>
<h:body>
    <h:form prependId="false">
        <p:panel header="Search By Dept"> Select Dept :
            <h:selectOneMenu value="#{employeeBean.selectedDept}">
                <f:selectItems value="#{deptBean.allDepts}" />
            </h:selectOneMenu>          
        </p:panel>
    </h:form>
</h:body>
</html>

Step 4
Run the application in your webapp container and test it using the following URL

http://localhost:<Port>/<WebAppContext>/faces/index.xhtml



Step 5
Now that "selectedDept" variable is set, lets invoke a function on EmployeeBean.java to perform search. Add a commandButton after selectOneMenu in index.xhtml that will invoke function "performSearch"

index.html
                .
                .              
            </h:selectOneMenu>         
            <p:commandButton action="#{employeeBean.performSearch}" value="Search" ajax="false"/>         
        </p:panel>
             .
             .

Step 6
Add functionality to EmployeeBean.java and EmployeeService.java that will  search employees based on  selectedDept and cache results in searchResults variable 

EmployeeBean.java
public class EmployeeBean {
    .
    .
    private List<Employee> searchResults;

    public List<Employee> getSearchResults() {
        return searchResults;
    }

    public String performSearch() {
        if (selectedDept.equals("All")  ) {
            searchResults = employeeService.getAllEmployees();
        } else {
            searchResults = employeeService.getEmployeesByDept(selectedDept);
        }
        return "results";
    }
    .
    .
}

EmployeeService.java
public class EmployeeService {
    .
    .
    public List<Employee> getEmployeesByDept(String dept) {
        List<Employee> list = new ArrayList<Employee>();
        for (Employee e : employees) {
            if (e.getDept().equals(dept)) {
                list.add(e);
            }
        }
        return list;
    }
    .
    .
}

Step 7
Configure page navigation in /WEB-INF/faces-config.xml. The xml stanza says "from page index.xhtml, if function employeeBean.performSearch returns "results", then display view results.xhtml

faces-config.xml
<?xml version="1.0"?>
<faces-config version="2.0" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd">
    <navigation-rule>
        <from-view-id>/index.xhtml</from-view-id>
        <navigation-case>
            <from-action>#{employeeBean.performSearch}</from-action>
            <from-outcome>results</from-outcome>
            <to-view-id>/results.xhtml</to-view-id>
        </navigation-case>
    </navigation-rule>
</faces-config>

Step 8
Finally, render the list in dataTable

results.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
    <title>Employees</title>
</h:head>
<h:body>
    <h:form prependId="false">
        <p:dataTable value="#{employeeBean.searchResults}" var="emp">
            <f:facet name="header">
                <h:outputText value="Employees search results for " />
                <h:outputText value="#{employeeBean.selectedDept}" />
                <h:outputText value=" Dept" />
            </f:facet>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Id" />
                </f:facet>
                <h:outputText value="#{emp.id}" />
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Name" />
                </f:facet>
                <h:outputText value="#{emp.name}" />
            </p:column>
            <p:column>
                <f:facet name="header">
                    <h:outputText value="Dept" />
                </f:facet>
                <h:outputText value="#{emp.dept}" />
            </p:column>
        </p:dataTable>
    </h:form>
</h:body>
</html>

Step 9
Run the application in your webapp container and test it using the following URL

http://localhost:<Port>/<WebAppContext>/faces/index.xhtml


Select a department and hit "Search" button.


Step 10
Instead of two page navigation, all components could be placed in one page and the dataTable could be refreshed using Ajax. This is accomplished by adding update attribute to commandButton which will refresh "empTable" component after setting selectedDept in AjaxEmployeeBean.

ajax.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.prime.com.tr/ui">

<h:head>
    <title>Employees</title>
</h:head>
<h:body>
    <h:form prependId="false">
        <p:panel header="Search By Dept"> Select Country :
            <h:selectOneMenu value="#{ajaxEmployeeBean.selectedDept}">
                <f:selectItems value="#{deptBean.allDepts}" />
            </h:selectOneMenu>

            <p:commandButton action="#{ajaxEmployeeBean.performSearch}" value="Search" update="empTable" />

            <p:dataTable id="empTable" value="#{ajaxEmployeeBean.searchResults}" var="emp">
                <f:facet name="header">
                    <h:outputText value="Employees search results for " />
                    <h:outputText value="#{ajaxEmployeeBean.selectedDept}" />
                    <h:outputText value=" Dept" />
                </f:facet>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Id" />
                    </f:facet>
                    <h:outputText value="#{emp.id}" />
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Name" />
                    </f:facet>
                    <h:outputText value="#{emp.name}" />
                </p:column>
                <p:column>
                    <f:facet name="header">
                        <h:outputText value="Dept" />
                    </f:facet>
                    <h:outputText value="#{emp.dept}" />
                </p:column>
            </p:dataTable>
        </p:panel>
    </h:form>
</h:body>
</html>

Step 11
Since this ajax page has no navigation, the performSearch method should return null. Class EmployeeBean could be rewritten as AjaxEmployeeBean, with function performSearch returning null.

AjaxEmployeeBean.java
@ManagedBean
public class AjaxEmployeeBean {
    private EmployeeService employeeService = new EmployeeService();

    private String selectedDept;
    private List<Employee> searchResults;

    public String getSelectedDept() {
        return selectedDept;
    }

    public void setSelectedDept(String selectedDept) {
        this.selectedDept = selectedDept;
    }

    public List<Employee> getSearchResults() {
        return searchResults;
    }    
    
    public String performSearch() {
        if (selectedDept.equals("All")  ) {
            searchResults = employeeService.getAllEmployees();
        } else {
            searchResults = employeeService.getEmployeesByDept(selectedDept);
        }
        return null;
    }
}

Step 12
Run the application in your webapp container and test it using the following URL

http://localhost:<Port>/<WebAppContext>/faces/ajax.xhtml


Download Project
You can download my project from google code. SVN URL is http://ingenious-camel.googlecode.com/svn/trunk/JSF2NavigationAjax/

Posted by Sam at 7:19 PM

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)