JSF-Extensions Dynamic Updating Description

Using JSF-Extensions Dynamic Updating in an Existing JavaServer™ Faces Application

This demonstration shows how JSF-Extensions Dynamic Updating can be used to AJAXify a part of an existing JavaServer™ Faces (JSF) application with minimal modification to that application, and do so in a maintainable and sensible manner.

Background

JSF-Extensions Dynamic Updating contains ideas from the the Avatar concept for leveraging AJAX techniques from a JSF application. The Avatar idea was originated by JSF Expert Group Member Jacob Hookom in his blog in September of 2005 and refined by JSF co-spec Lead Ed Burns in a comment on that blog. The Avatar idea is essentially modifying the JSF request processing lifecycle in such a way that the lifecycle is run only on a set of subtrees of the entire JSF View, instead of the whole view, as shown by Zone 1 and Zone 2 in the diagram of the carDetail page below.

Cardemo Application Structure

The page flow of the existing cardemo application is shown in the below whiteboard image.

The user enters the application through the chooseLocale page, then hits the storeFront, where they are presented with a list of cars to choose from. Chosing one takes them to the carDetail page. Here they can confgigure their options until they choose to buy the car. Then they get the confirmation page where they can either purchase the car, or return to configure more options. Finally, they are presented with a customer info page where they enter their shipping information and then they submit their order.

As you can see, this is the basic flow image from the standard carstore with one extra arc added to show that the carDetail page can lead back to itself as the user configures options. In the existing cardemo app, the user must press the "recalculate" button to cause their page to refresh and the pricing options to be updated.

Using JSF-Extensions Dynamic Updating

With JSF-Extensions Dynamic Updating, two Ajax Zones are defined, as shown below.

JSF-Extensions Dynamic Updating builds on the Avatar idea by providing a JSF component and custom tag that lets you mark Ajax Zones in an existiting JSF page and define how they will communicate with the JSF lifecycle on the server. Zone 1 is an "output only" zone. It does not cause any AJAX requests to be initiated, but it does receive updated output from the AJAX request. Zone 2 is an "input" zone, indicating that it contains components that implement the EditableValueHolder or ActionSource interfaces of the JSF component model. The above declaration of Zone 2 is represented like this in JSP:


<jsfExt:ajaxZone id="zone2" interactionType="input" 
                inspectElement="inspectElement"
                eventType="onclick" collectPostData="extractParams"
                action="#{carstore.currentModel.updatePricing}">

interactionType element states that this zone contains input components.

inspectElement names a developer supplied JavaScript function that will be called by the JSF-Extensions Dynamic Updating system to inspect a DOM element within the zone and determine if that element should be ajaxified.

eventType lists the JavaScript event that should cause this AjaxZone to "fire", causing an AJAX request to be sent to the server.

collectPostData names a developer supplied JavaScript function that is called when the JavaScript event given in the eventType parameter is fired. The function is passed a number of parameters and is responsible for extracting the current state of the zone so that it may be sent to the server in the AJAX request.

action is a standard JSF action MethodExpression that will be invoked on the server side when the AJAX Zone fires, in this case in response to any onclick on any of the elements in the zone for which the script specified by the inspectElement attribute returned true.