Create a multichannel composite portlet application using Rational Application Developer 8.0.4: Part 2. Develop the sample portlet project

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 2 of this five-part series shows you how to use IBM Rational Application Developer, Version 8.0.4 or later, to create a multichannel portlet application.

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.



14 February 2012

Also available in Chinese

Create the project

The first step in this part of the tutorial is to create a multichannel portlet project by following these steps:

  1. From the File menu in IBM® Rational® Application Developer, Version 8.0.4 or later, select New > Project > Portlet Project.
  2. Give the project a name. For this demonstration, use DealsProject.
  3. For Target Runtime, select WebSphere Portal 7.0 from the drop-down menu.
  4. Change the portlet project name to Deals.
  5. For Configuration, click Modify and then select JSR286 Faces from the drop-down menu (see Figure 1.)
  6. Click OK.
Figure 1. New Portlet Project wizard
Wizard plus Configuration window
  1. For Devices Supported, click Modify, and choose these options to add support for smart phones: BlackBerry, iPhone, and Android (see Figure 2).
  2. Click OK.
Figure 2. Devices Supported window
New Portlet Project view next to pop-up window

Tip:
You can also add your own devices by clicking the Add button in the Modify Portlet Project Device Support window and then specifying user agents. For example, you can add a Symbian user agent for Nokia devices.

  1. Click the Finish button in the New Portlet Project wizard.

Notice that two portlet JavaServer Pages (JSPs) are now created that correspond to a single portlet, such as Deals (see Figure 3).

Figure 3. JSP files
Automatically generated JSP files.

When a request for this portlet comes from a desktop browser, DealsView.jsp is served by the portlet application. When the request for the same portlet comes from a selected portable device (as in Figure 2), the DealsView_Devices.jsp is served. This provides the flexibility of developing, designing, and choosing the content of the portlet UI according to the targeted devices. For example, you can add a UI to Deals-View_Devices.jsp, which is optimized for viewing on a smart phone. Later on in this article, you’ll see how to design and choose separate data for both of the JSPs.


Integrate DB2 data

Now that you have created a multichannel portlet application, you can design the individual JSPs. To begin, you'll create a Service Data Object (SDO) that will use data from tables in an IBM® DB2® database.

Create an SDO

To create an SDO, follow these steps:

  1. Open the DealsView.jsp file.
  2. Open the Page Data view.
  3. Right-click on the SDO Relational Records node, and choose New > SDO Relational Record List, as shown in Figure 4. This will invoke the Add Relational Record List window shown in Figure 5.
Figure 4. Creating an SDO Relational Record List
Shows selections described and a drop-down menu
  1. Enter dealsInformationList as the name of the Relational Record List.
Figure 5. The Add Relational Record List window
SDO Relational Record List dialog window
  1. Click Next to get to the Add Relational Record List page.
  2. Click the New button as shown encircled in Figure 6.
Figure 6. Creating a database DB connection
New button to open drop-down menu, next to Name

Clicking New opens the Select a Connection dialog window shown in Figure 7.

Figure 7. Choose a database connection
DB connection selection

In this dialog window, you can choose the database from which you want to create the SDO list. In this case, you are using the SAMPLE database that is included with DB2 Version 9.5 (See the Setup section of Part 1).

  1. Choose the SAMPLE entry, and click Finish (you might have to authenticate by supplying your username and password).

Clicking Finish returns you to the Add Relational Record List page, where you can see the various schemas inside of the SAMPLE database. Next, you will choose the schema that contains the targeted tables.

  1. Expand the ADMINISTRATOR schema, and choose the DEALS table.
Figure 8. Choose the DB2 table
Record List Properties view
  1. Click Next, and you will see all of the columns of the DEALS table, as shown in Figure 9.
Figure 9. Column selection window
Select the columns
  1. Under "Advanced tasks," click the link that says Add another database table through a relationship, which is highlighted in Figure 9.

Note:
This is so that this record list can fetch data from multiple tables in a single query. This is similar to the Join operation.

Clicking on the "Add another database table…" link will bring up the Create Relationship dialog window shown in Figure 10.

Figure 10. Create Relationship window: Choose Your Relationship view
Create a database connection
  1. Choose the ACCOUNT_DETAILS table, and click Next to bring up the Edit Your Relationship page shown in Figure 11.
  2. From the Multiplicity drop-down menu, choose the *-> FOREIGN KEY -> PRIMARY KEY option.
  3. Under the "Key column mappings" group, click on the column labeled DEALS primary key columns and choose ACCOUNT_ID.
Figure 11. Create Relationship page
Edit Your Relationship view
  1. Then click Finish.
  2. Similarly, map the DEALS table to the CONTACT_PERSON table. For this case, under "DEALS primary key columns," select CONTACT_ID, as Figure 12 shows.
    1. In the Add Relational Record List dialog window, choose the fields mentioned below (which are also shown in the Figure 13).
    2. Expand the DEALS node and check the option for PrimaryKey: CC1294637933390.
    3. Again, under the DEALS node, expand the Relation: ACCOUNT_DETAILS_DEALS node. Further expand the ACCOUNT_DETAILS node, and check the following columns:

      PrimaryKey: CC1294638386593
      ACCOUNT_ID
      NAME
    4. Again, under DEALS node, expand the Relation: CONTACT_PERSON_DEALS node, and then further expand the CONTACT_PERSON node and check the following columns:

      PrimaryKey : CC1294638513093
      CONTACT_ID
      NAME
    5. Under DEALS node, check the following columns:

      DEAL_ID
      ACCOUNT_ID
      CONTACT_ID
      STATUS
      LAST_CONTACT_DATE
      LAST_CONTACT_MODE
      NEXT_CONTACT_DATE
      NEXT_CONTACT_MODE
      NEXT_STEP
