developing struts2 inter-portlet communication based ... · struts2 source portlet containing dojo...

The sample program is provided to you on an "AS IS" basis, without warranty of any kind. IBM HEREBY EXPRESSLY DISCLAIMS ALL WARRANTIES, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. Some jurisdictions do not allow for the exclusion or limitation of implied warranties, so the above limitations or exclusions may not apply to you. IBM shall not be liable for any damages you suffer as a result of using, modifying or distributing the sample program or its derivatives.

Developing Struts2 inter-portlet communication based WebSphere Portal application using IBM Rational Application Developer


Contents Abstract.................................................................................................................................3 Overview...............................................................................................................................3 Sample Usecase...................................................................................................................3 Developing the source portlet ...............................................................................................4

Portlet project creation...................................................................................................4 Struts configuration for source portlet ............................................................................5 View development of source portlet.............................................................................10

Developing target portlet.....................................................................................................20 Portlet creation.............................................................................................................20 Struts configuration for target portlet............................................................................21 View development of target portlet ..............................................................................22

Enabling inter-portlet communication..................................................................................23 Enabling publisher for first use case ............................................................................24 Enabling subscriber for first use case ..........................................................................25 Enabling publisher for second use case ......................................................................27 Enabling subscriber for second use case ....................................................................29

Deploying the portlet on WebSphere Portal........................................................................31 Executing the usecase on the server...........................................................................36

Summary ............................................................................................................................38 Resources...........................................................................................................................38


Abstract

The aim of this article is to showcase development of Struts 2.x based portlets for WebSphere® Portal using IBM Rational® Application Developer V8.0.4. The sample use case of this article incorporates inter-portlet communication using Dojo technology. It uses Struts 2.x portlet MVC framework, JSR 286 portlet specifications, and Dojo V1.4.

The article is divided into three sections. The first section shows how to create a Dojo enabled Struts2 source portlet containing Dojo widgets, which acts as a Dojo event publisher. The second section is about the target portlet that displays the information according to the event published from the first portlet. The third section explains how you can enable the inter-portlet communication using Dojo technology, how both the projects are deployed on the server, and how they are rendered with a browser using Rational Application Developer.

Overview

Struts is one of the popular framework and there have been queries regarding its compatibility and feasibility with the WebSphere Portal server. Without good reference material, it might be challenging to configure Struts to use in a portal environment. This article explains the integration of the Struts portlet framework with the WebSphere Portal Server.

Sample Usecase

In this sample use case, you will work with a portlet project that contains the Struts 2.x libraries and have two portlets. The first portlet displays the information about a list of songs in a Dojo data grid and the second portlet shows the information related to producers of those songs in a HTML table. These portlets participates in an inter-portlet communication by using the Dojo based publisher-subscriber mechanism.

Prerequisite :

To create the sample you need to have:

1. IBM Rational® Application Developer version 8.0.4 2. IBM WebSphere® Portal Server version 7.0 3. Struts libraries version 2.3.1.1.

On skill level, apart from the knowledge about Struts, you should know how to work with IBM Rational Application Developer and Dojo technology to simplify the process of project creation.

You can prepare the development environment by installing IBM Rational Application Developer v8.0.4 and WebSphere Portal Server v7.0. Download and store the Struts libraries for Struts Framework V2.3.1.1 from Apache official site. These libraries contain all class files that you need to incorporate in your project.


Developing the source portlet

In this section, you will create the first portlet that acts as a publisher and displays the list of songs. You will first create a portlet project, and then make few changes to allow it consume the Struts libraries.

Portlet project creation

To create a portlet project:

1. Launch the Rational Application Developer in a new workspace. 2. Select File->New->Portlet Project. The Project creation dialog (as shown in figure 1) opens.

Figure 1: New Portlet Project Wizard


i. Enter Song_Portlet as the name of the project name. ii. Select WebSphere Portal v7.0 as your target runtime. iii. Select the Create a portlet checkbox. iv. Click the modify button of the Configuration label, the Portlet project configuration wizard

displays. v. Select JSR286 as portlet API and Empty portlet as Portlet type. vi. Click Modify button of Web 2.0 Features, the Modify Web2.0 features wizard displays. vii. Select Dojo toolkit to enable Dojo facet in the portlets. viii. Click Finish.

The portlet project is created in Rational Application Developer workspace.

Struts configuration for source portlet

To configure Struts portlet source: 1) Copy the following Struts libraries into \WebContent\WEB-INF\lib folder as shown in figure 2. The added Struts2 libraries are:

• commons-beanutils-1.7.o.jar • commons—chains-1.2.jar • commons—collections.3.1.jar • commons-digster-2.0.jar • commons-fileupload-1.2.2.jar • commons-io-2.0.1.jar • commons-lang-2.5.jar • commons-logging-1.1.1.jar • commons-validator-1.3.1.jar • freemaker-2.3.18.jar • javaassist-3.11.0.GA.jar • ognl-3.0.3.jar • struts2-core-2.3.1.1.jar • struts2-portlet-plugin-2.3.1.1.jar • xwork-core-2.3.1.1.jar

Figure 2: Struts2 libraries in lib folder


2) Change the portlet class from the default one to org.apache.struts2.portlet.dispatcher.Jsr286Dispatcher and make the following changes:

i. From the Enterprise Explorer view, open the Portlet Deployment Descriptor node (/WebContent/WEB-INF/portlet.xml).

ii. Select portlet tab, and select Song_Portlet portlets to view the portlet details as shown in Figure 3.

iii. Click Browse button of Portlet class, and select org.apache.struts2.portlet.dispatcher.Jsr286Dispatcher.

iv. Save the changes and click OK. Figure 3: Choosing Struts2 Portlet class


Note: The dispatcher portlet class handles all the requests from client and renders the the output.

3) Add the init-parameters to the default view action and view namespace in the Portlet Deployment Descriptor. To add the parameter:

i. Scroll to the Initialization section (shown in figure 4) and remove the init-parameters created by default.

ii. Click Add, the New Initialization Parameter dialog displays. iii. Enter the name as ‘viewNamespace’ and value as ‘/view’, it specifies the view portlet mode to

map to the /view action namespace defined in struts.xml. iv. Add another parameter with name as ‘defaultViewAction’ and value as ‘song’, it specifies that

the default action for the portlet mode view is song. This action is defined in struts.xml file.

Figure 4: Adding new init-parameter


See the figure 5 with added parameters and actions. Figure 5: Portlet deployment descriptor

4) In the Struts2 based portlets, struts.xml file is the core configuration file required to initialize


resources such as actions, results and so on. Create a file with name struts.xml under the src folder. Copy the following code snippet 1 into the struts.xml file.

Code Snippet 1: struts.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.org/dtds/struts-2.0.dtd"> <struts> <package name="view" extends="struts-portlet-default" namespace="/view"> <action name="song" class="com.ibm.song_portlet.Action.SongAction" method="execute"> <result name="success">/WEB-INF/view/song.jsp</result> </action> </package> </struts>

i. The parent element <struts> in the XML file contains the <package> element “view” which extends “struts-portlet-default” and ‘namespace” value “/view” (same as given in the portlet.xml file). You can have multiple actions defined in a single package.

ii. In the package add an action definition with name as “song”, action class as “com.ibm.song_portlet.Action.SongAction” and default method as “execute”.

iii. When the execute method of the action is executed, to display the result: • Add the result tag as a child to action tag with attribute name as success • Add #PCDATA field having value “/WEB-INF/view/song.jsp to map the song.jsp page to the action.

You can have multiple views or pages defined here for validation error and failure scenarios for the same action.

5) As defined in the struts.xml file, now you will create an action class. i. Right-click the src folder and select New -> Package to create a package com.ibm.song_portlet.Action in the src folder under Java Resource.

ii. Right-click the newly created package and select New-> Class to create a class with name SongAction.java.

iii. Copy the following code snippet 2 to SongAction.java file. Code Snippet 2: Action class for Song portlet package com.ibm.song_portlet.Action; import org.apache.struts2.dispatcher.DefaultActionSupport; import com.opensymphony.xwork2.ActionSupport; public class SongAction extends DefaultActionSupport { private static final long serialVersionUID = 1L; @Override public String execute() throws Exception { System.out.println("Accessing song.jsp through action" );


return ActionSupport.SUCCESS; } }

The Struts ActionSupport class provides the default implementation of the most common actions. The execute method is executed automatically when action is called. The subclasses should implement this method by providing their business logic. The action class here contains a return type, which returns success to the struts.xml file.

View development of source portlet So far you have configured the struts framework for the source portlet and now you will work on the JSP file to have UI and the data to be displayed as per the requirements. In this use case you will use JavaScript Object Notation (JSON) which is lightweight interchange format to represent data which is human readable and easy to parse as well with Dojo. The data provided by JSON file will be displayed in the data grid. The data grid is Dojo element used to display data in grid manner. 1) Create the JSP page to render the view. In the jsp page use Dojo data grid to display the data fetched from the JSON file. To create the folder and add the JSP page:

i. Right click the WEB-INF folder and select New -> Folder to create a new folder titled as

“view”. ii. Right click the view folder and select New -> File to create a new JSP file and title it as

song.jsp, defined in result tag of struts.xml. After adding the JSP page to the portlet project, you can add text to the JSP page and publish the project on the server to test the configuration changes. After enabling the Dojo toolkit during portlet creation, you can view the Dojo drawers from the Palette view in IBM Rational Application Developer. You can also enable the Palette view by selecting Window-> Show View-> Other and selecting palette. Figure 6: Palette View


When you drag and drop the first Dojo widget to JSP page, a Dojo setting dialog displays (shown in figure 7). You can set preferences to create and externalize the Dojo initialization code and other portlet helper javascripts required for Dojo widgets. Accept the defaults and click OK.

Figure 7: Dojo Settings for Portlet Projects


2) The Dojo data drawer contains a ItemFileReadStore widget, it helps to store and read data using a specified URL. i. Select and drag ItemFileReadStore to the portlet JSP file, the code (snippet 3) for dojotype dojo.data.ItemFileReadStore is added to the JSP file.

ii. Change the jsid and id attributes of the widget to Producer_<portlet:namespace/> iii. Add the url attribute to provide the store that is the JSON file location with value

‘<%=renderResponse.encodeURL(renderRequest.getContextPath(). + "/json/Producer.json")%>’.

Code Snippet 3: ItemFileReadStore in song.jsp

<div dojotype="dojo.data.ItemFileReadStore" jsid="Producer_<portlet:namespace/>" id="Producer_<portlet:namespace/>" url='<%=renderResponse.encodeURL(renderRequest.getContextPath()+ "/json/Producer.json")%>'> </div>

3) Add a drop-down list to filter the data according to producer names. To add the drop-down list:

i. Drag FilteringSelect widget (shown in figure 8) from Dojo form widgets to the JSP page. The snippet for dojotype dijit.form.FilteringSelect is added to JSP page

ii. Add the ‘store’ attribute to the item with value ‘Producer_<portlet:namespace/>’ and ‘searchAttr’ with value as ‘producer’ (as shown in code snippet 4) to map the widget with desired store that is Producer.json so the data is filtered as per the producer names.

Figure 8: Dojo form widget drawer


Code Snippet 4: Filtering Select code

<select dojotype="dijit.form.FilteringSelect" name="select2" autocomplete="false" value="Val1" id="filteringSelect_<portlet:namespace/>" store="Producer_<portlet:namespace/>" searchAttr="producer"> <option value="Val1" selected="selected">Value1</option> <option value="Val2">Value2</option> </select>

4) Add another widget ItemFileWriteStore to store the values that Dojo data grid receives from AbumData.json file. i. Drag and drop ItemFileWriteStore to the portlet JSP page. ii. Modify the jsid and id attributes of the widget to AlbumData_<portlet:namespace/>. iii. Provide the store location add url attribute with value

‘<%=renderResponse.encodeURL(renderRequest.getContextPath()

+ "/json/AlbumData.json")%>’.

Code Snippet 5: ItemFileWriteStore in song.jsp

<div dojotype="dojo.data.ItemFileWriteStore" jsid="AlbumData_<portlet:namespace/>" id="AlbumData_<portlet:namespace/>" url='<%=renderResponse.encodeURL(renderRequest.getContextPath()


+ "/json/AlbumData.json")%>'> </div>

5) Dojo data grid displays the list of songs in the portlet JSP file, Dojo data widgets drawer in Palette view contains the data grid widget. i. Drag and drop the data grid widget to the JSP page to bring up the Dojo data grid configuration wizard (shown in figure 9).

Figure 9: Dojo data grid configuration

ii. Clear the check-box Generate JavaScript to populate the grid. iii. Add the heading label and JavaScript property (marked in figure 9). iv. Click Finish, the data grid code (code snippet 6) is added to the JSP page. v. To make data grid fetch data from desired store that is AlbumData.json add the ‘store’ attribute

to the item with value ‘AlbumData_<portlet:namespace/>’. vi. To filter the data based on producer name selected in filterselect, add the attribute

‘query=”{name:’*’}”’ (refer code snippet 7).


