JSF2 will provide a standard mechanism for adding AJAX capabilities to JSF applications. Jim Driscoll has this example, but it is a bit odd—the property getter is actually a mutator. Here is a more run-of-the-mill example. The code is at the Kenai site for the upcoming Core JSF 3rd edition in the ch01/login-ajax directory. I used Eclipse with the Glassfish v3 plugin and the most current JSF2 module in Glassfish (2.0.0 B8).

We want to process a login and show a welcome message upon success, all without a page flip.

The bean class is straightforward. (For simplicity, the code don't actually check the login credentials.)

package com.corejsf;

import javax.faces.model.ManagedBean;
import javax.faces.model.SessionScoped;

@ManagedBean(name = "user")
@SessionScoped
public class UserBean {
   private String name = "";
   private String password;

   public String getName() { return name; }
   public void setName(String newValue) { name = newValue; }

   public String getPassword() { return password; }
   public void setPassword(String newValue) { password = newValue; }
   
   public String getGreeting() { return name.length() == 0 ? "" : "Welcome to JSF2 + AJAX, " + name + "!"; }
}

In the JSF page, we need to include the AJAX JavaScript library, with the following incantation:

  <h:outputScript name="jsf.js" library="javax.faces" target="head" />

(The library name has recently changed. In the Public Review spec, it was called ajax.js.)

To avoid nested IDs for the components that are updated asynchronously, use the prependId attribute in the form:

  <h:form prependId="false">

Give IDs to the inputText and outputText components.

  <h:inputText value="#{user.name}" id="name"/>
  <h:inputSecret value="#{user.password}" id="password"/>
  <h:outputText value="#{user.greeting}" id="out"/>

Then define the login button as follows:

  <h:commandButton value="Login" type="button"
    onclick="jsf.ajax.request(this, event, {execute: 'name password', render: 'out'}); return false;"/>

(The function was called javax.faces.Ajax.ajaxRequest in the PR spec.)

Note that this is not a submit button. When the button is clicked, the onclick handler is executed, but the form data is not posted back. There is no page flip. The jsf.ajax.request method makes an asynchronous request to the server and receives instructions on which components to update. (Details below.)

The values of the execute and render keys are space-separated ID lists. The components on the execute list go through all parts of the JSF lifecycle except for “Render Response”. Those on the render list go through “Render Response”.

The input components must be on the execute list, so that the bean's setters are invoked. (This is where Jim's example was a bit confusing. His “Count” button isn't updating the model. It just forces the property getter to be invoked.)

Now let's spy on what goes on under the hood. Execute the View Source command of your browser. (If you use Eclipse, it defaults to using an internal browser without a View Source command. That is not good. Select Window → Web Browser → Default System Web Browser from the menu and run the app again.)

Note the element

<script type="text/javascript" src="http://weblogs.java.net/blog/cayhorstmann/archive/ch01-login-ajax/faces/javax.faces.resource/jsf.js?ln=javax.faces">

This is the result of the outputScript tag. You can spy on the script by pointing your browser to

http://localhost:8080/ch01-login-ajax/faces/javax.faces.resource/jsf.js?ln=javax.faces

It contains a documentation of the request function that is more up-to-date than the Public Review spec:

In Eclipse or Netbeans, it is easy to run the app server in debug mode and set a breakpoint in the bean's getters and setters.

That's how I found out what needs to go to the execute list. (In Jim's example, he added a submit button to that list, but it does actually no good in this case.)

As David Geary and myself were experimenting with different settings, David questioned whether there was any AJAX going on at all. To settle the question, I figured out how to set up the TCP monitor in Eclipse. (In Netbeans, this is much easier, but David says most people he meets prefer Eclipse :-)) Search for TCP in the Window→Preferences dialog...

Then point your browser to http://localhost:10333/ch01-login-ajax (or whichever port you set up). You'll see the requests and responses.

For example, here is the response when clicking the Login button.

<?xml version="1.0" encoding="utf-8"?>
<partial-response><changes><update id="out">
<![CDATA[<span id="out">Welcome to JSF2 + AJAX, Cay!</span>]]></update>
<update id="javax.faces.ViewState"><![CDATA[j_id5:j_id6]]>`````</update></changes></partial-response>

As you can see, the response contains instructions how to update the output field.

Note that the output field must be present in the page. I tried to avoid the greeting property by using the rendered attribute:

  <h:outputText id="out" rendered="#{user.name != ''}"  
    value="Welcome to JavaServer Faces, #{user.name}!"/>

That did not work—the AJAX update was not able to add the component since it didn't exist on the client. (Use View Source to verify that...)

For a chuckle, try a user name of ]]>. With today's version (2.0.0 B8), it doesn't work. Of course, that's a bug—someone was insufficiently paranoid about CDATA.

What can one learn from all this?

• View Source is your friend
• The debugger is your friend
• The TCP monitor is your friend

With JSF development, you need all the friends you can get :-)