In this session, you'll learn techniques for extending your IBM Websphere Portal to mobile applications across iOS and Android devices. Experts from our User Experience team will demonstrate how to easily build IBM Worklight applications that integrate with personalization and web content features provided by Portal. You'll see how to use tools such as IBM Web Experience Factory and IBM Web Content Manager and how to leverage capabilities such as Portlet Services and mobile themes to develop a mobile application running on IBM Worklight in both online and offline modes. At the end of this session, you will be ready to take advantage of the IBM Worklight entitlement provided by IBM to take your Portal to the mobile world!

1. BP407 Portal at the Speed of Light:
Techniques for IBM Worklight
Integration
Handly Cameron | Technology Manager
Laks Sundararajan | Solution Architect
© 2013 IBM Corporation

2. Who We Are
Handly Cameron
─ Agile, Developer, Architect, Photographer, Father
─ @handly, handly.org
─ hcameron@prolifics.com
Laks Sundararajan
─ Mobile Evangelist, Developer, Architect, Golfer
─ @lakssundar
─ lsundara@prolifics.com
2 © 2013 IBM Corporation

3. Agenda
Multichannel web sites and applications
Quick overview of IBM® Worklight®
Approaches for building multi-channel applications
Best Practices Speed Round
Q&A
3 © 2013 IBM Corporation

4. Agenda
Multichannel web sites and applications
Quick overview of Worklight
Approaches for building multi-channel applications
Best Practices Speed Round
Q&A
4 © 2013 IBM Corporation

5. Consumers do not see “channels”
5

6. Consumers do not see “channels”
Research Schedule Check Status Schedule Initiate/Track
Call Create Order Change Cancel Order Store Pickup
Product Delivery Return
Center Order
Research Change Schedule Check Status Schedule Initiate/Track
Mobile Product Create Order Order Delivery Cancel Order Store Pickup Return
Research Change Schedule Check Status Schedule Initiate/Track
Web Create Order Delivery Cancel Order Store Pickup
Product Order Return
Research Change Schedule Check Status
Store Create Order Cancel Order Pickup Initiate/Track
Product Order Delivery
Return
… they want a consistent experience everywhere!
6

7. You need a way to deliver that experience
Multi-channel Sites and Applications
IBM® WebSphere® Portal®
IBM Web Content Manager®
IBM Mobile Foundation®
– IBM Worklight®
– IBM Cast Iron®
– IBM Mobile Endpoint Manager®
IBM Web Experience Factory®
IBM WebSphere MQ®
7

8. Agenda
Multichannel web sites and applications
Quick overview of IBM Worklight
Approaches for building multi-channel applications
Best Practices Speed Round
Q&A
8 © 2013 IBM Corporation

9. IBM Worklight – What is it?
Worklight Studio
Eclipse based IDE including design tools, code reuse, and per-
device optimization
Worklight Server
Unified push notifications, runtime skins, version management,
security, integration and delivery
Worklight Console
A web-based console for real-time analytics and control of your
mobile apps and infrastructure
Worklight Runtime Components
Extensive libraries and client APIs that expose and interface
with native device functionality
9

10. Device Runtime Components
Extensive libraries and client APIs that expose
and interface with native device functionality and
the Worklight server
• Cross-Platform Compatibility Layer
• Server Integration Framework
• Encrypted Storage
• Offline Authentication
• Runtime Skinning
• Statistics and Diagnostics Reporting
• Apache Cordova (PhoneGap)
10

11. Application Updates
1. Web resources initially
Native Shell packaged with the app to
1 Download
ensure first offline availability
Pre-packaged
resources 2. Web resources transferred to
App Store app's cache storage
2 Transfer 3. App checks for updates
• On startup
3 Check for
updates • On return to foreground
Cached 4. Updated web resources
Worklight Web resources downloaded when
Server resources necessary
4 Update web
resource
11

12. Multichannel Feature Pack for Web Experience Factory 8.0
Available now as a download from the Solutions Catalog
Key Features:
Multichannel and Responsive UI support:
– New Layouts for the Data Layout builder
– New Responsive Web Design (RWD) themes
including compatibility with CTC4 and
WebSphere Portal Mobile themes
– New wizard making it easy to include this new
support
IBM Worklight Camera Builder
– Easily add hybrid camera capabilities to a
model
12

