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:
- Developing an application with the JWL DataGrid using Rational Application Developer: http://www.ibm.com/developerworks/rational/library/06/0117_gallagher/
- 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.
- Create a new JSF page ajaxRefreshRequestExample.jsp by clicking File → New → Other → Web → Web Page.
- Open ajaxRefreshRequestExample.jsp in Source mode.
- In the “Palette” pane, click “Enhanced Faces Components” (make sure you are in a Web perspective).
- Drag and drop an Input component from the palette to the page. This will produce the code shown in Listing 1:
- Drag and drop a Panel Group component from the palette to the page.
- 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.
Figure 1: Create a new AjaxRefreshRequestExample.jsp
Figure 2: View of the “Palette” Pane
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>
Figure 3: Properties of the OutputText Component
- Select the Panel Group and click Properties → AJAX. Click “Allow Ajax Updates” and set the Ajax request to “Refresh”.
- 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”.
- Drag and drop a Button Command and add a new behavior that will have “group1” target action and be invoked upon a mouse click.
- Run this JPS page on the server (make sure you are running under Websphere 6.1 or higher).
- 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.
Figure 4: AJAX Properties
Figure 5: AjaxRefreshRequest Properties
Listing 2: Submit Button “Behavior” Source Code
<hx:behavior event="onclick" behaviorAction="get" targetAction="group1" />
Figure 6: Running the Example on Websphere 6.1 Server
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:
- Create a new JSF page ajaxRefreshSubmitExample.jsp by clicking File → New → Other → Web → Web Page.
- Open ajaxRefreshSubmitExample.jsp in Source mode.
- In the “Palette” pane, click “Enhanced Faces Components” (make sure you are in a Web perspective).
- Drag and drop three input components from the palette to the page. This will produce the code shown in Listing 4:
- Drag and drop Panel Group component from the palette to the page.
- Drag and drop Text Output component from the palette to the panel that you added in the Step 5.
- Select the Panel Group and click Properties → AJAX. Click “Allow Ajax Updates” and set Ajax request to “Submit”.
- 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.
Figure 8: Create a New JSF Page
Figure 9: The “Palette” Pane
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>
Figure 10: AJAX Properties
Listing 5: Submit Button “Behavior” Code
<hx:behavior event="onclick" behaviorAction="get" targetAction="group1" />
- Create a new Java class ThreeStringsConcatenatorBean.java with three variables: text1, text2, text3.
- 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.
- Select ajaxRefreshSubmitExample.jsp. Under the Page Data view, select Faces Managed Beans → New → Faces Managed Bean.
- Register the ThreeStringsConcatenatorBean JavaBean in faces-config.xml.
- Map fields in the JavaBean with fields in the JSP page by dragging fields from the bean onto the page.
Figure 11: Create New Java Class—ThreeStringsConcatenatorBean.java
Listing 6: Implementation Of getConcatenateThreeFields() Method
public String getConcatenateThreeFields() { return text1 + text2 + text3; }
Figure 12: Create a New Faces Managed Bean
Figure 13: Register a New Faces Managed Bean
Figure 14: Map Bean Fields to Input Field on the Page
- Run this page on the server (make sure you are running under Websphere 6.1 or higher).
- Test your code.
Figure 15: Running the Example on the Server
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:
- Create a new JSF page, ajaxExternalRequestExample.jsp, by clicking File → New → Other → Web → Web Page.
- Create a new JSF page, externalPage.jsp, by clicking File → New → Other → Web → Web Page. In the page, type “External Page is Loaded!”.
Figure 17: Creating a New AjaxExternalRequestExample.jsp Page
- Open ajaxExternalRequestExample.jsp in Source mode.
- In Pane “Palette”, click “Enhanced Faces Components” (make sure you are in a Web perspective).
- Drag and drop the Panel Group component from the palette to the page.
- 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.”
- Select the Panel Group and click Properties → AJAX. Click on “Allow Ajax Updates” and set Ajax request to “External”.
- Click the <hx:ajaxExternalRequest> tag that was added in Step 7 and click Properties. Type “externalPage.faces” in the URL field.
- Run this page on the server (make sure you are running under Websphere 6.1 or higher).
- Test your code.
Figure 18: View of the “Palette” Pane
Figure 19: View of AJAX Properties
Figure 20: AjaxExternalRequest Properties
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
Reference
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.