AJAX JSF Frameworks Review

Java Development News:

AJAX JSF Frameworks Review

By Thomas Latka and Juergen Kniephoff

01 Oct 2006 | TheServerSide.com

I. Introduction

This review gives a summary on current commercial JSF Frameworks that use Ajax to update the website. The frameworks Icefaces, Netadvantage and Quipukit will be compared by analyzing specific components to each other. Moreover, we will give you detailed information about positive and negative impressions and experiences we gained about them during the installation and using them in practice.

The hybris Product Information Management (PIM) Platform already handles nice web features like treetables, sortable lists and autocompletion. But it still does not use Ajax (Asynchronous JavaScript and XML) for exchanging data dynamically from client to the server, which would allow individual pages to be updated without reloading the whole content. Thus, we're going to try to recreate these objects with the help of those three frameworks.

First of all, we set a number of requirements our candidates have to meet.

1. Treetable:

  • This component is selectable via a selectbox
  • An image which shows the current status of the element
  • The tree with elements, combined with an image depending on its type
  • An additional dropdown menu on another column
  • A menu can be opened by a right-click dependable on the selected item

Our nice-to-have feature is the possibility to change the position of items via Drag & Drop.

2. List:

  • The items are sortable
  • Values of the entries can be modified on the fly
  • Positions of the items are changeable via Drag & Drop

3. Autocomplete:

  • A dropdown list appears when starting to type the word and shows a list of the most likely solutions
  • Data is fetched using Ajax

After that, we are going to compare the phases of installing, building our requirement components and using them on each of our three frameworks.

II. Icefaces

a) Installation

Our first candidate is ICEfaces from Icesoft. On their website, there are two editions available for download.

The ICEfaces Community Edition is free for development. Questions and help about all kind of problems can be found in their Online Support Center. It includes several forums, a knowledge base and a developer's guide.

The second version is the ICEfaces Enterprise Edition which includes a commercial license and personal support among some other features.

Downloading the ICEfaces package (ca 45 MB) requires a registration on their website. The community edition offers documents, required libraries, a tutorial, code samples and deployable WAR files that can be easily installed by copying the file into Tomcat's webapps directory. The demo application which can be seen on the official website is also available as a WAR file and shows the used code beside in addition to every component.

b) Realizing

1. Treetable

The tree in Icefaces only supports selection of one single item at a time. Multiple selections with or without a checkbox are not possible. Embedding the object in a table is not realised from the ground on. Thus, you cannot add columns and, therefore, can't insert an additional drop-down menu either. Also, there is no way of getting a nice menu via a right click.

Modifying and customizing the tree is not that difficult in Icefaces. To produce a general tree, you can use the following tag:

As a child node, you can insert components which you like to use. To add an image next to the text, for example, open a new node using <ice:treeNode> and just add your objects within a panel.

For example:

2. List

The component we are looking for is similar to the data table in Icefaces. It assists in sorting items column-wise but, unfortunately, there is no easy way of changing the value of a column (not via a double click nor in any other way).

Inserting a data table is as simple as working with the tree.

This time, we can add child nodes with tags named <ice:column>. Inside this tag, we can add any JSF components we want. For example:

3. Autocomplete

In Icefaces, it is possible to get a list of solutions with plain text or HTML in the dropdown menu while typing. The same backing bean can be used, only the source in the JSP file is a different one. For a simple autocompletion, you only have to put the correct tag in the JSP code plus a backing bean which sends the necessary data back to the client.

In this example, only text will be returned by the server. Moreover, we can decide whether to use text only or even a response in HTML. This can be realised with the next code snippet:

Starting typing in the textbox using the code above, you will see a panel offering all solutions that were found. But this time, you will get an image and a link of the approximated items. So everything is possible with autocomplete in Icefaces.

III. Netadvantage

a) Installation

The company Infragistics provides their product NetAdvantage in several different versions. The edition we use is "NetAdvantage for JSF." The framework also supports other programming languages like .NET, ASP.NET and even Windows Forms.

After a registration, we can download a 30-day trial version of "NetAdvantage for JSF" (19.2 MB). Unlike other frameworks, this one comes with an executable InstallAnywhere installer. The installation of Netadvantage looks like a general setup for applications. After finishing the installation, the files can be found in the directory selected during the setup.

Beside Java sources and documentation, there is also a WAR file to deploy. You can take a look at the JSF source code for every demonstrated component in another tab.

b) Realising

1. Treetable