13. Web Experience Factory
Applications now support new out of the box responsive theme
Out of the box capabilities including CTC4 and and
stand-alone Responsive Web Design themes
Key benefits include:
•Faster and easier to build solution
•Fits in with other CTC4 based solutions
•Supports multiple channels including desktop
browsers, smartphones and tablets
13

14. New models and wizards reference new Feature pack styles and
layouts
Select from CTC4
compatible
layout
templates to
easily build
RWD
application
portlets
14

15. WEF integration with Worklight
New Camera Builder
• Easily support multiple
channels with point and click
development
• Minimal coding/learning
curve required
Easily add native
device capabilities
to mobile web
applications.
JMP306: Build Hybrid Multi-Channel Apps Using IBM
Worklight, WebSphere Portal and Web Experience
Factory
15
IBM Web Experiences - © 2012 IBM
Corporation

16. Agenda
Multichannel web sites and applications
Quick overview of IBM Worklight
Approaches for building multi-channel applications
Best Practices Speed Round
Q&A
16 © 2013 IBM Corporation

17. Things to consider
Native device capabilities (camera, contacts, location, etc.)
Presence in a device app store
Offline use
Cross-channel authentication
Want to reuse application infrastructure and design
Content management
Role based personalization
17 © 2013 IBM Corporation

18. Approaches for building multi-channel applications
1. Standalone Portal: Responsive Web Design
2. Standalone Worklight: Mobile Application
3. Using Portal to host Worklight application pages
4. Personalized content driven by Web Content Manager
5. Integration with back end systems
18 © 2013 IBM Corporation

19. Approach 1: Standalone Portal: Responsive Web Design
Standard WebSphere Portal deployment.
When to use
Existing WebSphere Portal infrastructure
DOJO Portlet
Connectors
WebSphere
Limited/ No Offline support is required Portal
Navigation
Limited/No support for native mobile
Responsive
services is required Themes
AppStore presence is not required
19 © 2013 IBM Corporation

20. Approach 1: Standalone Portal: Responsive Web Design
Servers
Mobile Browser
Back End Systems
• Application HTML
DOJO Portlet
• Personalized content
Connectors
WebSphere
• Access Control Portal
Browser cache
(HTML5) Navigation
Responsive
• Form submission Themes
20

21. Responsive Design Themes
More than just allowing RWD
Portal supports device classes to enable
smarter rendering on the server side
(themes, content and portlets)
21

22. Updated Page Templates in CTC 4
22

23. With Modern, Attractive Designs
23

24. 24

25. That are Responsive
25

26. And since it's all based on WCM and Portal's common theme, of course
it supports all your devices without any additional work.
26

27. Approach 2: Standalone Worklight Deployment
Standard IBM Worklight deployment.
When to use IBM Worklight Server
No existing WebSphere Portal
Service Adapters
No personalization or integration with
existing web sites
App store presence Application Mgt
Data
Push notifications Synchronization
Unified Push
Engine
Sync JSON data for offline use
Automatic JSON data conversion
27 © 2013 IBM Corporation

28. Approach 2: Standalone Worklight Deployment
Servers
Worklight App IBM Worklight Server
• Core application HTML
Back End Systems
Service Adapters
Pre-packaged
resources
• HTML updates Application Mgt
• JSON data
Data
• Push Notifications/SMS
Synchronization
Cached Unified Push
resources Engine
• Authentication
• Adapter requests
28

29. Approach 3: Using Portal to host Worklight application pages
WebSphere Portal and Worklight
When to use
Adapters
IBM Worklight
Server
Existing Portal infrastructure and apps
Portal provides multi-channel capabilities
Single Sign On
App store presence required
Push notifications
Worklight Portlet
WebSphere
Connectors
Support for native mobile services Portal
Limited support for content management Managed web
resources
within mobile application is required
Mobile JS
resources
29 © 2013 IBM Corporation

30. Approach 3: Using Portal to host application pages
Servers
• Worklight application shell
• Push Notifications/SMS
Worklight App
Adapters
IBM Worklight
Back End Systems
Server
• Adapter requests
Pre-packaged
resources
Single Sign On
• Application HTML & JS
Worklight Portlet
• JSON data
WebSphere
Connectors
Cached Portal
resources
• Authentication
Managed web
resources
Mobile JS
resources
30

