Creation of hybrid portlet application for file download using

IBM Worklight and IBM Rational Application Developer v9

Gaurav Bhattacharjee
Lakshmi Priya
Agenda
 IBM Websphere Portal overview.

 IBM Web Content Manager (WCM).

 IBM Rational Application Developer overview.

 Creating multi-channel portlet application in RAD

 Web vs Hybrid vs Native

 IBM Worklight overview.

 Creating hybrid app in Worklight.

 Consuming portal content in the Worklight app

 Adding native functionality to the hybrid app.

5/1/2018
What is a Portal?
 Portal is a central place for making all types of information accessible to an
audience of varying range.

 Portal
– Enterprise Information Portals – Vast information consolidated in single
screen.
– Content Management Portals – Access and sharing of information.

sds
 IBM WebSphere Portal is a set of software tools that enables companies to build
and manage web portals. It provides a single access point to web content and
applications, while delivering differentiated, personalized experiences for each user.

3
Portal Principles
 Combines portlets (application user interfaces
and/or content) together into one unified
presentation

 Delivers a highly personalized experience,

considering role, personal settings, and device
settings

 Separates site design, site/page

assembly/administration, from application design

 Provides application integration, collaboration,

single sign-on services and much more

4
WCM Overview
 Web Content Manager is used to create, manage, and deliver content for your
website.
 It manages:

 The content and design of pages in a web site.

 The framework and navigation of a web site.
 The creation, editing, approval and publication of a web site's content.

5
Web Content Management features

Content management
 Web Content Management comes with a set of tools to manage the creation,
approval and publication of web content.

 Authoring templates : Authoring templates are used to store a set of default

values to be used when creating new content.

6
IBM Rational Application Developer
 IBM® Rational® Application Developer for WebSphere® Software accelerates
the development and deployment of Java, Java EE, Web 2.0, mobile, OSGi,
portal and service-oriented architecture (SOA) applications.

 Both expert and novice developers can increase productivity and efficiency by
using its many integrated capabilities for easier development, testing, analysis
and delivery of applications.
Creation of multi-channel portlet application
 Create a multi-channel portlet application in RAD that will provide different UI for
desktop browser and smartphone/tablet browsers.
 In this case you will design the application in such a manner that it will show you a list of web
content present in a sample library.

8
Web vs Native vs Hybrid
IBM Worklight
 IBM Worklight helps you extend your business to mobile devices.

 It is designed to provide an open, comprehensive platform to build, run and manage

HTML5, hybrid and native mobile apps.

 IBM Worklight can help you reduce both app development and maintenance costs,
improve time-to-market and enhance mobile app governance and security.
Hybrid application created in Worklight

 Create a hybrid application for smartphones in worklight.

 In this case you will develop a hybrid application that will get it's content from portal server and
augments it with native functionality so that it allows to download a file on the device.
Use case
 The portlet application that you will develop will use JAX-RS to retrieve the web content
present in a sample library present on WebSphere Portal server.

 The desktop version of this sample downloads the file onto any location that the user
chooses in the file system.

 The hybrid mobile version created using IBM Worklight would add native functionality of
downloading the selected file onto the device.

 The sample uses Dojo Mobile toolkit for UI generation of mobile version and dojo
widgets for desktop version.

 It uses JAX-RS to access IBM web content management libraries' content.

12
Creation of a hybrid application with native functionality
At a high level, it involves the following steps:
 Creation of a hybrid application (for android environment) in worklight.

 Updating the application to fetch contents from portal run-time. The cordova js file
would reside in the Portal side.

 Updating the portlet JSP to add a download icon when the portal page containing the
portlet is accessed by the application.

 Updating portlet application's javascript to invoke Apache Cordova APIs to download

the file onto the device.

 Finally testing the application developed on Android emulator.

13
Thanks

14