Your SlideShare is downloading. ×
0
AD111 Developing Mobile AppsRapidly for WebKit BrowsersUsing XPagesNiklas Heidloff, Senior Software Engineer, IBMSteve Cas...
Agenda●   Overview●   Mobile apps with native look and feel●   Mobile apps accessing native services●   Mobile apps cachin...
Agenda●   Overview●   Mobile apps with native look and feel●   Mobile apps accessing native services●   Mobile apps cachin...
OpenNTF Projects●   http://mobilecontrols.openntf.org●   http://mobiledocuments.openntf.org                               ...
Goals of the OpenNTF Project●   Identify which out of the box app dev functionality for mobile apps IBM®    Lotus® Domino®...
Technical Goals●   Enable developers to develop mobile apps via XPages (rapid application    development, access to Lotus ...
Agenda●   Overview●   Mobile apps with native look and feel●   Mobile apps accessing native services●   Mobile apps cachin...
Native Look & Feel●   Many iPhone apps use the typical iPhone style●   Android has its own style but few apps use it●   Bl...
iPhone Style               © 2011 IBM Corporation   9
Android Style                © 2011 IBM Corporation   10
OpenNTF Project uses Dojo●   Dojo 1.5 (dojox/mobile) provides a framework to build web apps that look and    feel like nat...
Loading of new Content●   View control loads new    entries automatically when    scrolling down●   Progress indicators fo...
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/         M...
Navigation●   Browser and device navigation buttons are    supported                                                © 2011...
Sticky Scrollbars●   W hen navigating back to the view the scrollbars are sticky                                          ...
Custom Styles●   Custom styles can be used                                © 2011 IBM Corporation   17
Reusable Controls●   Reusable XPages    Controls are provided    to assemble custom    apps                            © 2...
Sample App: Mobile Notes Documents●   Access Notes documents on mobile devices (e.g. when commuting to work)              ...
Sample App: Mobile Notes Documents                               © 2011 IBM Corporation   20
Agenda●   Overview●   Mobile apps with native look and feel●   Mobile apps accessing native services●   Mobile apps cachin...
Access Native Services - Scenarios●   Sub scenarios     ─   Local contacts     ─   Camera     ─   GPS/geolocation     ─   ...
Sample Scenario:Take Picture and upload to Domino                                    © 2011 IBM Corporation   23
Access Native Services●   Most of this functionality is not in W ebKit and not in HTML5 or any other    standard or propos...
JavaScript to access Camera                              © 2011 IBM Corporation   25
Agenda●   Overview●   Mobile apps with native look and feel●   Mobile apps accessing native services●   Mobile apps cachin...
Offline and cached Data●   HTML5 will support caching of resources and provide local storage    capabilities●   Some W ebK...
Offline Implementation●   Usage of manifest file to cache resources●   Usage of localSession to cache data     ─ SQL would...
Agenda●   Overview●   Mobile apps with native look and feel●   Mobile apps accessing native services●   Mobile apps cachin...
Controls, Controls, Controls●   Reused and packaged as XPages controls from various open source projects     ─   Dojo 1.5 ...
Login Control●   Another part of the project is the login    control for mobile devices●   This is not an XPages control b...
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                                          © 2011 IB...
Slide In Menu●   From cubiq.org                     © 2011 IBM Corporation   34
Pop Up Menu●   From W ink toolkit                         © 2011 IBM Corporation   35
Spinning Wheel●   From cubiq.org                     © 2011 IBM Corporation   36
Date Picker Control●   From W ink toolkit                         © 2011 IBM Corporation   37
Modal Dialog Control●   From W ink toolkit                         © 2011 IBM Corporation   38
Static Line Items●   From Dojo                    © 2011 IBM Corporation   39
Agenda●   Overview●   Mobile apps with native look and feel●   Mobile apps accessing native services●   Mobile apps cachin...
Whats next?●   Dojo is adding new features that could be consumed by XPages Mobile    Controls     ─   Bottom navigator   ...
Q&A      © 2011 IBM Corporation   42
Related Sessions●   AD116 - XPages Extension Library: Making Application Development Even    Easier●   BP207 - Apps, Apps,...
Appendix – Resources – Open Source Projects●   XPages Mobile Controls Project:     ─   http://mobilecontrols.openntf.org● ...
Appendix – Resources – Live Demos●   OpenNTF blog:     ─   http://i.openntf.org●   Dojo blog including offline:     ─   ht...
Appendix – Resources – HTML5●   Resources:     ─   http://www.w3.org/TR/html5/offline.html●   Local storage:     ─   http:...
Legal Disclaimer   © IBM Corporation 2011. All Rights Reserv ed. The inf ormation contained in this publication is prov id...
Upcoming SlideShare
Loading in...5
×

Ad111 Lotusphere 2011 - Developing Mobile Apps Rapidly for WebKit Browsers Using XPages

33,398

Published on

Ad111 Lotusphere 2011 - Developing Mobile Apps Rapidly for WebKit Browsers Using XPages

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
33,398
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
143
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Ad111 Lotusphere 2011 - Developing Mobile Apps Rapidly for WebKit Browsers Using XPages"

  1. 1. AD111 Developing Mobile AppsRapidly for WebKit BrowsersUsing XPagesNiklas Heidloff, Senior Software Engineer, IBMSteve Castledine, Advisory Software Engineer, IBM © 2011 IBM Corporation
  2. 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● W hats next? © 2011 IBM Corporation 2
  3. 3. Agenda● Overview● Mobile apps with native look and feel● Mobile apps accessing native services● Mobile apps caching data and supporting offline● Controls, controls, controls● W hats next? © 2011 IBM Corporation 3
  4. 4. OpenNTF Projects● http://mobilecontrols.openntf.org● http://mobiledocuments.openntf.org © 2011 IBM Corporation 4
  5. 5. 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 © 2011 IBM Corporation 5
  6. 6. 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 © 2011 IBM Corporation 6
  7. 7. Agenda● Overview● Mobile apps with native look and feel● Mobile apps accessing native services● Mobile apps caching data and supporting offline● Controls, controls, controls● W hats next? © 2011 IBM Corporation 7
  8. 8. Native Look & Feel● Many iPhone apps use the typical iPhone style● Android has its own style but few apps use it● Blackberry doesnt seem to have its 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 lots of hide/show and Ajax © 2011 IBM Corporation 8
  9. 9. iPhone Style © 2011 IBM Corporation 9
  10. 10. Android Style © 2011 IBM Corporation 10
  11. 11. 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 © 2011 IBM Corporation 11
  12. 12. Loading of new Content● View control loads new entries automatically when scrolling down● Progress indicators for view and document loading © 2011 IBM Corporation 12
  13. 13. Creation of new Documents● Project shows how to create new documents (via Ajax) © 2011 IBM Corporation 13
  14. 14. Bookmarks● Pages including pages with documents can be bookmarked ─ e.g. http://i.openntf.org/niklas/ MobileControls1.0.0.nsf/ m.xsp#document&unid=E58F1FE324BBC241 8625771A001C5263 © 2011 IBM Corporation 14
  15. 15. Navigation● Browser and device navigation buttons are supported © 2011 IBM Corporation 15
  16. 16. Sticky Scrollbars● W hen navigating back to the view the scrollbars are sticky © 2011 IBM Corporation 16
  17. 17. Custom Styles● Custom styles can be used © 2011 IBM Corporation 17
  18. 18. Reusable Controls● Reusable XPages Controls are provided to assemble custom apps © 2011 IBM Corporation 18
  19. 19. Sample App: Mobile Notes Documents● Access Notes documents on mobile devices (e.g. when commuting to work) © 2011 IBM Corporation 19
  20. 20. Sample App: Mobile Notes Documents © 2011 IBM Corporation 20
  21. 21. Agenda● Overview● Mobile apps with native look and feel● Mobile apps accessing native services● Mobile apps caching data and supporting offline● Controls, controls, controls● W hats next? © 2011 IBM Corporation 21
  22. 22. 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) © 2011 IBM Corporation 22
  23. 23. Sample Scenario:Take Picture and upload to Domino © 2011 IBM Corporation 23
  24. 24. Access Native Services● Most of this functionality is not in W ebKit 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 © 2011 IBM Corporation 24
  25. 25. JavaScript to access Camera © 2011 IBM Corporation 25
  26. 26. Agenda● Overview● Mobile apps with native look and feel● Mobile apps accessing native services● Mobile apps caching data and supporting offline● Controls, controls, controls● W hats next? © 2011 IBM Corporation 26
  27. 27. Offline and cached Data● HTML5 will support caching of resources and provide local storage capabilities● Some W ebKit based browsers support today also SQL storage of data● Sample: Same blog application as previously taken offline © 2011 IBM Corporation 27
  28. 28. 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 W ebKit 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 © 2011 IBM Corporation 28
  29. 29. Agenda● Overview● Mobile apps with native look and feel● Mobile apps accessing native services● Mobile apps caching data and supporting offline● Controls, controls, controls● W hats next? © 2011 IBM Corporation 29
  30. 30. Controls, Controls, Controls● Reused and packaged as XPages controls from various open source projects ─ Dojo 1.5 ─ Wink tookit 1.0 ─ cubiq.org © 2011 IBM Corporation 30
  31. 31. 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 © 2011 IBM Corporation 31
  32. 32. Image Carousel● From Dojo● Switch between images via the icons on the left and right hand side © 2011 IBM Corporation 32
  33. 33. Image Viewer● From Dojo Mobile● Flip between images and zoom in/out © 2011 IBM Corporation 33
  34. 34. Slide In Menu● From cubiq.org © 2011 IBM Corporation 34
  35. 35. Pop Up Menu● From W ink toolkit © 2011 IBM Corporation 35
  36. 36. Spinning Wheel● From cubiq.org © 2011 IBM Corporation 36
  37. 37. Date Picker Control● From W ink toolkit © 2011 IBM Corporation 37
  38. 38. Modal Dialog Control● From W ink toolkit © 2011 IBM Corporation 38
  39. 39. Static Line Items● From Dojo © 2011 IBM Corporation 39
  40. 40. Agenda● Overview● Mobile apps with native look and feel● Mobile apps accessing native services● Mobile apps caching data and supporting offline● Controls, controls, controls● W hats next? © 2011 IBM Corporation 40
  41. 41. Whats 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 controls as out of the box controls © 2011 IBM Corporation 41
  42. 42. Q&A © 2011 IBM Corporation 42
  43. 43. 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 © 2011 IBM Corporation 43
  44. 44. 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● W ink Tookit: ─ http://www.winktoolkit.org● Cubiq.org: ─ http://cubiq.org © 2011 IBM Corporation 44
  45. 45. 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 © 2011 IBM Corporation 45
  46. 46. 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 © 2011 IBM Corporation 46
  47. 47. Legal Disclaimer © IBM Corporation 2011. All Rights Reserv ed. 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 av ailable 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 © 2011 IBM Corporation 47
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×