Web apps made easy with AjaxFaces

author-image
CIOL Bureau
Updated On
New Update

By: Anadi Misra

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.

Advertisment

AjaxFaces overview
The solution works like this. At the core of AjaxFaces are three Faces components: the HTMLAjaxScript,

Direct Hit!
Applies to:Java developers
USP: Use AJAX and Faces in tandem for making Web pages
Links: www.ajaxfaces.com 
Google keywords:AJAX, JSF

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.

Advertisment

... 
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

Advertisment

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.

Advertisment

Source: PCQuest

tech-news