Code Snippet 6: Dojo data grid in song.jsp file

<table id="dataGrid_<portlet:namespace/>" dojotype="dojox.grid.DataGrid" autoHeight="true" store="AlbumData_<portlet:namespace/>" query="{name:'*'}"> <thead> <tr> <th field="name" width="auto">Song</th> <th field="year" width="auto" nowrap>Year</th> <th field="producer" width="auto"> Producer</th> <th field="job" width="auto">Job</th> </tr> </thead> </table>

6) For each portlet there is a portlet helper class generated at path “WebContent\js\portlet\namespace_<uniqueID>\portlethelper”. To map the data grid to AlbumData.json in this helper class, set its url in the song.js file. Add the following statement to the dojo.addOnLoad function in the JSP file where a new object for portletHelper_<portlet:namespace/> is created.

Code Snippet 7: Set the url in song.jsp file portletHelper_<portlet:namespace/>.setUrl

('<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/json/AlbumData.json")%>');

The modified function would look like code snippet 8

Code Snippet 8: dojo.addOnLoad function in song.jsp file

dojo.addOnLoad( function() { portletHelper_<portlet:namespace/> = new portlet.namespace_8818fab483.portlethelper.song({portlet: portlet_<portlet:namespace/>}); portletHelper_<portlet:namespace/>.setUrl

('<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/json/AlbumData.json")%>');

} );

The above statement will update the page with the location of the JSON file. Now you can define the following setUrl method in the corresponding .js file (song.js in this case) refer code snippet 9 for more details:

Code Snippet.9: setURL function in song.js file

url:null, setUrl:function(url) { this.url = url; },


7) After completing the view creation for the source portlet, you will create the data files. The whole data is collection of items and each item has different name and value pairs. Fetch this data and display as per requirements in JSP page. i. Right-click the WebContent folder and select New -> Folder to create a new folder titled as “json”.

ii. Right-click the json folder and select New -> File to create a new file and title it as AlbumData.json.

iii. Copy the following code snippet 10 into the json file. Code Snippet 10: AlbumData.json

{ "identifier" : "id", "label" : "name", "items" : [ { "name" : "Loved the good old dayz", "id" : "01", "producer" : "Gaurav J", "year" : "March, 2001", "job" : "Guitar, Piano, Vocals" }, { "name" : "So simple so eazee", "id" : "02", "producer" : "S Jaspreet", "year" : "April, 2002", "job" : "Guitar, Piano, Vocals" }, { "name" : "Roll and Rock Zeee", "id" : "03", "producer" : "Puneet", "year" : "March, 2003", "job" : "Guitar, Piano, Vocals" }, { "name" : "Here am back again", "id" : "04", "producer" : "Saurabh M", "year" : "February, 2004", "job" : "Guitar, Percussion, Piano, Harp, Vocals" }, { "name" : "Restless", "id" : "05", "producer" : "Ashutosh P", "year" : "March, 2005", "job" : "Guitar, Keyboards, Vocals" }, { "name" : "Letzz Wake up ",


"id" : "06", "producer" : "Chetna S", "year" : "July, 2006", "job" : "Guitar, Harmonica, Vocals" }, { "name" : "A hundred smilesss for you", "id" : "07", "producer" : "Mansi JC", "year" : "August, 2007", "job" : "Guitar, Vocals" }, { "name" : "Crazy! Crazy!", "id" : "08", "producer" : "Lakshmi G", "year" : "June, 2008", "job" : "Guitar, Harmonica, Vocals" }, { "name" : "Life", "id" : "09", "producer" : "Awanish A", "year" : "December, 2009", "job" : "Dobro, Guitar, Harmonica" }, { "name" : "The day", "id" : "10", "producer" : "Awanish A", "year" : "October, 2001", "job" : "Bass, Guitar, Keyboards, Vocals" }, { "name" : "When you sing", "id" : "11", "producer" : "Charu K", "year" : "June, 2006", "job" : "Bass, Vocals" }, { "name" : "Can I be a kid again", "id" : "12", "producer" : "Charu K", "year" : "September, 2010", "job" : "Bass, Vocals" }, { "name" : "Who is that boy", "id" : "13", "producer" : "Manish M", "year" : "July, 2010", "job" : "Guitar, Vocals" }, { "name" : "We are one",


"id" : "14", "producer" : "Manish M", "year" : "July, 2011", "job" : "Guitar, Vocals" }, { "name" : "We are one", "id" : "15", "producer" : "Gaurav J", "year" : "August, 2001", "job" : "Guitar, Tabla, Vocals" } ] }

