Create a multichannel composite portlet application using Rational Application Developer 8.0.4: Part 4. Enable portlets to share events data

Multichannel portlet applications present appropriate views when run from different devices. This means that when you view it from a desktop browser, the portlet presents the desktop version. Similarly, when you view it from a smart phone, you see the mobile version of the portlet. Part 4 of this five-part series shows you how to use IBM Rational Application Developer, Version 8.0.4 or later, to enable eventing, or event handling, to share data between portlets.

Share:

Gaurav Bhattacharjee, Technical Lead, Rational Application Developer Portal Tools, IBM

Gaurav Bhattacharjee 照片Gaurav Bhattacharjee is a technical lead in the IBM India Software Labs in Delhi, India. He works with the Rational Application Developer Portal Tooling team in the IBM Software Group, IBM Collaboration Solutions.



21 February 2012

Also available in Chinese

Java Specification Request (JSR) 286 introduced event-based coordination for portlets. JSR 286 allows portlets to send and receive events. Some portlets can define events to be published, and other portlets define which ones can receive such events. IBM® Rational® Application Developer provides the tools to create such events for portlets. In this part you will see how to enable event handling, for portlets in Rational Application Developer. These event-enabled portlets are wired together at run time to create a connection between the portlets. This tutorial, which is Part 4 of a five-part series, concentrates on enabling events for existing portlets, creation of new event-enabled portlets, and wiring together two event-enabled portlets so they can share data.

  • The first portlet, the Deals portlet, acts as an event publisher portlet i.e. it will emit an event to transfer data.
  • The second portlet, the ContactInformation portlet, acts as an Event Subscriber portlet, which receive an event and invoke a method that processes the exchanged data.

This is the flow of events:

  1. The Deals portlet publishes an event to pass the Contact Name to the ContactInformation portlet.
  2. The ContactInformation portlet receives an event to invoke a method that processes the data, for example, the Contact Name.
  3. Based on the Contact Name, an appropriate SDO method is invoked to fetch information from the CONTACT_PERSON DB2 table.

Create a new portlet

To enable eventing (event handling) between two portlets, the first step is to create a new portlet:

  1. Right-click on the DealsProject and select New > Portlet.
  2. Enter ContactInformation as the portlet name.
  3. Also, make sure that the portlet type is set to Faces Portlet. (See Figure 1.)
Figure 1. New Portlet creation page
Creation window for a new portlet
  1. Click Next, and make sure that the Generate a custom portlet class option is checked, as Figure 2 shows.
Figure 2. Option to generate a custom portlet class
Also shows Package prefix and Class prefix fields
  1. Click Finish.

This will create a JSP called ContactInformationView.jsp and a portlet class named ContactInformationPortlet.java. Now that you have two portlets in place, you can enable them for \event handling (called eventing in the JSR).


Enable the source portlet to publish an event

To enable the Deals portlet to publish an event, follow these steps:

  1. Open the DealsView.jsp file.
  2. In the palette view, locate Event Source Trigger in the Portlet drawer.
  3. Click Event Source Trigger and drag it onto the Name expression in the Contact Name column, as shown in Figure 3.
Figure 3. Drag the event source trigger in the JSP
Inserting event source trigger in the JSP

This invokes the Insert Event Source Trigger dialog window shown in Figure 4.

Figure 4. Insert Event Source Trigger dialog window
Event source trigger insertion dialog
  1. Click the New Event button to create a new event to publish.
  2. In the "Event – Enable this portlet to Publish events" dialog window that opens, for Event Name, enter ContactId, as shown in Figure 5.
Figure 5. Event creation dialog window
Describe the event being published
  1. Click Finish to populate the Insert Event Source Trigger window shown in Figure 6.
Figure 6. Event Source Trigger dialog
Fields for UI controls that trigger the event
  1. Type #{vardealsInformationList.CONTACT_ID} in the Value to Send field.
  2. Click Finish.

The NAME field will be hyperlinked, as shown in Figure 7.

Figure 7. Hyperlinked column
Contact Name column contains linked NAME field

Also notice how the Deals portlet node is decorated with a Publish event icon (blue arrow preceded by a yellow flag) in the Enterprise Explorer view. The event name is listed below it as shown in Figure 8.

Figure 8. Event decorated node
Node decorated with event information
  1. Save the file.

