Introduction
With the advent of internet, there has been constant paradigm change from time and again. There are many scripting web languages which came and showed their impact now and then. But the feature I am going to talk about will give a close look to internet as a close friend.In this article, I am trying to showcase the use of AJAX i.e. Asynchronous JavaScript and XML using JSF i.e. JavaServer Faces based components.The pre–requisite for this is some knowledge on JSF and AJAX.There are many JSF implementations for AJAX which help us to provide AJAX features using JSF. Why at all we use JSF and not Struts?. That’s a very typical question people now days ask. Unlike Struts, JSF allows you to create custom components extending standard components. Struts doesn’t provide user to explore the User Interface (UI), but JSF does. There are many typical differences between JSF and Struts.
also read:
- JSF Interview Questions
- Request Processing Lifecycle phases in JSF
- Accessing Web Services from JSF applications
- Navigation model in JSF
But let’s just focus on JSF and AJAX. As we all know AJAX provide us quick response. How? Using asynchronous response / request mechanism. Your request goes to server, which internally does some calculations and provides the response back while you can do other things on the same page. For example, GMAIL. We normally fascinate those things that are friendly to user and as developers try to implement the same in our business applications. So here we go…
Different AJAX implementations for JSF
There are various AJAX–based JSF implementations available today. But you may ask why we use those. Well, it provides ease of development and reusability. Of course, we can make our own components and implement them using AJAX functionality but the development time will be steep.Various AJAX–based JSF implementations are Ajax4JSF, TomaHawk, RichFaces, Trinidad, IceFaces,and many others. All of them provide one or more components to make developers time less.For example, there are some nice Calendar features, Drag ‘n’ Drop, Auto Complete, Dynamic Loading, and what not.
But each may be different from the other. One may find that one implementation limits in number of components,
other is limited in documentation, support, examples, and learning curve.The best choice which I could make is with the use of JSF Matrix. If one looks, it will give clear picture what components are provided, how much documentation, active forum support, license issues and the like.Evaluating each one of them, I short listed few like Ajax4JSF, RichFaces and IceFaces. My discussion will focus on these three. The reason I have short–listed them, is because of the number of components, active forum, documentation, open license support and active forum to least. I worked with Netbeans 5.5, but they could easily work with other Integrated Development Environments (IDEs) as well.
Ajax – enabled JSF using Ajax4JSF
Introduction to Ajax4JSF
Ajax4JSF is an Open Source framework which adds AJAX capabilities to JSF using component library without having to write JavaScript code in your web page. Its now under Red Hat and Exadel strategic partnership hence its open source and can be used in your application(s) without sharing your own code.
To make JSF application(s) AJAX enabled
Ajax4JSF provide various features including lifecycle of JSF such as validation,
conversion facilities and management of static and dynamic resources. The look and feel using Ajax4JSF is highly customizable and easily added to JSF applications.Ajax4JSF follows page–oriented approach rather traditional component–oriented approach. By this it means that you can define events on a page which invokes a Managed Bean, and that will render data on the same page, without page refresh. For a particular component one can invoke action or action listener. By this it means that when action is called a particular event occurs that initiate some logic, but action listener may invoke some set of components to be rendered on a page.
conversion facilities and management of static and dynamic resources. The look and feel using Ajax4JSF is highly customizable and easily added to JSF applications.Ajax4JSF follows page–oriented approach rather traditional component–oriented approach. By this it means that you can define events on a page which invokes a Managed Bean, and that will render data on the same page, without page refresh. For a particular component one can invoke action or action listener. By this it means that when action is called a particular event occurs that initiate some logic, but action listener may invoke some set of components to be rendered on a page.
Ajax4JSF Example
It’s comparatively easy to use Ajax4JSF in one’s application. Let’s take Netbeans 5.5 as our IDE.
Download the latest Ajax4JSF binary/source to embed in your application from Ajax4JSF Downloads. Once that is done, make a Netbeans Web Application project which is JSF enabled. Then update the Netbeans with Ajax4JSF files. In that one has to copy the ajax4jsf.jar and oscache–2.3 .jar files into the WEB–INF/lib folder of existing JSF application.Then in any web page include Ajax4JSF using tag library:
Download the latest Ajax4JSF binary/source to embed in your application from Ajax4JSF Downloads. Once that is done, make a Netbeans Web Application project which is JSF enabled. Then update the Netbeans with Ajax4JSF files. In that one has to copy the ajax4jsf.jar and oscache–2.3 .jar files into the WEB–INF/lib folder of existing JSF application.Then in any web page include Ajax4JSF using tag library:
With this done, our project will be Ajax4JSF enabled. One more thing, one is free to use Ajax4JSF in certain required pages. So one can even customize application to use various other JSF implementations as well.A small snippet for Ajax4JSF:
</div>
<div align="justify">
<pre><a4j:form>
<table width="600" border="0">
<tr>
<td width="120" valign="top" rowspan="3" >
<h:selectOneListbox id="list" value="#{backingBean.selectedId}">
<a4j:support event="onclick" action="#{backingBean.changeCurrent}" reRender="info"/>
<f:selectItems value="#{backingBean.selectList}"/>
</h:selectOneListbox>
</td>
<td valign="middle" >
<h:panelGrid id="info" styleClass="panel" rowClasses="celltop, cellmiddle, cellbottom" columns="1">
<h:panelGroup>
<h:outputText value="#{userList.currentUser.prefix}" />
<h:outputText value=" " />
<h:outputText value="#{userList.currentUser.firstName}" />
<h:outputText value=" " />
<h:outputText value="#{userList.currentUser.lastName}" /><br />
<h:outputText value="#{userList.currentUser.address}" />
</h:panelGroup>
<h:panelGroup>
<h:outputText value="#{userList.currentUser.jobTitle}" /><br />
</h:panelGroup>
<h:panelGroup>
<h:outputText value="#{userList.currentUser.phone}" /><br />
<h:outputText value="#{userList.currentUser.mobile}" />
</h:panelGroup>
</h:panelGrid>
</td>
</tr>
</table>
</a4j:form></pre>
</div>
<div align="justify">
In the above code, I am populating static data in Managed Bean in to the list box like Name of the person. Based on the selection, a person’s details will pop–up on the same page in the panel defined above.Though Ajax4JSF provides few built–in components but they are few as compared to other core competitors in the market.
Another thing which I find about Ajax4JSF is good that it’s easy to use other AJAX based implementations like Trinidad and JSF implementation like MyFaces. So its kinda blend of different implementations under one hood.
Another thing which I find about Ajax4JSF is good that it’s easy to use other AJAX based implementations like Trinidad and JSF implementation like MyFaces. So its kinda blend of different implementations under one hood.
RichFaces
Introduction to RichFaces
RichFaces is a component library for JSF built on top of Ajax4JSF. Well RichFaces typically is lot more different from Ajax4JSF. RichFaces is actually a product of Exadel but now its with JBoss so it’s open source.
To make JSF application(s) AJAX enabled
As it is based on top of Ajax4JSF it provides all the components of Ajax4JSF along with many AJAX and UI Components. One doesn’t have to write a single JavaScript code and can extend the built–in components at the same time. It also provide the skin functionality which provide a web development an altogether new look.RichFaces works on similar lines as do Ajax4JSF with more built–in rendering toolset without modifying component’s functionality and way they are used. Components like datatable allow the developer to specify the width of the table, the number of rows it wants and pagination facility too.I remember for pagination one has to write a complex code, which with the use of RichFaces is practically solved.
One can look at the example implementation at Rich Faces Demo and can use the same in one’s code to enhance the AJAX capability.
One can look at the example implementation at Rich Faces Demo and can use the same in one’s code to enhance the AJAX capability.
RichFaces Example
To use RichFaces is simple. One has to just download the RichFaces package and extract the richfaces-<version>.jar files into the project in which you want to use. Then by including the RichFaces taglib.
</div> <div align="justify"> <pre><%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich"%></pre> </div> <div align="justify">
one can use RichFaces components into the required project. For example, if one want to use the table pagination feature using AJAX request, use the tag. The following code describes the same.
</div>
<div align="justify">
<pre><h:form>
<rich:datascroller for="name" maxPages="3"/>
<rich:spacer height="30"/>
<rich:dataTable width="483" id="name" rows="4" columnClasses="col" value="" var="nameCat">
<f:facet name="header">
<rich:columnGroup>
<h:column>
<h:outputText styleClass="headerText" value="Name"/>
</h:column>
<h:column>
<h:outputText styleClass="headerText" value="Age"/>
</h:column>
</rich:columnGroup>
</f:facet>
<h:column>
<h:outputText value="#{dndDaemon.stName}"/>
</h:column>
<h:column>
<h:outputText value="#{dndDaemon.age}"/>
</h:column>
</rich:dataTable>
</h:form></pre>
</div>
<div align="justify">
ICEFaces
Introduction to IceFaces?
IceFaces is another technology which uses AJAX features in JSF to provide more useful customize features. IceFaces comparatively provides niche technology of AJAX to be used in complex web application particularly J2EE applications, per se. It is a product from ICEsoft. But its open source and one can use it without sharing any of your application code.
To make JSF application(s) AJAX enabled
IceFaces provides loads of in–built features which you just add in terms of its tag library components and make application development simpler. As IceFaces provides AJAX Push feature, which means it updates the page without having to manually page refresh. Now, you will ask, this was happening earlier also with above technologies, so difference lies in the way IceFaces provide collaborative and dynamic enterprise application development.IceFaces provides the AJAX features using rendering the components. This happens using the IceFaces tags which render the said the component as coded in the application. I would like to emphasize on the ease of development and the support one gets from the community. Though its a commercial product yet its open source with satisfactory documentation and user – developer community.
IceFaces Example
To use IceFaces, one has to download the its library. The library can be downloaded from IceFaces Downloads After downloading either one can integrate the libraries into the application or make the IDE IceFaces compatible. One all is set just include the tag library into the application as:
<%@ taglib uri="http://www.icesoft.com/icefaces/component" prefix="ice" %>
Then one can explore the IceFaces various components into one’s application. For example, if any one want to use the built–in pagination support without writing complex pagination code, then do something like this:
<ice:dataTable
id="inventoryList"
rows="4"
columnClasses="stockColumn, modelColumn, desriptionColumn, odometerColumn, priceColumn"
rowClasses="oddRow, evenRow"
styleClass="tableStyle"
sortColumn="#{inventoryList.sortColumnName}"
sortAscending="#{inventoryList.ascending}"
value="#{inventoryList.carInventory}"
var="item">
<!-- Stock number -->
<ice:column>
<f:facet name="header">
<ice:commandSortHeader
columnName="#{inventoryList.stockColumnName}"
arrow="true" >
<ice:outputText value="#{inventoryList.stockColumnName}"/>
</ice:commandSortHeader>
</f:facet>
<ice:outputText value="#{item.stock}"/>
</ice:column>
<!-- Model number -->
<ice:column>
<f:facet name="header">
<ice:commandSortHeader
columnName="#{inventoryList.modelColumnName}"
arrow="true" >
<ice:outputText value="#{inventoryList.modelColumnName}"/>
</ice:commandSortHeader>
</f:facet>
<ice:outputText value="#{item.model}"/>
</ice:column>
<!-- Description -->
<ice:column>
<f:facet name="header">
<ice:commandSortHeader
columnName="#{inventoryList.descriptionColumnName}"
arrow="true" >
<ice:outputText value="#{inventoryList.descriptionColumnName}"/>
</ice:commandSortHeader>
</f:facet>
<ice:outputText value="#{item.description}"/>
</ice:column>
<!-- Odometer reading -->
<ice:column>
<f:facet name="header">
<ice:commandSortHeader
columnName="#{inventoryList.odometerColumnName}"
arrow="true" >
<ice:outputText value="#{inventoryList.odometerColumnName}"/>
</ice:commandSortHeader>
</f:facet>
<ice:outputText value="#{item.odometer}"/>
</ice:column>
<!-- Price number -->
<ice:column>
<f:facet name="header">
<ice:commandSortHeader
columnName="#{inventoryList.priceColumnName}"
arrow="true" >
<ice:outputText value="#{inventoryList.priceColumnName}"/>
</ice:commandSortHeader>
</f:facet>
<ice:outputText value="#{item.price}"/>
</ice:column>
</ice:dataTable>
<ice:panelGrid columns="2">
<!-- Paginator with page controls -->
<ice:dataPaginator id="dataScroll_3"
for="inventoryList"
paginator="true"
fastStep="3"
paginatorMaxPages="4">
<f:facet name="first">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-first.gif"
style="border:none;"
title="First Page"/>
</f:facet>
<f:facet name="last">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-last.gif"
style="border:none;"
title="Last Page"/>
</f:facet>
<f:facet name="previous">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-previous.gif"
style="border:none;"
title="Previous Page"/>
</f:facet>
<f:facet name="next">
<ice:graphicImage
url="./xmlhttp/css/xp/css-images/arrow-next.gif"
style="border:none;"
title="Next Page"/>
</f:facet>
<f:facet name="fastforward">
<ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-ff.gif"
style="border:none;"
title="Fast Forward"/>
</f:facet>
<f:facet name="fastrewind">
<ice:graphicImage url="./xmlhttp/css/xp/css-images/arrow-fr.gif"
style="border:none;"
title="Fast Backwards"/>
</f:facet>
</ice:dataPaginator>
<!-- Display counts about the table and the currently displayed page -->
<ice:dataPaginator id="dataScroll_2" for="inventoryList"
rowsCountVar="rowsCount"
displayedRowsCountVar="displayedRowsCount"
firstRowIndexVar="firstRowIndex"
lastRowIndexVar="lastRowIndex"
pageCountVar="pageCount"
pageIndexVar="pageIndex">
<ice:outputFormat
value="{0} cars found, displaying {1} car(s), from {2} to {3}. Page {4} / {5}."
styleClass="standard">
<f:param value="#{rowsCount}"/>
<f:param value="#{displayedRowsCount}"/>
<f:param value="#{firstRowIndex}"/>
<f:param value="#{lastRowIndex}"/>
<f:param value="#{pageIndex}"/>
<f:param value="#{pageCount}"/>
</ice:outputFormat>
</ice:dataPaginator>
</ice:panelGrid>
</center>
Well with the sample code provided and examples done its self-evident that IceFaces provides a crisp look to the business application.
Summary
By going through the AJAX–implementations for JSF, we can see that its lot easier to implement AJAX functionality in upcoming JSF business products. Depending on the requirements and closely working with them, one can select the AJAX–implementations.
July 16, 2007
Java Server Faces (JSF), Web Frameworks