Create a multichannel composite portlet application using Rational Application Developer 8.0.4: Part 5. Create portlets that display data from IBM Connections

Multichannel composite 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. This final part of this five-part series shows you how to use IBM Rational Application Developer, Version 8.0.4 or later, to create portlets that display data from IBM Connections.

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

Integrate IBM Connections data

IBM® Connections® social software for businesses easily connects employees, partners, and customers. In this final part of this five-part series, you will create a portlet that fetches data from Connections. As with IBM® DB2® and Microsoft SharePoint data covered in previous parts of this tutorial (see More content in this series), you will wire the Deals portlet to this new portlet to fetch data from Connections, based on the data passed by the Deals portlet.

Important:
Before proceeding with this article, make sure that you have followed the Connections setup instructions in Part 1.

Here is a brief list of things that you will do to use data from Connections.

  1. Create a new Portlet named Connections. You also need to create a custom portlet class while creating the portlet and name it ConnectionsPortlet.
  2. Define a publisher event called AccountName in the Deals portlet.
  3. Define a subscriber in the Connections portlet that subscribes to AccountName event.
  4. Enable the Connections portlet to write business logic to fetch artifacts from Connections. This can be done by enabling the server-side technologies feature for this portlet.
  5. Create an action that triggers the event AccountName event, and, in turn, invokes the event handler, which is the processEvent method in the Connections portlet.
  6. Generate JavaServer Pages (JSP) code to display the artifacts fetched in step 4.
  7. Wire the two portlets together.

Tasks 1, 2, 3, and 6 are similar to what were already discussed while creating SharePoint-related Portlets. So this section covers steps 4, 5, 6 and 7.

Enable server-side technologies for the Connections portlet

Assuming that you have already created the Connections portlet, here are the steps that you will need to follow to enable server side technologies feature.

  1. Right-click the DealsProject project, and choose Properties.
  2. Open the Project Facets tab.
  3. Choose Server Side Technologies facet under the Web 2.0 category, as shown in Figure 1.
Figure 1. Choose the server-side technologies facet
Server-side technologies feature
  1. Click OK.

This makes available the Apache Abdera APIs that are required to connect to RESTful services provided by IBM Connections.

Create the action that triggers the AccountName event in the Deals portlet

Before creating an action that triggers an event from the Deals portlet, let's just go through the use-case. The flow of event is as follows:

  1. The Deals Portlet publishes an event to pass the Account name to the Connections portlet.
  2. The Connections portlet receives an event to invoke a method that processes the data i.e. the Account name. Based on the Account name the relevant activities are fetched from a Connections server.

Now, to create an action that triggers the AccountName event, follow these steps:

  1. Open the DealsView.jsp in the Page Designer.
  2. Open the Portlet drawer in the Palette view.
  3. Click Event Source Trigger, and drag and drop it onto the Name expression in the Account Name column.

This invokes the Insert Event Source Trigger dialog window. Figure 2 shows what the values in the Insert Event Source Trigger dialog should look like after you have defined the AccountName event.

Tip:
Defining the event AccountName event is similar to defining of the ContactId event in the Part 4 of this series.

Figure 2. Insert Event Source Trigger Dialog window
Event source trigger insertion dialog
  1. Click Finish.

The NAME field will be hyperlinked, as shown in Figure 3. Notice how the Deals portlet node is decorated with a Publish event icon for the AccountName event.

Figure 3. Hyperlinked column
Node decorated with event information

Now you need to enable the Connections portlet to receive the event AccountName. The steps for doing this are pretty much the same that you followed for enabling the ContactInformation portlet to receive the event ContactId in Part 4. So this is not covered in detail here. After you enable the Connections portlet to receive the AccountName event, open the ConnectionsPortlet.java class, and do the following:

  1. Locate the processEvent method, and replace its contents with the code shown in Listing 1.
Listing 1. New code for 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("AccountName")) {
		Object sampleProcessObject = sampleEvent.getValue();
		Application app = facesContext.getApplication();
		fetchFromConnections(sampleProcessObject.toString(), 
            app);
	  }
   }
  1. Create a new class called ConnectionsList under the com.ibm.dealsproject package.
  2. Replace the contents of this class with the code in Listing 2.
Listing 2. Code for new ConnectionsList class
    package com.ibm.dealsproject;

  import java.util.List;

  public class ConnectionsList {

	List connectionsList;

	public List getConnectionsList() {
		return connectionsList;
	}

	public void setConnectionsList(List connectionsList) {
		this.connectionsList = connectionsList;
	}
   }

This class is used to store all of the matching activities from Connections that correspond to an Account name. Listing 3 shows use of this class.

  1. Create a Faces Managed Bean instance, using the ConnectionsList class to hold the list of activities. This is done in a similar fashion as you did earlier for the ContactBean class in Part 3 of this series.
  2. Enter these values (also shown in Figure 4):
    • Name: connectionsList
    • Class: com.ibm.dealsproject.ConnectionsList
    • Scope: Session (select from the drop-down menu)
Figure 4. Specifying Faces Managed Bean properties
Specifying Bean properties
  1. Copy and paste the code in Listing 3 into the ConnectionsPortlet.java file. This method, fetchFromConnections, is called by the processEvent method along with the account name on which a user clicks in the Deals portlet. You can also find the ConnectionsPortlet.java file in the Deals project, within the sample project.
