Using IBM Rational Software Architect to develop Ajax ...
Upcoming SlideShare
Loading in...5
×
 

Using IBM Rational Software Architect to develop Ajax ...

on

  • 1,774 views

 

Statistics

Views

Total Views
1,774
Views on SlideShare
1,774
Embed Views
0

Actions

Likes
0
Downloads
20
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Using IBM Rational Software Architect to develop Ajax ... Using IBM Rational Software Architect to develop Ajax ... Document Transcript

  • Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Skill Level: Introductory Mike Starkey (starkey@ca.ibm.com) Distinguished Engineer IBM Guang Qing Zhong (zhonggq@cn.ibm.com) Software Engineer IBM Li Long Chen (chenlil@cn.ibm.com) Software Engineer IBM Chuan Yang (chuahy@cn.ibm.com) Software Engineer IBM Elaine Zhan (ezhan@cn.ibm.com) Software Engineer IBM Larry Zou (zoulz@cn.ibm.com) Software Engineer IBM 05 Aug 2008 This article explains how to use IBM® Rational® Software Architect v7.0 to develop Ajax-supported JSF components. Introduction to how Rational Software Architect implements Ajax Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 1 of 26
  • developerWorks® ibm.com/developerWorks Java™Server Faces (JSF) is a Web application framework in the Java® 2 Platform, Enterprise Edition (J2EE) specification that has already been used by many companies. IBM has created a JSF-based component library called JWL (for JSF Widget Library) that implements and extends the JSF specification (JSR 127). JWL makes it easier to create applications based on JSF. More recently, Asynchronous JavaScript and XML (AJAX, known as Ajax) has become very popular, because it can greatly enhance the user experience of Web-based applications. However, it is difficult to develop Ajax applications without using an Ajax framework. Fortunately, JWL, which is available in IBM® Rational® Software Architect Version 7.0, provides Ajax functionality through JSF components. This JWL support makes it easier to develop Ajax-supported JSF components. This article uses an example and hypothetical user scenarios to explain how to use Rational Software Architect v7.0 to develop Ajax-supported JSF components. Ajax functionality provided by Rational Software Architect Version 7.0 A JSF page is populated by JSF components; therefore, Rational Software Architect 7.0 implements Ajax functionality by refreshing the target JSF component without refreshing the whole page in the user interface (UI) layer. Currently, not all JSF components can be refreshed. However, Ajax functionality is useful for most panel components, including these: • <h:panelGroup> • <h:panelGrid> • <hx:panelMenu> • <hx:panelDialog> There are three types of Ajax requests: • <hx:ajaxRefreshRequest> Get request from the same page. This request is used to pass values of various input fields on the page. Therefore, developers should specify parameters that need to be passed. • <hx:ajaxSubmitRequest> Post request to the same page. This request is used to submit the entire form; therefore, you do not need to specify parameters. • <hx:ajaxExternalRequest> Get request from another page. This is used to embed a JSF component from another page. The next section explains the basic steps for adding Ajax support to a JSF component. Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 2 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.
  • ibm.com/developerWorks developerWorks® Steps to add Ajax support to JSF components Generally, adding Ajax support to JSF a component requires three steps: 1. Specify the target JSF component and select the Ajax request type In a JSF page, you must refresh the target area with the Ajax request. Thus, you need to specify which JSF component that you want to refresh. After you select the targeted JSF component, you must specify which type of Ajax request that you want to use. 2. Configure the request parameters In most scenarios, you will probably want to pass parameters in a request, so you must specify those parameters. Except for the ajaxSubmitRequest type, the left two types of Ajax requests should specify the parameters. 3. Specify the behavior that invokes the Ajax request Until this step, you can say that the target JSF component is ready to accept the Ajax request. The only thing that you lack is that you must specify a behavior to invoke the Ajax request. This behavior can be events from the client side, such as an onclick event upon the click of a button or an onchange event for a selection from a drop-down menu. The section of this article titled Refresh a JSF component by using ajaxRefreshRequest describes and illustrates these steps. Example used in this article For this article, we use a sales management system as an example. This system has three requirements: • Requirement 1: Total customers and sales by date. Lists the number of customers and sales totals by each calendar day. • Requirement 2: Products sold by date and customer. Lists all of the products that customers bought by date and customer selected. Users can also get detailed information about the products. • Requirement 3: Customer information by date. Lists all of the customers, as well as summary information for each customer, by date. Figure 1 shows the main Web page design elements included for these Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 3 of 26
  • developerWorks® ibm.com/developerWorks requirements. Figure 1. Segments from the main Web page This page includes three areas: • Summary information area. This area lists the number of customers and total sales by calendar day, thereby implementing Requirement 1. • View selection area. This area is used to decide which view should be displayed. Different selections can show different views. In the implementation code, this is implemented by using ajaxExternalRequest. • Concrete view display area. This area displays statistical information. The view is determined by the radio button selection, and the data displayed is determined by the date selected. • When the user clicks the Detailed View button, this area displays a drop-down menu that contains all of the customer names. Users can then select a customer name to show products bought by that person. Results are shown in the products table below. In the products table, users can click each row to get detailed product information in the area to the right. This view implements Requirement 2. Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 4 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.
  • ibm.com/developerWorks developerWorks® • When the user clicks Summary View, this area displays a table with all of the customers names and their basic shopping summaries. This view implements Requirement 3. With this page design, all of the functions can be implemented in a main page so that a users don't need to click many choices to get the views that they want. This design enhances the user experience. Unfortunately, it is too difficult for developers to implement this design by using traditional Web technology. However, by using the Ajax functionality provided by Rational Software Architect 7.0, you can implement this design easily. For this example, we applied Ajax technology in two parts: 1. Using ajaxRefreshRequest to refresh the JSF component A. Refreshing a JSF component by using the radio button B. Refreshing a JSF component by selecting from the drop-down menu 2. Using ajaxExternalRequest to embed a JSF component of an external JSF page A. Embedding an external JSF component from the same JSF page by using a radio button B. Embedding an external JSF component from a different JSF page by using a set of radio buttons By focusing on these two parts, the following sections introduce how to develop this example by using Rational Software Architect 7.0. Refresh the JSF component by using ajaxRefreshRequest Here, refreshing a JSF component means refreshing only a JSF component with new data, not also embedding a JSF component from an external JSF page. To refresh a JSF component, we usually use ajaxRefreshRequest, not ajaxSubmitRequest. The next two subsections explain how to use radio buttons and drop-down menus to invoke ajaxRefreshRequest. Invoke ajaxRefreshRequest by using a radio button The scenario: A user wants to get a detailed view, thus he must select the date first and then click the Detailed View button. After that, the detailed view will be display below (see Figure 2). Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 5 of 26
  • developerWorks® ibm.com/developerWorks Figure 2. Screen fragments: Date and Detailed View selections and resulting display of details However, when this user selects another date, the detailed view should be refreshed and all of the data should belong to the selected date (see Figure 3). Figure 3. Detailed View with a different date selected As you learned in the section about How to add Ajax support to JSF components, there are three steps to add Ajax support to JSF components. The next section describes how to implement this scenario by following those three steps. Step 1. Specify the target JSF component and select the Ajax request type According to this scenario, you know that you want to refresh "concrete view display area" so that you can put this area into one panelGrid named ViewWrapper and then set this panelGrid as the target JSF component. Here, you can select Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 6 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.
  • ibm.com/developerWorks developerWorks® ajaxRefreshRequest as the Ajax request type (Figure 4). Figure 4. Add Ajax support for panelGrid 1. Select panelGrid ViewWrapper and then select the Properties view. 2. Click the Ajax menu in the left panel. 3. In the right panel, check "Allow Ajax updates." 4. Select Refresh, which means that the Ajax request type is ajaxRefreshRequest. Listing 1 shows the code snippet. Listing 1. ajaxRefreshRequest code sample <h:panelGrid id="ViewWrapper"> <h:panelGrid id="ViewGrid" styleClass="panelGrid"> </h:panelGrid> </h:panelGrid> <hx:ajaxRefreshRequest id="ajaxRefreshRequest1" target="ViewWrapper"></hx:ajaxRefreshRequest> The target attribute means which JSF component you want to send the Ajax request. Step 2. Configure the request parameters In this scenario, you must pass the selected date to the server. In this example, the date selections are items in a dataTable. However, because JSF keeps only one instance of each component in the table, you must let the server know that the value that you want to use is in the active row. "Active row" means that this row will invoke an event to invoke the Ajax request. 1. Therefore, to pass the value of selected date, you must add $$AJAXROW$$ before the ID of the component. Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 7 of 26
  • developerWorks® ibm.com/developerWorks 2. To add parameters, you can either select Click to edit Ajax request properties (see Figure 4, previously) or select ajaxRefreshRequest in the Source view and then select Properties > Add Parameter (Figure 5). Figure 5. Configure the parameters of ajaxRrefreshRequest The input focus will be moved to table "Parameter values send from the browser", input the parameter you want to send, here is "$$AJAXROW$$form1:tableEx1:selectedDate". Listing 2 shows the code that is generated. Listing 2. Generated code <hx:ajaxRefreshRequest id="ajaxRefreshRequest1" target="ViewWrapper" params="$$AJAXROW$$form1:tableEx1:selectedDate"></hx:ajaxRefreshRequest> 3. Use the params attribute to set parameters that you want to pass. You can specify a set of values. Step 3. Specify the behavior that invokes the Ajax request When you click the radio button in the summary table, the JSF ViewWrapper component should refresh. The JWL runtime process can capture the onclick event to invoke the Ajax request, as Figure 6 shows. Figure 6. Quick Edit view 1. Select the radio button in the Design view and then select Quick Edit Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 8 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.
  • ibm.com/developerWorks developerWorks® View. 2. Select onclick in the left panel. The left panel lists all the supported event to invoke the Ajax request. 3. Check the check box, User pre-defined behavior Action on the top of Quick Edit View. 4. From the drop-down menu, select Invoke Ajax behavior on the specified tag. 5. Select the target JSF component, which is ViewWrapper. 6. Change to the Source view so that you can see the source code in Listing 3. Listing 3. Source code <hx:inputRowSelect id="rowSelect1" styleClass="inputRowSelect" selectOne="true" value="#{summary.selected}"> <hx:behavior event="onclick" behaviorAction="get" targetAction="ViewWrapper"></hx:behavior> </hx:inputRowSelect> <h:inputHidden id="selectedDate" value="#{summary.date}"></h:inputHidden> The hx:behavior is used to attach JavaScript functionality to client-side events on JSF components. 7. In this case, use the onclick event of radio button to invoke the Ajax request. The value get of the behaviorAction attribute means that you want to run a get action on the ViewWrapper component. As you may recall from the previous section, you need to pass the value of the selected date. Therefore: 8. Add an inputHidden component to bind the selected date. Until this point you can use the radio button to refresh the target JSF component. The next section explains how to use drop-down menu to invoke an Ajax request. Invoke the ajaxRefreshRequest by using the drop-down menu For this section, assume this scenario: After selecting one date, the user wants to get the list of all of the customers. The user can also select one customer to get the detailed shopping information of that customer. In the Web site in this example, the Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 9 of 26
  • developerWorks® ibm.com/developerWorks user selected Detailed View to display an area. In that area, all of the customers' names are listed in the drop-down menu, and the user can select from that menu to show detailed shopping information. The effect is illustrated in Figures 7 and 8. Figure 7. Select the customer named Jimmy from the drop-down menu Figure 8. Select another customer, named Tom As you see, this design can improve the user's experience greatly. The steps that follow describe how to invoke an Ajax request by using the drop-down menu. Step 1. Specify the target JSF component and select the Ajax request type In this example, the target JSF component is a panelGrid, which contains a dataTable. The name of the panelGrid is userTable. In this scenario, use ajaxRefreshRequest. Listing 4 shows the code snippet. Listing 4. ajaxRefreshRequest code sample <h:panelGrid id="UserTable" styleClass="panelGrid" columns="3" width="700px"> …… </h:panelGrid> <hx:ajaxRefreshRequest id="ajaxRefreshRequest1" target="UserTable"></hx:ajaxRefreshRequest> Step 2. Configure the request parameters You pass the selected value of the drop-down menu to the server. This article Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 10 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.
  • ibm.com/developerWorks developerWorks® already covered how to pass parameters by using radio buttons, but the process is different when using the drop-down menu. When using a radio button, you can pass the value of the active row to the server. But when using drop-down menu, there is no active row concept; therefore, you add a JavaScript function to set the value of the drop-down menu to the inputHidden component. Listing 5 shows the code snippet. Listing 5. Code to add the JavaScript function to set the value to inputHidden function passCurSelect(srcSelect, tgtInput) { var select = document.getElementById("form1:"+srcSelect); var input = document.getElementById("form1:"+tgtInput); input.value = select.value; } <h:selectOneMenu style="margin-right:0px;" id="selectUser" onchange="passCurSelect('selectUser','userName');"> <f:selectItems value="#{pc_DetailedReport.userItems}" /> </h:selectOneMenu> <h:inputHidden id="userName" value="new"></h:inputHidden> From the code, you can see that the value of inputHidden will be set as the value of the drop-down menu when the selection changes. You also need to add parameters to the ajaxRefreshRequest component, as Listing 6 shows. Listing 6. Add parameters to the ajaxRefreshRequest component <hx:ajaxRefreshRequest id="ajaxRefreshRequest1" target="UserTable" params="userName"></hx:ajaxRefreshRequest> Step 3. Specify behavior to invoke Ajax request In this scenario, the target JSF component should be refreshed when a user changes the selection on the drop-down menu. You use the onchange event to invoke the Ajax request, so you must add an hx:behavior component to the h:selectOneMenu component. Listing 7 shows the h:selectOneMenu definition with hx:behavior component. Listing 7. The h:selectOneMenu definition with hx:behavior component <h:selectOneMenu style="margin-right:0px;" id="selectUser" onchange="passCurSelect('selectUser','userName');"> <f:selectItems value="#{pc_DetailedReport.userItems}" /> <hx:behavior event="onchange" target="selectUser" behaviorAction="get" targetAction="UserTable"></hx:behavior> </h:selectOneMenu> The value of attribute target should be set as the value of the ID of Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 11 of 26
  • developerWorks® ibm.com/developerWorks h:selectOneMenu (the drop-down menu). Here, the hx:behavior means that when the user changes the selection on the drop-down menu, the drop-down menu will invoke the Ajax request and run the get action to get the content of JSF UserTable component. Embed an JSF component of an external page by using ajaxExternalRequest In traditional Web technologies, you can embed external pages by using iFrame, jsp:includePage, and so on, but all of these technologies embed all of the content of the external page rather than only part of the content. With ajaxExternalRequest, you can embed a specified target JSF component with Ajax support. In the following subsections, you will see how to use radio buttons to invoke ajaxExternalRequest. Embed the JSF component of the same external page by using a set of radio buttons First, let's review the scenario. In the Detailed View, the user can list all of the products by selecting a customer in the drop-down menu. But the information about the product listed in the table may be not enough, so the user may want to see some other detailed information about this product. In this design, the user can click the radio button in each row to get other details, which will be displayed on the right side of the screen. The screen elements in Figures 9, 10, and 11 illustrate this design. Figure 9. Detailed View without the radio button selected Figure 10. Detailed View with the radio button selected Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 12 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.
  • ibm.com/developerWorks developerWorks® Figure 11. Detailed View with another radio button selected From these screen captures, you can see that the detailed information is displayed only when one of the radio buttons is selected and that when the user selects another radio button, the details change without refreshing the whole page. Step 1. Specify the target JSF component and select the Ajax request type In this scenario, assume that you want to show detailed product information when the product is selected. You can use ajaxExternalRequest to embed detailed product information of another page when the product is selected. In Figure 9, the right rectangle area is used for detailed product information. It is s a panelGrid named ProductDetail in the DetailedReport.jsp file. Listing 8 shows the source code. Listing 8. Source code for the ProductDetail panelGrid Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 13 of 26
  • developerWorks® ibm.com/developerWorks <h:panelGrid id="ProductDetail" styleClass="panelGrid"> </h:panelGrid> In this case, we put the detailed product information in the ProductDetail.jsp file. Because we want to embed another JSF panelGrid of ProductDetail.jsp to DetailedReport.jsp, we have to follow these rules to define the target JSF component in DetailedReport.jsp: • The component should be the same type as the component in DetailedReport.jsp, which is a panelGrid here. • The component ID should have the same name as the component in DetailedReport.jsp, thus ProductDetail here. • If the target component in DetailedReport.jsp is in a form, the external component in ProductDetail.jsp should also be in a form with the same name. Here, the form name is form1. The target external JSF component is defined as code Listing 9 shows. Listing 9. Code for the target external JSF component <h:form id="form1"> <h:panelGrid id="ProductDetail" styleClass="panelGrid" style="width:200px"> <h:outputText id="text1" styleClass="outputText" value="Name" style="font-style: normal; font-weight: bold"></h:outputText> <h:outputText id="text2" styleClass="outputText" value="#{pc_ProductDetail.product.name}"></h:outputText> <h:outputText id="text3" styleClass="outputText" value="Description" style="font-style: normal; font-weight: bold"></h:outputText> <h:outputText id="text4" styleClass="outputText" value="#{pc_ProductDetail.product.description}"></h:outputText> <h:outputText id="text5" styleClass="outputText" value="Price" style="font-style: normal; font-weight: bold"> </h:outputText> <h:outputText id="text6" styleClass="outputText" value="#{pc_ProductDetail.product.price}"></h:outputText> <h:outputText id="text7" styleClass="outputText" value="Discount" style="font-style: normal; font-weight: bold"></h:outputText> <h:outputText id="text8" styleClass="outputText" value="#{pc_ProductDetail.product.discount}"></h:outputText> </h:panelGrid> </h:form> Step 2. Configure the request parameters When the radio button is clicked, you must pass the product ID to the server, so that you know which product you need to show the detailed information. Therefore, in the radio button column, you use the code shown in Listing 10. Listing 10. Code for the Radio Button column Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 14 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.
  • ibm.com/developerWorks developerWorks® <hx:columnEx id="column3" width="50" align="left"> <f:facet name="header"> <h:outputText id="text5" styleClass="outputText" value="Select"></h:outputText> </f:facet> <hx:inputRowSelect id="productSelect" styleClass="inputRowSelect" selectOne="true"> </hx:inputRowSelect> <h:inputHidden id="productID" value="#{item.product.productID}"></h:inputHidden> </hx:columnEx> After you put an inputHidden component in this column, you also need to configure the params in ajaxExternalRequest component so that, when the radio button is clicked, you can use the value of this component as a parameter and the external page can get the value of productID from the HttpRequest. Listing 11 shows the source code. Listing 11. Source code <h:panelGrid id="ProductDetail" styleClass="panelGrid"> </h:panelGrid> <hx:ajaxExternalRequest id="ajaxExternalRequest1" target="ProductDetail" href="ProductDetail.faces" params="$$AJAXROW$$form1:tableEx2:productID"></hx:ajaxExternalRequest> The value of the target attribute should be the same as the value of the JSF component to which you want to add Ajax support. The value of the href attribute should be set as the JSF page where you put the external target JSF component. Step 3. Specify the behavior that invokes the Ajax request This scenario requires that the detailed product information should be displayed when the radio button is selected. Thus, from a technical viewpoint, you should use the onclick event to invoke the Ajax request. Listing 12 shows the radio button definition with the behavior definition. Listing 12. Radio button and behavior definitions <hx:inputRowSelect id="productSelect" styleClass="inputRowSelect" selectOne="true"> <hx:behavior event="onclick" behaviorAction="get;stop" targetAction="ProductDetail"></hx:behavior> </hx:inputRowSelect> The second action in the behavior (stop) is to prevent the event from bubbling up in the browser. That is because you just want to invoke Ajax request and don't want the link to act like you want to invoke the real target link in this case. Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 15 of 26
  • developerWorks® ibm.com/developerWorks After completing these three steps, all UI code has been set. You can implement the backend code in PageCode to implement this scenario. From a technical viewpoint, when the radio button is selected, the content of the ProductDetail component in the ProductDetail.jsp file will be retrieved, and that content will be used to replace the definition of the ProductDetail component in the DetailedReport.jsp file. After that substitution, the ProductDetail component area will be refreshed and then the detailed product information will be displayed in the DetailedReport.jsp file. Embed a JSF component of a different JSF page by using a set of radio buttons In this scenario, after the user selects the date, she can select different radio buttons to get different views. • When she selects Detailed View, the page will display the content as Figure 12 shows. • If she selects Summary View instead, the page content will look like Figure 13. Figure 12. Detailed View Figure 13. Summary View From a technical perspective, when the user selects Detailed View, the page should embed a JSF component from an external page, and when she selects Summary View, the page should embed a JSF component from a different external page. This scenario is more difficult to implement than the previous one. Therefore, we need to review the design first. Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 16 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.
  • ibm.com/developerWorks developerWorks® Figure 14 is the layout of the main JavaServer Page. This page can be divided into four parts, each part is implemented by using panelGrid: Part 1 is SummaryList panelGrid which is used to list total customers and sales by date; Part 2 is SelectionArea panelGrid which is used to offer selections to select different views; Part 3 is ViewWrapper panelGrid which wraps a panelGrid to list products sold by date and customer; Part 4 is ViewGrid panelGrid and is the panelGrid wrapped by ViewWrapper. Because you want to embed a different JSF component of a different JSF page, you must bind a variant of the href attribute in the ajaxExternalRequest component, and you need to change the value when the user clicks a different radio button in Part 2. To change the value of the href attribute, you add a ViewGrid panelGrid inside the ViewWrapper panelGrid and make ViewGrid support ajaxExternalRequest. This is the invocation process: Figure 14 Layout of the Main.jsp page 1. When the user clicks the radio button in Part 2, that refreshes Part 3, so the value of href will be changed according to the latest selection. 2. Then the ajaxExternalRequest will be invoked, and the ViewGrid panelGrid will be substituted by an external JSF component. The following steps explain this in more detail. Step 1. Specify the target JSF component and select the Ajax request type In this case, you must use ajaxRefreshRequest and ajaxExternalRequest: • The first, ajaxRefreshRequest, is used to refresh the ViewWrapper panelGrid. • The second, ajaxExternalRequest is used to embed an external JSF Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 17 of 26
  • developerWorks® ibm.com/developerWorks ViewGrid component. Step 2. Configure the request parameters Because you must refresh the ViewWrapper panelGrid, you need to make the ViewWrapper component support ajaxRefreshRequest, as the code in Listing 13 shows. Listing 13. Code to make the ViewWrapper component support ajaxRefreshRequest <h:panelGrid id="ViewWrapper"> <h:panelGrid id="ViewGrid" styleClass="panelGrid"> </h:panelGrid> </h:panelGrid> <hx:ajaxRefreshRequest id="ajaxRefreshRequest1" target="ViewWrapper" params="radio1;$$AJAXROW$$form1:tableEx1:selectedDate"></hx:ajaxRefreshRequest> The first parameter, #radio1, is used to pass the value of radio button selection. The second one is used to pass the selected date (this value is available only when this Ajax request was invoked by radio buttons in Part 1). Besides that, you need to make the #ViewGrid panelGrid support #ajaxExternalRequest. Figure 14 shows the source code that does this. Listing 14. Source code to make the ViewGrid panelGrid support ajaxExternalRequest <h:panelGrid id="ViewGrid" styleClass="panelGrid"> </h:panelGrid> <hx:ajaxExternalRequest id="ajaxExternalRequest1" target="ViewGrid" params="hidden1" href="#{pc_Main.urlOfView}" onstart="func_1(this, event);setRadioButtons('#{pc_Main.urlOfView}');"> </hx:ajaxExternalRequest> If the value of parameters will not change, the ajaxExternalRequest will use cached external JSF component. Therefore, you need to pass a dynamically unique value to make the ajaxExternalRequest get a new JSF component each time. As Listing 15 shows, you can do that by including an inputHidden component, hidden1, and invoking a JavaScript function, func_1, to change the value of hidden1 when the Ajax request was invoked. Listing 15. Code to make the ajaxExternalRequest get a new JSF component each time <h:selectOneRadio disabledClass="selectOneRadio_Disabled" enabledClass="selectOneRadio_Enabled" id="radio1" styleClass="selectOneRadio" Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 18 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.
  • ibm.com/developerWorks developerWorks® > <f:selectItem itemValue="DetailedReport.faces" itemLabel="Detailed View" /> <f:selectItem itemValue="SummaryReport.faces" itemLabel="Summary View" /> <h:inputHidden id="hidden1" value="1" /> </h:selectOneRadio> var counter=0; function func_1(thisObj, thisEvent) { var obj = document.getElementById("form1:hidden1"); if (obj) { var datetime = new Date(); var datetimeString = datetime + ""; counter++; obj.value = counter+"X"+datetimeString; } } Step 3. Specify the behavior that invokes the Ajax request These two Ajax requests should be invoked when a user clicks a radio button. The JWL runtime process will capture the onclick event to invoke the Ajax request. The ajaxRefreshRequest needs to be invoked first and then the ajaxExternalRequest will be invoked. Listing 16 shows the source code for this. Listing 16. Code to invoke two Ajax requests in sequence <h:panelGrid id="SelectionArea" styleClass="panelGrid" columns="2"> <h:outputText styleClass="normalLabel" value="Please select view: "></h:outputText> <h:selectOneRadio disabledClass="selectOneRadio_Disabled" enabledClass="selectOneRadio_Enabled" id="radio1" styleClass="selectOneRadio" > <f:selectItem itemValue="DetailedReport.faces" itemLabel="Detailed View" /> <f:selectItem itemValue="SummaryReport.faces" itemLabel="Summary View" /> <h:inputHidden id="hidden1" value="1" /> </h:selectOneRadio> <hx:behavior event="onclick" target="radio1" behaviorAction="get;get;" targetAction="ViewWrapper;ViewGrid" ></hx:behavior> </h:panelGrid> One behavior can invoke multiple Ajax requests. In this case, the radio button should refresh the ViewWrapper component and then ViewGrid, in that order. To get that result, add multiple values in the behaviorAction and targetAction attributes. Figure 15 illustrates how to use Quick Edit to configure multiple action in this scenario. Figure 15. Using Quick Edit to configure multiple actions Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 19 of 26
  • developerWorks® ibm.com/developerWorks As Figure 15 shows: 1. Click onclick on the left panel. 2. Check the box Use pre-defined behavior Actionand select Multiple actions in the adjacent drop-down menu on the right. 3. Clicking the drop-down Target menu will let you input multiple actions. 4. In the popup window, select Invoke Ajax behavior on the specified tag in column Action, then set the value of Target as ViewWrapper. 5. Click button Insert After on the right of the popup window to add another Ajax action using the same previous steps. Ways to use Rational Software Architect to develop Ajax-supported JSF components Use Ajax support judiciously For each JSF page, it has a corresponding pagecode (it is a Java class) and each JSF component has a corresponding initialization method in the pagecode. Ideally, for each Ajax invocation you would just invoke the initialization method to initialize the target JSF component, but actually, it will refresh the whole pagecode, thus all the initialization methods will be invoked and all the JSF components in the pagecode will be reinitialized. Thus, using extensive Ajax support may cause performance issues. To avoid performance issues caused by Ajax, you can add a decision sentence in the initialization code of JSF components. When you write JSF pages, you can write code manually or you can use Rational Software Architect to generate code automatically. We suggest that you use Rational Software Architect to generate code automatically, because there are ways Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 20 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.
  • ibm.com/developerWorks developerWorks® to implement these requirements, but only the code generated by Rational Software Architect is stable. Use Rational Software Architect to generate code For example, in this scenario, when the user selects a different date, the Concrete Statistic View should refreshed. In this implementation, when the user clicks the radio button, that action should invoke a JavaScript function to refresh the Concrete Statistic View. If you write the code manually, you can code it as Listing 17 shows. Listing 17. Code for invoking JavaScript to refresh the Concrete Statistic View <hx:inputRowSelect id="rowSelect1" styleClass="inputRowSelect" selectOne="true" value="#{summary.selected}" onclick="window.setTimeout(clickRadio,200);"> <hx:behavior event="onclick" behaviorAction="get" targetAction="ViewWrapper"></hx:behavior> </hx:inputRowSelect> In this example, the code to invoke the JavaScript function is in the onclick attribute, but if you use Quick Edit, the code generated is different. Figure 16 shows a screen capture of using Quick Edit to generate code to invoke JavaScript function by following these steps: 1. Click the Quick Edit tab to get the editor view. 2. Select the onclick event from the directory. 3. In the code view, input JavaScript code you want to invoke. 4. Save your changes. Figure 16. Use JSF quick editor to invoke JavaScript function Listing 18 shows the generated code. Listing 18. Code generated when using Quick Edit <hx:inputRowSelect id="rowSelect1" styleClass="inputRowSelect" selectOne="true" value="#{summary.selected}" > <hx:behavior event="onclick" behaviorAction="get" Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 21 of 26
  • developerWorks® ibm.com/developerWorks targetAction="ViewWrapper" onActionFunction="return func_2(this, event);"></hx:behavior> </hx:inputRowSelect> The code snippet in Listing 19 is the generated JavaScript function. Listing 19. Code generated for the JavaScript function function func_2(thisObj, thisEvent) { //use 'thisObj' to refer directly to this component instead of keyword 'this' //use 'thisEvent' to refer to the event generated instead of keyword 'event' window.setTimeout(clickRadio,200); } Although both of these implementations will work well, we suggest that you use the JSF editor to generate code, because the generated code is stable. Share this... Digg this story Post to del.icio.us Slashdot it! Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 22 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.
  • ibm.com/developerWorks developerWorks® Downloads Description Name Size Download method Sample code AjaxableJSF.zip 4656KB HTTP Information about download methods Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 23 of 26
  • developerWorks® ibm.com/developerWorks Resources Learn • Learn more by reading JSF and Ajax: Web 2.0 application made easy with Rational Application Developer V7 by Yury Kats (IBM® developerWorks®, December 2006). • Visit the Rational software area on developerWorks for technical resources and best practices for Rational Software Delivery Platform products. • Explore Rational computer-based, Web-based, and instructor-led online courses. Hone your skills and learn more about Rational tools with these courses, which range from introductory to advanced. The courses on this catalog are available for purchase through computer-based training or Web-based training. Additionally, some "Getting Started" courses are available free of charge. • Subscribe to the IBM developerWorks newsletter, a weekly update on the best of developerWorks tutorials, articles, downloads, community activities, webcasts and events. • Subscribe to the developerWorks Rational zone newsletter. Keep up with developerWorks Rational content. Every other week, you'll receive updates on the latest technical resources and best practices for the Rational Software Delivery Platform. • Subscribe to the Rational Edge newsletter for articles on the concepts behind effective software development. • Browse the technology bookstore for books on these and other technical topics. Get products and technologies • Download trial versions of IBM Rational software. • Download these IBM product evaluation versions and get your hands on application development tools and middleware products from DB2®, Lotus®, Tivoli®, and WebSphere®. Discuss • Rational Software Architect, Data Architect, Software Modeler, Application Developer and Web Developer forum: Ask questions about Rational Software Architect. About the authors Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 24 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.
  • ibm.com/developerWorks developerWorks® Mike Starkey Mike Starkey is a Distinguished Engineer on assignment from IBM Canada to the IBM China Development Lab in Beijing, China. He is the architect for MBPS Solution Assets. Guang Qing Zhong Guang Qing Zhong is a Software Engineer supporting the IBM Software Group. Li Long Chen Li Long Chen is a Software Engineer supporting the IBM Software Group. Chuan Yang Chuan Yang is a Software Engineer supporting the IBM Software Group. Elaine Zhan Elaine Zhan is a Software Engineer supporting the IBM Software Group. Larry Zou Larry Zou is a Software Engineer supporting the IBM Software Group. Trademarks IBM, the IBM logo, and ibm.com are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components © Copyright IBM Corporation 1994, 2007. All rights reserved. Page 25 of 26
  • developerWorks® ibm.com/developerWorks both. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of others. Using IBM Rational Software Architect to develop Ajax-supported JavaServer Faces components Page 26 of 26 © Copyright IBM Corporation 1994, 2007. All rights reserved.