Cross Platform Mobile application development HTML5 and JavaScript Chris Connor

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

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

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”

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

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!

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

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

Mobile Web App Examples – Mobile Dojo

Mobile Web App Examples – Mobile jQuery

Mobile Web App Examples– Sencha Touch

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

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

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

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

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)

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

Focus Today - Mobile Controls – The code

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

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!

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

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

Introduction – Structure Destination Pages are defined as follows

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

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

Introduction – Native Application Features Search Bar

Introduction – Native Application Features DataView

Introduction – Native Application Features DataView / Load More Link

Action Detail Page

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

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

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 Especially around Libraries Mobile Dojo Website Mobile Jquery Excellent books on iPad / iPhone techniques

Contact Me.. Business Site - Blog – LinkedIn – chrisjconnor Twitter - ChrisJConnor Skype – ChrisJConnor1 –