Archive for October 17th, 2006

3 ways to easy Ajax in Seam + JSF + Facelets (2)

Tuesday, October 17th, 2006

Second approach: use a generic AJAX component library for JSF. The library we talk about here is the open source Ajax4jsf library.

[plug]
This is part of my blog series on Ajax with Seam+JSF+Facelets. Sample code and detailed explanations are also covered in my book on Seam.
[/plug]

Advantage: The benefit is that it allows us to add AJAX functionality to any existing JSF component. Again, it does not require any JavaScript or AJAX servlet code. Since all the Ajax requests happen within the JSF component lifecycle, the backend value binding just works without any additional code.

Disadvantage: It cannot render visual effects beyond re-rendering certain JSF components. It would be hard to implement the auto-completion text popup box using this approach. In addition, it bandwidth intensive to wrap JSF requests in AJAX calls, especially if you use client side state saving.

In the following example, we show how to use AJAX to check whether a user input username already exists in the database. The a4j:support tags adds AJAX support to the existing h:inputText component. Every time the user blurs (de-focuses) the input field, the Ajax4jsf framework submits the value of the input field into the backing bean property via an AJAX call. Once the AJAX call returns, the framework re-renders the "usernameCheck" component.

PLAIN TEXT
XML:
  1. <h:inputText value="#{manager.tryUsername}" size="15">
  2.     <a4j:support event="onblur" reRender="usernameCheck"/>
  3. </h:inputText>
  4. <span id="usernameCheck">#{manager.usernameCheck}</span>

When the #{manager.tryUsername} backing bean property is set, the backing bean checks the database for existing usernames. Depending on the name availability, the bean sets the usernameCheck property to be re-rendered on the web page.

PLAIN TEXT
JAVA:
  1. @Name("manager")
  2. public class ManagerBean implements Manager {
  3.  
  4.   ... ...
  5.  
  6.   private String tryUsername;
  7.   private String usernameCheck;
  8.  
  9.   public String getTryUsername() { return tryUsername; }
  10.   public void setTryUsername(String tryUsername) {
  11.     this.tryUsername = tryUsername;
  12.    
  13.     List existing = em.createQuery(
  14.         "select u from User u where username=:username")
  15.         .setParameter("username", tryUsername)
  16.         .getResultList();
  17.    
  18.     if (existing.size()==0) {
  19.       usernameCheck = tryUsername + " is available";
  20.     } else {
  21.       usernameCheck = tryUsername + " is NOT available";
  22.     }
  23.   }
  24.  
  25.   public String getUsernameCheck() { return usernameCheck; }
  26.   public void setUsernameCheck(String usernameCheck) {
  27.     this.usernameCheck = usernameCheck;
  28.   }
  29. }

Ajax4jsf is a very cool library. It works out of the box with Seam and Facelets. Learn to use it!

Courtesy of Todd Smart, here is an Ajax4jsf port of the Seam Hotel Booking demo application. We will have an official Ajax4jsf example for the Seam Hotel Booking demo in the next Seam release!

Posted in ajax, java, seam | No Comments »