In my previous post, I described a "switchlist" set of components and behavior. If you haven't already, please go ahead and read that post, to get the context for this one. 

This time, we'll wire it up so that it uses Ajax to communicate back to the server. It's going to be a short post - because we're going to use a new feature of JSF 2.0 - the f:ajax tag. Here it is in action:

<h:selectManyListbox id="list1" value="#{listholder.list1}" styleClass="switchlist">
                <f:selectItems value="#{listholder.items1}"/>
            <h:panelGroup id="buttonGroup" styleClass="switchlistButtons">
            <h:commandButton id="button1" value="&gt;&gt;"
                             actionListener="#{listholder.move1to2}" styleClass="switchlistButton">
                <f:ajax execute="form1:button1 form1:list1" render="form1:list1 form1:list2"/>
            <h:commandButton id="button2" value="&lt;&lt;"
                             actionListener="#{listholder.move2to1}" styleClass="switchlistButton">
                <f:ajax execute="form1:button2 form1:list2" render="form1:list1 form1:list2"/>
            <h:selectManyListbox id="list2" value="#{listholder.list2}" styleClass="switchlist">
                <f:selectItems value="#{listholder.items2}"/>

So, what do we have here? I've placed an ajax tag inside each commandButton. This tells JSF that when we render the page, we want to put an ajax request on the onclick event of the rendered button. 

I could have also placed it inside the selectManyListbox, in which case it would have put the request on theonchange event of the rendered input tag. I didn't, because that isn't how I'd like the page to behave. You can also place the tag in the form itself, in which case all the different components get ajax requests associated with them (which can be a nifty shorthand).

The thing to remember is that action components (i.e., commandButton) get "onclick" events, and value holding components (like selectManyListbox) get "onchange" events.

You can also see that the ajax tag, like the JavaScript ajax request function, takes parameters like execute andrender. These behave the same way here as they do in the JavaScript. Press one button, and we execute both that button (which fires the action listener) and it's associated listbox (so that set gets called on the values), and then render both listboxes, so we show our results. We could have instead chosen to just render the entire form, of course - but the whole point of doing this is to get ready to put this into a component.

But that's the next post. As always, feel free to ask questions below, and I'll do my best to answer them. This isn't the last we've seen of this tag, but that's enough for an introduction.

UPDATE: This feature isn't available in build 6 of the JSF 2.0 bundle. I'll try to get a build 7 out that includes this feature ASAP. On the plus side, you're really getting cutting edge information :-)

Update 2: The new release of build 7 is available on GlassFish v3 Prelude.