Abstract In this session John and Mark will demonstrate how an XPages developer can make the simple, practical, logical evolution from XPages to IBM Worklight developer. Have you ever wondered how to easily integrate a mobile phone native feature set with your corporate web applications? We will show that any XPages developer currently building mobile-accessible websites already has the skillset to build native mobile apps using IBM Worklight. We will cover installation, setup, similarities in designer clients, the test environment, the skills necessary and provide a working example. You have the skills, you have the knowledge. Your only challenge is to come to the session and understand how to make this work. Go from HTML5 to native in minutes.

1. BP209: IBM Worklight
Going From XPages Mobile
to Native Mobile
Applications
John Jardin, Ukuvuma Solutions
Mark Roden, PSC Group LLC
© 2014 IBM Corporation

2. About Marky
 Over 15 years IBM Notes Domino® work
 Senior Consultant at PSC Group LLC
• XPages® Developer
• Project Leader
• 2014 IBM Champion
 Contact Information
•
•
•
•
2
Blog: http://www.xomino.com
Email: marky@xomino.com
Twitter: @markyroden
Skype: marky.roden
www.psclistens.com
@pscgroup

3. 3

4. About John
 Developer for over 12 years, primarily focused on IBM Notes and Domino
 CTO of Ukuvuma Solutions
•
•
•
•
•
Domino and XPages
HTML5 and CSS3
Cross Platform Mobile Dev
IBM Worklight ®
2013 / 2014 IBM Champion
 Contact Information
•
•
•
•
4
Blog: http://johnjardin.ukuvuma.co.za
Email: john.jardin@ukuvuma.co.za
Twitter: @john_ukuvuma
Skype: john.v.jardin
www.ukuvuma.co.za
@ukuvuma

5. 5

6. Agenda
 XPages Mobile Review
 HTML5 vs. Native
 The Demonstration
 What is IBM Worklight?
 Building a mobile project
 How does the demo work?
 Why do I care as an XPages developer?
 What other capabilities does Worklight have?
6

7. XPages Mobile Review
7

8. XPages Mobile Review
 Competing Technologies can be utilized to create “Mobile” XPages applications
– Dojo Mobile
– jQuery Mobile
– Responsive
 In the end, XPages rendered on a mobile browser are still a web based application
– With a smaller screen
– With a reduced access to computing resources
8

9. HTML5 vs. Native
9

10. HTML5 vs. Native
 HTML5
– Web technology
– Specifically designed to remove plugin dependencies
– JavaScript is the de-facto scripting language
– <CANVAS> allows for programmatic interface manipulation
– Limited access to phone hardware features
 Native
– Applications written in the native language for the platform
– Platform specific APIs for interface update
– Full availability of phone hardware features
10

11. HTML5 vs. Native
 Web based applications have limitations to phone hardware features like:
– Access to the Mobile Phone Address Book
– Access to the Mobile Phone Calendar
– Camera Integration
• Barcode Scanner
• Augmented Reality
– No access to the File System
• Data Directory
• Native Data Store
– APIs, APIs, APIs
11

12. HTML5 vs. Native
 XPages Mobile applications are web based
– Pros
• Same development skills as creating desktop web based application
• Out of the box tools provided in Domino Designer in Eclipse (DDE)
• If architected correctly - *true* write once use anywhere capabilities
– Cons
• Limited access to many mobile phone features leading to an inability to meet
corporate requirements for mobile applications
• Limited resources and screen real-estate limits functionality
12

13. HTML5 vs. Native
 What are we trying to build?
 True Native Apps are better written as such
– Languages are written to support the platform directly
– “Closer to the Metal”
– No additional overhead of being rendered in a browser
 Web based applications
– Do not require additional installation of Application
– Can be created by the same development team as corporate web sites
– Can be accessed by any desktop and mobile device
13

14. The Demonstration
14

15. The Demonstration
 Limitation
– Can’t add the person to my phone
– Can’t add a phone contact to the
Address book
– When they call – no idea who it is
15

16. The Demonstration
 But with Worklight
– Can add the person to my phone
– Can add a phone contact to the
Address book
– When they call – we know who it is
16

17. What is IBM Worklight?
17

18. What is IBM Worklight?
 Worklight description
– IBM Worklight is a platform for the development of HTML5, hybrid and native
applications for all supporting modern devices.
 With IBM Worklight you can:
– Support multiple mobile operating environments and devices with the simplicity of a
single, shared code base
– Connect with enterprise data, applications and cloud services
– Safeguard mobile security at the device, application and network layer
– Govern your mobile app portfolio from a central interface
18

19. What is IBM Worklight?
Technologies
 Eclipse
– Eclipse Juno 4.2.2 (SR2) - Java EE IDE for Web Developers
 Apache Cordova (2.6)
