Implementing AJAX Components in the JWL Framework

Update Content <hx:ajaxRefreshSubmit>

<hx:ajaxRefreshSubmit> tag allows for the content of the same JSF page to be asynchronously replaced within the parent tag. The content is retrieved using HTTP POST request. This tag is used when you want to submit the whole form to the server.

The following steps describe how you can implement this tag:

1. Create a new JSF page ajaxRefreshSubmitExample.jsp by clicking File → New → Other → Web → Web Page.


Click here for a larger image.

Figure 8: Create a New JSF Page

2. Open ajaxRefreshSubmitExample.jsp in Source mode.
3. In the "Palette" pane, click "Enhanced Faces Components" (make sure you are in a Web perspective).
• Post a comment
• Email Article
• Print Article
• Share Articles
  • Digg
  • del.icio.us
  • Slashdot
  • DZone
  • Reddit
  • StumbleUpon
  • Facebook
  • FriendFeed
  • Furl
  • Newsvine
  • Google
  • LinkedIn
  • MySpace
  • Technorati
  • Twitter
  • YahooBuzz



Figure 9: The "Palette" Pane

4. Drag and drop three input components from the palette to the page. This will produce the code shown in Listing 4:

Listing 4: Three Input Text Fields Code

<hx:scriptCollector id="scriptCollector1">
<h:form id="form1" styleClass="form">
   <h:inputText id="text1"
                styleClass="inputText">
   </h:inputText>
   <h:inputText id="text2"
                styleClass="inputText">
   </h:inputText>
   <h:inputText id="text3"
                styleClass="inputText">
   </h:inputText>
</h:form>
</hx:scriptCollector>

5. Drag and drop Panel Group component from the palette to the page.
6. Drag and drop Text Output component from the palette to the panel that you added in the Step 5.
7. Select the Panel Group and click Properties → AJAX. Click "Allow Ajax Updates" and set Ajax request to "Submit".



Click here for a larger image.

Figure 10: AJAX Properties

8. Drag and drop a Button Command and add a new behavior that will have a "group1" target action and be invoked upon a mouse click.

Listing 5: Submit Button "Behavior" Code

<hx:behavior event="onclick"
             behaviorAction="get"
             targetAction="group1" />

Page 3 of 6