Figure 12. Mapping tables columns
CONTACT_ID: Long selected
Figure 13. Choosing the table columns
Boxes checked under Relation: CONTACT_PERSON_DEALS
  1. Click Finish.

Now, if you look under the SDO Relational Records node in the Page Data view, you should see the newly created SDO Relational Record List, as shown in Figure 14.

Figure 14. SDO Relational Record List in the Page Data view
Page Data tab open

Now that you have created the SDO Relational Record List, the next step is to use data from the record list. We will now design both the desktop and smart phone portlet JSPs

Design the portlet JSP for the desktop

To design the desktop JSP, follow these steps:

  1. Open the DealsView.jsp file in the Page Designer.
  2. Open the Page Data tab.
  3. In the SDO Relational Records folder, under dealsInformationList (Service Data Object), choose the dealsInformationList (DEALS) node shown in Figure 15.
Figure 15. Drag and drop the SDO record list
Node selected in SDO Relational Records category
  1. Drag it onto the DealsView.jsp file.

This will bring up the Insert Record List dialog window, where you can choose which columns to display in the DealsView.jsp file.

  1. Click the button at the extreme right (the button with two dots) for the configure icon for the DEALS_ACCOUNTS_DETAILS field, which is also highlighted in red in Figure 16.
Figure 16. Configure fields
Configure Data Controls window

This will bring up the Insert Records dialog window in Figure 17.

  1. In the Insert Record dialog window shown in Figure 17, in the Configure Data Controls view, check only the Name (java.lang.String) field check box.
  2. Also, you can enter Account Name to change the label name of that field.
Figure 17. Insert Record dialog window
Choose the columns to be displayed
  1. Click Finish.
  2. This will take you back to Insert Record List dialog window. Click the button in the extreme right (the button with two dots) for configure icon for the DEALS_CONTACT_PERSON field, which is also highlighted in Figure 18.
Figure 18. Configure fields
Icon = second square from top, Control Type column
  1. Again, choose only the Name field check box in the Configure Data Controls view, as shown in Figure 19.
  2. Also, change the label of that field to Contact Name.
Figure 19. Insert Records dialog
Choose the columns to be displayed
  1. Click Finish.

This will take again us back to Insert Record List dialog window.

  1. Make sure that the following fields are selected in the Insert Record List dialog window, which is also shown in Figure 20:
    DEALS_ACCOUNTS_DETAILS
    DEALS_CONTACT_PERSON
    STATUS
    LAST_CONTACT_DATE
    LAST_CONTACT_MODE
    NEXT_CONTACT_DATE
    NEXT_CONTACT_MODE
    NEXT_STEP
Figure 20. Selected columns
Columns to be displayed in JSP
  1. Click Finish. This will automatically generate the code to display a data table for the list of selected fields in the DealsView.jsp file, as shown in Figure 21.
  2. Press CTRL+S to save your changes.
Figure 21. Auto-generated code in the portlet JSP file
Generated JSP code in bottom pane of file

Design the portlet JSP for smart phones

  1. Follow steps 1-11 of the section headed Design the portlet JSP for the desktop.
  2. Because the screen of a smart phone is much smaller than that of a desktop browser, choose few fields, as shown in Figure 22.
Figure 22. Choosing JSP columns
Column Name, Label, Control Type columns
  1. Click Finish. This will auto-generate the code to display the list of selected fields in the DealsView_Devices.jsp file, as shown in Figure 23.
  2. Click CTRL+S to save your changes.
Figure 23. Auto-generated code in the device portlet JSP
Generated JSP code at the bottom of the screen capture

Publish the project

You will now publish and test the respective desktop and mobile versions of the portlet project, starting with the desktop version.

Publishing to a WebSphere Portal 7.0 server

Note:
For viewing the mobile version running in the server, you will need to configure the mobile theme as described in the Setup section, in Part 1 (see this link: "View more content in this series").

To publish the portlet project on the server, follow these steps:

  1. Right-click on the DealsProject project, and select Run As > Run on Server.
  2. Choose Manually define a new server, and select WebSphere Portal v7.0 server from the list, as shown in Figure 24.
Figure 24. Server definition
Run on Server dialog window
  1. Click Next.
  2. Select the Manually provide connection settings check box, and provide the user ID and password for the WebSphere Application Server where WebSphere Portal Server is installed.
  3. Click Next. Once again, provide the user ID and password for the WebSphere Portal Server.
  4. Click Next, and then click Finish.

In the Servers view, a new instance of WebSphere Portal v7.0 server will be created, and the portlet project will be published to it. The application will open in a browser, as shown in Figure 25, to show the desktop version of the portlet JSP, such as the DealsView.jsp.

Figure 25. Portlet rendered in a desktop browser
Deals view with 8 columns of information

Publish to a Mobile Browser Simulator

See Part 1 for setup instructions for the mobile theme.

To view the mobile version of the portlet application, follow these steps:

  1. Right-click on the DealsProject project, and select Run > Run on Mobile Browser Simulator.
  2. Edit the page layout, and place the Deals portlet on the newly created portal page. Choosing this option will launch MBS in the browser.

Figure 26 shows how the page renders in the MBS. Notice how you can simultaneously test a single portlet in different types of devices in the MBS.

Figure 26. Portlet rendered in MBS
Apple iPhone, RIM Blackberry, Samsung Google views

Next in this series

Part 3 of this five-part series of articles will take you through the Microsoft SharePoint integration. To be notified when subsequent parts of this series are published, just follow the Rational Community blog.


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=793070
ArticleTitle=Create a multichannel composite portlet application using Rational Application Developer 8.0.4: Part 2. Develop the sample portlet project
publish-date=02142012