Now you will need to create a JavaServer Faces Managed Bean to hold the data being exchanged between portlets through eventing.

  1. Right-click the Java Resources node, and select New > Class, as shown in Figure 9.
Figure 9. Creating a new class
Two drop-down menus from Java Resources
  1. Specify the Package as com.ibm and Name as ContactBean, as shown in Figure 10.
  2. Click Finish.
Figure 10. Specify class name
Java Class view in the New Java Class window
  1. When the ContactBean.java file has been created and opens in the editor, replace its contents with the code in Listing 1.
Listing 1. Replace contents of ContactBean.java file with this code
      package com.ibm;

   public class ContactBean {
	long id;
	String picURL;
	public long getId() {
		return id;
	}
	public void setId(long id) {
		this.id = id;
	}
	public String getPicURL() {
		return picURL;
	}
	public void setPicURL(String picURL) {
		this.picURL = picURL;
	}
    }
  1. Open the DealsView.jsp file.
  2. 15.In the Page Data View, right-click on Faces Managed Bean and choose New > Faces Managed Bean as shown in Figure 11.
Figure 11. Creating a Faces managed bean
Faces Managed Bean option on drop-down menu
  1. Specify Name as contactbean, Class as com.ibm.ContactBean, and for Scope, select Session from the context menu, as shown in Figure 12.
Figure 12. Specifying Faces Managed Bean properties
Specifying Bean properties
  1. Click Finish.

Create an SDO Relational Record

Enabling the ContactInformation portlet for eventing is a two-step process. First, you need to create an SDO Relational Record using the DB2 table CONTACT_PERSON, and then you need to enable ContactInformation to receive an event.

Note:
Creation of a Services Data Object (SDO) has nothing to do with event enabling. You are creating an SDO because of the requirements of your use case.

To create a SDO Relational Record, follow these steps:

  1. Open ContactInformationView.jsp in the Page Designer, and open the Page Data view.
  2. Right-click on SDO Relational Records, and choose New > SDO Relational Record.
Figure 13. SDO Relational Record creation
Creating a SDO Relation record
  1. In the Add Relational Record dialog window, provide contactInformation as the name, and click Next.
Figure 14. Add Relational Record dialog window
contactInformation typed into Name field
  1. For table, choose the CONTACT_PERSON table under the ADMINISTRATOR schema, and click Next (see Figure 15).
Figure 15. Choose the table
Add Relational Record > Record Properties view
  1. Choose all the columns, as shown Figure 16, and click Finish.
Figure 16. Select all of the columns
Columns to include in result

As Figure 17 shows, a new Relational Record is created under the SDO Relational Records node in the Page Data view.

Figure 17. SDO record in the Page Data view
Screen capture of node

Generate JSP code

Now that you have created the SDO Relational Record, you need to drag the Relational Record to the portlet JSP to be able to use data from the CONTACT_PERSON table:

  1. Drag the contactInformation (CONTACT_PERSON) node to the portlet JSP (ContactInformationView.jsp) to invoke the Insert Record dialog window shown in Figure 18.
Figure 18. Insert Record dialog window
Configure Data Controls view
  1. Uncheck the column CONTACT_ID and click Finish.

Notice that the code is generated in the portlet JSP.


Enable the target portlet to receive the event information

Now that you have created and generated the code to use data from the CONTACT_PERSON table, you need to put together a final piece: passing a contact ID to the ContactInformation portlet. This contact ID will be used to fetch a record of a particular person from the CONTACT_PERSON table to display the relevant information in the ContactInformation portlet. Recall that the Deals portlet publishes an event by the name of ContactId to pass the contact ID. Now you need to enable the ContactInformation portlet so that it subscribes to that event.

  1. Locate the ContactInformation portlet under Portlet Deployment Descriptor in the Enterprise Explorer.
  2. Right-click on the portlet, and select Event > Enable this Portlet to Process Event (see Figure 19).
Figure 19. Enable the portlet to process events
Selections in two drop-down menus

This invokes the "Events – Enable this Portlet to Process events" dialog window.

  1. Select ContactId from the Event Name drop-down menu, as shown in Figure 20.
Figure 20. Enable this Portlet to Process events dialog
View title: Describe the event being processed
  1. Click Finish.