8) Create the second data file having details of the producers in json format. i. Right-click the json folder and select New -> File to create a new file and title it as Producer.json.

ii. Copy the following code snippet 11 to the json file. iii. The producer.json file has name and value pair of the image to display the respective producer

images in portlet. iv. Create a \WebContent\images folder and copy all the images (you can get all the images from

the sample attached with this article) in that folder.

Code Snippet 11: Producer.json file {

"identifier" : "id", "label" : "producer", "items" : [ { "id" : "01", "producer" : "Gaurav J", "image" : "gaurav.jpg", "address" : "A-1,New Delhi", "phone" : "1111", "email" :"[email protected]", }, { "id" : "02", "producer" : "S Jaspreet", "image": "jaspreet.jpg", "address":"B-1,Gurgaon", "phone":"2222", "email" :"[email protected]", }, { "id" : "03", "producer" : "Puneet", "image": "puneet.jpg", "address":"S-31,Gurgaon", "phone":"3333",


"email" :"[email protected]", }, { "id" : "04", "producer" : "Saurabh M", "image": "saurabh.jpg", "address":"S-32,Gurgaon", "phone":"4444", "email" :"[email protected]", }, { "id" : "05", "producer" : "Ashutosh P", "image": "ashutosh.jpg", "address":"S-15,Mumbai", "phone":"5555", "email" :"[email protected]", }, { "id" : "06", "producer" : "Chetna S", "image": "chetna.jpg", "address":"S-39,Pune", "phone":"6666", "email" :"[email protected]", }, { "id" : "07", "producer" : "Mansi JC", "image": "mansi.jpg", "address":"S-40,Gurgaon", "phone":"7777", "email" :"[email protected]", }, { "id" : "08", "producer" : "Lakshmi G", "image": "lakshmi.jpg", "address":"S-23,Banglore", "phone":"8888", "email" :"[email protected]", }, { "id" : "09", "producer" : "Awanish A", "image": "awanish.jpg", "address":"S-62,Noida", "phone":"9999", "email" :"[email protected]", }, { "id" : "10", "producer" : "Charu K", "image": "charu.jpg", "address":"Yerawada,Pune", "phone":"1111",


"email" :"[email protected]", }, { "id" : "11", "producer" : "Manish M", "image": "manish.jpg", "address":"Sector-15,Gurgaon", "phone":"10910", "email" :"[email protected]", },

]}

Developing target portlet In this section you will create second portlet that will act as a target (or subscriber) to display the detailed information of the producer selected in the source (or publisher) portlet.

Portlet creation To add another portlet to the existing portlet project. 1) Open the Portlet Deployment Descriptor, select portlet tab and click New to add portlet. The

Portlet creation wizard displays as shown in Figure 10. 2) Enter the portlet name as Producer_Portlet and select portlet type as empty. 3) Click Finish Figure 10: Adding portlet in existing portlet project


Struts configuration for target portlet 1) Open the Portlet Deployment Descriptor (/WebContent/WEB-INF/portlet.xml) file. 2) Change the portlet class, same way as done for the first portlet and select the class org.apache.struts2.portlet.dispatcher.Jsr286Dispatcher.

3) Add two init-parameters, ‘viewNamespace’ with value ‘/view’ and ‘defaultViewAction’ with value ‘subscribe’.

4) In struts.xml file add the action and result definition (code snippet 12) for the target portlet and JSP page in the same package.

Code Snippet 12: Action definition of producer.jsp in struts.xml <action name="subscribe" class="com.ibm.Producer_portlet.Action.ProducerAction" method="execute"> <result name="success">/WEB-INF/view/producer.jsp</result> </action>

5) Create a package with name com.ibm.producer_portlet.Action and in that create a class

ProducerAction.java. Copy the content from code snippet 13:


Code Snippet 13: Action class for producer portlet package com.ibm.producer_portlet.Action; import org.apache.struts2.dispatcher.DefaultActionSupport; import com.opensymphony.xwork2.ActionSupport; public class ProducerAction extends DefaultActionSupport { private static final long serialVersionUID = 1L; @Override public String execute() throws Exception { System.out.println("Accessing producer.jsp through action" ); return ActionSupport.SUCCESS; } }

The objective of the class is same as the previous portlet class that is to return back success and render the corresponding JSP.