Listing 3. Code for the fetchFromConnections method
   public static void fetchFromConnections(String accountName,  
   Application app){
	List activityList = new ArrayList();
	Abdera abdera = new Abdera();
	AbderaClient client = new AbderaClient(abdera);
	ConnectionsDataAccess connectionsDataAccess =  
      ConnectionsDataAccess.getInstance();
	
      //information fetched from connection.properties file	
      String userName = connectionsDataAccess.
                        getConnectionsUserName();
	String password = connectionsDataAccess.
                        getConnectionsPassword();
      String url = connectionsDataAccess.
                   getConnectionsUrl();

	try {
	  String activityHome = url+"/activities/";
	  String activityUrl = activityHome+"service/html/
                             mainpage#activitypage,";
		
	  client.addCredentials(activityHome, null, null, new 
            UsernamePasswordCredentials(userName,password));
	  ClientResponse response = client.get(activityHome+"service/
        atom2/everything");
			
	  Document doc = response.getDocument();
	  Feed feed = (Feed)doc.getRoot(); 
            
	  List list = feed.getEntries();
	  for (int i = 0; i > list.size(); i++) {
	  Entry entry = (Entry) list.get(i);
	  if(entry.getTitle().contains(accountName)){
		String id = entry.getId().toString();
		String arr[]=id.split(":");
		id = arr[arr.length - 1];

		ConnectionsBean mybean = new ConnectionsBean();
		mybean.setUrl(activityUrl+id);
		mybean.setContent(entry.getContent());
		mybean.setTitle(entry.getTitle());
		activityList.add(mybean);
	      }
	     } 

          } catch (URISyntaxException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} /*catch (MalformedURLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}*/ catch (ParseException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} /*catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} */
		
        if(!activityList.isEmpty()){
	    FacesContext facesContext = 
          FacesContext.getCurrentInstance();
	    ValueBinding binding = app.createValueBinding("# 
          {connectionsList}");
	    ConnectionsList connectionsList = (ConnectionsList)
                         binding.getValue(facesContext);
	    connectionsList.setConnectionsList(activityList);
	    facesContext.release();

	    }
	}

The code in Listing 3 fetches activities data that corresponds to an account name from IBM Lotus Connections, using the API provided by the Connections server. The fetched activity information is stored in a ConnectionsBean object, which in turn is added to an ArrayList object. Finally, the ArrayList object is set in the Faces managed object: the ConnectionsList object that you created earlier. Using this Faces Managed object, you can generate the JSP code to display the activities data in the portlet

Generate JSP code

To generate the JSP code for displaying the activity data that was fetched in the Listing 3, follow these steps:

  1. Open the ConnectionsView.jsp file in the Page Designer.
  2. Open the Page Data view, and expand the connectionsList node, as shown in Figure 5.
Figure 5. Expanded Faces Managed Bean node
Faces Managed Bean node in Page Data view
  1. Double-click the Contained Type node to open the Choose Contained Type dialog window.
  2. Type ConnectionsBean, and choose the ConnectionsBean object in the matching items.
Figure 6. Choose Contained Type dialog window
ConnectionsBean selected
  1. Click OK and Save the file.
  2. Now drag the Contained Type node to the JSP. This opens the Insert JavaBean dialog window shown in Figure 7.
  3. Deselect the url check box, and change the labels as listed here and shown in Figure 7:
    • Change title to Activity.
    • Change content to Activity Content.
Figure 7. Insert JavaBean window
JavaBean insertion dialog
  1. Click Finish, and Save the file.

This will automatically generate the code to display the list of selected fields in the ConnectionsView.jsp, as shown in Figure 8.

Figure 8. Content in the JSP
Activity and Activity Content
  1. Open the Palette view, and expand the Enhanced Faces Component drawer.

    Note: To open the Palette view, you need to click the Window menu item and then click the menu bar item Show View, and then the sub-menu item Palette, as shown in Figure 9 (Window > Show View > Palette).
Figure 9. Open the Palette view
Two Windows drop-down menus with selections stated
  1. Choose Link (Figure 10) from the Enhanced Faces Component palette drawer, and drag it over the {title} expression to invoke the Configure URL window.
Figure 10. Link item in the palette
Link chosen from several options
  1. Enter #{varconnectionsList.url} in the URL field, and leave the Label field blank.

This inserts a URL in the title expression, as shown in the Figure 11.

Figure 11. Updated content in JSP
Updated jsp
  1. Run the DealsProject on server.

This opens the browser and renders the portlet application.

  1. Perform a wiring operation again, as you did previously in Part 4 of this series. This time, wire together the Deals portlet and the Connections portlet.

Figure 12 shows what the wiring UI will look like.

Figure 12. Wiring interface
Select content to send, widget to receive content
  1. Click on an account name in the Deals portlet, and watch the activities information that gets displayed in the Connections portlet. See Figure 13.
Figure 13. Event-enabled portlets sharing data
Wired portlets sharing data

Summary

This five-part tutorial described the creation of a full-featured, composite multichannel portlet application that uses data from a variety of data sources, such as an IBM DB2 database, a Microsoft SharePoint server, and IBM Connections social business software. It provided a step-by-step guide for creating a portlet user interface for a desktop browser, as well as for a smart phone browser. It also guided you through various of other aspects of portlet application development, including creation of a Service Data Object (SDO) for using data from a DB2 table, use of the web services provided by Microsoft SharePoint server, and use of APIs provide by IBM Connections. Then it showed how to write your own business logic for fetching data from the Microsoft SharePoint server, as well as from IBM Connections. It demonstrated enablement of event handling between different portlets, using the tools in Rational Application Developer. It also covered wiring together different portlets by using the wiring utility provided in WebSphere Portal 7.0 software.


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
ArticleID=794786
ArticleTitle=Create a multichannel composite portlet application using Rational Application Developer 8.0.4: Part 5. Create portlets that display data from IBM Connections
publish-date=02212012