Notice that the ContactId event node under the ContactInformation portlet node is decorated with a Subscribe event icon (yellow flag preceded by green arrow), as shown in Figure 21.

Figure 21. Decorated event node
Node decorated with event information

The previous action also generates a processEvent method in the ContactInformationPortlet.java, the portlet class for the ContactInformation portlet. Listing 2 shows the generated code.

Listing 2. The generated processEvent method
public void processEvent(EventRequest request, 
			EventResponse response) throws 
			PortletException, java.io.IOException {	
     super.processEvent(request, response);
     FacesContext facesContext = FacesContext.getCurrentInstance();
     Event sampleEvent = request.getEvent();
     if(sampleEvent.getName().toString().equals("ContactId")) {
	 Object sampleProcessObject = sampleEvent.getValue();
	}
    facesContext.release();
   }

The processEvent method is invoked for each event targeted to the portlet, with an EventRequest and EventResponse object.

Listing 3 modifies the code in Listing 2 to add the business logic to the processEvent method.

Listing 3. Custom code added inside the processEvent method
    public void processEvent(EventRequest request, 
			    EventResponse response) throws 
			    PortletException, java.io.IOException {	
	super.processEvent(request, response);
	FacesContext facesContext = FacesContext.getCurrentInstance();
	Event sampleEvent = request.getEvent();
	if(sampleEvent.getName().toString().equals("ContactId")) {
	 Object sampleProcessObject = sampleEvent.getValue();
	 Application app = facesContext.getApplication();
	 ValueBinding binding = app.createValueBinding("#       
                              {contactbean}");
	 ContactBean mybean =(ContactBean) binding.getValue 
                            (facesContext);
	 mybean.setId(Long.parseLong(sampleProcessObject.toString()));
	}

In this listing, the code simply gets an instance of Faces managed bean, ContactBean, that you created earlier. This instance contains the contact ID that is transferred by the Deals portlet through eventing. The instance of the ContactBean, itself, is stored in a session variable so that it can be reused across the portlets, spanning different requests.


Wire the portlets together

To exchange data on invocation of events, you need to wire the portlets together so that they can exchange data.

  1. Perform the Run on Server operation on the project as you did earlier. Figure 22 shows how the rendered portlets look in the browser.
Figure 22. Two portlets rendered in browser
Deals and Contact Information portlets in browser
  1. Now, to wire the portlets together, click the Edit Page option from the Actions menu, as shown in Figure 23.
Figure 23. Edit Page option
Page Edit selected under Actions

Note:
This Edit Page option is present only when the theme is the PageBuilder one that is included with IBM® WebSphere® Portal, Version 7.0. For any custom themes, you can wire together the portlets by using the portal administration console wiring tool.

  1. Right-click on the small arrow symbol for the drop-down menu (shown in Figure 24) at the top-left of the Deals portlet window, and choose the Edit Wiring menu item.
Figure 24. Icon to choose the Edit Wiring option
Option to choose Edit Wiring
Figure 25. Edit Wiring option
Edit Wiring selected on drop-down menu
  1. Choosing the Edit Wiring menu item brings up the Wiring interface shown in Figure 26. The interface shows the available events that can be wired together. In this interface, you will find the events that you created earlier.
  2. In the Wiring interface, choose the {http://DealsProject/}/ContactIdpublisher event under the Deals icon that appears under the Select content to send heading.
  3. Choose the {http://DealsProject/}/ContactIdsubscriber event under the ContactInformation icon that appears under the Select a widget to receive content heading
  4. Click Done.
Figure 26. Wiring Interface
Wiring tool
  1. Click the Save & Exit button.
  2. Now click on the individual Contact Names in the Deals portlet, and you will see the relevant information displayed in the Contact Information portlet (Figure 27).
Figure 27. Event-enabled portlets sharing data
Wired portlets sharing data

Next in this series

This concludes Part 4 of this five-part series. Part 5 shows how to create portlets that can fetch data from IBM® Connections.


Download

DescriptionNameSize
Scenarios and use cases for the seriesscenarios_use_cases_sample.zip5MB

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Rational software on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Rational, Mobile development
ArticleID=794740
ArticleTitle=Create a multichannel composite portlet application using Rational Application Developer 8.0.4: Part 4. Enable portlets to share events data
publish-date=02212012