View development of target portlet After configuring Struts framework for the target portlet create its view JSP file. To create a new JSP: 1) Right-click the view folder and select New -> File and create producer.jsp file. 2) To display the producer details in the page, add a HTML table element. Copy the code snippet 14 to the JSP file.

Code Snippet 14: producer.jsp file <b>Producer Information Portlet</b> <div id="main_<portlet:namespace/>"> <table border=1> <tr><td rowspan="5"><div id="image_<portlet:namespace/>"></div></td></tr> <tr> <td bgcolor="gray" width="30%"><span style="color: white"> <b>Name</b> </span> </td> <td><div id="name_<portlet:namespace/>"></div></td></tr> <tr> <td bgcolor="gray" width="30%"><span style="color: white"> <b> Address </b> </span></td> <td><div id="address_<portlet:namespace/>"></div></td></tr> <tr> <td bgcolor="gray" width="30%"><span style="color: white"> <b>Phone</b> </span> </td> <td><div id="phone_<portlet:namespace/>"></div></td></tr> <tr> <td bgcolor="gray" width="30%"><span style="color: white"> <b>Email</b> </span> </td>


<td><div id="email_<portlet:namespace/>"></div></td></tr> </table> </div> All the details will be displayed in tabular format. Note: As a best practice, <portlet:namespace> is suffixed for each ID to prevent namespace clashing. After the skeleton to display the data and all data in the JSON files is ready, enable the portlets to communicate using Dojo inter-portlet communication.

Enabling inter-portlet communication

This section explains how you can achieve inter-portlet communication through Dojo toolkit and deploy the portlet application onto the WebSphere Portal Server.

The portal tools Dojo toolkit provides an Inter-portlet communication feature that enables interaction between two portlets. The Dojo Event Publisher and Dojo Event Subscriber items (shown in figure 11) are available under the Portlet drawer in the Palette view for portlet communication. The publisher-subscriber mechanism is the base logic for inter-portlet communication. The publisher sends the events and subscriber listens to an event topic and performs the actions. In this scenario there are mainly two events that you will use: a) Selecting a producer name in a producers drop down list and displaying the corresponding songs information in a Dojo data grid. It will happen in the first portlet.

b) Displaying producer details in a table in target portlet, when a user selects a data grid row. Figure 11: Portlet drawer in palette


Enabling publisher for first use case To display producers names in a drop-down list, you have placed Dojo Filtering Select widget in the source portlet. Selection of producer name from drop-down list will generate an event and displaying the related song information in a Dojo data grid through AlbumData.json file will be the corresponding action. In this case Song_Portlet acts as publisher and subscriber as well. To enable the Dojo Filtering Select widget as publisher: 1) Open design view of the JSP page and select the Filtering Select widget visible on the screen. 2) Drag the Dojo event publisher from the drawer to the JSP file. 3) The Dojo event publisher wizard displays (see figure 12). Figure 12: Dojo event publisher for Song_Portlet

4) In Object id field select dijit.byId(“filteringSelect_<portlet:namespace/>”) which returns the

reference of Dojo filteringSelect widget. 5) Enter the event name as onChange to ensure that a change of producer in drop-down list calls the

JavaScript function defined by “Publish function name”.


6) Enter the corresponding function name as publishSong, its skeleton is generated in JavaScript file for publisher portlet. It is the handler JavaScript function that publishes the event.

7) Enter the topic name as ‘song’. A topic connects subscriber and publisher portlets. Subscriber listens to the events based on the topic name. An event published to the topic alerts the subscriber. Ideally it should be a unique name to avoid name clashing.

8) Click Finish and it will add the call to the publishSubscribe() function in JSP file (code snippet 15) and define it in JavaScript (code snippet 16) file for the publisher portlet. This method essentially implements the outcome of publisher wizard.

Code Snippet 15: publishSubscribe in song.jsp file dojo.addOnLoad( function() { portletHelper_<portlet:namespace/> = new portlet.namespace_598889c733.portlethelper.Song({portlet: portlet_<portlet:namespace/>}); portletHelper_<portlet:namespace/>.publishSubscribe(); } );

Code Snippet 16: publishSubscribe in song.js file publishSubscribe : function() { dojo.connect(this.portlet.byDijitId("filteringSelect"),"onChange", this, "publishSong"); },

9) Add the business logic in publishSong function from code snippet 17, it displays the list of songs

in Dojo data grid for producer selected in Dojo Filtering Select widget.

