Jennifer's Weblog

<f:view>
   ...
   <h:form prependId="false" id="form">
      <h:panelGrid columns="2" cellpadding="4">
 
          <h:outputText value="Select a fruit:"/>
          <h:outputText value="Select a variety:"/>
 
          <h:selectOneRadio id="fruit" value="#{fruitInfoBean.fruit}"           
              onclick="DynaFaces.fireAjaxTransaction(this, { execute: 'fruit'});"
              valueChangeListener="#{fruitInfoBean.changeFruit}">
                 <f:selectItems value="#{fruitInfoBean.fruits}"/>
          </h:selectOneRadio>
 
          <h:selectOneMenu id="variety" value="#{fruitInfoBean.variety}"
              onchange="DynaFaces.fireAjaxTransaction(this, { execute: 'variety' });"
              valueChangeListener="#{fruitInfoBean.updateVariety}">
                 <f:selectItems value="#{fruitInfoBean.varieties}"/>
          </h:selectOneMenu>
 
       </h:panelGrid>
 
       <h:outputText id="varietyInfo" value="#{fruitInfoBean.varietyInfo}" />
 
   </h:form>
</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 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.

Posted at 12:46AM Jan 24, 2007 by jenniferb in Sun  |  Comments[10]