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.0 and IBM Lotus Web Content Management environment, and that you have
created the Authoring and Presentation Templates, Menus, Workflow, and Site Areas
described in End-to-End Content in 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/ilwwcmlocalrendering-portlet.war where <portal_root> is the location where Portal is installed
(Example: /opt/WebSphere/PortalServer/wcm/installableApps/ilwwcm-localrenderingportlet.war)


Expand the war file into a temporary directory.
o md /warlocal
o cd /warlocal
o jar –xvf <portal_root>/installableApps/ilwwcm-localrenderingportlet.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 “&amp;”.
o Edit jsp/html/view.jsp
o Modify the line:
prefix = prefix + "?WCM_PORTLET=" +
portletResponse.encodeNamespace("WCM") + "&" +
PortletModel.WCM_GLOBAL_CONTEXT + "=";
to be:


prefix = prefix + "?WCM_PORTLET=" +
portletResponse.encodeNamespace("WCM") + "&amp;" +
PortletModel.WCM_GLOBAL_CONTEXT + "=";
Copy the html view.jsp to an xdime directory
o md jsp/xdime
o cp jsp/html/view.jsp jsp/xdime/view.jsp
Enable the portlet for XDIME
o Edit WEB_INF/portlet.xml
o Modify:
<supports>
<markup name="html">
<view />
<configure />
</markup>
</supports>
to:
<supports>
<markup name="html">
<view />
<configure />
</markup>
<markup name="xdime">
<view />
</markup>
</supports>


Rebuild the war file
o jar –cvf ilwwcm-localrendering-portlet.war *
Update the portlet with the new war file on your Portal server.
o Login to Portal as an administrator
o Select Administration -> Portlet Management -> Web Modules
o Search by: File name starts with Search: ilwwcm
o Select the Update Web module icon next to ilwwcm-localrenderingportlet.war
o 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 frontend 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/ilwwcmremoterendering-portlet.war where <portal_root> is the location where Portal is
installed (Example: /opt/WebSphere/PortalServer/wcm/installableApps/ilwwcmremoterendering-portlet.war)



Expand the war file into a temporary directory.
o md /warremote
o cd /warremote
o jar –xvf <portal_root>/installableApps/ilwwcm-remoterenderingportlet.war
Copy the html view.jsp to an xdime directory
o md jsp/xdime
o cp jsp/html/view.jsp jsp/xdime/view.jsp
Enable the portlet for XDIME
o Edit WEB_INF/portlet.xml
o Modify:
<supports>
<markup name="html">
<view />
<configure />
</markup>
</supports>
to:
<supports>
<markup name="html">
<view />
<configure />
</markup>
<markup name="xdime">
<view />
</markup>
</supports>


