BP209: IBM Worklight
Going From XPages Mobile
to Native Mobile
Applications
John Jardin, Ukuvuma Solutions
Mark Roden, PSC...
About Marky
 Over 15 years IBM Notes Domino® work
 Senior Consultant at PSC Group LLC
• XPages® Developer
• Project Lead...
3
About John
 Developer for over 12 years, primarily focused on IBM Notes and Domino
 CTO of Ukuvuma Solutions
•
•
•
•
•

...
5
Agenda
 XPages Mobile Review
 HTML5 vs. Native
 The Demonstration

 What is IBM Worklight?
 Building a mobile project...
XPages Mobile Review

7
XPages Mobile Review
 Competing Technologies can be utilized to create “Mobile” XPages applications
– Dojo Mobile

– jQue...
HTML5 vs. Native

9
HTML5 vs. Native
 HTML5
– Web technology
– Specifically designed to remove plugin dependencies
– JavaScript is the de-fac...
HTML5 vs. Native
 Web based applications have limitations to phone hardware features like:
– Access to the Mobile Phone A...
HTML5 vs. Native
 XPages Mobile applications are web based
– Pros
• Same development skills as creating desktop web based...
HTML5 vs. Native
 What are we trying to build?
 True Native Apps are better written as such
– Languages are written to s...
The Demonstration

14
The Demonstration
 Limitation
– Can’t add the person to my phone

– Can’t add a phone contact to the
Address book
– When ...
The Demonstration
 But with Worklight
– Can add the person to my phone

– Can add a phone contact to the
Address book
– W...
What is IBM Worklight?

17
What is IBM Worklight?
 Worklight description
– IBM Worklight is a platform for the development of HTML5, hybrid and nati...
What is IBM Worklight?
Technologies
 Eclipse
– Eclipse Juno 4.2.2 (SR2) - Java EE IDE for Web Developers
 Apache Cordova...
What is IBM Worklight?
How do I install it?
 http://www.ibm.com/developerworks/mobile/worklight/download/install.html

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

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

22
Building a mobile project in
Worklight

23
Creating a new Mobile Project
 Click on the blue Worklight icon or select “FileNewWorklight Project”
 Provide a name for...
Creating a new Mobile Project
 Select the mobile framework for your app
(NOTE: jQuery Core and Dojo Mobile are
already in...
Creating a new Mobile Project
Creating a Working Environment
 Create 1 or more Working Environments for your mobile app. ...
Creating a new Mobile Project
Creating a Working Environment

27
Creating a new Mobile Project
Creating a Working Environment
 “YourProjectName.js” is the starting point
of your mobile p...
Creating a new Mobile Project
 The HTML Editor Window has 3 tabs:
– Design
– Source
– Split

29
Creating a new Mobile Project
 The Palette Window provides standard
HTML Controls, as well as jQuery Mobile
Widgets for t...
Creating a new Mobile Project
 The Design Pane is pretty accurate in terms of what you would see as an end result

31
How does the Demonstration
work ?

32
How does the demo work
iFrame the Website

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

34
How does the demo work
 Cordova my friend

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

36
Why do I care as an XPages
Developer ?

37
Why do I care as an XPages Developer?
 Because your customers care !

 Because the employees of your customers care !

...
Why do I care as an XPages Developer?
 Corporate investment in technology is rarely bleeding edge – but it gets around to...
Why do I care as an XPages Developer?
 Because you care about yourself
– Leverage and grow your existing skillset
– JavaS...
What other capabilities does
Worklight have?

41
What other capabilities does Worklight have?
 Out of the box native controls that can be used with your Hybrid Mobile App...
What other capabilities does Worklight have?
 Client and Server Side JavaScript APIs to decrease development time
 Adapt...
What other capabilities does Worklight have?
 Local JSON Store

44
Questions ?
 For more information please check out

http://xomino.com/IBMWorklightConnect14
http://johnjardin.ukuvuma.co....
Acknowledgements and Disclaimers
Availability. References in this presentation to IBM products, programs, or services do n...
Upcoming SlideShare
Loading in …5
×

Ibm worklight - going from xpages mobile to native mobile applications

4,684 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,684
On SlideShare
0
From Embeds
0
Number of Embeds
1,368
Actions
Shares
0
Downloads
96
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ibm worklight - going from xpages mobile to native mobile applications

  1. 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. 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. 3
  4. 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. 5
  6. 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. 7. XPages Mobile Review 7
  8. 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. 9. HTML5 vs. Native 9
  10. 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. 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. 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. 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. 14. The Demonstration 14
  15. 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. 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. 17. What is IBM Worklight? 17
  18. 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. 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. 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. 21. What is IBM Worklight?  It is Eclipse and therefore a very familiar interface to XPages developers 21
  22. 22. What is IBM Worklight?  It is Eclipse and therefore a very familiar interface to XPages developers 22
  23. 23. Building a mobile project in Worklight 23
  24. 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. 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. 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. 27. Creating a new Mobile Project Creating a Working Environment 27
  28. 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. 29. Creating a new Mobile Project  The HTML Editor Window has 3 tabs: – Design – Source – Split 29
  30. 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. 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. 32. How does the Demonstration work ? 32
  33. 33. How does the demo work iFrame the Website 33
  34. 34. How does the demo work  No mobile framework required  An iFrame is sufficient 34
  35. 35. How does the demo work  Cordova my friend 35
  36. 36. How does the demo work  XPages, I am your father!! 36
  37. 37. Why do I care as an XPages Developer ? 37
  38. 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. 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. 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. 41. What other capabilities does Worklight have? 41
  42. 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. 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. 44. What other capabilities does Worklight have?  Local JSON Store 44
  45. 45. Questions ?  For more information please check out http://xomino.com/IBMWorklightConnect14 http://johnjardin.ukuvuma.co.za/IBMWorklightConnect14 @MarkyRoden 45 @John_Ukuvuma
  46. 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

×