Liberate mobile devices from their browsers: Integrating IBM Web Content Manager and Worklight to make web content consumable by a mobile app

IBM® Web Content Manager enables users to create and manage content that is displayed on the web. Because there is no direct integration between Web Content Manager and mobile applications, a user needs to use a web browser in order to render Web Content Manager contents on a mobile device or tablet. Mobile applications built with IBM Worklight® use REST interfaces to retrieve data from the server side in JSON format. This article shows how you can expose Web Content Manager content using a REST/JSON interface that can be consumed from mobile applications implemented with Worklight. This same technique can also be used for a REST/XML interface, and also for non-Worklight applications. This content is part of the IBM WebSphere Developer Technical Journal.

Hala A Aziz (haziz@eg.ibm.com), IT Specialist, IBM

Hala Aziz has eight years of experience in WAS, Portal, WCM, WebSphere ILOG and IBM Worklight . She worked as an IT Specialist and Consultant for eGov customers, Telecommunication companies and worked on an IBM Accelerated Value Program (AVP) for supporting important customers for WebSphere ILOG Product, worked for internal IBM projects and also worked with non-IBM products like Microsoft Visual Studio as a C and C# software developer. Hala is a certified WCM 6.0 Application Developer and also is a certified ILOG JRules 7.0. Hala is now an IT Specialist in CTDC-IBM Egypt.



Hisham Abdel Hafez (hhafez@eg.ibm.com), Expert IT Specialist, IBM

Hisham Abdel Hafez is a certified expert IT Specialist in IBM Egypt. He has more than 7 years of experience in developing web and mobile applications. Hisham's experience with Mobile application development started from the Symbian days and progressed to reach the IBM Worklight era.



Tamer Mahfouz (tmahfouz@eg.ibm.com), IT Application Architect, IBM

Tamer Mahfouz has 19 year of experience in the IT field with 11 years as an Architect in IBM. Strong knowledge in web development including WebSphere Portal/WCM and mobile development with main focus on application architecture, design, tuning and troubleshooting.



09 April 2014

Introduction

IBM Web Content Manager enables you to create and manage content that is displayed on the web. There is no direct integration between Web Content Manager and mobile applications.

Mobile applications built with IBM Worklight use a REST interface to retrieve data from the server side in JSON format. This article describes how you can expose Web Content Manager content using a REST/JSON interface that can be consumed by mobile applications implemented using Worklight. This same technique can also be used for REST/XML interfaces, and also for non-Worklight applications.

The basic idea is to use the Web Content Manager connect servlet to render a Web Content Manager component, such as a Menu component, and implement that component with JSON syntax so that the result of calling the connect servlet will be JSON format.


A look at the tools

For the purpose of this article, only the read operation (HTTP GET) will be used in this example. This article will not include the creation of the contents, which are assumed to have been created and edited via the Web Content Manager authoring tool.

IBM Web Content Manager is used to create, manage, and deliver content for a website. You can create content either by using the web content authoring portlet, or you can create your own customized authoring interface. Web content stored in external content management systems can also be referenced within a Web Content Manager system. You can deliver your web content using web content viewer portlets, the Web Content Manager servlet, or you can pre-render your site to HTML.

The layout and design elements of a website can be managed separately from its content. This enables you to change the presentation and design of a web page without changing the content, and vice versa. Web content authors, then, can create the content for your site without having to understand its design or how it was constructed. Using the Web Content Manager, the contents you create can be designed to deliver different web experiences to different types of users.

IBM Worklight is provides an open, comprehensive, and advanced mobile application platform for smartphones and tablets. It helps organizations of all sizes efficiently develop, test, connect, run, and manage mobile applications using standards-based technologies and tools. To start creating Worklight applications you can download IBM Worklight Developer Edition.


Using Web Content Manager connect servlet

The integration between Worklight and Web Content Manager is done through the Web Content Manager connect servlet. Using the connect servlet, you can retrieve a single content item or a list of contents.

Through the following example, you will see how to create the Menu component in the Web Content Manager to be called via the servlet to retrieve a list of contents.

This simple example shows only one uses of the Web Content Manager connect servlet; in this case, to call a menu component. For details on the full use of the connect servlet, see Displaying content via the Web Content Management servlet.

Assume the following components are created in Web Content Manager:

  • Library named News_Library, containing these components:
    • SiteArea named News
    • Authoring Template named at_News, with the elements:
      • title: Text
      • summary: Text
    • Workflow named News Workflow, with two stages:
      • Draft
      • Publish
    • Six content items under the News SiteArea with these names:
      • news_1
      • news_2
      • news_3
      • news_4
      • news_5
      • news_6
    • In the workflow, add [anonymous portal users] to the User Role, so that [anonymous portal users] can access the content.

Creating the component

