Mobile device support 

Table of Contents   Previous Page

---

This chapter provides an overview of IBM Mobile Portal Accelerator v6.1.0.2 and details about delivering Lotus Web Content Management (LWCM) content to mobile devices.

Overview

Driven by major growth trends and demands to constantly access information on-the-go (email, business applications, social networking applications, and downloads such as ring tones, photos, videos or games), the mobile applications market is poised for rapid growth. Integration between Content Management Systems, Mobile Portals, and the sophisticated features of new mobile devices is helping enterprises to maximize on both their B2C and B2B opportunities.

Mobile portals have a smaller footprint of displayable content with navigation through menu links or icons. The ability to create dynamic content in a timely manner and render it on to a variety of mobile devices without being concerned about a mobile device’s specific physical characteristics (screen size) is essential in providing a rich mobile user experience. Lotus Web Content Management (LWCM) and IBM Mobile Portal Accelerator (MPA) are now deeply integrated via authoring and presentation templates to automatically wrap Web content in XDIME to provide seamless content publishing to virtually all mobile devices used today.

Mobile Portal Accelerator

IBM Mobile Portal Accelerator (formerly known as IBM WebSphere® Everyplace® Mobile Portal Enable) is an advanced content adaptation product that provides seamless, cost-effective ways to deliver web content via portlets to mobile devices.

The content is automatically formatted and customized to display on over 6000 mobile devices worldwide via its Multi-channel Server. Instead of the PC-based browser HTML markup of choice, Mobile Portal Accelerator uses an XML vocabulary called XML Device Independent Markup Extension (XDIME/XDIME 2). XDIME 2 describes content, but does not explain how to display content. It is the device policies from the device repository that determine how the content should be displayed.

• Mobile Portal Accelerator includes the following out-of-the-box XDIME 2 mobile portlet samples to jumpstart mobile portal solutions:

Mobile Portal RSS is an XDIME/XDIME 2 mobile-enabled version of the IBM Syndicated Feeds Portlet and supports RSS2 and ATOM feeds Mobile Portal Stock portlet is an XDIME/XDIME 2 mobile-enabled portlet that displays stock quote and performance data for selected companies, symbols and investments, with configuration and edit options for users to modify selected stocks and quote sources Mobile Struts Mail Reader portlet sample Mobile Image Conversion Server (ICS) portlet sample Change of Address portlet sample for mobile devices Calendar portlet sample, for managing appointments, meeting events and calendar Mobile Login portlet Mobile Portal Client Framework Sample Portlet is a mobile-enabled portlet and artifacts that showcase over 50 XDIME 2 sample widgets that can be used to deliver an enhanced, more interactive experience to client capable mobile devices. Examples of widgets include styling, transition, AJAX table, auto complete, popup, ticker tape, and more.

• Mobile Portal Accelerator also provides seamless integration with Lotus WCM content authoring services.
  LWCM has extended its capability to present content not only using HTML markup, but also using XDIME markup,that enables content for display on mobile devices. The presentation templates allow a single copy of the authored content to be presented as both HTML and XDIME simultaneously in portlets. In LWCM, there are two portlets used for rendering content: LWCM local rendering portlet and an LWCM remote rendering portlet.

According to your environment setup and platform, verify that the following described here : http://publib.boulder.ibm.com/infocenter/mpadoc/v6r1m0/index.jsp?topic=/com.ibm.websphere.wemp.doc/designing/update_wcm_portlets_c.html have been implemented in either the LWCM local rendering front-end portlet or the LWCM remote rendering front-end portlet to support XDIME seamlessly out-of-the-box.

New features in Mobile Portal Accelerator

Mobile Portal Accelerator V6.1.0.2 has following new features:

Key New Features

• Support for rendering of Lotus Web Content Management (WCM) content to XDIME for multi-channel rendering to mobile devices
• New operating system and database support
• New Multi-Channel Server Client Framework creation of XDIME applications, and sample widgets with rich client-side user interfaces that work on sophisticated mobile devices. The Mobile Portal Client Framework Sample portlet provides a rich set of XDIME 2 widgets for use in developing applications. The following widgets are available: AJAX widgets, Non-AJAX widgets, Effects widgets, Building Block widgets.

Support for Multichannel Server

MCS version 4.3.5 includes the following enhancements:

• XDIME 2 support: Users have the option of using XDIME2 as their primary content authoring language for MCS.
• Enhanced theme processing: MCS version 4.3.5 streamlines the processing of themes by sending only the style information that is needed by a given page and by using shorter style names in the XHTML output.
• Device classification: You can map component, layout, and theme policies to devices according to device groupings and device hierarchies that you have defined.
• User interface for theme variants: A new user interface shows a summary of the properties defined on a theme variant and provides a mechanism for navigating to a property.

Updated runtime and development code

• The IBM Mobile Portal Accelerator version 6.1 runtime featurs are based on WebSphere Portal version 6.1.0.3
• The Mobile Portal Toolkit is based on Rational Application Developer version 7.5.1 and Rational Software Architect version 7.5.1. Developers can use the standard portlet API (encompassing JSR 168 and 286). The IBM portlet API is no longer recommended for use.

Installation enhancements

• The installation process makes use of enhancements in WebSphere Portalversion 6.1.0.3, including use of the ConfigEngine utility and updated directory structure.
• A health check utility is provided so that, when the installation is complete, you can verify that all required files are in their proper locations.

XDIME 2 sample portlets

The following new XDIME 2 portlets are provided for out-of-the-box capability and as samples for demonstration purposes:

• The Mobile Wireless Portal (MWP) Stock portlet gives users the ability to view stock quotes and financial information for a customizable list of stock ticker symbols.
• The Syndicated Feed portlet (which replaces the Mobile RSS portlet) extends the existing portlet for WebSphere Portal to XDIME 2, giving users the ability to read Web feeds, such as RSS, on their mobile devices.

Customer experiences

For one example of a company utilized Mobile Port Accelerator to make a difference, watch the flash video available at:
http://www.ibm.com/ibm/ideasfromibm/us/bharti_airtel/20080714/index.shtml

High level architecture

The following figure and the sections below provide an overview of the architecture of a mobile device solution using WebSphere Portal.

Multi Channel Server

The Multi-Channel Server is the runtime component that transforms XML-based Device Independent Markup Extensions (XDIME) markup into native markup languages for individual devices. MCS uses the built-in MCS Policy Repository to manage a large number of devices such as PDAs, cell phones, smartphones, Web TVs, and other devices.

The MCS Policy Repository is not a single database or a single file; rather, it is a set of policy files managed by MCS. These MCS policy files define the presentation characteristics (layout, component and theme, and so on) of a device. There are a number of policies defined in MCS. Device, layout, theme, and component policies are the most commonly used.

• Device policy - The device policy is stored in a compressed XML file, extension *.mdpr, containing specific attributes of devices supported by MCS. The device policy repository can be updated as new devices emerge by subscribing to the Mobile Portal Accelerator Device Update Subscription service.
• Layout policy - The layout policy specifies physical positions of elements on a page. MCS manages the policies and maps resources to devices. MCS policies describe specific layout rules used to render pages for requesting devices. The layout policy file has the extension *.mlyt. Create different layout policies to map different mobile devices to specific layout policies.
• Theme policy - The theme policy is similar to the theme concept in WebSphere Portal. With it, you can manage the overall look and feel on devices. It has the file extension *.mthm.
• Component policies - Use the component policies to address complex content type such as images, rollover images, audio, chart, and dynamic visual elements. The file extensions of component policies vary depending on the component types. MCS transforms the device-independent (XDIME markup) content into device-specific native markups (WML, cHTML, and so on.) by utilizing the powerful combination of XDIME and various policies defined in MCS Policy Repository.

Mobile Portal Accelerator extensions

MPA include the XDIME aggregator and several portlets. For example, the Manage Mobile Pages portlet and the Extended Properties portlet are provided to facilitate management and deployment of mobile portlets.

Manage Mobile Pages portlet

The Manage Mobile Pages portlet is designed to be used by portal administrators and marketing personnel to create mobile style navigation. The navigation tree of mobile pages is stored in the navigation model of WebSphere Portal, and consists of nodes that represent pages, URLs, labels, or portlets.

Extended Properties portlet

The Extended Properties portlet, accessed through the Manage Mobile Pages portlet, provides a set of pages to configure the display attributes and the rules of nodes in the Mobile Portal Accelerator navigation hierarchy. Each node (page, portlet, and URL) in the MPA has associated extended properties or attributes that determine how and when it should be displayed. Extended properties or attributes include icons, device capabilities, and cache control.

XDIME Aggregator

XDIME aggregator extends the existing portal aggregation support to XDIME/XDIME 2. It is associated with the markup type XDIME and the MIME type text/xml. WebSphere Portal uses the user agent of the requesting device to look up a supported client definition. If the client definition for the device specifies XDIME markup, then the XDIME aggregator is invoked to combine the markup from all the portlets together with headers and footers to generate the page. At runtime, the XDIME aggregator uses the navigation tree created by the Manage Mobile
Pages portlet to select and aggregate the output (pages, portlets, and URLs) in XDIME.

During this process, the aggregator evaluates the meta-data attributes for each navigation node. For instance, the XDIME aggregator queries the attributes to display appropriate icons or alternate text. MCS converts the aggregated XDIME markup generated by XDIME aggregator into device-dependent markup such as cHTML or WML, based on the requesting device, component, theme, and layout policies referenced in the XDIME markup.

Mobile Portal Toolkit

To help developers create XDIME/XDIME 2-enabled mobile portlets, the Mobile Portal Accelerator software includes the Mobile Portal Toolkit, an Eclipse plug-in. The toolkit can be used with IBM® Rational® Application Developer 7.5.4 or IBM Rational Software Architect 7.5.1 to create XDIME/XDIME 2 portlets and Multi-Channel Server policies for mobile portlets.

The toolkit includes:

• Portlet Creation Wizards. These wizards include support for creating Mobile XDIME Standard and Mobile Struts portlets that support standards-based JSR168/286 APIs. Developers can use the Portlet Creation Wizards to create configure-and-edit mode JavaServer™ Pages (JSP) for XML-based, XDIME (XHTML with Device Independent Markup Extensions) portlets. (XDIME is a flexible, device-independent authoring language that is used in many mobile networks to collect information about a user`s request; then to select related pages or portlets; and finally, to aggregate the output for display. With XDIME aggregation, content can be created once but delivered to a wide variety of mobile devices that are used to connect to the Web.)
• Device Repository of mobile-device policies, which define visual presentation elements (such as page layouts and style sheets) and device-attribute information, and device categorization for over 6000 mobile devices.
• Policy editors. Rational-software-based policy editors are used to create policies, which are referenced in the XDIME markup and used by the Multi-Channel Server runtime to make the best decision for emitting device-dependent markup to a target device.
• Test Environment. The test environment enables portlet developers to deploy and test XDIME portlets.

Runtime component interaction

The following figure and the text below describes the run-time interaction of the various components.


The numbers in the figure correspond to key steps in a typical MPA scenario:

1. Write the XDIME Portlet or add XDIME JSPs to existing portlet

2. The resulting navigation hierarchy defines nodes (pages, labels, URLs, and portlets) and extended attributes that specify required device capabilities and type for each node. Navigation nodes and attributes are stored in the Portal Model.

3. When the Portal receives a request from a mobile device, the appropriate markup is determined by comparing the User-Agent string to configured Portal clients. MPA clients are configured with XDIME support, so the portal passes the request to the XDIME Portal Filter. The filter then invokes the XDIME Aggregator to process the request.

4. The XDIME Aggregator queries the Portal model to determine navigation and portlet availability based on the user and the extended attributes of each node. If the request is for a portlet node, a PortletRequest object, containing request-specific data, is passed to the portlet.

5. The Portlet Container invokes the portlet with the PortletRequest. XDIME portlets render their content in XDIME and return the content to the aggregator via a PortletResponse object.

6.Aggregated XDIME markup for the requested navigation or portlet is returned to the Portal Filter, which passes it to the Multi-Channel Server. MCS transforms the XDIME content to device-specific markup by matching it with policies in the repository of Mobile Device Profiles.

7. The Portal Filter inserts the device-specific content in the ServletResponse object for delivery to the mobile device.

Installation hints and tips

IBM Mobile Portal Accelerator v6.1.0.2 requires a separate installation after WebSphere Portal v6.1.0.3 Feature Pack 6.1.5 has been installed and configured. Download the MPA v6.1.0.2 code fixes from Fix Central: http://www-933.ibm.com/support/fixcentral/:

Create a DB2 MCS database

1) Verify that you have a working WebSphere Portal server (v6.1.0.3 Feature Pack 6.1.5) with any applicable fixpacks needed and that uses one of the following databases with its applicable fixpack:

• DB2 Universal Database Enterprise Server Edition version 8.1 (with fix pack 16) or version 9.1 (with fix pack 2 or 4) or DB2 Universal Database Workgroup Server Edition version 9.5 (with fix pack 1) (Note: my local DB2 installation was based on DB2 Workgroup Server 9.5 FP1)
• Oracle Database Enterprise Edition Release 10.1.0.5 patch 4, Release 10.2.0.3, or Release 11g
• Microsoft SQL Server 2005 Enterprise Edition SP2

2) Install Java SDK 1.5.0 service release 8 or higher if it is not already installed.

3) Unzip the file wp.mobile.zip to a temporary directory to create Multi-Channel Server (MCS) and Mobile Portal Accelerator installation images on your WebSphere Portal application server. (Note: The temporary directory is specified when you run the ConfigEngine assembly command below). Next, install MCS and Mobile Portal Accelerator as a ConfigEngine assembly using the following command (where tmp is used as the name of the directory to which you unzipped wp.mobile.zip)

ConfigEngine -install -assemblyIudd sdd.xml -assemblyRoot c:\tmp\wp.mobile -installLocation c:\IBM\WebSphere -offeringName PortalServer

4) Prior to creating a database for a DB2 MCS, verify that you have set the DB2 Variable DB2_CREATE_DB_ON_PATH=YES as shown in the following figure:


5) a) Create database using the following commands in a db2 command window:
db2 create db mcs on path_name using codeset UTF-8 territory us
b) Update the mcs database configuration using the following command
db2 update db cfg for mcs using logfilsiz 10000 logprimary 10 logsecond 10
c) Connect to the mcs database
db2 connect to mcs user db2instance_userID using db2instance_password
d) Copy the file wp_root/wp.mobile/wp.mobile.mcs/repository/db2/create_vm_tables.sql from WebSphere Portal server to a directory on your database server. Then, make that directory your working directory
e) Create the WebSphere Portal tables in your mcs database using the following command.
db2 -tf create_vm_tables.sql

6) Log in to your WebSphere Portal Admin console and add the JDBC drivers to the Java Virtual Machine (JVM) classpath of the WebSphere Portal server. Go to the following on the Portal Admin Console: Servers -> Application Servers -> WebSphere_Portal -> Server Infrastructure -> Java & Process Management -> Process Definition -> Java Virtual Machine: In the Classpath field, add the following JDBC drivers if using DB2 9.5 Fixpack1

• db_root\sqllib\java\db2jcc.jar
• db_root\sqllib\java\db2jcc_license_cu.jar

Save the configuration changes

7) Run the following command to ensure that the WebSphere environment is set up correctly
wp_profile_root\bin\setupCmdLine

8) Add the JDBC drivers to your current CLASSPATH environment variable

9) Make sure that the correct values are specified for the following parameters in the file wp_profile_root/ConfigEngine/properties/wkplc.properties: (Note: These are values that were entered or existed when data was transferred from the default Derby database to DB2)

• WasHome
• WpsInstallLocation
• NodeName
• ServerName
• PortalAdminId
• PortalAdminPwd
• WpsHostPort
• WpsContextRoot

10) Change your working directory to wp_profile_root/ConfigEngine and run the following command (Note: Ensure the command specified below is on one line)

Note: -DMcsRepositoryType and -DMcsProject have required default values: db_vendor: db2-type4 for DB2 Universal Database Enterprise Server Edition version 9.1 and DB2 Universal Database Workgroup Server Edition version 9.5. hostname: the fully qualified host name of the database server. (for example itsoportal.sc.ibm.com) port_number: port (default 50000) DB2 Universal Database Enterprise Server Edition version 9.1 and DB2 Universal Database Workgroup Server Edition version 9.5 db_name: the name of the Multi-Channel Server database (ex. mcs) db2instance: the user ID of the DB2 instance user (ex. db2admin) db2instance_password: the DB2 password for MCS database (ex. db2admin) mobile-portal: the project name

After running the command above, the return code should display Return value 0 in the DOS command prompt

11) Using a text editor, open the ImportPolicies batch file in the wp_root/wp.mobile/wp.mobile.mcs/repository/bin directory. Add the path of the JDBC drivers to the end of the CLASSPATH= line:


12) Run the following command to import the default device policies:

ConfigEngine init mcs-import-devices -DMcsProject=mobile-portal

After running the command above, the return code should display Return value 0 in the DOS command prompt (Note: It may take up to 2 hours before the import is complete)

13) Restart the WebSphere_Portal application server

Installing MPA extensions

If you are installing with v6.1.0.3 Feature Pack 6.1.5 of Portal, the following action may be necessary to complete installation of the MPA extensions. Check to see if wp.config.jar exists in \IBM\WebSphere\wp_profile\ConfigEngine\lib. If it does not, copy wp.config.jar from \IBM\WebSphere\PortalServer\installer\wp.config\bin to \IBM\WebSphere\wp_profile\ConfigEngine\lib. At the time of our installation, v6.1.0.3 Feature Pack 6.1.5 of Portal had not been released, so this was a workaround to resolve a SqlProcessor class not found error that was occurring after running the command to install and configure all of the MPA extensions

1) Use the existing DOS command window and verify the values still exists for step 8 (setting up the classpath to point to the JDBC drivers) and step 9 (verifying existing values in the wkplc.properties file) above in "Creating a DB2 MCS database".

2) Run the following command to install and configure the MPA extensions with sample XDIME portlets

ConfigEngine mwp-config-all

After running the command above, the return code should display Return value 0 in the DOS command prompt (Note: It may take up to 1 hour before install for mwp extensions is complete)

3) Run the following command to import XDIME aggregator policies and generic portlet policies into the MCS policy repository

ConfigEngine mwp-import-policies

After running the command above, the return code should display Return value 0 in the DOS command prompt.

4) Import Mobile Welcome portlet policies using the following command

ConfigEngine mwp-import-portlet-policies

After running the command above, the return code should display Return value 0 in the DOS command prompt.

5) Restart WebSphere_Portal application server

Note: In WebSphere Portal v6.1.0.3 FP 6.1.5 w/MPA 6.1.0.2, the Manage Mobile Pages, Extended Properties, and Preload Notice pages display an empty portlet with title of page. A bug report has been opened to resolve the problem.

For detailed steps about installation and running a health diagnostics check of your installation, see: http://publib.boulder.ibm.com/infocenter/mpadoc/v6r1m0/index.jsp

The optional Image Conversion Server (ICS) component has not been installed

Installing Mobile Portal Toolkit

1) After Rational Application Developer v7.5.4 is installed, double click on the MPA Toolkit installation image executable that was unzipped previously in step 3 above.

Follow the prompts to install the toolkit with a portal test environment in RAD
Note, that the Lotus Web Content Management structure is created by default during your WebSphere Portal installation.

Validating installation of mobile portlets

1) Log in to the WP Administration console

2) Select Applications->Enterprise Applications

Tools for Mobile Portal Accelerator

The toolkit includes support for mobile application development: markup/layout editors, templates for rapid site development and enforcement of style guidelines, mobile portlet samples, APIs, and documentation. In addition, when the toolkit is installed, sample XDIME/XDIME 2 portlets are added to the Samples Gallery for use within the Rational development environment. Mobile Portal Toolkit 6.1.0.2 provides support for the following Rational development platforms:

• Rational Application Developer 7.5.4
• Rational Software Architect 7.5.2

In your Rational development environment, select Help Contents from the Help menu. Then refer to the section titled Mobile Portal Toolkit Information.

Note: This help information is available only after you install the Mobile Portal Toolkit.

• Multi-channel Server

Multi-channel Server enables development of policies in the Mobile Portal Toolkit workbench for layouts, devices, themes, components and assets, Newly developed policies can be imported into your database repository

Tools for authoring content in LWCM

• Inline editor

Design considerations for your mobile portal

As a content designer for LWCM content, presentation templates are used to display the look and feel of the site. Updates to existing presentation templates with HTML-type content elements are necessary (for example, img, Rich Text, and so on) in order to display on mobile devices. For example, instead of using the "Rich Text" element type, that creates HTML, use the "Text" element type. If updates are not made to use non-HTML elements, the following generic error message may display on your emulator/simulator: Error 500: MCSAA0051X: Caught exception Additional details about the error may be found in the wp_profile_root\logs\WebSphere_Portal\SystemOut.log. However, to support the display of content on both PC-based and mobile devices in parallel, the default HTML markup content presentation template is required as well as an additional presentation template using the XDIME markup language. (See sample scenario below for details) Configurations to support the additional XDIME presentation template in your portlet are done in the "Edit Shared Settings" view of the portlet. See details in the section below on "Configure portlet to display LWCM content on mobile device".

As a UI designer/developer for mobile portals, the dynamic device-specific content presentation is done using the XDIME markup language with Java Server Pages and the MCS policies for layout, component, and theme. After a mobile portlet project creation in the Mobile Portal Toolkit, edit JSPs under the WebContent folder for xdime. The html folder and view JSPs are created by default. See the table below for a subset of common XDIME markup elements and their equivalent HTML tags used in LWCM templates.

Common XDIME/XDIME 2 Elements	Equivalent HTML Elements	Description
contentType= "x-application/vnd.xdime+xml"	contentType="text/html"	content type
<xfform>	<form>	form used in page
<xftextinput type="text">	<input type ="text">	text input field
canvas></canvas>	<html></html>	beginning/ending of page
<layoutName="name.mlyt">	<table border="0" width="100%"> <tbody>	arrange content on page
<pane="name">	<tr>	destinations for content output
<img url="" />	<img src="" />	display image

• Details about XDIME elements can be found: http://publib.boulder.ibm.com/infocenter/mpadoc/v6r1m0/index.jsp?topic=/com.volantis.mcs.eclipse.doc/wag/xdime_elements.html

• For details about the differences between the first implementation of XDIME (called XDIME 1) and XDIME 2, refer to the Volantis Web site at www.volantis.com.

• Details about LWCM elements can be found at: http://publib.boulder.ibm.com/infocenter/wpdoc/v6r1/index.jsp?topic=/com.ibm.wp.ent.doc_v615/wcm/wcm_dev_elements.html

After the creation of your mobile portlet, to deliver the content to a range of device types, create a layout policy with the MCS workbench. The layout policy is given a name and associated in the XDIME markup through the canvas element type. A sample_layout.mlyt file is created by default under the WebContent\mcs-policies directory in the Mobile Portal Toolkit. Delete this sample layout file and right click on mcs-policies and select New>Other>MCS>Layout to create a new custom layout for your portlet in the mcs-policies directory. When clicking the file to view the sample layout, you are prompted to specify the location of the standard device repository file, devices.mpdr. It is found under your installation directory for Mobile Portal Toolkit\DeviceRepository. A default layout policy created with the sample Change of Address portlet displays below.



The top of the layout design contains two rows and one column with a name of title assigned to the Pane. The title Pane will contain the information submitted in the form beneath. The bottom portion of the layout design for the sample Change of Address portlet contains a form with ten rows and two columns with T1-T10 assigned to the name of the panes for display of content. See the layout of the sample Change of Address portlet in the WebSphere Portal user interface.

MPA user interface

Access the administrative user interface of Mobile Portal Accelerator through the Manage Mobile Pages Administration portlet. This portlet provides a navigation tree for urls, labels, and pages. Properties (such as, markup supported) are displayed after a label or page is selected. The Manage Mobile Pages portlet provides access to the Preload Notice portlet and the Extended Properties portlet.

Preload notice portlet

This portlet is used to display custom, informational, promotional advertisements or warnings about content that is to be displayed after a link is selected and before the target portlet content displays. When configuring the Preload notice portlet, you are able to specify when the notices should appear and the maximum number of times it should display.

Extended Properties portlet

The Extended Properties porltlet enables the configuration of specific device-type properties that mobile devices must have in order to display pages. It may restrict image capability, color capability, and audio output capability.

Developing mobile portlets

This section will provide an overview of how to use the Mobile Portal Toolkit to create XDIME portlets and how to use the associated MCS tools to design the user interface.

Mobile Portal Toolkit

1. Create a new XDIME portlet (File->New->Portlet Project)


2. View project hierarchy and files (for example, jsps for xdime) created under the WebContent folder

3. Create a MCS layout policy (right click on mcs-policies folder (New > Other > MCS > Layout)



4. Design the layout of your portlet and specify device dependent policies



5. View a sample layout policy for the Change of Address portlet.






6. Edit the XDIME JSP to reference the layout elements defined above (See the sample Change of Address View JSP below).



7. Test and Deploy your portlet

MPA client framework

The Client Framework is a platform that you can use to create XDIME 2 applications with a rich client-side user interface, for a wide range of devices. The client side of Client Framework is targeted for the following:

• Opera 8.6 and higher
• Nokia OSS browser for S60 DP3 phones
• Access NetFront browser v3.4
• Firefox
• Safari 2.0
• Microsoft Internet Explorer 6.0 and up

The Client Framework consists of a server side and a client side. On the server side, a combination of XDIME 2 markup and policy values to access the widget functions is used. In addition, you can include JavaScript in your markup to invoke functions in the client library. On the client side, a widget library consists of JavaScript that implements functions. This portlet is a showcase sample that is usable with a limited set of mobile devices.

To Setup the Client Framework sample portlet:
1. Ensure that the device for simulation supports AJAX to display AJAX widget functionality (Note: Non-Ajax widgets are available for display as well)
2. If the sample Client Framework portlet is not installed by default, the WAR file can be found in (wp_root/wp.mobile/wp.mobile.mwp/installableApps/Client-framework.war) along with the archive file (projects.zip). Copy the unzipped archive folder to wp_profile_root/installedApps/node_name/wps.ear/wps.war/
3. Restart the server and add portlet to a page.

MPA widgets

The Mobile Portal Client Framework sample portlet showcases XDIME 2 widgets separated into four categories: AJAX, non-AJAX, Effects, and Building Block. There are over 50 widgets to provide a richer client experience. See screen capture of Ticker Tape Text widget (sideways scrolling display of text) below.

Sample scenario

An existing River Bend LWCM library was imported into WebSphere Portal. Currently, the website only displays content on a PC-based browser which supports html. To provide an end-to-end scenario, we will initially walkthrough steps of how to create content in LWCM for display on a PC based browser, focusing on content creation for the Home page. For mobile devices, we focus on the content created for the three middle portlets. Next, we will describe steps to update the existing authoring template to support non-HTML type field elements. Then, we create a new presentation template that will use XDIME markup to allow content to be delivered to mobile devices seamlessly. Content will then be able to display simultaneously on a HTML PC-based browser and via mobile devices.

Delivering mobile content

In order to deliver mobile content to mobile devices, you must have a working portal and Lotus Web Content Management server. The LWCM local rendering viewer portlet should be updated to support XDIME (See link in What Is Mobile Portal Accelerator section for steps). Also, within the LWCM server, you must have created authoring and presentation templates, workflow, site and site areas. See the following: http://www.ibm.com/developerworks/websphere/library/techarticles/0703_smit/0703_smit.html.

Integrating MPA with Lotus Web Content Management

Summary of steps
1. Create a library to contain all the assets
2.Assign access roles to library and item types
3. Configure WCM authoring portlet to select available libraries to display to user
4. Create a workflow to manage the content approval process
5. Create the site structure to organize your content
6. Create an authoring template to define your content
7. Create a presentation template to format the display of the content
8. Create your content
9. Configure the content and template mapping relationships
10. Configure HTML supported only JSR286 Web Content Viewer portlet to display content on PC-based browser
11. Update existing authoring template to support non HTML type elements
12. Create new XDIME presentation template using default layout
13. Configure XDIME supported Web Content Viewer portlet to display content on mobile devices
14. Download mobile device emulators/simulators
15. Login to mobile device to view content

Create a new WCM library

1. Login as administrator
2. Click Administration to open the administration portlet
3. Go to Portal Content > Web Content Libraries
4. Click Create new library

Assign role to library

1. Login in as administrator
2. Click Administration to open the administration portlet
3. Go to Portal Content > Manage Web Content Libraries.
4. Click on the RiverBend library to set permissions for a role

Assign role to item types

Configure WCM authoring portlet to view library

1. Login as administrator
2. Click Applications
3. Click Content tab. Select menu drop down arrow on Content tab and select Web Content Management
4. Click Configure link (right side of page)
5. Select library (for example, RiverBend) and click Add

Create workflow

Before creating a workflow, setup the workflow actions and the workflow stages

Workflow Actions

1. Click New and select Workflow Actions > Publish Action
2. Enter values for a Publish workflow Action: Name, Display title, Description, and so on.



3. Create additional workflow actions that may be needed for your workflow

Workflow stages

1. Click New and select Workflow stages
2. Enter values for Workflow stage: Name, Display title, Description, Workflow security and so on.
3. Select Workflow Actions created in Step 2 to execute when entering or exiting this stage of the workflow (for example, when entering the Publish workflow stage)



4. Enter additional stages for your workflow that may be needed

Workflow

1. Click New and select Workflow
2. Enter values for Workflow: Name, Display title, Description, and so on.
3. Select Workflow stages created in Step 5 to execute in your workflow (that is, Approval workflow, and so on)

Create site

Follow these steps to set up the container for the Web site layout
1. Click New and select Site
2. Enter values for Site: Name, Display title, Description, and so on.

Create site area

Follow these steps to create the page layout for the Web site.
1. Click New and select Site Area
2. Select location for Site Area ( "Home" page) (First child is the default) in your Site (for example, River Bend)



3. Next, enter values for a Site Area (for example, Home): Name, Display title, Description, and so on.



4. Repeat steps 2 and 3 to create additional areas of your site (for example, News, Company, Beverages, Food, and so on) and then select Site Areas > By Site (for example, River Bend) to verify the site structure

Create an authoring template

Follow these steps to specify form content and elements:

1. Click New and select Authoring Templates
2. Enter values for: Name, Display title, Description, and so on.
3. Click link to create Default Content Settings
4. Click Manage Elements to begin creating elements
5. Select Element Type, and enter Name, Display title, Description, and so on.
6. Click OK after elements have been Added
7. Click link to Default Content Settings (to preview previously added entry fields)
8. Set the Workflow
9. Click Save
10.Create additional Authoring Templates required for content

Create HTML presentation template for home page

1. Click New and select Presentation Template
2. Enter values for: Name, Display title, Description, and so on.
3. Enter HTML/LWCM markup elements to format content

• <Element context="current" type="content" key="Summary"/><br/><br/><Element context="current" type="content" key="Body"/><br/> )
• Content in Summary (Text field) and Body (Rich Text field) fields will be formatted for display
• See the following link for details on LWCM element Types: http://publib.boulder.ibm.com/infocenter/wpdoc/v6r1/index.jsp?topic=/com.ibm.wp.ent.doc_v615/wcm/wcm_dev_elements.html

Create content

1. Click New and select Content
2. Select Authoring Template for content
3. Enter values for: Name, Display title, Description, and so on.
4. Enter content in a selected fields (Summary, Body)
5. Repeat steps as necessary

Create template mappings for default content

1. Select Site Areas >By Title (where content will be created)
2. Navigate to Site Area of content (for example, Home)
3. Click on Home and select Edit
4. Click Edit Template Mapping
5. Click Add button
6. Select Authoring Template & Presentation Template

Configure portlets to display LWCM content on PC based browser

(Note: The following steps may be omitted if you have existing pages setup from the library import)

1. Log in to WebSphere Portal as administrator.
2. Click the Administration tab to open WebSphere Portal Administration. Click Portlet Management.
3. Click Portlets.
4. In the Search window, type Web and click Search.
5. Locate the Web Content Viewer JSR286 portlet and click Copy Portlets.
6. Enter Name for portlet.
7. Click OK.
8. From the WebSphere Portal page, select Manage Pages.
9. Expand Content Root > RiverBend > Home.
10. In the Type of Page section, select HTML
11. Click OK.
12. In the left panel under Manage Pages, select Home
13. In the Portlets section of the right panel, click Edit.
14. In the left panel, click Add portlets.
15. Set the search by Title starts with and type Web Content Viewer JSR286 portlet name
16. Select portlet and click OK.
17. Click the down arrow next to portlet from layout screen or on page of portlet and select Edit Shared Settings



18. In the Content section, click Edit.
19. In the Sites: section, select the content and Alternate Presentation Template to display



20. In the Broadcast Links To section, select Dynamically select a Web Content page
21. In the Receive Links From section, select the Other portlets and this portlet option



22. Click OK.
23. Display content in Browser after adding content for additional JSR286 portlets

Display LWCM content on mobile devices

Update existing authoring template to handle non HTML elements

1. Select existing Authoring Template (for example, General)
2. Click Edit > Manage Elements to create an additional Text element to contain the same text as the Body Rich Text element field
3. Select Element Type, and enter Name, Display title, Description
4. Position new field, for example, BodyMP, under Rich Text element type
5. Click OK after elements have been Added



6. Click link to Default Content Settings (to preview previously added element type)

Create new XDIME presentation template

1. Click New and select Presentation Template
2. Enter values for: Name, Display title, Description, and so on.
3. Enter XDIME/LWCM markup to format content
4. Click Save



Notes:

• a default layout policy is being used
• the component id is auto-generated by LWCM
• "htmlencode=true" prevents the following SAXPARSER error message from occurring on mobile devices when working with LWCM component element types for images: "org.xml.sax.SAXParseException: The reference to entity "CACHEID" must end with the ';' delimiter."

New XDIME presentation template created

Update content

1. Select Authoring Template for content
2. Enter duplicate content in selected fields (for example, BodyMP)

Update template mappings for default content

1. Select Site Areas >By Title (where content will be created
2. Navigate to Site Area of content
3. Click on Home and select Edit
4. Click Edit Template Mapping
5. Click Add button
6. Select Authoring Template & Presentation Template

Configure portlets to display LWCM content on mobile devices

1. Log in to WebSphere Portal as administrator.
2. Click the Administration tab to open WebSphere Portal Administration.
3. Click Portlet Management.
4. Click Portlets.
5. In the Search window, type Web and click Search.
6. Locate the Web Content Viewer portlet and click Copy Portlets.
7. Enter Name for portlet (for example, Mobile Web Content Viewer)
8. Click OK.
9. From the WebSphere Portal page, select Manage Mobile Pages or Manage Pages.
10. Expand Content Root > Home
11. In the left panel under Manage Mobile Pages or Manage Pages, click the New Page icon.
12. Under Title, type Mobile Test Page
13. For the Theme, select Mobile Portal
14. In the Type of Page section, select the XDIME option

Note: If the xdime markup language is checked without support for html, the Mobile Test page will not display in the PC-web based browser. The HTML setting should remain until testing of web site is not necessary.


15. Click OK.

Note: By default, only one root node (page) is handled by a mobile device, so make any previous pages that support XDIME inactive or your page will not display on mobile device

16. In the left panel under Manage Mobile Pages or Manage Pages, select Mobile Test Page
17. In the Portlets section of the right panel, click Edit.
18. In the left panel, click Add portlets.
19. Set the search by Title starts with and type Mobile RiverBend Web Content Viewer portlet name (Note: add Mobile Login portlet to layout as well)
20. Select portlet and click OK.
21. Click Done.
22. Click the down arrow next to Mobile Test Page and select Edit Shared Setting.
23. In the Content section, click Edit.
24. In the Sites section, select the content.
25. In the Alternate Presentation Template section, click Edit.
26. Select Home Page PT XDIME.
27. Click OK.
28. In the Broadcast Links To section, select None.
29. In the Select a target portal page section, select Mobile Test page.
30. In the Receive Links From section, select the Other portlets and this portlet option.



31.Click OK.
32. Login via Mobile Login portlet to access website

Download emulator and simulators

1. To test with the User Agent Switcher AddOn Extension Tool of Fire Fox, see the following for details: https://addons.mozilla.org/en-US/firefox/?application=firefox
2. To test with an i-phone emulator: http://www.genuitec.com/mobile/download.html
3. To test with the Black Berry emulator displayed below: https://www.blackberry.com/Downloads/entry.do?code=060AD92489947D410D897474079C1477 (Note: Download the BB Email and MDS Services Simulator Package. Start MDS Services Simulator before running the device simulator. RIM BB will work with Simulator Devices for v4.1 (for example, 7130e, 8700c,and so on) and up. More current simulator devices, v5.0, may not run using the MDS Services Simulator Package)

Image conversion service

The Image Conversion Service (ICS) will be used to convert the images to different formats and pixel depth. It can also reduce the color depth for a smaller color palette. We can use this to scale the image and we can also limit the output file to a particular size that can be handled by the device. The ICS may use the Caching Proxy of the WebSphere Application Server Edge Components as both a forward and reverse proxy. Using this feature it can cache source images fetched from the Web Server by ICS prior to conversion. It can also be installed on a separate WebSphere Application Server than WebSphere Portal and may clustered.



Typical Image Conversion Service flow

In the above service flow, when the Multi-Channel Server (MCS) encounters an image that should be converted by ICS, it includes a device-specific image tag specifying the URL of the ICS servlet. The URL also specifies where to find the image to be transcoded and the transcoding rule to apply when converting the image to a format that is supported by the mobile device.

1. When the mobile device's browser requests an image that should be transcoded, the device sends a request to the ICS servlet.

2. Using the image path and server information in the URL, and information from the ICS configuration file, the ICS servlet retrieves the original image from the image server. ICS uses the transcoding rule and any transcoding parameters included in the URL to transform the image.

3. The ICS servlet returns the transcoded image to the mobile device.

Virtual portal support

Virtual Portal support allows support for multiple brands and mobile virtual network operators. Virtual portals enable you to deploy additional portals quickly on an existing infrastructure. With virtual portals, you can use a single installation of Mobile Portal Accelerator to deploy multiple portals with different URLs, anonymous pages, user groups, and look and feel. Advantages of using virtual portals include reusing existing hardware, and simplified administration of multiple portals.

MPA device subscription service

A separately priced, related subscription service--IBM Mobile Portal Accelerator Device Update entitles customers to receive regular updates to the mobile device repository that include new mobile device definitions and updates as they become available from device manufacturers. The Mobile Portal Accelerator and Mobile Portal Accelerator Device Update service helps organizations quickly deliver personalized content, applications and services to mobile employees, customers and subscribers on the wide variety of mobile devices they use - even the latest devices available - without redeveloping their mobile Web applications.