http://www.developer.com/tech/article.php/3741411/Implementing-AJAX-Components-in-the-JWL-Framework.htm

Back to article

Implementing AJAX Components in the JWL Framework


April 17, 2008

Introduction

In 2005, IBM© introduced JWL (JavaScript-based Widget Library); it enhances JSP and HTML pages with rich set of inputs, output, and navigation components. If you are not familiar with JWL and would like to learn more about it, you can reference the following articles under the IBM Developer Works web site to give you an idea of what JWL can offer:

  1. Developing an application with the JWL DataGrid using Rational Application Developer: http://www.ibm.com/developerworks/rational/library/06/0117_gallagher/
  2. The JWL Tree component: http://www.ibm.com/developerworks/rational/library/05/1220_coffey/

With the release of RAD 6.0 (Rational Application Developer), IBM has introduced a much improved support systemfor JWL AJAX components. In this article, you will find out about these components and go through three how-to exercises. You will also find sample source code that you can import into your workspace.

Definitions

An AJAX tag must be defined as a child tag of any of the JWL panel tags. The AJAX tag defines an alternate content for the panel. An AJAX tag makes a server request when the panel containing the AJAX tag is invoked. The server processes the request and returns control to the panel.

There are three AJAX components under JWL library. These are discussed in detail in the following sections.

Get Content <hx:ajaxRefreshRequest>

The <hx:ajaxRefreshRequest> tag allows for the content of the same JSF page to be asynchronously replaced within the parent tag. The content is retrieved by using the HTTP GET request. This tag is used when you do not need to pass a lot of information to the server or you are interested in only a limited number of parameters as opposed to the whole form.

The following steps describe how this tag is used:

Note: All exercises are done using RAD 6.1.
  1. Create a new JSF page ajaxRefreshRequestExample.jsp by clicking File → New → Other → Web → Web Page.



    2. Click here for a larger image.

    Figure 1: Create a new AjaxRefreshRequestExample.jsp

  2. Open ajaxRefreshRequestExample.jsp in Source mode.
  3. In the "Palette" pane, click "Enhanced Faces Components" (make sure you are in a Web perspective).

    4. Figure 2: View of the "Palette" Pane

  4. Drag and drop an Input component from the palette to the page. This will produce the code shown in Listing 1:

    5. Listing 1: Input Component Source Code

    <f:view>
   <body>
   <hx:scriptCollector id="scriptCollector1">
      <h:form id="form1" styleClass="form">
         <h:inputText id="text"
                      styleClass="inputText">
         </h:inputText>
      </h:form>
   </hx:scriptCollector>
   </body>
</f:view>
  5. Drag and drop a Panel Group component from the palette to the page.
  6. Drag and drop a Text Output component from the palette to the panel that you added in the Step 5. Click Properties of the output component and type #{param.text1} in the value field.



    7. Click here for a larger image.

    Figure 3: Properties of the OutputText Component

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



    2. Click here for a larger image.

    Figure 4: AJAX Properties

  2. 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".



    3. Click here for a larger image.

    Figure 5: AjaxRefreshRequest Properties

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

    4. Listing 2: Submit Button "Behavior" Source Code

    <hx:behavior event="onclick"
             behaviorAction="get"
             targetAction="group1" />
  4. Run this JPS page on the server (make sure you are running under Websphere 6.1 or higher).



    5. Click here for a larger image.

    Figure 6: Running the Example on Websphere 6.1 Server

  5. 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.

    6. 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>

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.



    2. 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).

    4. 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:

    5. 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".



    8. 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.

    9. Listing 5: Submit Button "Behavior" Code

    <hx:behavior event="onclick"
             behaviorAction="get"
             targetAction="group1" />
  1. Create a new Java class ThreeStringsConcatenatorBean.java with three variables: text1, text2, text3.



    2. Click here for a larger image.

    Figure 11: Create New Java Class—ThreeStringsConcatenatorBean.java

  2. In ThreeStringsConcatenatorBean.java, generate getter and setter methods for the variables. Add a new getConcatenateThreeFields() method that will concatenate text1, text2, and text3 and return the result.

    3. Listing 6: Implementation Of getConcatenateThreeFields() Method

    public String getConcatenateThreeFields() {

   return text1 + text2 + text3;

}
  3. Select ajaxRefreshSubmitExample.jsp. Under the Page Data view, select Faces Managed Beans → New → Faces Managed Bean.

    4. Figure 12: Create a New Faces Managed Bean

  4. Register the ThreeStringsConcatenatorBean JavaBean in faces-config.xml.



    5. Click here for a larger image.

    Figure 13: Register a New Faces Managed Bean

  5. Map fields in the JavaBean with fields in the JSP page by dragging fields from the bean onto the page.



    6. Click here for a larger image.

    Figure 14: Map Bean Fields to Input Field on the Page

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



    2. Click here for a larger image.

    Figure 15: Running the Example on the Server

  2. Test your code.



    3. Click here for a larger image.

    Figure 16: AjaxSubmitRequest Example Output

