Today we're going to talk about two features of JSF 2.0's f:ajax tag: the event attribute and the listener attribute.
The use of both of these is really, really simple - so I'll just briefly cover the basics, and then launch directly into the sample code.
The "event" attribute of the ajax tag indicates which event to use to trigger the ajax request. There are any number of possible events allowed: You can use the standard browser DOM events (like click, change, keyup, etc. You can also use two special event values - action and valueChange. These two special values correspond to the same events that happen on the server side in JSF. On the client side, action is typically mapped to click, while valueChange is mapped to change or click, depending on the component.
The "listener" attribute of an ajax tag is a method that is called on the server side every time the ajax function happens on the client side. For instance, you could use this attribute to specify a server side function to call every time the user pressed a key - Handy, eh?
Anyhow, without further ado, let's see how this works in a page. We're going to detect every time the user lifts a key (the keyup event) - when that happens, we'll run an ajax command which updates a counter, and refreshes an output field.Here's the using page:

1 2 3 6 7 Ajax Tag Event and Listener Demo 8 9 10
11 Echo test: 12
13 String Length: 14
15 16 17 18
19 Event count: 20 21 22 23
As I said, we tag the inputText (line 15) with an ajax tag (line 16). That ajax tag listens for the keyup event - when such an event occurs, we send an ajax request to the server. That ajax request will run a listener method (listenBean.update), apply the new string value from the inputText (listenBean.hello), and then render out (line 11), count (line 13), and eventcount (line 19).
The bean itself is nothing special: here's the example below: 1 import javax.faces.bean.ManagedBean; 2 import javax.faces.bean.ViewScoped; 3 import javax.faces.event.AjaxBehaviorEvent; 4 5 @ManagedBean(name="listenBean") 6 @ViewScoped 7 public class ListenBean { 8 9 private String hello = "Hello"; 10 11 private int length = hello.length(); 12 13 private int eventCount = 0; 14 15 public String getHello() { 16 return hello; 17 } 18 19 public void setHello(String hello) { 20 this.hello = hello; 21 } 22 23 public int getLength() { 24 return length; 25 } 26 27 public int getEventCount() { 28 return eventCount; 29 } 30 31 public void update(AjaxBehaviorEvent event) { 32 length = hello.length(); 33 eventCount++; 34 } 35 }
So - questions? Ask below.

More...