Create the project
The first step in this part of the tutorial is to create a multichannel portlet project by following these steps:
- From the File menu in IBM® Rational® Application Developer, Version 8.0.4 or later, select New > Project > Portlet Project.
- Give the project a name. For this demonstration, use
- For Target Runtime, select WebSphere Portal 7.0 from the drop-down menu.
- Change the portlet project name to Deals.
- For Configuration, click Modify and then select JSR286 Faces from the drop-down menu (see Figure 1.)
- Click OK.
Figure 1. New Portlet Project wizard
- For Devices Supported, click Modify, and choose these options to add support for smart phones: BlackBerry, iPhone, and Android (see Figure 2).
- Click OK.
Figure 2. Devices Supported window
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.
- 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
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:
- Open the DealsView.jsp file.
- Open the Page Data view.
- 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
dealsInformationListas the name of the Relational Record List.
Figure 5. The Add Relational Record List window
- Click Next to get to the Add Relational Record List page.
- Click the New button as shown encircled in Figure 6.
Figure 6. Creating a database DB connection
Clicking New opens the Select a Connection dialog window shown in Figure 7.
Figure 7. Choose a database connection
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).
- 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.
- Expand the ADMINISTRATOR schema, and choose the DEALS table.
Figure 8. Choose the DB2 table
- Click Next, and you will see all of the columns of the DEALS table, as shown in Figure 9.
Figure 9. Column selection window
- Under "Advanced tasks," click the link that says Add another database table through a relationship, which is highlighted in Figure 9.
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
- Choose the ACCOUNT_DETAILS table, and click Next to bring up the Edit Your Relationship page shown in Figure 11.
- From the Multiplicity drop-down menu, choose the *-> FOREIGN KEY -> PRIMARY KEY option.
- Under the "Key column mappings" group, click on the column labeled DEALS primary key columns and choose ACCOUNT_ID.
Figure 11. Create Relationship page
- Then click Finish.
- 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.
- In the Add Relational Record List dialog window, choose the fields mentioned below (which are also shown in the Figure 13).
- Expand the DEALS node and check the option for PrimaryKey: CC1294637933390.
- Again, under the DEALS node, expand the Relation:
ACCOUNT_DETAILS_DEALS node. Further expand the
ACCOUNT_DETAILS node, and check the following
- Again, under DEALS node, expand the Relation:
CONTACT_PERSON_DEALS node, and then further expand the
CONTACT_PERSON node and check the following
PrimaryKey : CC1294638513093
- Under DEALS node, check the following columns:
Figure 12. Mapping tables columns
Figure 13. Choosing the table columns
- 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
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:
- Open the DealsView.jsp file in the Page Designer.
- Open the Page Data tab.
- 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
- 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.
- 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
This will bring up the Insert Records dialog window in Figure 17.
- 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.
- Also, you can enter
Account Nameto change the label name of that field.
Figure 17. Insert Record dialog window
- Click Finish.
- 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
- Again, choose only the Name field check box in the Configure Data Controls view, as shown in Figure 19.
- Also, change the label of that field to
Figure 19. Insert Records dialog
- Click Finish.
This will take again us back to Insert Record List dialog window.
- Make sure that the following fields are selected in the Insert Record List
dialog window, which is also shown in Figure 20:
Figure 20. Selected columns
- 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.
- Press CTRL+S to save your changes.
Figure 21. Auto-generated code in the portlet JSP file
Design the portlet JSP for smart phones
- Follow steps 1-11 of the section headed Design the portlet JSP for the desktop.
- 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
- 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.
- Click CTRL+S to save your changes.
Figure 23. Auto-generated code in the device portlet JSP
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
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:
- Right-click on the DealsProject project, and select Run As > Run on Server.
- 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
- Click Next.
- 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.
- Click Next. Once again, provide the user ID and password for the WebSphere Portal Server.
- 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
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:
- Right-click on the DealsProject project, and select Run > Run on Mobile Browser Simulator.
- 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
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.
|Scenarios and use cases for the series||scenarios_use_cases_sample.zip||5MB|
- Find out more about Rational Application Developer:
- Browse the Rational Application Developer for WebSphere Software page on developerWorks for links to technical articles and many related resources.
- Explore the Information Center for detailed instructions, especially the section titled "Creating portlets and portlet projects" (Developing > Developing portal and portlet applications > Portlet development overview > Developing portlets)
- Visit the Rational software area on
developerWorks for technical resources and best practices for Rational
Software Delivery Platform products.
- Stay current with developerWorks technical events and webcasts focused on a variety of IBM products and IT industry topics.
- Attend a free developerWorks Live! briefing to get up-to-speed quickly on IBM products and tools, as well as IT industry trends.
- Watch developerWorks on-demand demos, ranging from product installation and setup demos for beginners to advanced functionality for experienced developers.
- Improve your skills. Check the Rational training and certification catalog, which includes many types of courses on a wide range of topics. You can take some of them anywhere, any time, and many of the "Getting Started" ones are free.
Get products and technologies
- Try Rational Application Developer for WebSphere Software, free.
- Evaluate IBM software in the way that suits you best: Download it for a trial, try it online, use it in a cloud environment, or spend a few hours in the SOA Sandbox learning how to implement service-oriented architecture efficiently.
- Check Rational Application Developer wiki to keep up with news and to contribute.
- Join the Development Tools forum to ask questions and participate in discussions.
- Rate or review Rational software. It’s quick and easy. Really.
- Share your knowledge and help others who use Rational software by writing a developerWorks article. Find out what makes a good developerWorks article and how to proceed.
- Follow Rational software on Facebook, Twitter (@ibmrational), and YouTube, and add your comments and requests.
- Ask and answer questions and increase your expertise when you get involved in the Rational forums, cafés, and wikis.
- Get social about thought leadership. Join the Rational community to share your Rational software expertise and get connected with your peers.
Dig deeper into Rational software on developerWorks
Experiment with new directions in software development.
Read and subscribe for the best and latest technical info to help you deal with your development challenges.
Software development in the cloud. Register today and get free private projects through 2014.
Evaluate IBM software and solutions, and transform challenges into opportunities.