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.
Click here for a larger image.
Figure 1: Create a new AjaxRefreshRequestExample.jsp
- Open ajaxRefreshRequestExample.jsp in Source mode.
- In the "Palette" pane, click "Enhanced Faces Components" (make sure you are in a Web perspective).
Figure 2: View of the "Palette" Pane
- Drag and drop an Input component from the palette to the page. This will produce the code shown in Listing 1:
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>
- 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.
Click here for a larger image.
Figure 3: Properties of the OutputText Component
IE 7
Firefox 2.0
