1. Cross Platform Mobile application development HTML5 and JavaScript Chris Connor

2. Introduction – What you will learn Background The issues with traditional approaches What is a Mobile Web App? Approaches / Architectures Supporting technologies Demonstration of Application Review of further technology options Resources and Next Steps

3. Background – The issues Explosion of devices and demand Started with – we need an iphone app Then android / blackberry Then ipad / android tablet / blackberry tablets What does this mean with native approaches? iOS WebOS WinPhone Android (various) QNX BBX

4. Introduction – Multi Platforms to target Platforms to target IBM 2011 tech trends report (from edbrill.com) 4000 people 93 countries 1 Question on “Planned mobile development platforms”

5. Introduction – The issue? Manufactures changing strategy by the minute Virtually impossible to keep up to speed with APIs To support all devices you would need skills in the following languages Java.Net J2ME Objective C And then all the APIs … Other factors Changes in RIM strategy Adobe dropping Mobile Flash Support Silverlight.. Oracle / Google / Open Source issues around Java

6. Introduction – What is a Mobile Web App? Most modern devices now support webkit at an acceptable level Develop with one set of tools (the ones we know) for all devices All major vendors are backing HTML 5 now Even Microsoft! Additional Frameworks and Libraries are available to help take advantage of more native features of devices Built on the 3 Main skills of the developer HTML (5) CSS JavaScript Web Apps!

7. Approaches 100% Web based Uses current web infrastructure (XPages / HTML, Server side Java, Authentication / Security etc) Can still use local storage Can use local storage / Local Caching Can even be 100% offline Relational Database support in HTML 5 Pages / Resources can be stored locally Hybrid (Mix of Web / Native) Can use device features PhoneGap / Webworks Or Natively 100% Native Perhaps calls to data using API rest type requests

8. Introduction – Adopters for this? Why? Who are adopting this approach over native? Facebook Financial Times Bank of America Edinburgh Council Bus Tracking App Development Cost / Speed Roughly half the time for one platform(even bigger savings if multi device) Easier to manage application deployment lifecycle Dynamic Updates without vendor (such as Apple) approval Not constrained by the rules (financial) of the vendor Can be “indexable” on google etc Can run from site, on device or hybrid Depending on what YOU want

9. Mobile Web App Examples – Mobile Dojo

10. Mobile Web App Examples – Mobile jQuery

11. Mobile Web App Examples– Sencha Touch

12. Our example – Web based Quick and easy to build using XPages Uses Mobile Dojo Toolkit JavaScript Framework Demonstrates Optimisation to behave like iPhone/iPad/Android application Some aspects can be loaded as required Use web services / JSON / cross domain Ajax Requests

13. Our example – Our demo Use of native features for device for navigation etc News feed for scrolling searching Action Tracking Process to show Searching / Navigation (native look and feel) Native forms based processes can be built Features like date pickers, drop downs, validation etc Geolocation HTML 5 version Not device specific – no different API knowledge Charting Twitter Social Media Stream Cross Document Communication

14. Demo Demonstrate sample apps Based on MobileSample.nsf from OpenNTF Customised using Mobile Dojo and HTML5

15. Offline Applications Ability to go offline Local Storage in RDBMS Replicate / Post Data using JavaScript / Web Services Notes or Notes Notes Data Cache Presentation Framework and Resources Describe resources to be cached in Manifest file Downloaded and kept Need to remember to be able to “re-provision” / upgrade

16. Other Capabilities to consider review Access other mobile resources Phone Gap Camera, Files, Accelerometer, Alerts Supports IOS, BlackBerry,WebOS, Windows Phone 7, Android WebView (Embedded browser in native app)

17. Other Capabilities to consider review WebWorks (by RIM) Optimised for BlackBerry Tablet and Phone HTML5 based WebField (Embedded browser in native app) JavaScript calls to underlying Java API

18. Focus Today - Mobile Controls – The code

19. Mobile Controls – Overview and Intro Why use Mobile Controls Implement Mobile dojo Dojo Closely tied to XPages Provides an underlying framework to simulate native devices Any other js framework can be used depending on needs Available for download from OpenNTF Easy to get up and running Customise / Extend using HTML5 / Mobile Dojo Also standard JavaScript / HTML / CSS

20. Mobile Controls – Overview and Intro Framework is based around “Single Page App” Single Page App Defines Front Screen Navigation Methods between pages “Calls” to other pages as required Old method required you to hand write Web Services and Ajax calls New method has tools to do this Try to minimize the amount of loading Performance!

21. Introduction – Back to the Start.. Icon on front Screen Bookmarked by user Launching a “Splash Screen” – Take Note!! Whilst loading More professional Informs user that something is happening

22. Introduction – Structure Defined as follows Then links are defined as follows

23. Introduction – Structure Destination Pages are defined as follows

24. Introduction – Native Application Features Scrolling, swiping, fields, buttons etc

25. Introduction – View / Searching Code Split into 4 sections Heading Search Bar DataView Pager (More Button) Heading

26. Introduction – Native Application Features Search Bar

27. Introduction – Native Application Features DataView

28. Introduction – Native Application Features DataView / Load More Link

29. Action Detail Page

30. Action Detail Page – Areas of Interest Submit Button, formRows, fields, binding

31. Action Detail Page – HTML 5 Inputs Tag in HTML (5) has some useful attributes Type = “Date” Drives how IOS picks up the date Email / Number etc

32. Summary / Next Steps...... Got a taster of where java fits and why / where to use Some real life examples More in-depth for discussion in next session Looked at Web Applications / Mobile Controls Look at Extension Library Stuff Designer Wiki http://www-10.lotus.com/ldd/ddwiki.nsf/ Especially around Libraries Mobile Dojo Website Mobile Jquery Excellent books on iPad / iPhone techniques

33. Contact Me.. Business Site - www.bssuk.net Blog – www.XSPTalk.com LinkedIn – chrisjconnor Twitter - ChrisJConnor Skype – ChrisJConnor1 Email – Chris@bssuk.net