3 ways to easy Ajax in Seam + JSF + Facelets (Prelude)
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
2. Use generic Ajax enabler library for existing JSF components
3. Use specialized JavaScript for backend access (Seam remoting)