Advertisment

Web Apps Made Easier with AjaxFaces

author-image
PCQ Bureau
New Update

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

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.

Advertisment

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.

/>

Advertisment

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





Advertisment

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:

Advertisment





/>



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