Using fireAjaxTransaction to Ajaxify a JavaServer Faces component

JavaServer Faces Technology.

Before going on, you might want to skim through this article to get an overview of what Dynamic Faces is all about: New Technologies for Ajax and Web Application Development: Project Dynamic Faces.

Throughout this blog series, I'll use a simple example that uses standard JavaServer Faces components along with Dynamic Faces to allow users to do the following:

• Select a fruit from a radio button group and instantly see both the varieties for that fruit appear in a menu and a description of the currently selected variety display without experiencing a full-page refresh.
• Select one of the varieties from the menu to see its description, also without experiencing a page refresh.

Here's a screenshot:

If you were using plain JavaServer Faces technology without Dynamic Faces, you would need to add a button to update the varieties menu and the variety description, and you would have to go through a full-page refresh to do the update.

With Dynamic Faces, you can get rid of the button and rely on Dynamic Faces to do the work of updating these components using Ajax.

To see this example in action, download

simpleDynamicFaces.war

from the samples folder of the JSF Extensions project, which includes Dynamic Faces, and perform the simple set-up steps described in Setting up an Application to Use Dynamic Faces in the article mentioned previously. After that, you're ready to start coding.

Behind the scenes, Dynamic Faces performs all the Ajax functionality through the use of a set of JavaScript libraries. One of the JavaScript functions that Dynamic Faces provides is the

fireAjaxTransaction

function. As its name suggests, it fires an Ajax request in response to a particular event, such as clicking on a component. As such, this function gives you component-level control over what is updated in your page. To use the

fireAjaxTransaction

function, you do the following:

• Add a JavaScript event attribute, such as onclick, to a component tag.
• Set the value of the attribute to the

  DynaFaces.fireAjaxTransaction

  function.

• Pass a set of parameters to the function.

The following piece of the JSP page shows how I used

fireAjaxTransaction

to update components via Ajax, as shown on lines 10 and 16. Notice on lines 11 and 17 that I have used the standard

valueChangeListener

tag attributes to register value-change events on the

fruit

and

variety

components. I'll get to the importance of this later on.

1. <f:view>

2. ...

3. <h:form prependId="false" >

4. <h:panelGrid columns="2" cellpadding="4">

5.  

6. <h:outputText value="Select a fruit:"/>

7. <h:outputText value="Select a variety:"/>

8.  

9. <h:selectOneRadio value="#{fruitInfoBean.fruit}"

10. οnclick="DynaFaces.fireAjaxTransaction(this, { execute: 'fruit'});"

11. valueChangeListener="#{fruitInfoBean.changeFruit}">

12. <f:selectItems value="#{fruitInfoBean.fruits}"/>

13. </h:selectOneRadio>

14.  

15. <h:selectOneMenu value="#{fruitInfoBean.variety}"

16. οnchange="DynaFaces.fireAjaxTransaction(this, { execute: 'variety' });"

17. valueChangeListener="#{fruitInfoBean.updateVariety}">

18. <f:selectItems value="#{fruitInfoBean.varieties}"/>

19. </h:selectOneMenu>

20.  

21. </h:panelGrid>

22.  

23. <h:outputText value="#{fruitInfoBean.varietyInfo}" />

24.  

25. </h:form>

26. </f:view>

The first thing I did in the page is I set the

form

tag's

prependId

attribute to false so that I can refer to component IDs without prepending the form's ID. This attribute was added in JavaServer Faces technology 1.2. In Ajax applications, you often have to refer to client IDs. Without the

prependId

attribute, you'd have to add the form ID to every client ID reference, which adds extra bytes to network transactions and is a pain to type. Remember, with Ajax, you are doing more transactions, so you want each one to be as small as possible.

After setting the

prependId

attribute, I added an

onclick

attribute to the

fruit

selectOneRadio

tag and set it to the following call to

fireAjaxTransaction

:

"DynaFaces.fireAjaxTransaction(this, { execute: 'fruit'});"The

this

parameter is a JavaScript reference that is the DOM element for the markup generated by the

fruit

selectOneRadio

tag.

The other parameter is a kind of JavaScript Object known as an associative array, in which the keys are strings and the values are whatever you want them to be. Each key/value pair represents an option that you pass to the

fireAjaxTransaction

function.

These options tell Dynamic Faces which parts of the component tree it needs to process and re-render using Ajax. The Dynamic Faces JavaScript Library Reference includes the complete list of acceptable options.

In this case I have only one option,

execute: 'fruit'

, which says that the

fruit

component (and its children, if it has any) must go through the execute portion of the JavaServer Faces life cycle. This part of the life cycle includes the phases responsible for converting and validating data, updating model values, and handling action events. I did not include the render option because I want all components to be re-rendered as a result of this action, which is the default behavior.

As shown on line 10 of the preceding JSP page, the

fireAjaxTransaction

function is called when the user clicks on a radio button. When this happens, the

fruit

component goes through the execute phase of the life cycle, and the value-change event that is registered on it is fired.

The

valueChangeListener

attribute of the

fruit

component tag references the

changeFruit

method, which handles the value-change event (see FruitInfoBean.java). The

changeFruit

method performs some model updates when the

fruit

component is activated. Therefore, the

fruit

component must go through the execute phase of the life cycle so that these model updates will occur.

The

changeFruit

method updates the model value of the

variety

menu component with the list of varieties corresponding to the fruit the user chose from the

fruit

component. For example, if the user selects Pear from the

fruit

component, the

variety

component will display the values Aurora, Bartlet, Bosc, Comice, and Delicious.

The

changeFruit

method also sets the currently selected fruit value to the first variety in the list. Finally, it updates the

varietyInfo

output component so that the description of a variety corresponds to the currently selected fruit variety. For example, if the user chooses Pear, Aurora is the selected value of the

variety

component, and the

varietyInfo

component displays this message:

Aurora: Sweet, juicy, and aromatic. Quality dessert pear ...

When Dynamic Faces re-renders these components using Ajax, the components will display with the new values.

I also used the

fireAjaxTransaction

function with the

variety

component:

"DynaFaces.fireAjaxTransaction(this, { execute: 'variety'});"

This function call works the same way as it does for the

fruit

component: It causes the

variety

component to go through the execute phases of the life cycle and re-renders all components via Ajax.

As with the

fruit

component, the

variety

component has a value-change event registered on it. Like the

changeFruit

method, the

updateVarety

method, which handles this event also updates model values. The

updateVariety

method updates the

varietyInfo

component's model value so that the displayed description of a fruit variety corresponds to the variety the user selected from the

variety

component menu.

That's all there is to it. For this example, you do not need to write any JavaScript code to use Ajax, nor do you need to do anything special in your Java code. And the best part is that you can use the JavaServer Faces components you already know and use without modifying them.