Code Snippet 17: publishSong in song.js file publishSong : function(args) {var message = [ args ]; var handle = dojo.publish("song", message); },

Note: The numbers of arguments in publish function and subscribe function remains equal. If the function 'publishSong' has one argument, the corresponding subscriber will also have one argument.

Enabling subscriber for first use case To enable subscriber for the use case: 1) Open the design view of Song.jsp page and select Dojo data grid. 2) Drag Dojo event subscriber from the portlet drawer on to the selected Dojo data grid.


Figure 13: Dojo event subscriber for Song_Portlet

3) Name the subscriber topic as ‘song’. 4) Enter the function name as subscribeSong 5) Enter the number of arguments, it is one in this case. 6) Click finish. You will notice that the subscribeSong function is added in the song.js file and publishSubscribe function (code snippet 18) is added with a reference to subscriber function. Code Snippet 18: publishSubscribe in song.js file publishSubscribe : function() { dojo.subscribe("song", this, this.subscribeSong); }

7) Add your use case specific business logic for the subscribeSong function as per code snippet

19 and code snippet 20.


Code Snippet 19: subscribeSong in song.js file subscribeSong : function(args) { console.log("subscribeSong called"); this.populate(args); },

Function subscribeSong() performs the desired action on receiving the event. For your use case, to display the list of songs in data grid as an action invoke the populate() function(code snippet 20) in subscribeSong(). The populate() function fetches the list of songs from AlbumData.json and displays the result in the data grid. Code Snippet 20: populate in song.js file populate : function(id) { var filteringSelect = this.portlet.byDijitId("filteringSelect") var readStore = filteringSelect.store; var producer = null; readStore.fetchItemByIdentity({ identity : id, onItem : function(item) { producer = readStore.getValue(item,"producer"); } }); if (producer != null) { var grid = this.portlet.byDijitId("dataGrid"); var readStore = new dojo.data.ItemFileWriteStore ({url : this.url }); readStore.fetch({ query : {producer : producer},

onComplete : function(items, request) { var store = new dojo.data.ItemFileWriteStore(

{ data : {identifier : 'id', label : 'name', items : items } });

grid.setStore(null); grid.setStore(store); } }); }},

Enabling publisher for second use case For second use case, select a row from the Dojo data grid in Song_Portlet page to display the corresponding producer information in the target portlet. 1) Select the Dojo data grid in the song.jsp file.


2) Drag the Dojo Event Publisher widget from palette to the selected data grid. The event publisher wizard displays (see figure 14).

Figure 14: Dojo event publisher for row click event.

3) In Object id field select dijit.byId(“filteringSelect_<portlet:namespace/>”) which returns the

reference of Dojo data grid. 4) Enter the event as onRowClick. 5) Enter the function name as publishProducer(). 6) Enter the topic name as producer.

The code for connecting “Event name” to “Publish function name” is added to publishSubscribe() function (code snippet 21) in song.js 7) Add usecase specific business logic to publishProducer() function as per code snippet 22. Code Snippet 21: publishSubscribe in song.js file

publishSubscribe : function() { dojo.connect(this.portlet.byDijitId("dataGrid"),"onRowClick", this, "publishProducer"); },


Code Snippet 22: publishProducer in song.js file publishProducer : function(args) {

var grid = this.portlet.byDijitId("dataGrid"); var item = grid.getItem(args.rowIndex); var producer = grid.store.getValue(item, "producer"); var message = [producer]; var handle = dojo.publish("producer", message);

}

Enabling subscriber for second use case To display the producer details for the row selected in Dojo data grid of Song_Portlet page, enable the subscriber in Producer_Portlet. To enable the subscriber 1) Select the HTML table created in the producer.jsp file to display producer information. 2) Drag the Dojo Event Subscriber from the portlet drawer to it, the Dojo Event Subscriber wizard

displays (see figure 15). Figure 15: Dojo event subscriber for Producer_Portlet


3) Enter the topic name as producer, it is important that this matches topic name you entered for

producer. 4) Enter the subscriber function name as showProducerDetails(), which is the event handler for

target. 5) Number of arguments is one.

The code for the subscriber adds to the producer.js file, for which its prototype is mentioned in the publishSubscribe() function (code snippet 23) Code Snippet 23: publishSubscribe in producer.js file publishSubscribe : function() {

var main = this.portlet.byId("main"); dojo.subscribe("producer", this, this.showProducerDetails);

},

6) Add the business logic for showProducerDetails() function as per code snippet 24. Code Snippet 24: showproducerDetails in producer.js file

