Web Apps Made Easier with AjaxFaces

Integrating different technologies and frameworks opens up a lot of resources
to harness for developers. In the last few issues of PCQuest, we have talked
about a few frameworks, their applications and integration between them. This
time around we'll look into AjaxFaces by CyberXP.NET that provides a complete
integration solution for AJAX and Java Server Faces. It's composed of Faces
components that provide rendering for scripts and custom built components that
are AJAX enabled. AjaxFaces are used in building rich user interfaces (UI). In
this article we'll give you an overview of how the solution works and then
show you how to use it for your application.

AjaxFaces overview

The solution works like this. At the core of AjaxFaces are three Faces
components: the HTMLAjaxScript, UIAjaxData and UIAjaxItem. All these components
inherit from a hierarchy of extended faces components, the top level of which is
the UIComponent class from the javax.faces.component package. The HTMLAjaxScript
component renders an HTML script element which is defined using the '
' tag element in the JSP page that is being designed. This rendered script
works as the 'AJAX Engine' or more simply, the code for the AJAX part of
your application. The UIAjaxItem specifies the mapping between UI components.

These components are of two types viz. the source UI components that trigger the
XMLHttpRequest from a Java Script on the client side and the target UI
components that respond to the asynchronous requests and change their UI. The
UIAjaxData component specifies a parent component for the UIAjaxItem objects
created in the application. The custom UI components which are AJAX enabled in
the solution are Tree, TabbedPane and Calender. Components such as Import, Set,
StyleSheet and Block components are responsible for tasks such as rendering tags and changing values of the
back-end Beans properties. You can find demos of the former three UI components
on the AjaxFaces website www.ajaxfaces.com.

Component usage snippets

Things work simply over here, theUI components in AjaxFaces place a Java Script
call which is handled byan AJAX script that further generates

an XMLHTTPRequest to the 'AjaxServlet' that takes care of client/server
communication byfurther forwarding the request to a Faces Servlet. The response
then travels the opposite direction where the AjaxServlet returns XML output to
the AjaxScript which renders HTML to the UI

front-end.

Thus the AjaxServlet acts as the bridge between the two technologies viz. AJAX
and Faces. To enable the solution in your application you first of all need to add the AjaxScript component to your
JSP page.

... 

xmlns:af_h="http://www.cyberxp.net/jsf/html"

xmlns:af_c="http://www.cyberxp.net/jsf/core"/>

You can then add scripts to the Faces UI components and provide event based
firing of scripts.

/>

The major difference here is that normally you would have explicitly
specified a Java Script function and would have implemented an XMLHTTPRequest to
a servlet from the script.

The AjaxFaces solution takes care of such things by itself. The AjaxServlet we
mentioned earlier takes care of all the requests and responses from the script to a FacesServlet. The mappings for
AjaxServlet are specified in your 'web.xml' deployment descriptor as
follows:

GZIPFilter



net.CyberXP.ajaxfaces.

webapp.GZIPFilter







GZIPFilter

Ajax Servlet



REQUEST

FORWARD

Similarly, the AjaxServlet and its mapping is specified as follows:

Ajax Servlet

net.CyberXP.ajaxfaces.Webapp.AjaxServlet





Ajax Servlet



/AjaxServlet

The GZip filter has been specified over here because the AjaxServlet
compresses the output data if compression is being supported at client side.
After you have added the AJAX Scripts, you can also add AjaxData components and
then add AjaxItems to AjaxData components. This can be done as follows:

/>

The AjaxItem components support six actions viz. setInnerHTML, setOuterHTML,
insertAfterStart, insertAfterEnd, insertBeforeEnd and insertAfterEnd. These
actions have the same effect as the methods defined with same names in the
HTMLDocument class of javax.swing.text.html package.

AjaxFaces banks on the fact that more often than not, using the most obvious and
simplest solution does wonders for complex scenarios.

Although you can achieve similar results using IDE's like the Sun Java
Creator, what makes this solution stand apart is the fact that it handles the
script to Servlets communications implicitly allowing the developer to
concentrate more on the components them selves and hence the UI.