31. Technique 1: Override initial Worklight WebView load
1. Change iOS whitelist: iphonenativecordova.plist
<key>OpenAllWhitelistURLsInWebView</key>
<false/>
<key>ExternalHosts</key>
<array>
<string>*</string>
</array>
2. Change Android whitelist: androidnativeresxmlconfig.xml
<access origin="http://myportal.com"/>
3. Change Request load in didFinishLaunchingWithOptions:
iphonenativeClassesappName.m
(See handly.org for details)
31 © 2013 IBM Corporation

32. Technique 1: Override initial Worklight WebView load
4. Update protocol, host, port, and wlServerContext in:
iphonenativeResourcesWorklight.plist
<key>protocol</key> <string>http</string>
<key>host</key> <string>myportal.com</string>
<key>port</key> <string>10039</string>
<key>wlServerContext</key> <string>/wps/portal/apphome</string>
5. Change loadURL in: androidnativesrccomappNameappName.java
public class appName extends WLDroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//DeviceAuthManager.getInstance().setProvisioningDelegate(<Use default ProvisioningDelegateImpl
class or replace with your IProvisioningDelegate implementation>);
super.loadUrl("http://myportal.com/wps/portal/apphome");
}
}
32 © 2013 IBM Corporation

33. Technique 2: Use JavaScript to load a Portal-based page
1. User actions calls a viewController
<li data-dojo-type="dojox.mobile.ListItem” data-dojo-props='clickable:true, moveTo:"events",
icon:"images/event.png"' onclick="loadEventContent”>Events</li>
2. viewController calls openExternalView and loads a Dojo container
var eventsViewController = ViewController.getInstance();
loadEventContent = function(e){
eventsViewController.openExternalView({
url : "http://myportal.com/wps/portal/mobileportlet",
transition : "slide"
}, registry.byId(”events").containerNode);
};
3. Container displays your Portal application controls and content
<div id="events" data-dojo-type="dojox.mobile.ScrollableView" data-dojo-props='selected:false'>
<h1 data-dojo-type="dojox.mobile.Heading” data-dojo-
props="label:'Events',fixed:'top',back:'Back',moveTo:'mainView'"></h1>
</div>
33 © 2013 IBM Corporation

34. Approach 4: Personalized Content driven by WCM
Web Content Manager and Worklight
When to use
Adapters
IBM Worklight
Server
Similar to Approach 3, add WCM
You want to to place information into your
application using a publishing workflow Single Sign On
without causing an app update.
WebSphere
You have special offers that you want to
WCM Rendering
Portal &
Connectors
present to specific users based on their Web Content
account or other attributes. Manager
WCM
Authoring
Content
Templates
34 © 2013 IBM Corporation

35. Approach 4: Personalized Content driven by WCM
Servers
• Worklight application shell
• Push Notifications/SMS
Worklight App
Adapters
IBM Worklight
Back End Systems
Server
• Adapter requests
Pre-packaged
resources
Single Sign On
WebSphere
WCM Rendering
• Targeted Content Portal &
Connectors
Cached Web Content
resources Manager
• Authentication
WCM
Authoring
Content
Templates
35

36. Content Targeting (aka, Personalization)
Additional Personalization Contexts
– Our personalization system is quite powerful and can be based on
just about any context you wish.
• However, extending personalization to include additional
context requires programming
– There are a number of common contexts that weren't previously
included out of the box, but now they are
• Geo-location Object – target a user based on physical location
• Referrer object – where did this user come from, what search terms
go them here
• Device Class – desktop, smart phone, or tablet
Inline Content Targeting
– exposes targeting rules directly to Business
Users/Authors
36

37. Demo
37 © 2013 IBM Corporation

38. Approach 5: Integration with back end systems
IBM Mobile Foundation
– Integration with through Cast-Iron
Worklight TIP
Connectors
– Leverage existing BPM systems
WebSphere
Cast Iron
When to use
Use this to extend the previous Approaches
Notifications
Existing SOA and cloud deployments
Message Flows
WebSphere
Drive push notifications from backend MQ
applications
Message
REST
Broker
Service
38 © 2013 IBM Corporation

39. Approach 5: Integration with back end systems
Servers
Worklight TIP
Connectors
Worklight App
Cast Iron
Adapters
• Core app
HTML WebSphere
Cast Iron
Back End Systems
Pre-packaged
resources
IBM
• HTML Worklight
updates
Notifications
Server
• JSON data
Message Flows
• Push WebSphere
MQ
MQ Broker
Notification
Adapters
Cached
resources
• JSON data Message
REST
• Adapter Broker
requests Service
39

40. Summary of Approaches
Worklight + Worklight + Worklight +
Portal RWD Worklight Only
Need Portal WCM BPM
Existing Portal ✔ ✔ ✔
Native Features ✔ ✔ ✔ ✔
Offline ✔ ✔ ✔ ✔
App Store
presence ✔ ✔ ✔ ✔
Content
Management ✔
Personalization ✔ ✔ ✔
40

41. Reference Architecture
41

42. Agenda
Multichannel web sites and applications
Quick overview of Worklight
Approaches for building multi-channel applications
Best Practices Speed Round
Q&A
42 © 2013 IBM Corporation

43. Best Practices Speed Round
Application Design Gotchas
Single Sign On
New mobile data store in Worklight 5.0.5
Application Lifecycle Management
43 © 2013 IBM Corporation

44. Speed Round: Application Design Gotchas
Don’t forget the URL whitelists
Be careful of external links in your Portal-driven pages - you may lose navigation
Worklight 5.0.5 does not support the iOS WebView method in the documentation
and DeveloperWorks article. See handly.org for a solution!
44 © 2013 IBM Corporation

45. Speed Round: Single Sign On
Set up LTPAToken SSO between the Worklight Liberty server and Portal
Requires updates to:
─ Worklight server
─ Portal server
─ Your Application
Details on DeveloperWorks at:
http://www.ibm.com/developerworks/mobile/library/mo-aim1211-worklight-portal-3/index.html
(Search for “Worklight Portal SSO”)
45 © 2013 IBM Corporation

46. Speed Round: Data synchronization with JSONStore
Internal Storage
New in Worklight 5.0.5 (Dec ‘12)
Customer Collection User Settings
Collection
Maintain a local copy of data Document: Document:
{_id: 1,json: {_id: 1,json:
{name: “carlos”}} {background: “blue”}}
Data is stored as Documents in Collections
Internal Storage
Indexed Search Fields and Queries
Customer Collection
Search Field: name (string)
Push local updates on request “carlos” “tim”
Password-based encryption Document: Document:
{_id: 1,json: {_id: 1,json:
{name: “carlos”}} {name: “tim”}}
46 © 2013 IBM Corporation

47. Speed Round: Application Lifecycle Management
Application design, storyboarding, wireframe UI design
Team collaboration and code control
Automated, distributed team builds and integration
“Mobile device-cloud” service integration for on-device testing
Product Bundle: IBM Mobile Development Lifecycle Solution
─ http://www-01.ibm.com/software/rational/mobile/products
47 © 2013 IBM Corporation

48. Questions?
48 © 2013 IBM Corporation

49. Additional Resources
DeveloperWorks (forums, articles, blogs, free Worklight Studio)
http://www.ibm.com/developerworks/mobile
IBM Worklight InfoCenter (very good reference!)
http://pic.dhe.ibm.com/infocenter/wrklight/v5r0m5
New IBM Redbook: Developing Exceptional Multi-Channel Web Experiences
http://www-
10.lotus.com/ldd/portalwiki.nsf/xpViewCategories.xsp?lookupName=IBM%20Redbooks
Prolifics’ Mobile Blog
http://expert-tech.blogspot.com/search/label/Mobile
@handly and @lakssundar on Twitter
49 © 2013 IBM Corporation

50. Related Sessions
JMP306: Build Hybrid Multichannel Apps Using IBM Worklight, IBM WebSphere
Portal, and Web Experience Factory
INV301: Understanding the Mobile Features and Options of the IBM Web
Experience Platform
AD303: What's New? Creating Mobile Web Experiences with IBM Web
Experience Factory and IBM Worklight
AD304: Create Multichannel Web Sites with Rational Application Developer, IBM
WebSphere Portal, & Worklight
AD403: Engaging Mobile Apps with IBM Social Business Solutions and IBM
Worklight
Wednesday, 11:15 am, Swan SW 9 - 10
CUST125: Horizon Case Study: Leveraging IBM WebSphere Portal for the
Healthcare Industry
Thursday, 8:30 am, Swan Toucan 1 & 2
50 © 2013 IBM Corporation

51. Legal disclaimer
© IBM Corporation 2013. All Rights Reserved.
The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is
provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM
shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect
of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.
References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this
presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way.
Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.
51 © 2013 IBM Corporation