showProducerDetails : function(args) { var main = this.portlet.byId("main"); var producer = args; console.log("showProducerDetails called"); var name = this.portlet.byId("name"); var address = this.portlet.byId("address"); var phone = this.portlet.byId("phone"); var email = this.portlet.byId("email"); var imageDiv = this.portlet.byId("image"); var context = this.portlet.contextPath; if (producer != null) { var readStore = new dojo.data.ItemFileReadStore({ url : this.url }); readStore.fetch({ query : {producer : producer }, onComplete : function(items, request) { var item = items[0]; name.innerHTML = "<b>"+item.producer+"</b>"; address.innerHTML = "<b>"+item.address+"</b>"; phone.innerHTML = "<b>"+item.phone+"</b>"; email.innerHTML = "<b>"+item.email+"</b>"; var image = context + "/images/"+item.image; imageDiv.innerHTML = "<img src='" + image + "'/>"; } }); } }


In the above function, note the use of itemFileReadStore, so the url is set to the producer.json file in portlet helper class. Add the following line of code to the dojo.addOnLoad function in the producer.jsp file as you did in first JSP file. portletHelper_<portlet:namespace/>.setUrl ('<%=renderResponse.encodeURL(renderRequest.getContextPath() + "/json/producer.json")%>');

Now define the setUrl method in the corresponding JavaScript file (producer.js in this case, see code snippet 25). Code Snippet 25: setURL function in producer.js file url:null, setUrl : function(url) { this.url = url; },

Deploying the portlet on WebSphere Portal Now you are all set to publish the portlet application on server. To publish the project on server you first need to create the server instance and start the server. To create the server instance, 1) Go to File -> New -> Other -> Server to launch the server creation wizard (shown in figure

16). 2) Select WebSphere Portal v7.0 Server and provide the hostname, click next.


Figure 16: Server creation wizard

3) On WebSphere Settings wizard (figure 17), provide the port numbers to connect to the server, server credentials and click Next.


Figure 17: WebSphere settings dialog

4) On Portal Settings wizard (figure 18), provide the server credentials required to publish the

project to the server and click Next.


Figure 18: Portal settings dialog

5) Click Finish. 6) If server is not already started, right click the server instance created above and select Start. 7) After the server starts, right-click on portlet project and select Run on server (figure 19) to

display the Run On Server wizard.


Figure 19: Run On Server option

8) In the Run On Server wizard (figure 20), select the server instance you created before and

click Finish.


Figure 20: Run on server wizard

Executing the usecase on the server

The Run On Server wizard publishes the project on the server and places it on a portal page labeled as Rational Components and opens the browser instance rendering the portlet project project on the server. You will see two portlets, Song and Producer on the page. In the Song_Portlet, there will be no initial selection in the drop-down list, all the songs will be listed in the data grid. Similarly, since there is no default selection in the first portlet, the Producer_Portlet would also have no producer details. Select the producer name from the drop-down list to filter the result in data grid in first portlet. Now click on a row or a producer name in data grid, and you will see that the selected producer information is displayed in the target portlet. The outcome is shown as below:


Figure 21: Initial output shown in web browser

Figure 22: Output showing inter-portlet communication


Summary In this article you have learned about the integration of Struts 2 framework based portlet application for WebSphere Portal by using IBM Rational Application Developer. The use case that you followed, created a portlet project in IBM Rational Application Developer and then the various steps to configure the portlet project to use Struts 2 framework by adding the desired libraries. This was followed by changes required to portlet deployment descriptor, mapping action and results tags in the struts.xml file and accordingly creating an action class to return the appropriate view. After the struts configuration you enabled the two portlets to communicate using Dojo inter-portlet communication through portal Dojo tooling provided by IBM Rational Application Developer. Finally, you published this portlet project to WebSphere Portal Server without leaving your development workspace to visualize and test the application you have created on the server.

Resources 1) Get information about Rational® Application Developer and how to use it What's new in Rational Application Developer v 8.0.x? IBM Rational Application Developer v8 Information center. 2) For product documentation about WebSphere Portal Server v 7.0 IBM WebSphere Portal 7 Product Documentation. Documentation link for WebSphere portal. 3) How to download Struts libraries and its information Apache official site 4) Dojo toolkit reference guide documentation Dojo Toolkit reference guide. 5) Introduction to JSON JSON information

developing struts2 inter-portlet communication based ... · struts2 source portlet containing dojo...

Documents