– Built into IBM Worklight (6.0.0)
 HTML, CSS and JavaScript
 Hybrid and Native feature set
19

20. What is IBM Worklight?
How do I install it?
 http://www.ibm.com/developerworks/mobile/worklight/download/install.html
 Can I run it on the same machine as DDE?
– Windows®, Mac OS®, Linux®
 Install Juno 4.2.2 (SR2)
(Eclipse IDE for Java Developers)
 In Eclipse, click on HelpEclipse Marketplace
and search for Worklight
20

21. What is IBM Worklight?
 It is Eclipse and therefore a very familiar interface to XPages developers
21

22. What is IBM Worklight?
 It is Eclipse and therefore a very familiar interface to XPages developers
22

23. Building a mobile project in
Worklight
23

24. Creating a new Mobile Project
 Click on the blue Worklight icon or select “FileNewWorklight Project”
 Provide a name for your Project and select “Hybrid Application”
24

25. Creating a new Mobile Project
 Select the mobile framework for your app
(NOTE: jQuery Core and Dojo Mobile are
already included, but not jQuery Mobile
and others)
25

26. Creating a new Mobile Project
Creating a Working Environment
 Create 1 or more Working Environments for your mobile app. (e.g. iPhone, Android, etc)
26

27. Creating a new Mobile Project
Creating a Working Environment
27

28. Creating a new Mobile Project
Creating a Working Environment
 “YourProjectName.js” is the starting point
of your mobile project, which can be found
under “appsYourProjectNamecommon”
 Worklight follows a slight MVC Approach,
so a corresponding “YourProjectName.css”
and “YourProjectName.js” is created
28

29. Creating a new Mobile Project
 The HTML Editor Window has 3 tabs:
– Design
– Source
– Split
29

30. Creating a new Mobile Project
 The Palette Window provides standard
HTML Controls, as well as jQuery Mobile
Widgets for this specific project
30

31. Creating a new Mobile Project
 The Design Pane is pretty accurate in terms of what you would see as an end result
31

32. How does the Demonstration
work ?
32

33. How does the demo work
iFrame the Website
33

34. How does the demo work
 No mobile framework required
 An iFrame is sufficient
34

35. How does the demo work
 Cordova my friend
35

36. How does the demo work
 XPages, I am your father!!
36

37. Why do I care as an XPages
Developer ?
37

38. Why do I care as an XPages Developer?
 Because your customers care !
 Because the employees of your customers care !
 Because the expectations of your customers are being set by other vendors !
38

39. Why do I care as an XPages Developer?
 Corporate investment in technology is rarely bleeding edge – but it gets around to it
http://www.businessinsider.com/mobile-usage-vs-desktop-for-websites-2013-12
39

40. Why do I care as an XPages Developer?
 Because you care about yourself
– Leverage and grow your existing skillset
– JavaScript is your language of choice
– Easy transition due to familiar development environment
 Future-proof your capabilities by broadening your skill set
– HTML5 is growing powerful, but it will still be a while before it’s able to perform many of
the functions that can only be performed by native applications
– Need to be able to integrate fully with the mobile device, whenever relevant
 Because learning the basics of Worklight will take you less than 24 hours
40

41. What other capabilities does
Worklight have?
41

42. What other capabilities does Worklight have?
 Out of the box native controls that can be used with your Hybrid Mobile Application.
(e.g. Tab Bars, Modal Dialogs, Loading Screens)
42

43. What other capabilities does Worklight have?
 Client and Server Side JavaScript APIs to decrease development time
 Adapters to integrate with Back-end services
43

44. What other capabilities does Worklight have?
 Local JSON Store
44

45. Questions ?
 For more information please check out
http://xomino.com/IBMWorklightConnect14
http://johnjardin.ukuvuma.co.za/IBMWorklightConnect14
@MarkyRoden
45
@John_Ukuvuma

46. Acknowledgements and Disclaimers
Availability. 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.
The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither
intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information
contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise
related to, this presentation or any other materials. Nothing contained in this presentation 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.
All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and
performance characteristics may vary by customer. 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.
© Copyright IBM Corporation 2014. All rights reserved.
 U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 IBM, the IBM logo, ibm.com, Notes, Domino and XPages are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries,
or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or
common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of
IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml
 Worklight is a trademark or registered trademark of Worklight, an IBM Company.
 Windows is registered trademark of the Microsoft Corporation in the U.S. and other countries
 Mac OS is a registered trademark of Apple Inc., registered in the U.S. and other countries.
 Linux is the registered trademark of Linus Torvalds in the U.S. and other countries.
 Dojo is available under either the terms of the modified BSD license or the Academic Free License version 2.1.
 jQuery is provided under the MIT license
46