Implementing AJAX Components in the JWL Framework

April 17, 2008
By Aleksey Shevchenko

Send Email »
More Articles »

Select the Panel Group and click Properties → AJAX. Click "Allow Ajax Updates" and set the Ajax request to "Refresh".

Click here for a larger image.

Figure 4: AJAX Properties

Click the <hx:ajaxRefreshRequest> tag that was added in the Step 7 and add a parameter to be sent from the browser. The parameter is the input field that you added in Step 4: "text1".

Click here for a larger image.

Figure 5: AjaxRefreshRequest Properties

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

Listing 2: Submit Button "Behavior" Source Code

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

Run this JPS page on the server (make sure you are running under Websphere 6.1 or higher).

Click here for a larger image.

Figure 6: Running the Example on Websphere 6.1 Server

When the page loads, enter a value into the input field and click the button. You will observe that the value that you had entered has appeared next to the button.

Figure 7: AjaxRefreshRequest Example Output

Listing 3 is the full source code of what you have just gone through. You can find full source code as an attachment at the end of this article.

Listing 3: AjaxRefreshRequest Example—Full Source Code

<f:view>
   <body>
   <hx:scriptCollector id="scriptCollector1">
      <h:form id="form1" styleClass="form">
         <h:inputText id="text1"
                      styleClass="inputText">
         </h:inputText>
         <hx:commandExButton type="submit"
                             value="Submit"
                             id="button1"
                             styleClass="commandExButton">
            <hx:behavior event="onclick"
                         behaviorAction="get"
                         targetAction="group1">
            </hx:behavior>
         </hx:commandExButton>
         <h:panelGroup    id="group1" styleClass="panelGroup">
            <h:outputText id="text2"  styleClass="outputText"
                          value="#{param.text1}">
            </h:outputText>
         </h:panelGroup>
         hx:ajaxRefreshRequest id="ajaxRefreshRequest1"
                               target="group1" params="text1">
         </hx:ajaxRefreshRequest>
      </h:form>
   </hx:scriptCollector>
   </body>
</f:view>