Arun Gupta, Miles to go ...

TOTD #45: Ajaxifying Java Server Faces using JSF Extensions

TOTD #42 explained how to create a simple Java Server Faces application using NetBeans 6.1 and deploy on GlassFish. In the process it explained some basic JSF concepts as well. If you remember, it built an application that allows you to create a database of cities/country of your choice. In that application, any city/country combination can be entered twice and no errors are reported.

This blog entry extends TOTD #42 and show the list of cities, that have already been entered, starting with the letters entered in the text box. And instead of refreshing the entire page, it uses JSF Extensions to make an Ajax call to the endpoint and show the list of cities based upon the text entered. This behavior is similar to Autocomplete and shows the suggestions in a separate text box.

Let's get started!

1. Download latest JSF-Extensions release.
2. Unzip the bundle as:
   
   

   ~/tools >gunzip -c ~/Downloads/jsf-extensions-0.1.tar.gz | tar xvf -

3. In NetBeans IDE, add the following jars to Project/Libraries
   
   
4. Edit "welcomeJSF.jsp"
1. Add the following to the required tag libraries
   
   

   <%@taglib prefix="jsfExt" uri="http://java.sun.com/jsf/extensions/dynafaces" %>

   
   The updated page looks like:
   
   
2. Add the following tag as the first tag inside <f:view>
   
   

   <jsfExt:scripts />

   
   The updated page looks like:
   
   
3. Add prependId="false" to "<h:form>" tag. The updated tag looks like:
   
   
4. Add the following fragment as an attribute to <h:inputText> tag with "cityName" id:
   
   

   onkeyup="DynaFaces.fireAjaxTransaction(this, { execute: 'cityName', render: 'city_choices', immediate: true});"

   
   This is the magic fragment that issues an Ajax call to the endpoint. It ensures execute portion of the request lifecycle is executed for "cityName" and "city_choices" (defined later) is rendered.
   
   The updated page looks like:
   
   
5. Add a new <h:outputText> tag after <h:commandButton> tag (to hold the suggestions output):
   
   

   <h:outputText id="city_choices" value="#{dbUtil.cityChoices}"></h:outputText>

   
   The updated page looks like:
   
   
5. Add the following fragment to web.xml
   
   

   <init-param>           <param-name>javax.faces.LIFECYCLE_ID</param-name>           <param-value>com.sun.faces.lifecycle.PARTIAL</param-value>         </init-param>

   
   The updated file looks like:
   
   
6. Edit "server.Cities" class
1. Add a new NamedQuery in Cities class (at the mark after yellow-highlighted parentheses):
   
   
   
   
   The query is:
   
   

   @NamedQuery(name = "Cities.findSimilarName", query = "SELECT c FROM Cities c WHERE LOWER(c.cityName) LIKE :searchString"),

   
   This NamedQuery queries the database and return a list of city names that matches the pattern specified in "searchString" parameter.
   
2. Change the toString() method implementation to return "cityName". The updated method looks like:
   
   
   
   This allows the city name to be printed clearly.
7. Add a new method in "server.DatabaseUtil" as:
   
   

   public Collection<Cities> getCityChoices() {         Collection<Cities> allCities = new ArrayList<Cities>();         if (cities.getCityName() != null && !cities.getCityName().equals("")) {             List list = entityManager.createNamedQuery("Cities.findSimilarName").                     setParameter("searchString", cities.getCityName().toLowerCase() + "%").                     getResultList();             for (int i = 0; i < list.size(); i++) {                 allCities.add((Cities) list.get(i));             }                     }         return allCities;     }

   
   This method uses previously defined NamedQuery and adds a parameter for pattern matching.
   

1. JSF Extensions Getting Started Guide
2. Tech Tip: Adding Ajax to Java Server Faces Technology with Dynamic Faces
3. JSF Extensions Ajax Reference

Posted by Arun Gupta in web2.0  |  Comments[3]