Listing 7 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 7: AjaxSubmitRequest Full Source Code

<f:view>
   <body>
   <hx:scriptCollector id="scriptCollector1">
      <h:form id="form1" styleClass="form">
         <h:inputText id="text1"
                       styleClass="inputText"
                       value="#{concatenatorBean.text1}">
         </h:inputText>
         <h:inputText id="text2"
                      styleClass="inputText"
                      value="#{concatenatorBean.text2}">
         </h:inputText>
         <h:inputText id="text3"
                      styleClass="inputText"
                      value="#{concatenatorBean.text3}">
         </h:inputText>

         <hx:commandExButton type="button"
                             value="Submit"
                             id="button1"
                             styleClass="commandExButton">
            <hx:behavior behaviorAction="get;stop"
                         event="onclick"
                         targetAction>="group1" >
            </hx:behavior>
         </hx:commandExButton>

         <h:panelGroup id="group1" styleClass="panelGroup">
            <h:outputText id="text4"
                          styleClass="outputText"
                          value="#{concatenatorBean.
                                   concatenateThreeFields}">
            </h:outputText>
         </h:panelGroup>

         <hx:ajaxRefreshSubmit id="ajaxRefreshSubmit1"
                               target="group1" >
         </hx:ajaxRefreshSubmit>
      </h:form>
   </hx:scriptCollector>
   </body>
</f:view>

Get External Content <hx:ajaxExternalRequest>

<hx:ajaxExternalRequest> defines how content from a different page replaces the content of the parent tag. Content is retrieved using HTTP GET method. This tag is useful when you want to place one JSP into the content of another one.

The following steps describe how this tag is used:

  1. Create a new JSF page, ajaxExternalRequestExample.jsp, by clicking File → New → Other → Web → Web Page.
  2. Create a new JSF page, externalPage.jsp, by clicking File → New → Other → Web → Web Page. In the page, type "External Page is Loaded!".



    3. Click here for a larger image.

    Figure 17: Creating a New AjaxExternalRequestExample.jsp Page

  1. Open ajaxExternalRequestExample.jsp in Source mode.
  2. In Pane "Palette", click "Enhanced Faces Components" (make sure you are in a Web perspective).

    3. Figure 18: View of the "Palette" Pane

  3. Drag and drop the Panel Group component from the palette to the page.
  4. Drag and drop the Text Output component from the palette to the panel that you added in Step 5. Set the value of the component to "External Page will be loaded here."
  5. Select the Panel Group and click Properties → AJAX. Click on "Allow Ajax Updates" and set Ajax request to "External".



    6. Click here for a larger image.

    Figure 19: View of AJAX Properties

  6. Click the <hx:ajaxExternalRequest> tag that was added in Step 7 and click Properties. Type "externalPage.faces" in the URL field.



    7. Click here for a larger image.

    Figure 20: AjaxExternalRequest Properties

  7. Run this page on the server (make sure you are running under Websphere 6.1 or higher).
  8. Test your code.

    9. Figure 21: AjaxExternalRequest Example Output

Listing 8 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 8: AjaxExternalRequest Full Source Code

<f:view>
   <body>
   <hx:scriptCollector id="scriptCollector1">
      <h:form id="form1" styleClass="form">

      <hx:commandExButton type="submit"
                          value="Submit"
                          id="button1"
                          styleClass="commandExButton">
         <hx:behavior event="onclick"
                      behaviorAction="get;stop"
                      targetAction="group1">
         </hx:behavior>
      </hx:commandExButton>
      <h:panelGroup id="group1" styleClass="panelGroup">
         <h:outputText id="text2"
                       styleClass="outputText"
                       value="External Page will be loaded here!">
         </h:outputText>
      </h:panelGroup>
         <hx:ajaxExternalRequest id="ajaxExternalRequest1"
                                 target="group1"
                                 href="externalPage.faces"
                                 source="group1">
         </hx:ajaxExternalRequest>
      </h:form>
   </hx:scriptCollector>
   </body>
</f:view>

Download Source Code Here

JWL.war

Reference

IBM: http://publib.boulder.ibm.com/infocenter/iadthelp/v7r0/index.jsp?topic=/ com.ibm.etools.jsf.doc/topics/rjsfcompAjax.html

About the Author

Aleksey Shevchenko has been working with object-oriented languages for eight years. For the past four years, he has served as a technical lead and a project manager. Aleksey has been implementing Enterprise IT solutions for Wall Street and the manufacturing and publishing industries.

Sitemap | Contact Us