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
Comments:

Here are some other useful resources you should refer people to:

Old, but good overview article:
http://java.sun.com/developer/technicalArticles/J2EE/webapp_3/

Great tutorial that actually explains how DF works and comes with a downloadable code example:
https://jsf-extensions.dev.java.net/mvn/tutorial.html

Posted by Jennifer on September 17, 2008 at 01:51 AM PDT #

[Trackback] This blog updates TOTD #45 to use Facelets as view technology. Powerful templating system, re-use and ease-of-development, designer-friendly are the key benefits of Facelets. Facelets are already an integral part of Java Server Faces 2.0. But this blo...

Posted by Arun Gupta's Blog on September 21, 2008 at 11:05 PM PDT #

[Trackback] Java Server Faces 2.0 specification (JSR 314, EDR2) and implementation (soon to be EDR2) are brewing. This blog shows how to get started with Mojarra - Sun's implementation of JSF. GlassFish v2 comes bundled with Mojarra 1.2_04 which allows...

Posted by Arun Gupta's Blog on October 13, 2008 at 10:55 PM PDT #

Post a Comment:
Comments are closed for this entry.
About

profile image
Arun Gupta is a technology enthusiast, a passionate runner, author, and a community guy who works for Oracle Corp.


Java EE 7 Samples

Stay Connected

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today