There has been a lot of discussion on the MyFaces developers list on how best to incorporate AJAX (Asynchronous JavaScript and XML) into JavaServer Faces (JSF) components. The first components were simple updating components that would retrieve updated information from the server and replace some elements' innerHTML. These included an InputSuggestAjax component that worked like Google Suggest and AutoUpdateDataTable that would get updated list information and update a table in place at a specified interval. Both very cool components made by Martin Marinschek. The main work on these was to encode an ajax response that was just the html required to replace the current html that was being displayed.
I needed components that could be interactive and update the backing model on the server side as well as update so there was a lot of extra work required.
On the client:
- Instead of submitting forms in the traditional way, everything has to be submitted through the XMLHttpRequest using javascript.
- Components had to be javascript ready to push their changes to the server
- Error handling (validation, etc) had to be done dynamically on the client side
- Decode an incoming request
- Update backing model components
- Return an error response or a success response
- Restore view
- Apply request values; process events
- Process validations; process events
- Update model values; process events
- Invoke application; process events
- Render response
The Components
All of the components had to be modified to support this new scripting when decoding and when encoding (rendering). The currently available components that you can use and test are:
- inputText (with options to show buttons for submit and cancel, default is to
submit onChange)
- selectManyCheckbox
- selectOneRadio
- selectBooleanCheckbox (with options to use on/off images instead of
a checkbox)
These are available as part of the MyFaces Sandbox package. See inputAjax.jsp for examples on usage. The best thing about these components to a developer is the ease of use, for instance, using inputTextAjax is just as simple as using inputText:
<s:inputtextajax value="#{inputAjaxBean.text2}" id="text2" forceid="true" onsuccess="successful" onfailure="failure" onstart="starting" showokbutton="true" showcanceltext="true"/>
( See wiki documentation for more info on usage. )
I'd love to hear any comments or suggestions you may have.

Now lets try a product search, how about the Xbox 360 since there is so much hype about it right now and I'll use Yahoo as the search engine this time to be fair (I really like what I'm seeing on Yahoo search these days btw, just as good as Google I dare say). My