This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
IBM Rational Application Developer Version 7.5Portal Toolkit: Part 3. Web 2.0 portlet and portalprogramming support for IBM WebSphere PortalVersion 6.1Skill Level: Intermediate
This article describes the Web 2.0 tooling support introduced in IBM® Rational®Application Developer V7.5 for portlet and portal applications targeted on IBM®WebSphere® Portal V6.1 and higher. To help you understand this tooling supportbetter, the author also discusses the basics and benefits of the Web 2.0-basedtechnologies.
This article shows you how to exploit the benefits of the Web 2.0 tooling support inIBM® Rational® Application Developer V7.5 for portlet and portal applicationsrunning on IBM® WebSphere® Portal V6.1. In a typical portlet application, eachrequest to the server causes a complete refresh of the browser page, which leads topage flickering and performance gaps. Web 2.0 technology enables you to createmore dynamic and responsive applications with a superior user experience. Thetechnology aims to turn Web browsers into semi-rich clients by projecting userinterface logic for page rendering, navigation, aggregation, and cross-portletinteraction into user's browsers.
The Web 2.0 tooling support provided with Rational Application Developer aids andexpedites the process of creating such dynamic and responsive portlet and portalapplications. Tooling support has been provided so that you can:
• Design portlets that interact using Client-Side Click-to-Action, which is anew event paradigm introduced in WebSphere Portal V6.1 for cooperation
• Insert Person Menu and the capability to extend the Person Menu.
• Use an Ajax proxy for portlet applications.
• Use a client-side programming model to retrieve portlet preferencesefficiently, performing portlet state changes on the client side.
This article discusses the above four topics in order. For each, it begins bydescribing a particular Web 2.0-based technology, followed with simple examplesthat illustrate the tooling support for the same.
Who should read this: Developers of portlet and portal-based applications.
Goals of this article: Describe how to develop rich, interactive, and responsiveportlet and portal-based applications, exploiting the benefits of the tooling support forsemantic tagging, Ajax proxy, and the Client-side programming model.
Designing portlets that interact and co-operate usingClient-Side Click-to-Action
A click-to-action (C2A) event is one of the ways in which portlets can interact witheach other and share information.
Click-to-action (C2A)
Using the C2A delivery method, you can transfer data from a source portlet to one ormore target portlets with a simple click. When you click the source element, apop-up menu displays a list of target actions that match the selected source. Whenyou select a menu item, the corresponding target is invoked, and the source data istransferred to it. After the source data is processed, the target portlet triggers anaction and displays the results.
Client-side click-to-action
Client-Side Click-to-Action is the new implementation of the C2A frameworkintroduced in WebSphere Portal V6.1. It is based on Web 2.0 technology, and usessemantic tagging to define sources and targets.
The main purpose of semantic tags is to re-use the normal content of an HTMLdocument, and to annotate it with meta-information that is evaluated duringDocument Object Model (DOM) parsing.
Semantic tagging and the Live Object Framework
Client-Side Click-to-Action is built on the Live Object Framework (LOF), which
defines C2A sources as live objects in the system. The root element of a semantictag is marked by adding a specific class to the element, which is specified by the liveobject framework.
The LOF also provides the basic DOM parsing and menu management services.
Advantages over the earlier C2A technique
The new Client-Side Click-to-Action technique introduced in WebSphere Portal hasmany advantages over the earlier C2A technique.
• The newly introduced event-creation paradigm is available for both IBMand Java™ Specification Request (JSR) portlets, whereas the earlier C2Atechnique was only available to portlets that adhered to the IBM PortletAPI.
• It supports client-side JavaScript C2A target actions in addition to theserver-side actions. For example, when you select a menu item on thesource portlet and the source data is passed to the corresponding target,the action that is triggered at the target portlet can be a server-side actionor a JavaScript action.
• With the new Client-Side Click-to-Action technique, evaluation andexecution of C2A sources and targets occurs in a browser. Source andtarget matching no longer requires processing on the server, and thetechnique also removes menu generation code from the server. Thisresults in reduced server load.
• The menu markup is generated only when the C2A source menu icon isclicked.
All of these advantages lead to a highly reactive and responsive UI, without serverround trips and page flickering. All in all, they produce a superior user experience.
Terminology
Figure 1 illustrates C2A components. Table 1 lists the terminology that will be usedin this article for Client-Side Click-to-Action.
C2A source Typed data that is semantically tagged as a C2Asource.
C2A target An action defined for a particular C2A sourcetype.
Source portlet A portlet that contains one or more C2A sourceobject definitions.
Target portlet A portlet that contains one or more C2A targetaction definitions. (Note: a portlet can be both asource and a target portlet).
C2A hover UI The icon that appears next to a C2A sourceobject, indicating that there is a menu associatedwith that object.
C2A pop-up menu The menu that appears when you click the C2Ahover UI. It may contain an optional menu header(see Figure 1 above).
Menu header The area at the top of the menu that the C2Asource may populate with markup. It is generallyused to provide descriptive information about thesource object.
Live Object Framework C2A is implemented as a service in thisframework.
Rational Application Developer tooling support for Client-Side Click-to-Action
The tooling support for Client-Side Click-to-Action in Rational Application Developerprovides capabilities like intuitive wizards, palette drawer and menu bar items,automatic code generation, and potential data type matches. These functions helpyou create Client-Side Click-to-Action-enabled portlet applications with as muchease as possible.
The tools enable you to create a portlet that can:
• Receive data from other portlets, and then update its own viewaccordingly (target portlet).
A portlet can be both a source and target, sending data to one portlet and receivingdata from another portlet.
Sample applications
This article discusses two example applications to demonstrate the features ofClient-Side Click-to-Action:
• The first application shows you how to send data from a source portlet toa target portlet, and then invoke a simple JavaScript action on the targetportlet after it receives the data.
• The second example is a portlet application used by a shipping companyto maintain the details of its orders and customers. Five portlets in thisapplication will be discussed here.
• The Orders portlet, which maintains the monthly details of the orders
• The Order Details portlet, which shows the details of an order
• The Account Details portlet, which shows the account details for anorder
• The Customer Details portlet, which shows the details of a particularcustomer
• The Tracking Details portlet, which shows the tracking details of anorder
In the shipping application, you will see how the Order Details and Tracking Detailsportlets can exchange data using Client-Side Click-to-Action. In response to thataction, a server-side action can be invoked on the Tracking Details portlet.
If you use the tools provided by Rational Application Developer, the above tasks aresimplified to a great extent.
Sample application 1
In this simple application, you can send your name from the source portlet to thetarget portlet. Upon receiving the value, the target calls a JavaScript that prints"Hello [your name]" on the target portlet.
To achieve the above result, you will execute the following steps:
1. Create a new portlet project (C2ASource).
2. Create a new portlet (C2ATarget portlet) in the C2ASource portlet project.
3. Enable the C2ASource portlet to send data to C2ATarget portlet usingClient-Side Click-to-Action.
4. Insert a Client-Side Click-to-Action menu header onto the source pop-upmenu.
5. Enable the C2ATarget portlet to receive data from the C2ASource portletusing a Client-Side Click-to-Action.
6. Publish the portlet application on WebSphere Portal.
Create a C2A Source Portlet project
1. Select File > New > Project > Portlet Project and click Next. The NewPortlet Project wizard launches. Enter the following information, as shownin Figure 3.
a. Enter C2aSource as the Project name of the portlet.
b. Select WebSphere Portal 6.1 as the Target Runtime.
c. Select JSR 168 Portlet (in this example), JSR 286 Portlet, or IBMPortlet as the Portlet API.
d. Select Faces portlet (in this example) or Basic portlet as thePortlet type.
As you can observe in this code, the <div> and <span> tags have beensemantically tagged to provide their class attributes with special meanings, which isevaluated during DOM parsing by the LOF.
The Anchor Data is the default value inserted for the C2A hover UI String (that is,the value that shows up in the browser), indicating a C2ASource. When the portletapplication is published on WebSphere Portal, hovering over the Anchor Data showsyou the source portlet menu. The source menu has one entry for each target portletthat can consume the value sent by the source portlet.
You can change this value from Anchor Data to the value that you want as theC2A hover UI String (preferably your name in this scenario).
Figure 8 shows the Design view of the C2ASourceView.jsp.
<span class="c2a:anchor">Charu Malhotra</span><p class="c2a:display" style="display: none"> Display My name </p>
</div>
Enable the C2ATarget portlet to receive data
Enable the C2ATarget portlet to receive data from the C2ASource portlet usingClient-Side Click-to-Action.
Design the C2ATarget portlet
(You can ignore the following steps if you have selected Basic portlet as the Portlettype in step 1 of the section "Create a C2A Source Portlet project", because basicportlet already comes with a default form, text field, and submit button.)
1. Double-click the C2ASourceView.jsp to open it.
2. Switch to the Design view.
3. Select the Form Tags drawer in the Palette view.
4. Drag the Form object from the palette onto the C2ATargetView.jsp.
5. Now, drag the Text Field object from the palette onto this form.
6. The Insert Text Field dialog is displayed. Specify C2AInput in the Namefield, and click OK.
7. Again, drag the Submit button object from the palette onto the previousform and next to the text field that you inserted, as shown in Figure 11.
8. The Insert Submit Button dialog is displayed. Specify my submit in theName field and Submit in the Label field, and then click OK.
Figure 11. Design view of C2aTarget port let before enabling it as a C2a target
Enable the C2ATarget portlet to receive data from the C2ASource Portlet.
1. Select the Portlet drawer in the Palette view.
2. Drag the Client-Side Click-to-Action Input Property menu item from thepalette onto the Submit button that you created using the previous steps(or the default Submit button for basic portlets), as shown in Figure 12.
3. Alternatively, you can select Insert > Portlet > Client-SideClick-to-Action Input Property from the menu bar.
The Insert Client-Side Click-to-Action Input Property wizard is displayed.
Three inputs are required from the user to enable a portlet to receive data
• Data Type URI: Type a name describing the format and semantics of thedata. This should exactly match the Data Type URI field value for theC2A source portlet.
• Action Value: The action to be executed when the value sent by the C2Asource portlet reaches the target portlet. This can be a server-side actionor a JavaScript action.
• Action Label: The label to be displayed as the C2A pop-up menu for this
target. This label corresponds to an entry into the C2A source portletpop-up menu, as shown in Figure 1 previously.
The Data Type URI field shows potential data type matches in the drop-down list, asshown in Figure 13.
4. Select http://C2Asource#Myname from the Data Type URI fielddrop-down menu, as shown in Figure 14, and then click Next.
Figure 13. Describe the type of data that your portlet can accept
5. For this scenario Specify javascript:void(0); in the Action Valuefield to avoid a round trip to the server. In the next section you will seehow a JavaScript action can be invoked on the submit event of the form.
6. Specify Send My name to Target in the Action Label field, as shownin Figure 14, and then click Finish.
Publish the portlet application on WebSphere Portal
Now the portlet application is ready to be published on WebSphere Portal.
Right-click the C2ASource portlet project and select Run on Server. Figure 16 showswhat the sample looks like when it is published.
Figure 16. Display Myname sample published on WebSphere Portal V6.1
Larger view of Figure 16.
Sample application 2
You have the following portlets in the Shipping Details portlet application:
• Orders: This portlet displays the summary of orders placed in a particularmonth. It serves as a C2A source, sending:
• Order_ID to Order Details and Account Details.
• Customer_ID to Customer Details.
• Order Details: This portlet displays the details for a particular order. Itserves as a C2A target, receiving Order_ID from the Orders portlet. Thisarticle demonstrates how to enable this portlet to send Tracking _ID to
Tracking Details portlet using the C2A source option.
• Account Details: This portlet displays the account details for a particularorder. It serves as a C2A target, receiving Order_ID from the Ordersportlet.
• Customer Details: This portlet displays the details for a particularcustomer. It serves as a C2A target, receiving Customer_ID from Ordersportlet.
• Tracking Details: This portlet displays the details for a particularshipment. This article demonstrates how to enable it to receiveTracking_ID from the Order Details portlet using the C2A target option.
To begin, download the sample available at the end of this article and run it onWebSphere Portal.
The current scenario is that OrdersPortlet sends:
• Order_ID to Order Details and Account Details
• Customer_ID to Customer Details
When the sample is published on the server, perform the following steps:
1. Enter any month (for example, September) in the text box displayed inOrdersPortlet, and then click Submit .The orders for that particular monthare displayed.
2. When the order details display, hover over any Order_ID. A menu isdisplayed.
3. Click the Show Order Details menu item. the details of the particularorder are displayed in the Order Details portlet.
4. Click the Show Account Details menu item. The account details of theparticular order are displayed in the Account Details portlet.
5. Now hover over any Customer_ID, and you can see a menu.
6. Click the Show Customer Details menu item. The details of theparticular customer are displayed in the Customer Details portlet.
Figure 17 shows what the sample looks like when it is published (before enablingOrder Details as a C2aSource that sends Tracking_ID to Tracking Details).
As you can see from the published sample, currently there is no communicationbetween the Order Details portlet and the Tracking Details portlet.
Now you will learn how to enable the Order Details portlet as a C2A source thatsends Tracking_ID to the Tracking Details portlet. The Tracking Details portlet in turnwill be enabled as the C2A target that receives Tracking_ID from the Order Detailsportlet. After it receives Tracking_ID, a server-side action is invoked on the TrackingDetails portlet that displays the details of the particular shipment tracking, as shownin Figure 18.
3. The Insert Client-Side Click-to-Action Output Property wizard is displayed.Fill in the values for the Data Type URI and Value fields, as shown inFigure 20, and then click Finish.
4. Open OrderDetailsView.jsp in the Design view, .
5. Change the Anchor value from Anchor Data to the value you want asthe C2A Hover UI string. Preferably, keep the C2A Hover UI string thesame as the C2A value being passed. For example, in the currentscenario, the Tracking_ID being passed by the Order Details portletshould be displayed to the user.
<span class="c2a:value" style="display: none"><%=od.getTrackingId() %></span><span class="c2a:anchor"><%=od.getTrackingId()%></span><p class="c2a:display" style="display: none">Send Tracking Id to Tracking Details</p>
</div></td>
Enable TrackingDetail as a C2A target
1. Double-click and open TrackingDetailEntry.jsp in the Page Designer
2. Drag the Client-Side Click-to-Action Input Property menu item from thepalette onto the Submit button in the Design view ofTrackingDetailEntry.jsp file, as shown in Figure 22.
Publish the portlet application on WebSphere Portal
Now the portlet application is ready to be published on WebSphere Portal.
8. Right-click the portlet project and select Run on Server. Figure 25 showswhat the sample looks like when it is published.
Figure 25. Shipping Details sample published on WebSphere Portal
Larger view of Figure 25.
Inserting a Person Menu and extending the Person Menu in aportlet application
Following is some basic information about the components of the Person Menu inRational Application Developer and WebSphere Portal.
The Person Java™Server Page (JSP™) tag provides contextual collaborationfunctionality related to a named person. It generates the HTML that renders thespecific set of actions to display on the Person Menu. It was originally implementedas a server-side JSP tag that cannot be called from JavaScript code. In an attemptto minimize the server load for better performance and scalability, and in order tosupport Ajax clients, the Person JSP tag has been updated in WebSphere Portal tohave a JavaScript API that can be called in the client.
The updated Person Menu displays a set of contact information about the selectedperson by specifying hCard attributes (hCard is the HTML representation of vCard).
The Person Menu extension allows you to extend the Person Menu, by enabling youto write JavaScript for actions that can be executed, or actions that are targeted.Rational Application Developer provides the necessary tooling support for the same.
Live Object Framework (LOF) and Semantic Tagging
The person names are semantically tagged using the standard hCard micro format,and hence behave as live objects in the system. The Person service that enablesthe Person Menu for hCards in the page is plugged in to the Live Object Framework
• The new semantic tagging-based Person Menu provides the samefunctionality as the traditional JSP Person tag, but with a better userexperience:
• It shows hover and pop-up on each hCard.
• It provides access to actionable menu items like Show Profile, SendE-mail, and so on.
• The person information is retrieved only when the pop-up for the person isshown on the portal, and there is minimal server load until the person'sname is clicked. Due to this on-demand data retrieval, there is no wastefulserver work for person names that never get clicked.
• The Person Menu extension allows you to extend the Person Menu. Youcan add more than one extension. It also allows you to customize the lookand feel and user registry.
Sample application
Now you will create a simple application to demonstrate how Rational ApplicationDeveloper simplifies the task of inserting the Person Menu, and then extending itusing the Person Menu extension in a portlet application.
Adding actions to the Person Menu
To design this application you will execute the following steps:
1. Create a WebSphere Portal targeted portlet project.
2. Insert a Person Menu in the portlet .jsp file.
3. Extend the Person Menu by inserting Person Menu extension code in theportlet .jsp file.
4. Provide the JavaScript for the Person Menu extension.
After designing the portlet application, publish it on WebSphere Portal.
4. Alternatively you can select Insert > Portlet > Person Menu Extensionfrom the menu bar. The intuitive "Insert Person Menu Extension" wizard isdisplayed (see Figure 29).
Figure 29. Specify person menu extension attributes
The following inputs are required from you to insert a Person Menu Extension:
• Action details ID: The tooling support auto generates the action id foryou. It must be unique for a particular Person Menu Extension.
• JavaScript: The JavaScript name that has the action that will be invokedwhen the menu item is selected. This should be available at the followingdirectory:
• Description: A description for the Person Menu Extension.
• Specify ShowIf: This function decides the visibility of the Person MenuExtension.
• Specify Action: This is the function that is executed when the PersonMenu Extension is clicked. The argument of the function should be@@@ARGS@@@.
5. Click Finish and save PersonMenuExampleView.jsp.
6. Open PersonMenuExampleView.jsp in the Source view. The code shownin Listing 11 is auto generated.
Listing 11. Auto-generated source code
<div class="com.ibm.portal.action" style="display: none"><span class="action-id">action_0</span><span class="action-impl">/javascript/TestAction.js</span><span class="action-context">person</span><span class="action-label">Test Action</span><span class="action-description">This is a test action for adding
a Person Menu Extension </span><span class="action-showif">javascript:TestAction.showif</span><span class="action-url">javascript:TestAction.execute(@@@ARGS@@@)</span>
</div>
The JavaScript for the Person Menu Extension (TestAction.js, as specifiedpreviously) should be available at the following directory:
This will simply generate an alert when the new Test Action menu item is selected.
Publish the portlet application on WebSphere Portal
Now the portlet application is ready to be published on WebSphere Portal.
1. Right-click the PersonMenuExample portlet project and select Run onServer. Figure 30 shows what the sample looks like when it is published.
Figure 30. Person Menu sample published on WebSphere Portal
Using Ajax proxy in portlet applications
Ajax allows Web pages to load data or markup fragments from a server usingasynchronous requests that are processed in the background. Therefore, therequests do not interfere with the Web page that is currently displayed in thebrowser.
You can use Ajax to increase the responsiveness and usability of a portletapplication significantly. You do this by exchanging small amounts of data with theserver, and consequently refreshing only small parts of the markup.
Same-origin policy
Ajax-based Web applications sometimes want to do Ajax requests to serversdifferent from the server that served the HTML document.
For example, suppose you are designing a Web application that you want to:
1. Use an external representational state transfer (REST) service, such asGoogle suggestions, Yahoo spell-checking, and so on.
2. Use some remote corporate REST service available on the intranet.
3. Include news feeds from an external server (like CNN).
Restriction on XMP HTTP requests
In order to prevent malicious Ajax code served from one server from using yourbrowser as the basis for attacking other servers, requests are only allowed to theserver that served the current document, as shown in Figure 31. This same-originpolicy prevents client-side scripts (in particular, JavaScript) from loading contentfrom a different origin comprising protocol, domain name, and port.
To overcome the same-origin policy restriction, WebSphere Portal offers a solutionthat is based on a server-side HTTP proxy, the Ajax proxy layer. The Ajax proxylayer intercepts the calls, and retrieves the content from the remote site, as shown inFigure 32. It also allows for these resources to be cached in a central server. Thissecurity model allows administrators to restrict access to trusted origins in a veryflexible way.
Figure 32. Ajax proxy layer
Sample application
The AjaxProxyPortletSample application used in this article consists of a portlet thataccesses foreign domains using XMLHttpRequests. In order to overcome thesame-origin policy, the portlet uses the Ajax proxy layer to access these domains.
1. Select the category (Rational or Lotus) from the drop-down box, asshown in Figure 33.
2. Next, click the Get the articles button. The portlet gets the feeds ofdeveloperWorks articles (Rational or Lotus) from the IBM Website. It thendisplays the links to the topics.
The complete sample is available for download at the end of this article. This articlecovers the Ajax proxy tooling support in Rational Application Developer. Theimplementation perspective is discussed only in brief.
The following sections discuss how you can:
• Enable Ajax proxy support for a new portlet project.
• Register the proxy servlet in the Web deployment descriptor.
• Specify Ajax proxy configuration parameters.
• Send an XMP HTTP request through an Ajax proxy.
• Publish the AjaxProxyPortletSample application on WebSphere Portal.
• Enable Ajax proxy support for an existing portlet project.
• Disable Ajax proxy support for an existing portlet project.
Enable Ajax proxy support for a new portlet project
1. Select File > New > Project > Portlet Project and then press Next. TheNew Portlet Project wizard is displayed, as shown in Figure 34.
2. Enter AjaxProxyPortletSample as the Name of the portlet.
3. Select WebSphere Portal 6.1 as the Target Runtime.
4. Select JSR 168 Portlet, JSR 286 Portlet, or IBM Portlet as the PortletAPI.
5. Select Faces, Basic, Empty, or Struts as the Portlet type.
Figure 34. New portlet project with Ajax proxy enabled
9. Proxy servlet is registered in the Web deployment descriptor. Expand theWeb Content > WEB-INF folders, and double-click Web.xml.
10. The Web deployment Descriptor is displayed. Click the Servlet tab, asshown in Figure 36.
Figure 36. Web deployment descriptor showing servlets and JavaServer Pages(JSPs)
Larger view of Figure 36.
11. The Ajax Proxy servlet with the class namecom.ibm.wps.proxy.servlet.ProxyServlet gets registered in the Web.xml.
(Note: If you need to access resources that require authentication, you can specify asecond servlet mapping that is associated with a security constraint. To specify anew servlet mapping, click the Add button in the URL Mappings section shownabove in Figure 36. This invokes the Add Servlet Mapping dialog.)
12. Click the Source tab in Web Deployment Descriptor view to see the codeadded in Web.xml, as shown in Listing 13.
Figure 38. Specify paths that map to a URL on a remote domain
15. Using the proxy-config.xml, you can specify the Ajax proxy configurationparameters. First, you can add an item to the proxy rules, as shown inFigure 39.
A mapping element is used to map incoming requests to a target URL based on theircontext path. Therefore, each mapping element needs to specify a contextpathattribute (and optionally a URL attribute), as shown in Figure 40.
The policy element is used to define an access policy for a specific URL pattern, asshown in Figure 41. It includes the following sub-elements, as shown in Figure 42:
Now, if you want to get the response from thehttp://www.ibm.com/developerworks/myfeed.rss site through the proxy servlet, thenyou have to create the XHR request by constructing its URL as follows:
This complete URL contains the encoded path of the URLhttp://www.ibm.com/developerworks/myfeed.rss(that is, the http:// part has beenreplaced with http/)
You may achieve this encoding in your JavaScript file by constructing the function asshown in Listing 15.
In this case, if you want to get the response from thehttp://www.ibm.com/developerworks/myfeed.rss site through a proxy servlet, thenyou have to create the XHR request by constructing its URL as follows:
• Sending the XHR request to the server, and loading the response
• Parsing the response to display it in the AjaxProxyPortletSampleView.jspfile
To have a complete look at the JavaScript file, expand the Web Content > JS foldersin the AjaxProxyPortletSample, and then open proxy.js.
Publish the portlet application on WebSphere Portal
1. Right-click the AjaxProxyPortletSample and select Run on Server.
2. When the project is published, select the category (Rational or Lotus)from the drop-down list.
3. Next, click Get the articles. The sample shows the links to the latesttopics in the selected category in response.
When you click the Get the articles button, the XMLHttpRequest object is createdusing a URL that corresponds to the selected topic (Rational or Lotus). This requestis then passed to the ProxyServlet, which in turn delegates it to the target server,retrieves the response and, finally, returns the XML response back to the clientbrowser. The JavaScript then parses and displays this response in a user friendlymanner, as shown in Figure 43.
Figure 43. Ajax proxy portlet sample published on WebSphere Portal
and the ProxyServlet entry is deleted from Web.xml.
Figure 44. Disabling Ajax support
Using client-side programming model support in WebSpherePortal
Previous versions of WebSphere Portal required that a request be sent to the serverfor each portlet operation. For example, if you changed the portlet window state tominimize or maximize, a submit request had to be sent to the server and theresponse sent back to your browser. This would cause a page refresh, and onlysubsequently was the portlet shown in the maximized or minimized state. Typicallythese types of server-side operations require repeated round trips to the server.
To reduce this type of server traffic, WebSphere Portal now supports a client-side
7. The Client Side Capabilities check box under Web2.0 Portlet Featuregroup is selected by default. Selecting this enables the client-sideprogramming model support for a new portlet project. Click Finish.
The ClientSideSample portlet project is created, and ClientSideSampleView.jspopens in the Page Designer.
• The taglib includes the necessary markup and artifacts needed to use therequired module on the client.
• The ibm.portal.portlet.* module enables you to usePortletWindow, PortletPreference, PortletState and XMLPortletRequeston the client.
• The ibm.portal.xml.* module allows the use of XSLT and XPath onthe client.
Using client-side programming model support to retrieve portlet preferencesin basic portlet projects
Now you will see how to use client-side programming model support to retrieveportlet preferences on the client side, as shown in Figure 46. This action used tohappen on the server side. Continue with the ClientSideSample project createdpreviously.
9. Create a new preference variable in the Add Attribute dialog, as shown inFigure 48. Give this preference the same name that you specifiedpreviously for the preference created in the Portlet Deployment Descriptor(that is, name it MyPreference).
Figure 48. Add an attribute to portletPreferences
10. Open ClientSideSampleView.jsp.
11. Drag MyPreference from under the PortletPreferences node in the PageData view¸ as shown in Figure 49, and drop it onClientSideSampleView.jsp.
Figure 49. Drag a preference from the Page Data view
The above auto-generated code retrieves portlet preferences on the client side.
Note: The auto-generated code may incorrectly generatedojo_101.addOnLoad(callOnLoad); in place of the correctdojo.addOnLoad(callOnLoad);
If the incorrect code is generated in the JSP, you have to manually correct it so thatwhen the application is published it runs properly on WebSphere Portal.
The preferenceJSONObject contents are shown in Listing 21.
Listing 21. Contents of preferenceJSONObject
var preferenceJSONObject= {"bindings": [{"pref":"MyPreference","id":"ibm__pref_MyPreference_uq_1"}]
};
The HTML code shown in Listing 22 is also added in the source view.
14. Similarly, you can add another preference (MyPreference2) in the PortletDeployment Descriptor (specifying a value for it) and also add the samepreference in the Page Data view (in the same way as you did previously
15. Open the Design view. Drag this preference into the JSP as you didpreviously.
16. Now open the Source view.
You can see that the preferenceJSONObject contents are now updated, as shown inListing 23.
Listing 23. Updated JSONObject contents
var preferenceJSONObject= {"bindings": [{"pref":"MyPreference2","id":"ibm__pref_MyPreference2_uq_1"},{"pref":"MyPreference","id":"ibm__pref_MyPreference_uq_1"}]
};
Publish the portlet application on WebSphere Portal
1. Right-click the ClientSideSample Portlet project and select Run onServer.
2. You can observe that the preference values that you specified in thePortlet Deployment Descriptor Preference Store are displayed correctly,as shown in Figure 51.
Figure 51. ClientSideSample published on WebSphere Portal
The tools provided by Rational Application Developer simplify the development ofrich, interactive, and responsive portlet and portal-based applications. They exploitthe benefits of the client-side programming model, Client-Side Click-to-Action,Person Menu, Person Menu Extension, and Ajax proxy. You need to customize onlythe code generated according to the requirements of your application.
• Learn more in the IBM WebSphere Portal Version 6.1 Information Center whereyou can find information about planning, installing, configuring, administering,developing, and troubleshooting.
• Explore the IBM Rational Application Developer Version 7.5 Information Centerto learn more..
• Visit the Rational software area on developerWorks for technical resources andbest practices for Rational Software Delivery Platform products.
• Explore the Rational Application Developer Version 7.5 Information Center tofind in-depth information.
• Subscribe to the IBM developerWorks newsletter, a weekly update on the bestof developerWorks tutorials, articles, downloads, community activities, webcastsand events.
• Subscribe to the developerWorks Rational zone newsletter. Keep up withdeveloperWorks Rational content. Every other week, you'll receive updates onthe latest technical resources and best practices for the Rational SoftwareDelivery Platform.
• Subscribe to the Rational Edge newsletter for articles on the concepts behindeffective 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.
Discuss
• Participate in the discussion forum for this content.
• Join the developerWorks Community in forums, blogs, podcasts, wikis, andmore.
Charu Malhotra is a software engineer who develops the portal andportlet tooling components of Rational Application Developer. Shefocuses on Web 2.0 tooling support and bridge support for JSF portlets.Charu works in the IBM labs in Delhi, India.
Trademarks
IBM and the IBM logo are trademarks of International Business MachinesCorporation in the United States, other countries or both.Java and all Java-based trademarks and logos are trademarks of Sun Microsystems,Inc. in the United States, other countries, or both.