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.
   

Now, play time!

The list of created cities is:



If "S" is entered in the text box (http://localhost:8080/Cities/), then the following output is shown:



Entering "San", shows:



Entering "Sant" shows:



Entering "De" updates the page as:



And finally entering "Ber" shows the output as:



So you built a simple Ajaxified Java Server Faces application using JSF Extensions.

Here are some more references to look at:

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

Java Server Faces 2.0 has Ajax functionality integrated into the spec and this should be more seamless. I'll try that next!

Please leave suggestions on other TOTD (Tip Of The Day) that you'd like to see. A complete archive of all tips is available here.

Technorati: totd mysql javaserverfaces netbeans glassfish ajax