ad111 lotusphere 2011 - developing mobile apps rapidly for webkit browsers using xpages

Niklas Heidloff, Senior Software Engineer, IBMSteve Castledine, Advisory Software Engineer, IBM

© 2011 IBM Corporation

AD111 Developing Mobile Apps Rapidly for WebKit Browsers Using XPages

© 2011 IBM Corporation 2

Agenda● Overview

● Mobile apps with native look and feel

● Mobile apps accessing native services

● Mobile apps caching data and supporting offline

● Controls, controls, controls

● What's next?


Agenda● Overview





● What's next?


OpenNTF Projects● http://mobilecontrols.openntf.org● http://mobiledocuments.openntf.org

http://mobilecontrols.openntf.org/


Goals of the OpenNTF Project● Identify which out of the box app dev functionality for mobile apps IBM®

Lotus® Domino® could support in future releases● Demonstrate how to use the Lotus Domino XPages app dev platform today to

build mobile apps with standard web development skills without having to write native/device specific code

● Demonstrate how to build mobile apps for Android™, iPhone® and Blackberry® using XPages


Technical Goals● Enable developers to develop mobile apps via XPages (rapid application

development, access to Lotus Domino services, etc.)● Enable developers to build mobile apps that look & feel like native apps to

achieve the best user experience● Enable developers to build sophisticated mobiles apps accessing native

services and supporting offline● Enable developers to build mobile apps via XPages easily, e.g. via reusable

controls


Agenda● Overview





● What's next?


Native Look & Feel● Many iPhone apps use the typical iPhone style● Android has it's own style but few apps use it● Blackberry doesn't seem to have it's own style● Not all apps use these styles, but many of the most popular apps, esp. for

iPhone

● Most Android and iPhone apps use nice page transitions● This is not only nice to have, but required to get the necessary user

acceptance. Mobile users have high expectations since they know it from other apps

● Technically this means one HTML/XSP page with lot's of hide/show and Ajax


iPhone Style


Android Style


OpenNTF Project uses Dojo● Dojo 1.5 (dojox/mobile) provides a framework to build web apps that look and

feel like native apps─ Page transitions─ Loading indications─ Typical styles for iPhone and Android

● The project leverages Dojo 1.5● Custom styles can be used● Reusable controls are provided to assemble custom apps● A live version of this app is available under http://i.openntf.org

http://i.openntf.org/


Loading of new Content● View control loads new

entries automatically when scrolling down

● Progress indicators for view and document loading


Creation of new Documents● Project shows how to create new

documents (via Ajax)


Bookmarks● Pages including pages with documents

can be bookmarked─ e.g. http://i.openntf.org/niklas/

MobileControls1.0.0.nsf/m.xsp#document&unid=E58F1FE324BBC2418625771A001C5263


Navigation● Browser and device navigation buttons are

supported


Sticky Scrollbars● When navigating back to the view the scrollbars are sticky


Custom Styles● Custom styles can be used


Reusable Controls● Reusable XPages

Controls are providedto assemble custom apps


Sample App: Mobile Notes Documents● Access Notes documents on mobile devices (e.g. when commuting to work)


Sample App: Mobile Notes Documents


Agenda● Overview





● What's next?


Access Native Services - Scenarios● Sub scenarios

─ Local contacts─ Camera─ GPS/geolocation─ Accelerometer─ Gestures (e.g. shake, orientation change)─ Local filesystem─ Media (e.g. pick photo)


Sample Scenario: Take Picture and upload to Domino


Access Native Services● Most of this functionality is not in WebKit and not in HTML5 or any other

standard or proposal yet● PhoneGap provides JavaScript APIs to use this functionality● PhoneGap is a native app and as such needs to be deployed to mobile

devices● The XPages Mobile Controls project provides a sample how to use PhoneGap● PhoneGap works on Android, iPhone and Blackberry


JavaScript to access Camera


Agenda● Overview





● What's next?


Offline and cached Data● HTML5 will support caching of resources and provide local storage

capabilities● Some WebKit based browsers support today also SQL storage of data

● Sample:Same blog application as previously taken offline


Offline Implementation● Usage of manifest file to cache resources● Usage of 'localSession' to cache data

─ SQL would also be possible but not supported on all WebKit devices● Offline detection via JavaScript ● The synchronization and offline mechanism is limited at this point:

─ The synchronization is hardcoded to the last 10 view entries and documents─ The data is updated automatically when online─ The content of documents is stored locally but without pictures and other

embedded objects─ Comments can be read but no new comments can be created offline


Agenda● Overview





● What's next?


Controls, Controls, Controls● Reused and packaged as XPages controls from various open source projects

─ Dojo 1.5─ Wink tookit 1.0─ cubiq.org


Login Control● Another part of the project is the login

control for mobile devices ● This is not an XPages control but

leverages IBM Lotus iNotes® Ultralite code


Image Carousel● From Dojo● Switch between images via the icons on

the left and right hand side


Image Viewer● From Dojo Mobile● Flip between images and zoom in/out


Slide In Menu● From cubiq.org


Pop Up Menu● From Wink toolkit


Spinning Wheel● From cubiq.org


Date Picker Control● From Wink toolkit


Modal Dialog Control● From Wink toolkit


Static Line Items● From Dojo


Agenda● Overview





● What's next?


What's next?● Dojo is adding new features that could be consumed by XPages Mobile

Controls─ Bottom navigator─ Flipping views─ Footers and headers optionally fix─ Splitted screen for iPad

● Evaluating whether to provide the mobile controlsas out of the box controls


Q & A


Related Sessions● AD116 - XPages Extension Library: Making Application Development Even

Easier ● BP207 - Apps, Apps, and More Apps: Meet the Very Best Open Source Apps

from OpenNTF● AD106 - IBM Lotus Domino App Dev: All Things Considered | Pete Janzen● AD113 - Show Your XPages in Style! ● AD114 - There and Back Again: Strategies for Re-factoring Notes Applications

to XPages


Appendix – Resources – Open Source Projects● XPages Mobile Controls Project:

─ http://mobilecontrols.openntf.org

● XPages Mobile Documents Project:─ http://mobiledocuments.openntf.org

● PhoneGap: ─ http://www.phonegap.com

● Dojo:─ http://www.dojotoolkit.org

● Wink Tookit: ─ http://www.winktoolkit.org

● Cubiq.org:─ http://cubiq.org

http://mobilecontrols.openntf.org/

http://mobiledocuments.openntf.org/

http://www.phonegap.com/

http://www.dojotoolkit.org/

http://www.winktoolkit.org/

http://cubiq.org/


Appendix – Resources – Live Demos● OpenNTF blog:

─ http://i.openntf.org

● Dojo blog including offline:─ http://208.85.188.19/niklas/MobileControls200.nsf/m.xsp

● Controls on xpages.info/demos─ http://208.85.190.65/demos/DemoMobileControls.nsf/StartHere.xsp

http://i.openntf.org/

http://208.85.188.19/niklas/MobileControls200.nsf/m.xsp

http://208.85.190.65/demos/DemoMobileControls.nsf/StartHere.xsp


Appendix – Resources – HTML5 ● Resources:

─ http://www.w3.org/TR/html5/offline.html

● Local storage:─ http://dev.w3.org/html5/webstorage

● SQL storage:─ http://www.w3.org/TR/offline-webapps

http://www.w3.org/TR/html5/offline.html

http://dev.w3.org/html5/webstorage

http://www.w3.org/TR/offline-webapps


Legal Disclaimer© IBM Corporation 2011. All Rights Reserved.

The inf ormation contained in this publication is prov ided f or inf ormational purposes only. While ef f orts were made to v erif y the completeness and accuracy of the inf ormation contained in this publication, it is prov ided AS IS without warranty of any kind, express or implied. In addition, this inf ormation is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible f or 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 hav e the ef f ect of , creating any warranties or representations f rom IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement gov erning the use of IBM sof tware.

Ref erences in this presentation to IBM products, programs, or serv ices do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities ref erenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other f actors, and are not intended to be a commitment to f uture product or f eature av ailability in any way. Nothing contained in these materials is intended to, nor shall hav e the ef f ect of , stating or imply ing that any activ ities undertaken by y ou will result in any specif ic sales, rev enue growth or other results.

IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Uny te is a trademark of WebDialogs, Inc., in the United States, other countries, or both.

Android is a trademark of Google Inc.

iPhone is a trademark of Apple Inc.

The Trademark Blackberry is owned by Research In Motion Limited