A perfect treetable could not be found, but there are several trees in the demo that support AJAX requests and have an image next to an item like the dynamic and recursive data-binding tree. As to creating a simple tree, Netadvantage is the most comfortable of the three frameworks. However, modifying the component's JSP directly will not work - you will have to edit the Java source codes.

The recursive version is made especially to browse the filesystem in a tree:

The source is available in the files FileBean.java and FileNodeBean.java.

In FileBean.java, you can find the function getIcon() where you can at least specify the picture beside the entry:

Whenever a treenode is expanded, an AJAX request is sent to the server asking for data. Finally, the path will be passed to the function private List getFiles(String pathName) and waits for a List with the files and directories which can be found.

The dynamic tree has only one single bean in the file BackingBean.java but is generally better for usage. The recursive databinding example supports only one single ID for each item which will be shown in the tree.

Now with the dynamic tree you have some other attributes including a unique ID that will be generated automatically in the script and a separate value for the text displayed as a tree node. In the demo, all data is initialized at the beginning, so that no items will be requested any more by opening a treenode.

2. List

Our list in NetAdvantage is called WebGrid. Especially for sorting the data rows, we can use an integrated listener.There is no single component to edit an entry in realtime, but we can try the "In-Cell Editing." On the other hand, all fields are editable then.

3. Autocomplete

This object is not available in Infragistics NetAdvantage.

IV. QuipuKit

a) Installation

Quipukit is quite a young JSF framework which is currently released as a free public beta. Everyone can take part in the "Early Access Program" and download the latest libraries for development. Not even a registration is required on Quipukit's website before downloading. Three different packages are offered:

QuipuKit Components (2.9 MB) is a full-functional but time-limited version with a built-in license key expiring on September 1st, 2006. It offers all necessary third-party libraries and a Developer's Guide in HTML format.

The second package is Quipukit-Demo (9.6 MB) which comes with a WAR File for deploying. The application is the same demo as you can watch it online. Unfortunately, it does not contain source code in it and the demo does not show any JSF code of the sample components.

And, last but not least, Quipukit-Source (9.2 MB) that includes the required libraries and sources from the demo as examples.

b) Realising

1. Treetable

This component has been realized in quite an impressive way. For our needs, it is worth to think about it. You can implement further columns like one which shows us the status of the item. Its rows are selectable and even the entries can be modified on-the-fly with a double-click.

The only point that is missing is the possibility to implement a context-menu which can be opened by a right-click.


Click on thumbnail to see full-size image

2. List

What we call list is called a data table in Quipukit. It supports sorting by columns and both single and multiple items can be selected. Multiple selection can be done by clicking on the checkboxes or by holding down the STRG key and clicking at them. There are even more ways of selecting entries with the keyboard than with the mouse.

Unfortunately, the entries can not be modified by a double-click.

Furthermore, you cannot move items to another position via drag & drop.

3. Autocomplete

Although the objects in Quipukit are great, there are still two general components missing.

The Autocomplete feature is not yet built in and a menubar would also be great.

V. Summary

The following table shows whether our requirements are met like we wished to have by each framework in our evaluation. Although some features are likely to be integrated with upcoming versions, this is an overview whether we could use the functionality for our own purposals.

In the end, none of these three frameworks could fully satisfy our wishes with the components treetable, list and autocomplete.

Quipukit and Icefaces are nearly complete functional for us for the tabletree. It can be customized easily and quite fast with all features we need except for one.

The list is average and every framework can be used for it dependable of your own favorite.

Autocomplete is only supported by Icefaces but it is perfect. It is easy to code and it fetches its data using Ajax to keep the internet traffic low.

These three JSF frameworks are just the tip of the iceberg. There are many more Ajax JSF products, some of them also free of course. We wrote an overview about the most popular representatives in this genre and what features they bring along.

The matrix can be found at http://www.jsfmatrix.net/. Please feel free to visit and comment this site.

VI. Links

Icefaces
http://www.icesoft.com

Netadvantage
http://www.infragistics.com

Quipukit
http://www.teamdev.com/quipukit

Apache Tomcat
http://tomcat.apache.org

JSF Matrix
http://www.jsfmatrix.net

About the Authors:

Dr. Thomas Latka is Training Manager for hybris GmbH. Juergen Kniephoff is Support Engineer for hybris GmbH. hybris supplies software solutions for managing product information and catalogue data as well as for associated e-commerce, e-procurement and database publishing applications.

hybris Product Information Management
http://www.hybris.com