Building device-attribute-based mobile sites with IBM Mobile Portal Accelerator

Introduction

IBM® Mobile Portal Accelerator (MPA) is a free-of-charge extension to IBM WebSphere® Portal that provides an easy, cost-effective way to deliver content and applications to virtually all mobile devices. Its intelligent Multi-channel Server adapts the content for each mobile device based on the specific device characteristics and capabilities, as defined in the software's device repository.

Figure 1 illustrates the basic high-level architecture for MPA.

Figure 1. MPA architecture


MPA provides device-specific markup capability and, to display content on a range of devices, you must specify a layout policy with variants that are suited to different device characteristics, after which you associate the variants with one or more devices.

This mapping to a set of mobile devices is done either by:

• Choosing individual model numbers for a particular layout, or
• Assigning the layout to a family of devices, for example, Tablet or SmartBook, or by the manufacturer (Apple, BlackBerry, etc.)

These approaches are not always sufficient, however, especially for scenarios in which the implementation does not require a device-based, layout-mapping approach. These scenarios can be time consuming and may require significant effort to map layouts to devices---especially if there is quite a wide range of mobile devices to tackle.

This article describes a solution to tackle such scenarios by explaining how to build a device-attribute-based mobile site that is based on one or more attributes of the requesting device that are already present in the MPA device repository, thereby providing a programmatic approach to device grouping.

An example of such a scenario could be the width of the requesting mobile device. We'll discuss the details of how a different UI for the mobile site can be shown, depending on the width of the requesting device. A similar approach can be applied to other device attributes, such as page size / resolution, etc., that are present in Volantis' Multi-Channel Server (MCS) database.

Prerequisites

You'll need the following software to complete the steps in this article:

• IBM Rational® Application Developer 8
• IBM WebSphere Portal Server 7 with MPA 7
• IBM Mobile Portal Toolkit 7 (as a part of IBM MPA license)
• Device Emulators

To get the most from this article, you should have an understanding of WebSphere Portal Server, Rational Software Development Platform, Mobile Portal Accelerator, Java^TMServer Pages (JSPs), xHTML Device Independent Markup Extensions (Xdime), portal aggregator, and MCS policy development.

Setting up the development environment

Let's begin by setting up the development environment.

Create the XDIME aggregator project

1. In Rational Application Developer (RAD), create a General project as shown figure 2; click Next.

Figure 2. Create a General project



2. Specify MyXdimeAggregator as the Project name and click Finish (see figure 3).

Figure 3. New Project window



3. Copy the contents of MPA Theme application from wp_profile_rootinstalledApps/node_name/MPATheme.ear/MPATheme.war into the project created above (see figure 4). For more information about making changes to MPA theme, refer to the IBM Mobile Portal Accelerator 7.0 information center.

Figure 4. MyXdimeAggregator

Create an MCS Policies project

To do this:

1. In RAD, create a General project as we did above, specify MyMCSPolicies as the Project name, and click Finish.
2. Export the aggregator policies from MCS database and copy the policy files to the above-created project (see figure 5). For more information about exporting and importing policies, refer to MPA InfoCenter topic, “Importing and exporting repositories.”

NOTE: If, instead of an actual database, an XML-based repository is being used, then the policy files can be copied from there.

Figure 5. MyMCSPolicies

Customize MCSPolicies

To do this:

1. Switch to the MCS Navigator perspective in RAD and associate an .mdpr mcs repository file to the project, which comes with the product.
2. In MyMCSPolicies project, open the wp_header.mlyt file and choose the Design view; the Layout design contains two panes, G and H, as shown in figure 6.

Figure 6. Layout Design window



3. Add another row after the row containing pane G by right-clicking pane G and selecting Grid --- Insert Row (see figure 7).

Figure 7. Add another row



4. In the Insert row window (see figure 8), enter a “1” for the Number input, to insert just one row, and enter “After” as the position to place it after the row containing G Pane; click OK.

Figure 8. Insert row window



Figure 9. Another row added



5. Right-click on the newly inserted row and add two columns to it, using Add –- Grid --- 2 Columns, as shown in figure 10.

Figure 10. Add two columns



6. Right -click on Column 1, select Add --- Pane --- Pane (see figure 11), and name it “HeaderImage” in the Format Attributes section (see figure 12).

Figure 11. Add Pane



Figure 12. Formal Attributes section



7. In the same way, add a pane to Column 2, and name it “HeaderSearch”. The Layout Design will now look similar to that shown in figure 13.

Figure 13. HeaderSearch pane added to Column 2


8. Replace the original wp_header.mlyt file with the modified version and, if you are using a database for MCS repository, import the policies into the MCS database. If you're using an XML-repository instead, then replace the file directly. Note that a restart of WebSphere Portal server may be required.

Customizing the XdimeAggregator JSPs

To do this:

1. Enable the JSP reloading so that the changes to the XDIME aggregator JSP’s are reflected immediately and a server restart is not required. Refer to the WebSphere Portal InfoCenter topic, “JavaServer Pages (JSP) runtime reloading settings,” for more information.

We conditionally render either pane “G” or panes “HeaderImage” and “HeaderSearch,” depending on the width of the requesting device.

We use the MCS expressions to determine the value of the device width attribute from the MCS repository, and then use it to conditionally render a pane, depending on the value of the width attribute of the device.2. Modify the Header.jsp file under the themes/xdime/mpatheme/common folder and find the following section:
3. Insert the following at the end of the above image tag: