Delivering Mobile Content Using IBM Workplace Web Content Management and Websphere Everyplace

Delivering Mobile Content using IBM Lotus Web Content Management and WebSphere Everyplace Mobile Portal Enable 6.0

Jaye Fitzgerald - IBM SWG Westford MA

WebSphere Everyplace Mobile Portal Development

Kiran J Rao

WebSphere Everyplace Mobile Portal Development

This document assumes you have a working WebSphere Everyplace Mobile Portal Enable 6.0and IBM LotusWeb Content Management environment, and that you have created the Authoring and Presentation Templates, Menus, Workflow, and Site Areas described inEnd-to-End Contentin WebSphere Portal using Web Content Management 6.0. The following instructions apply to WEMP 6.0 and 6.0.1 with IBM Lotus Web Content Management 6.0.x.

Introduction

IBM Lotus Web Content Management (WCM) provides a means of creating, updating, managing, and presenting web content. It has been integrated with WebSphere Portal to allow management and presentation through portlets. Though many of the features of WCM are very specific to HTML, with some minor updates, and careful use of the features, it is possible to extend this capability so that WCM can be used to present content not only using HTML, but other markups such as the XML Device Independent Markup Extensions (XDIME). This means that WCM can be used to generate not only HTML portlet content intended for display on PCs, but also XDIME content which can be used by WEMP for display on mobile devices. With careful planning, it is possible, and advantageous, to create one instance of content which can be presented as both HTML and XDIME using different presentation templates. This means that only one copy of the content needs to be created and maintained to support both PCs and Mobile devices.

This document describes steps required to extend the Showcase News portlet to provide presentation to mobile devices through WEMP.

Updating the WCM rendering portlets

In order to support XDIME through the rendering portlets provided with WCM, there are some updates that are required. Both, the local rendering portlet and remote rendering portlet can be updated to support XDIME. Depending on your environment, either one of the portlets will need to be updated.

Update the WCM local rendering portlet to support XDIME

Follow the steps in this section if you are using WCM’s local rendering portlet as the front-end to WCM.

Note: These instructions assume that Portal has been installed on a Unix system.

This war file should be located in<portal_root>/installableApps/ilwwcm-localrendering-portlet.war where <portal_root> is the location where Portal is installed (Example: /opt/WebSphere/PortalServer/wcm/installableApps/ilwwcm-localrendering-portlet.war)

Expand the war file into a temporary directory.
md /warlocal
cd /warlocal
jar –xvf <portal_root>/installableApps/ilwwcm-localrendering-portlet.war
The original view.jsp will work fine for the most part, but since XDIME will go through XML processing, the “&” in the generated links needs to be changed to the entity “&”.
Edit jsp/html/view.jsp
Modify the line:

prefix = prefix + "?WCM_PORTLET=" + portletResponse.encodeNamespace("WCM") + "&" + PortletModel.WCM_GLOBAL_CONTEXT + "=";

to be:

prefix = prefix + "?WCM_PORTLET=" + portletResponse.encodeNamespace("WCM") + "&" + PortletModel.WCM_GLOBAL_CONTEXT + "=";

Copy the html view.jsp to an xdime directory
md jsp/xdime
cp jsp/html/view.jsp jsp/xdime/view.jsp
Enable the portlet for XDIME
Edit WEB_INF/portlet.xml
Modify:

</markup>

</supports>

to:

</markup>

</markup>

</supports>

Rebuild the war file
jar –cvf ilwwcm-localrendering-portlet.war *
Update the portlet with the new war file on your Portal server.
Login to Portal as an administrator
Select Administration -> Portlet Management ->Web Modules
Search by: File name starts with Search: ilwwcm
Select the Update Web module icon next to ilwwcm-localrendering-portlet.war
Browse to the war file you just created and select Next then Finish

Update the WCM remote rendering portlet to support XDIME

Follow the steps in this section if you are using WCM’s remote rendering portlet to front-end the WCM content.

Note: These instructions assume that Portal has been installed on a Unix system.

This war file should be located in<portal_root>/installableApps/ilwwcm-remoterendering-portlet.war where <portal_root> is the location where Portal is installed (Example: /opt/WebSphere/PortalServer/wcm/installableApps/ilwwcm-remoterendering-portlet.war)

Expand the war file into a temporary directory.
md /warremote
cd /warremote
jar –xvf <portal_root>/installableApps/ilwwcm-remoterendering-portlet.war
Copy the html view.jsp to an xdime directory
md jsp/xdime
cp jsp/html/view.jsp jsp/xdime/view.jsp
Enable the portlet for XDIME
Edit WEB_INF/portlet.xml
Modify:

</markup>

</supports>

to:

</markup>

</markup>

</supports>

Rebuild the war file
jar –cvf ilwwcm-remoterendering-portlet.war *
Update the portlet with the new war file on your Portal server.
Login to Portal as an administrator
Select Administration -> Portlet Management -> Web Modules
Search by: File name starts with Search: ilwwcm
Select the Update Web module icon next to ilwwcm-remoterendering-portlet.war
Browse to the war file you just created and select Next then Finish

Create a Mobile portlet which uses WCM content

Now that the included local rendering portlets have been modified to support XDIME, you can create a presentation template which generates XDIME rather than HTML. We will assume that you have gone through the exercise outlined inEnd-to-End Content in WebSphere Portal using Web Content Management 6.0by Theresa Smit. We will be building on the work that was performed there.

Restrictions:

Since the content that is retrieved from WCM must be XDIME rather than HTML, content components which generate HTML cannot be used for a mobile portlet. Examples of components which generate HTML are the Rich Text and Image components.

Update the Authoring Templates

Since we can’t use the Image or Rich Text components in XDIME, we need to expand the authoring template. We will now include a SCImageFile so that the image file itself can be referenced without having to rely on the image component which is generating HTML.We will also include a SC MobileBody component. This will be a Text Component rather than Rich Text so that HTML is not generated. It may also contain a condensed version of the body information since you will likely be working with smaller screens on mobile devices.

Note: If you don’t want to maintain duplicate information in the SC Image and SC ImageFile components, you could modify the SC PT MobileNews presentation template to generate an <img> HTML tag using the SC ImageFile rather than the SC Image component.

From Web Content Management portlet, MyShowcase Library, -> Authoring Templates
Select SC AT News and Edit
Select Default Content Settings link
Select Manage Elements
Set the Name: to SC ImageFile and select FileResourceComponent from the drop down list.
Select OK
Add SC Mobile Bodyand select Text Element type from the drop down.

Select OK
On the displayed list, click the up arrow next toSC ImageFile and until that component is below SC Image. Click the up arrow next to SC Mobile Body until it is below SC Body element.

Select OK then Save and Close

Similarly, update the authoring template for the Home Page.

Select “Authoring Templates” from the Authoring Portlet. Check “SC AT HomePage” and Click on Edit.

Click on “Manage Elements”.
Add a new Component Reference with the Name “SC Mobile Content List”.

Click “Add” and “OK”. Then Save and close.

Update the content based on the new Authoring Template

Select Content -> By Title
Select the checkbox next to the news details content, “Improvements to the Web Content Management authoring portlet” and “What’s new in the WCM authoring template”.

Select More Actions -> Apply Template

Select the radio button next to SC AT News, check Add new elements and Replace elements that have changed type.
Select OK
Check the box next to “Improvements to the Web Content Management authoring portlet” and click Edit or the title link.

Add content to SC MobileBody and upload an image to SCImageFile, select Upload. Browse to the wwcm6hero.jpg file which you had selected in the SC ImageFile component.
Select OK, then Save and Close
Do steps 6 through 8 for “What’s new in the WCM authoring template” news content.

Create a Mobile version of the SC Menu News Menu Component

The “SC Menu News”Menu component contains HTML markup to display each of results of the menu. A parallel Menu component needs to be created for XDIME.

Click on New->Component->Menu

Provide the name and display title as “SC Menu MobileNews”, and under “Menu Element Query”, check “Authoring Templates” and “Site Areas”.
Under “Authoring Templates” section, click on “Select Authoring Templates” button, and select “SC AT News”.
Under “Site Areas” section, click on “Select Site Areas” button, and select the “News” site area.

Refer to the following screenshot to specify the values under “Menu Design Properties”.

In “Header” text field, enter the following markup:

In the “Design for Each Menu Search Result” text box, enter the following XDIME markup:

<p<strong<a href="<Placeholder tag="href"/>"<IDCmpnt context="autoFill" type="content" field="title"/</a</strong</p>

<b>Profile: </b<ProfileCmpnt context="autoFill" type="content" field="categories" include="exact" separator=","/>

<p>

</p>

<p>

[Published: <WorkflowCmpnt context="autoFill" type="content" field="publishdate" format="MMMM dd, yyyy"/>]

</p>

When Image Conversion Service is used for images, replace “SC ImageFile” markup with the following markup with an ICS URL.

Replace: <img url="<Element context="autoFill" type="content" key="SC ImageFile" format="url"/>" />

With: <Element context="autoFill" type="content" key="SC ImageFile" start="img alt=’[ICSImg]’ urlc=’ end="’ /"/>

Where urlc follows this pattern:

urlc='

for example;

ICS_HOST=icsserver.mycompany.com

ICS_PORT=9082

urlc=’

Note: Anonymous access is required for ICS to access WCM.

In MyShowcase library, navigate to My Items -> Published

Select all with the top column checkbox. You’ll need to page through all Published pages for the following steps.

Select More Actions -> Edit Access

Set Access Level to Read

Click the Add button

Click the Search button

Select anonymous portal user

Click Ok

Set anonymous access for all published content.

Set anonymous access on User role for the Page and the portlet.

In the “Footer” text box, enter the following:

</pane>

Save and Close the Menu Component.

Now, the Authoring Template needs to be updated for the content “Here’s the News for the Company”.

In the WCM Authoring Portlet, Select “Content”->”ByTitle”. Select the “Here’s the News for the Company” content, and click on Edit.

Click on “Apply Authoring Template”.
Select the Radio Button for “SC AT Home Page” and the check-boxes for “Add New Elements” and “Replace elements that have changed type”.
Click OK

Back in the Content page, scroll down and locate “SC Mobile Content List”. Here, click on “Select Component”.

Here, select the “SC Menu MobileNews” menu component which you just created.

Click OK and Save and Close the content.

Create a new Mobile presentation template

Note1: This is assuming that the same image file used for an HTML page will be used in the mobile page.

Note2: For simplicity, this XDIME is referencing a global layout policy which is shipped as part of WEMP. If a custom layout policy is wanted, then it can either be imported into WEMP as a global policy, or served by a Remote Policy Server.

Note3: Be aware that when the presentation template is saved, WCM does some processing and some of the tags which are similar to HTML tags may be modified. You should review the presentation markup after saving to make sure it is still valid. The XDIME provided with this example should have no problem.

Select New -> Presentation Template
Click OK
In the Identification section, enter SC PTMobileNews as the Name and Title, “News items page for Mobile devices” as the Description.
In the Presentation Template section, replace the existing HTML markup with the following XDIME markup.

<img url="<Element context="current" type="content" key="SC ImageFile"/>" alt="[Image]" />

<h3<IDCmpnt context="current" type="content" field="title"/</h3>

<p<Element context="current" type="content" key="SC Summary"/</p>

<p<strong>Confidential level: </strong> <Element context="current" type="content" key="SC Confidental"/</p>

</pane>

</canvas>

When Image Conversion Service is used for images, replace “SC ImageFile” markup with the following markup with an ICS URL.

Replace: <img url="<Element context="autoFill" type="content" key="SC ImageFile" format="url"/>" />

With: <Element context="autoFill" type="content" key="SC ImageFile" start="img alt=’[ICSImg]’ urlc=’ end="’ /"/>

Where urlc follows this pattern:

urlc='

for example;

ICS_HOST=icsserver.mycompany.com

ICS_PORT=9082

urlc=’

Select Save then Close
Select New -> Presentation Template
Click OK
In the Identification section, enter SC PTMobileHome as the Name and Title, and “Homepage for Mobile devices” as the Description.
In the Presentation Template section, replace the existing HTML markup with the following XDIME markup.

<h3<IDCmpnt context="current" type="content" field="title"/</h3>

</pane>

</pane>

</canvas>

Select Save then Close

Create a Mobile Portlet Instance

Copy the Web Content Viewer portlet.

Open WebSphere Portal Administration by clicking on the Administration tab.
Click on Portlet Management.
Click on Portlets.
In the Search window, type Web, then click Search
Find the Web Content Viewer portlet and click the Copy Portlets icon.
Name both the new portlet application, and portlet SC Mobile News.
Set anonymous access for User Role on this portlet instance if ICS is being used in the menu.
Click OK

Create an instance of the portlet on a Mobile Page

Select Manage Mobile Pages
Expand Content Root -> Home -> Mobile Portal ->
In the left panel under Manage Mobile Pages, click the New Page icon
Under Title, enter Mobile News
In the Type of Page section, check the XDIME box
Select OK
Set anonymous access for User Role on this page if ICS is being used in the menu.
In the left panel of the Manage Mobile Pages section, select Mobile News
In the Portlets section of the right panel, select Edit
In the left panel, click Add portlets
Search by Title starts with Search: SC Mobile News

Select SC Mobile News and click OK
Click Done

Configure the new portlet

Click Portlets Edit button again.
Click the down arrow next to SC Mobile News

Click Edit under Content and Select the News content under Sites: /MyShowcase/Showcase Internal Site/News
Click Edit under Alternate Presentation Template
Select SC PT MobileHome
Select OK
Select None under Broadcast Links To:.
Select Mobile News page under Select a target portal page.
SelectOther Portlets and this portlet under Receive Links From:.
Select OK

Note: For the Department News portlet (non mobile) to continue to work properly, you may need to update its portlet configuration to add an Alternate Presentation Template of SC AT News.

Access the Mobile portlet

Using a mobile device simulator, access the portlet you just created.