Michael Yuan

First approach: reuse AJAX-enabled JSF UI components

[plug]
This is part of my blog series on Ajax with Seam+JSF+Facelets. Sample code and detailed explanations are also covered in my book on Seam.
[/plug]

Advantage: The benefits of this approach are simplicity and power: you do not need to write a single line of JavaScript or AJAX servlet code. Yet, the component itself knows how to render just about any JavaScript and AJAX visual effects -- the JavaScript and backend communication mechanism is encapsulated in the component itself. AJAX services are implemented in Seam backend components bound to the UI component. Due to the high level of encapsulation, you can buy or download such components from market place and just drop them into your application to have Ajax within minutes.

Disadvantage: There is a steep learning curve for implementing your own JSF components. So, you are probably limited to what component vendors sell on the market place. Also, the component license fee can be pretty expensive.

To show how this approach works, let's look at some sample code. The following is an example JSF UI component for an auto-completion text box. With each keystroke, the web page sends the partial input text to the backing bean method #{manager.suggestName} via AJAX, which returns a list of autocompletion suggestions to be rendered on the page. All the JavaScript and communication code are encapsulated in the JSF component.

The backing bean method for AJAX service is as follows.

It is important to point out that when using those component libraries in Seam, you will need to re-package the *.tld files in a seperate JAR in your WAR file's WEB-INF/lib directory, and then place the main component library JAR file in the EAR application's class path (get the book for more on this! :)).

There are several component vendors selling a variety of Ajax-enabled JSF components. Exadel and IceSoft are two well-known commercial vendors. The Sun Blueprints provides some good open source component examples. Interested readers should check out this TSS article and the JSf Matrix site for a comparison of AJAX JSF components libraries.

Still implementing Ajax using brute force JavaScript and XML? That is sooooo 2005! To make Ajax really useful in enterprise applications, we have to integrate it with state-of-the-art server-side web frameworks. In this 4-part blog series, I will attempt to give you a short tutorial on 3 ways to add Ajax functionalities into your Seam + JSF + Facelets applications. They range from very easy (zero JavaScript or XML code) to very powerful (works with any JavaScript Ajax library). So, stay tuned. All the approaches with full sample applications are also covered in my book on Seam. In this first part, I will explain why it is a challenge to integrate Ajax into server side Java application.

So, what is the issue to use AJAX with JSF and Seam web applications? After all, JSF and Seam, especially with Facelets, allow you to use arbitrary HTML tags and JavaScripts on the web page. You can certainly use any JavaScript library to build whatever web UI you want. Well, the real challenge is how to integrate those JavaScript-rendered UI with backend business components. For instance, you might be able to use off-the-shelf JavaScript library to render a rich text editor on the web page, but how do you bind the user input text in the editor box to a backend component (e.g., a string property on a Seam EJB3 entity bean)? The JavaScript rendered dynamic UI is not a JSF component and it does not interpret the JSF EL (i.e, the #{obj.property} notation) for backing bean references.

A naive approach is to write a special HTTP servlet to handle AJAX requests from the JavaScripts. The servlet can then interact with objects in the FacesContext or HttpSession to save the user input or generate AJAX response to the JavaScript. However, the problem with this approach is that it includes a lot of manual coding on both the client-side JavaScript and the server-side Java Servlet. The AJAX servlet developer must be very careful with the states of the server-side objects. It is obviously not the ideal solution. Is there an easier, simpler way to support AJAX in JSF and Seam applications?

Fortunately, as a cutting edge web framework, JSF and Seam provide several elegant ways to integrate AJAX support in your web applications. In the next 3 blog posts, I will cover the following three approaches.

1. Use Ajax-enabled JSF components

3. Use specialized JavaScript for backend access (Seam remoting)