Pump some AJAX into your JSF application

AJAX and JavaServer Faces: A perfect match for your client- and server-side elements

By Peter Wang, JavaWorld.com, 09/11/06

In my previous article, "Put on a Happy MyFace" (July 2006), I showed how to use the JavaServer Faces (JSF) MyFaces component-based framework to create an employee header/detail use-case. Other functionality needs to be added to this application, such as the ability to add or delete an employee. In this article, I not only introduce these new functions, but also demonstrate how to use AJAX (Asynchronous JavaScript and XML) to improve the JSF Web application user experience. AJAX is an old technology with a new life. One of the biggest advantages of AJAX is that it improves the user's experience. In traditional Web applications, the entire Web content is rendered for every HTTP request every time. With AJAX, only a portion of content is rendered. Put simply, users can have a similar or the same experience working with a Web application as they have when working with a Windows-based application. JSF and AJAX are a perfect match when it comes to building a so-called RIA (rich Internet application). You want to know how? Just follow me.

Refactor the employee header/detail use-case

Before I begin adding the new functions, I want to show you how to upgrade MyFaces from version 1.1.1 to the latest version, 1.1.3, which features many improvements and bugs fixes. One benefit for us using 1.1.3 in this use-case is that the version 1.1.3 tab panel has improved the tab's look and feel. It also provides a stable foundation for me to use AJAX, which I will detail in a subsequent section. To upgrade MyFaces 1.1.1 to 1.1.3, please follow the steps below:

Remove all MyFaces 1.1.1 jar files: myfaces-impl.jar, myfaces-ap.jar, tomahawk.jar, and sandbox.jar.
Go to the MyFaces Website, select the download page, and download myfaces-core-1.1.3-bin.zip and tomahawk-1.1.3-bin.zip to your local PC.
Extract all the jar files in the lib directory to your WEB-INF/lib directory. Of course, remove all the dependency common-.jar files and replace those with the ones in the MyFaces 1.1.3 version.

Modify the web.xml to update the MyFaces extension filter class reference to the following:

 <filter-name>extensionsFilter</filter-name>
  <filter-class>org.apache.myfaces.webapp.filter.ExtensionsFilter</filter-class>

In addition to the MyFaces version upgrade, I also changed the employee use-case package name to better present the data model classes and JSF managed beans.

Add/delete/validate employee functions

Now that I have refactored the code and upgraded MyFaces, I am ready to add the two new functions. As shown in Figures 1 and 2, I want to create an Add button at the bottom of the Employee Information screen and add a delete function, represented by a trash can icon, to the list of employees.

Figure 1. Add employee to list. Click on thumbnail to view full-sized image.

Figure 2. Delete employee from list. Click on thumbnail to view full-sized image.

When users click on the Add button, the information entered in the employee detail section will be added to the list (see Figure 3).

To add this functionality, in the employee.jsp, I use the <t:commandButton> MyFaces component and associate the action with employeeTable.addEmployee; see Listing 1:

1 | 2 | 3 | 4 | Next >

Discuss

Start a new discussion or jump into one of the threads below:

Subject	Replies	Last post
Ajax with JSF: Look mum no JavaScript By	0	10/06/06 04:23 AM by Anonymous
Pump some AJAX into your JSF application By JavaWorld	0	10/05/06 06:24 AM by JavaWorld