Dynamic Faces, Part 1: Using fireAjaxTransaction to Ajaxify a JavaServer Faces component

This blog is the first in a series on how to use the basic features of Dynamic Faces to add Ajax capabilities to JavaServer Faces components that you already know and love. The topic of this first blog is how to use the fireAjaxTransaction function provided by Dynamic Faces to perform Ajax updates at the component level.

This series assumes you know the basics of 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 download page for the JSF Extensions project and deploy the WAR file.

To create an example like this one, the first thing to do is to download 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" id="form">
  4. <h:panelGrid columns="2" cellpadding="4">
  6. <h:outputText value="Select a fruit:"/>
  7. <h:outputText value="Select a variety:"/>
  9. <h:selectOneRadio id="fruit" value="#{fruitInfoBean.fruit}"
  10. onclick="DynaFaces.fireAjaxTransaction(this, { execute: 'fruit'});"
  11. valueChangeListener="#{fruitInfoBean.changeFruit}">
  12. <f:selectItems value="#{fruitInfoBean.fruits}"/>
  13. </h:selectOneRadio>
  15. <h:selectOneMenu id="variety" value="#{fruitInfoBean.variety}"
  16. onchange="DynaFaces.fireAjaxTransaction(this, { execute: 'variety' });"
  17. valueChangeListener="#{fruitInfoBean.updateVariety}">
  18. <f:selectItems value="#{fruitInfoBean.varieties}"/>
  19. </h:selectOneMenu>
  21. </h:panelGrid>
  23. <h:outputText id="varietyInfo" value="#{fruitInfoBean.varietyInfo}" />
  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.

« Still More Fun with... | Main | Simple Communicating... »

Post a Comment:
Comments are closed for this entry.



Recent Posts
« June 2016