Rebuild the war file
o jar –cvf ilwwcm-remoterendering-portlet.war *
Update the portlet with the new war file on your Portal server.
o Login to Portal as an administrator
o Select Administration -> Portlet Management -> Web Modules
o Search by: File name starts with Search: ilwwcm
o Select the Update Web module icon next to ilwwcm-remoterenderingportlet.war
o 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 in End-to-End Content in
WebSphere Portal using Web Content Management 6.0 by 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 SC ImageFile 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.
1. From Web Content Management portlet, MyShowcase Library, -> Authoring
Templates
2. Select SC AT News and Edit
3. Select Default Content Settings link
4. Select Manage Elements
5. Set the Name: to SC ImageFile and select File Resource Component from the
drop down
list.
6. Select OK
7. Add SC Mobile Body and select Text Element type from the drop down.
8. Select OK
9. On the displayed list, click the up arrow next to SC 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.
10. Select OK then Save and Close
Similarly, update the authoring template for the Home Page.
1. Select “Authoring Templates” from the Authoring Portlet. Check “SC AT
HomePage” and Click on Edit.
2. Click on “Manage Elements”.
3. Add a new Component Reference with the Name “SC Mobile Content List”.
4. Click “Add” and “OK”. Then Save and close.
Update the content based on the new Authoring Template
1. Select Content -> By Title
2. 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”.
3. Select More Actions -> Apply Template
4. Select the radio button next to SC AT News, check Add new elements and
Replace elements that have changed type.
5. Select OK
6. Check the box next to “Improvements to the Web Content Management
authoring portlet” and click Edit or the title link.
7. Add content to SC MobileBody and upload an image to SC ImageFile, select
Upload. Browse to the wwcm6hero.jpg file which you had selected in the SC
ImageFile component.
8. Select OK, then Save and Close
9. 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.
1. Click on New->Component->Menu
2. Provide the name and display title as “SC Menu MobileNews”, and under
“Menu Element Query”, check “Authoring Templates” and “Site Areas”.
a. Under “Authoring Templates” section, click on “Select Authoring
Templates” button, and select “SC AT News”.
b. Under “Site Areas” section, click on “Select Site Areas” button, and
select the “News” site area.
3. Refer to the following screenshot to specify the values under “Menu Design
Properties”.
4. In “Header” text field, enter the following markup:
<pane name="Pane3">
5. In the “Design for Each Menu Search Result” text box, enter the following
XDIME markup:
<img url="<Element context="autoFill" type="content" key="SC
ImageFile" format="url"/>" />
<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>
<Element context="autoFill" type="content" key="SC Summary"/>
</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=’http://<ICS_HOST>:<ICS_PORT>/ics/ics"
end="’ />"/>
Where urlc follows this pattern:
urlc='http://<ICS_HOST>:<ICS_PORT>/ics/ics"
for example;
ICS_HOST=icsserver.mycompany.com
ICS_PORT=9082
urlc=’http://iscserver.mycompany.com:9082/ics/ics
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
Click Ok
Set anonymous access for all published content.
Set anonymous access on User role for the Page and the portlet.
6. In the “Footer” text box, enter the following:
</pane>
7. Save and Close the Menu Component.
Now, the Authoring Template needs to be updated for the content “Here’s the News for
the Company”.
1. In the WCM Authoring Portlet, Select “Content”->”By Title”. Select the
“Here’s the News for the Company” content, and click on Edit.
2. Click on “Apply Authoring Template”.
3. Select the Radio Button for “SC AT Home Page” and the check-boxes for “Add
New Elements” and “Replace elements that have changed type”.
4. Click OK
5. Back in the Content page, scroll down and locate “SC Mobile Content List”.
Here, click on “Select Component”.
6. Here, select the “SC Menu MobileNews” menu component which you just
created.
7. 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.
1. Select New -> Presentation Template
2.
3. Click OK
4. In the Identification section, enter SC PT MobileNews as the Name and Title,
“News items page for Mobile devices” as the Description.
5. In the Presentation Template section, replace the existing HTML markup with
the following XDIME markup.
<canvas layoutName="mcsi:policy('default',
'/wp_xhtml_webclip.mlyt')" type="portlet">
<pane name="Pane1">
<Component name="MyShowcase/sc link news home"/>
<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>
<Element context="current" type="content" key="SC Mobile
Body"/>
</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=’http://<ICS_HOST>:<ICS_PORT>/ics/ics"
end="’ />"/>
Where urlc follows this pattern:
urlc='http://<ICS_HOST>:<ICS_PORT>/ics/ics"
for example;
ICS_HOST=icsserver.mycompany.com
ICS_PORT=9082
urlc=’http://iscserver.mycompany.com:9082/ics/ics
6. Select Save then Close
7. Select New -> Presentation Template
8.
9. Click OK
10. In the Identification section, enter SC PT MobileHome as the Name and Title,
and “Homepage for Mobile devices” as the Description.
11. In the Presentation Template section, replace the existing HTML markup with
the following XDIME markup.
<canvas layoutName="mcsi:policy('default',
'/wp_xhtml_webclip.mlyt')" type="portlet">
<pane name="Pane1">
<h3><IDCmpnt context="current" type="content"
field="title"/></h3>
</pane>
<pane name="Pane2">
<Element context="current" type="content" key="SC
BodyText"/>
</pane>
<Element context="current" type="content" key="SC Mobile
Content List"/>
</canvas>
12. Select Save then Close
Create a Mobile Portlet Instance
Copy the Web Content Viewer portlet.
1. Open WebSphere Portal Administration by clicking on the Administration tab.
2. Click on Portlet Management.
3. Click on Portlets.
4. In the Search window, type Web, then click Search
5. Find the Web Content Viewer portlet and click the Copy Portlets icon.
6. Name both the new portlet application, and portlet SC Mobile News.
7. Set anonymous access for User Role on this portlet instance if ICS is being used
in the menu.
8. Click OK
Create an instance of the portlet on a Mobile Page
1. Select Manage Mobile Pages
2. Expand Content Root -> Home -> Mobile Portal ->
3. In the left panel under Manage Mobile Pages, click the New Page icon
4.
5. Under Title, enter Mobile News
6. In the Type of Page section, check the XDIME box
7. Select OK
8. Set anonymous access for User Role on this page if ICS is being used in the
menu.
9. In the left panel of the Manage Mobile Pages section, select Mobile News
10. In the Portlets section of the right panel, select Edit
11. In the left panel, click Add portlets
12. Search by Title starts with Search: SC Mobile News
13. Select SC Mobile News and click OK
14. Click Done
Configure the new portlet
1. Click Portlets Edit button again.
2. Click the down arrow next to SC Mobile News
3. Click Edit under Content and Select the News content under Sites:
/MyShowcase/Showcase Internal Site/News
4. Click Edit under Alternate Presentation Template
5. Select SC PT MobileHome
6. Select OK
7. Select None under Broadcast Links To:.
8. Select Mobile News page under Select a target portal page.
9. Select Other Portlets and this portlet under Receive Links From:.
10. 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.