Create a new Menu component under News_Library with:

  • Name:menu_News_JSON
  • Title:menu_News_JSON
  • Menu Criteria:
    • Location:
      • Include descendants
      • News_Library/News
  • Menu Design Properties:
    • Display order: Descending
    • Sort results first by Publish Date, then by Title, then by Creation Date
  • List Paging Options:
    • Results per page: 1000 (to list all the news, not the first page only)
  • List Presentation Markup:
    Listing 1. Header
    [

    Listing 2. Result design
    {
    "name": "[Property context="autofill" type="content" field="name"]",
    "title": "[Element context="autofill" type="content" key="title"]",
    "summary": "[Element context="autofill" type="content"  key="summary"]",
    "publish-date": "[Property type="content" context="autofill" field="publishdate"
         format="YYYY-MM-dd HH:mm"]"
    }

    Listing 3. Footer
    ]

    Listing 4. Separater
    ,

Save and close.

Testing the connect servlet for content retrieval as JSON

To test the Web Content Manager connect servlet to retrieve the news contents from the Menu Component, call the Menu Component with this URL:

http://[HOST]:[PORT]/wps/wcm/connect/News_Library/News/news_1?srv=cmpnt&source=library&cmpntname=menu_News_JSON

where:

  • [HOST]: is the host server name or IP.
  • [PORT]: is the port of the portal default host.

The contents will be returned in JSON format, as shown in Figure 1, with the sample contents created under the News SiteArea.

Figure 1. Result from calling Web Content Manager connect servlet on a browser
Result from calling Web Content Manager connect servlet on a browser

Building a Worklight Adapter to consume Web Content Manager content

A Worklight project is a container that can include multiple mobile applications. It enables resources and server components to be shared across mobile applications. To create a new Worklight project:

  1. Select File > New > Worklight Project.
  2. For the Project Name, enter WCMProj. Keep Hybrid Applications selected and click Next.
  3. For Application Name, enter WCMApp and click Finish.

Building the adapter

Worklight Adapters are the server-side code of applications that are deployed on and serviced by Worklight. Adapters connect to enterprise applications (in this example, IBM Intelligent Operations Center) to deliver data to and from mobile applications, performing any necessary server-side logic on this data.

In order to consume the Web Content Manager connect service, an adapter of type HTTP will be needed. To create a new HTTP adapter:

  • Click File > New > Other > Worklight Adapter.
  • Choose the Adapter type HTTP Adapter and name it WCMAdapter. Click Finish.

The Adapter Editor view should now be open in Eclipse. Configure the adapter to connect to the Web Content Manager connect service, expand the Connectivity node, and select Connection Policy. In the Domain field, enter the Web Content Manager servlet URL:

http://[HOST]:[PORT]/wps/wcm/connect/News_Library/News/news_1?srv=cmpnt&source=library&cmpntname= menu_News_JSON

Keep the Protocol field at http.

Worklight creates two adapter procedures by default; you need to remove them. Delete the procedures named getStories and getStoriesFiltered. Instead, add a new procedure and name it getWCMContent. Move to the adapter implementation file WCMAdapter-impl.js and add the code shown in Listing 5.

Listing 5. getWCMContent code
function getWCMContent() {
                    var path = "wps/wcm/connect/News_Library/News/news_1? 
                    srv=cmpnt&source=library&cmpntname=menu_News_JSON";
                    var input = {
                    method : 'get',
                    returnedContentType : 'json',
                    path : path
                    };
                    return WL.Server.invokeHttp(input); }

Testing the adapter

Worklight provides an easy way to test adapter code without fully integrating it with the mobile application:

  • In Project Explorer view, right-click on the adapter and select Run as .. > Invoke Worklight procedure.
  • Select the getWCMContent procedure to be tested. In the Procedure Parameters field, specify a comma separated list, which in this case will be empty.
  • A web page is opened in Eclipse showing the results of the procedure invocation, as shownin Figure 2.
Figure 2. Results returned from procedure invocation on Eclipse
Results returned from procedure invocation on Eclipse

Click to see larger image

Figure 2. Results returned from procedure invocation on Eclipse

Results returned from procedure invocation on Eclipse

Using the adapter

From here, building the mobile application is a piece of cake; all you have to do is consume the Web Content Manager adapter like any other adapter and show the news content to the user. The code sample included with this article provides an example application that consumes the Web Content Manager connect servlet and displays the retrieved data.

When the sample application is run, it will show a list of news items available on the Web Content Manager server (Figure 3).

Figure 3. List of news items on the mobile app
List of news items on the mobile app

When any of the news items is pressed, another view will display the news item in detail (Figure 4).

Figure 4. News details on mobile app
News details on mobile app

Conclusion

This article showed an example of how you can easily integrate IBM Web Content Manager with an IBM Worklight mobile application by rendering Web Content Manager contents via a REST/JSON interface that is then consumed in the mobile app built with Worklight.

Resources

Learn

Get products and technologies

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into WebSphere on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=WebSphere, Mobile development, Lotus
ArticleID=967962
ArticleTitle=Liberate mobile devices from their browsers: Integrating IBM Web Content Manager and Worklight to make web content consumable by a mobile app
publish-date=04092014