Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
XPages Mobile Controls

http://mobilecontrols.openntf.org

         Niklas Heidloff, IBM
               09/01/10




     ...
Agenda
●
    Overview
●
    Mobile apps with native look and feel
●
    Mobile apps accessing native services
●
    Mobile...
Goals of the Project
●
    Identify which out of the box app dev functionality for
    mobile apps IBM® Lotus® Domino® cou...
Technical Goals
●
    Enable developers to develop mobile apps via XPages
    (rapid application development, access to Lo...
Project Overview
●
    Controls using Dojo Mobile 1.5
●
    XCamera using PhoneGap
●
    Controls using Dojo Mobile 1.5 in...
Scenarios
●
    Hide the browser
●
    Provide native look & feel
●
    Access to native services
●
    Offline and cached...
Scenario: Hide the Browser
●
    Sub scenarios
    ■
        Address bars should be hidden
    ■
        App specific acti...
In the web
browser the
address bar
keeps coming up

and the menu
button shows
generic browser
actions




Android (similar...
Instead app
specific actions
should be shown
and the browser
bar should be
hidden




Android
                   9
The browser's
actions are
displayed at the
bottom

The address bar
can be toggeled
on/off




iPhone
                   10
When launched
from home page
bookmark the
generic actions
don't show up

The address bar
is toggeled off
initially




iPh...
Scenario: Hide the Browser
●
    Hide address bar
    ■
        iPhone: Works out of the box
    ■
        Android: Dojo 1...
Scenario: Native Look
●
    Many iPhone apps use the typical iPhone style
●
    Android has it's own style but few apps us...
Scenario: Native Feel
●
    Most Android and iPhone apps use nice page
    transitions
●
    This is not only nice to have...
iPhone Style




               15
Android Style




                16
Dojo 1.5
●
    Dojo 1.5 (dojox/mobile) provides a framework to build
    web apps that look and feel like native apps
    ...
Reusable XPages Controls using Dojo 1.5
●
    The project leverages Dojo 1.5
●
    Custom styles can be used
●
    This pa...
Loading of new Content
●
    View control loads
    new entries auto-
    matically when
    scrolling down
●
    Progress...
Creation of new Documents
●
    Project shows how to create
    new documents (via Ajax)




                            20
Bookmarks
●
    Pages including pages with
    documents can be bookmarked
    ■
        e.g.
        http://i.openntf.org...
Navigation
●
    Browser and device navigation
    buttons are supported




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




                             23
Custom Styles
●
    Custom styles can be used




                            24
Reusable
Controls
●
    8 reusable
    XPages Controls
    are provided
    to assemble
    custom apps




              ...
Controls: mConfiguration and mHeader




                     26
Controls: mRectangle, Header and Entry




                     27
Controls: mPage and mView




                    28
Controls: mPage and mDocumentContainer




                    29
Control myDocument is app specific




                      30
New Documents can be created via custom Code




                    31
Blackberry
●
    Webkit browser of
    Torch simulator




                        32
Scenario: Access Native Services
●
    Sub scenarios
    ■
        Local contacts
    ■
        Camera
    ■
        GPS/g...
Sample Scenario:
Take Picture and upload to Domino




                     34
Scenario: Access Native Services
●
    Most of this functionality is not in webkit and not in
    HTML5 or any other stand...
PhoneGap Demo App




                    36
JavaScript to use Camera




                     37
Scenario: Offline and cached Data

 ●
     HTML5 will support caching of resources and provide
     local storage capabili...
Reusable XPages Controls leveraging Dojo
Mobile 1.5 including Offline
●
    Same blog
    application as
    previously
  ...
Reusable XPages Controls leveraging Dojo
Mobile 1.5 including Offline
●
    This part of the project demonstrates how to t...
Reusable XPages Controls leveraging Dojo
Mobile 1.5 including Offline
●
    The synchronization and offline mechanism is l...
Manifest File




                42
Offline Detection




                    43
Controls, Controls, Controls
●
    Reused and packaged as XPages controls from various
    projects
    ■
        Dojo 1.5...
Login Control
●
    Another part of the project
    is the login control for mobile
    devices
●
    This is not an XPage...
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




                              47
Slide In Menu
●
    From cubiq.org




                     48
Pop Up Menu
●
    From Wink toolkit




                        49
Spinning Wheel
●
    From cubiq.org




                     50
Date Picker Control
●
    From Wink toolkit




                        51
Modal Window
●
    From Wink toolkit




                        52
Static Line Items
●
    From Dojo




                    53
Resources – Open Source Projects
●
    XPages Mobile Controls Project:
    http://mobilecontrols.openntf.org
●
    PhoneGa...
Resources – Demos
●
    Dojo sample:
    http://i.openntf.org
●
    Dojo sample including offline:
    http://208.85.188.1...
Resources – Videos
●
    Dojo sample:
    http://www.youtube.com/watch?v=atu7c0wApwY
●
    Dojo sample including offline:
...
Resources – HTML5
●
    Resources:
    http://www.w3.org/TR/html5/offline.html
●
    Local storage:
    http://dev.w3.org/...
Project License
OpenNTF Alliance XPages Mobile Controls

© Copyright IBM Corp. 2010

This product includes software contri...
Project License
Dojo Mobile 1.5

http://download.dojotoolkit.org/release-1.5.0/

Copyright (c) 2004-2010, The Dojo Foundat...
Project License
The Spinning Wheel control uses an open source project from cubiq.org

Copyright (c) 2009 Matteo Spinelli,...
Appendix - Scenario: Hide the Browser




                      61
In the web
browser the
address bar
keeps coming up

and the menu
button shows
generic browser
actions




Android
        ...
Bookmarks can
be added to
home page but
they look
different to
native apps




Android
                63
Only links to
native apps look
native




Android
                   64
This native app
uses an
embedded web
browser

The actions
show the app's
actions defined
in a custom
XPage control




And...
Android actions
can be defined in
custom control




Android &
Blackberry          66
In the web
browser the
menu button
shows generic
browser actions




Blackberry
                  67
This native app
uses an
embedded web
browser

The actions
show the app's
actions defined
in a custom
XPage control




Bla...
The browser's
actions are
displayed at the
bottom

The address bar
can be toggeled
on/off




iPhone
                   69
Bookmarks can
be added to
home page and
they look native




iPhone
                   70
When launched
from home page
bookmark the
generic actions
don't show up

The address bar
is toggeled off
initially




iPh...
Appendix - XPages Sample App using Lotus
Domino 8.5.1 only




                     72
XPages Sample App using Lotus Domino 8.5.1
only
●
    Another part of the project shows how to build similar
    apps via ...
74
Setup
●
    Copy MobileControls040.nsf to your data directory and
    launch m.xsp




                            75
Appendix – Offline Mini Samples




                      76
Local Storage Mini Samples




                      77
sessionStorage and localStorage




                      78
SQL Storage




              79
Cache Resources Samples

 ●
     Sample shows how to cache Dojo
     JavaScript files, images and
     stylesheets
 ●
    ...
Legal Disclaimer
●
    © IBM Corporation 2010. All Rights Reserved.

●
    The information contained in this publication i...
Upcoming SlideShare
Loading in …5
×

Mobile Controls for IBM Lotus Domino XPages on OpenNTF 09/10

  • Login to see the comments

  • Be the first to like this

Mobile Controls for IBM Lotus Domino XPages on OpenNTF 09/10

  1. 1. XPages Mobile Controls http://mobilecontrols.openntf.org Niklas Heidloff, IBM 09/01/10 1
  2. 2. Agenda ● Overview ● Mobile apps with native look and feel ● Mobile apps accessing native services ● Mobile apps caching data and supporting offline 2
  3. 3. Goals of the 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 3
  4. 4. 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 4
  5. 5. Project Overview ● Controls using Dojo Mobile 1.5 ● XCamera using PhoneGap ● Controls using Dojo Mobile 1.5 including Offline ● Controls, controls, controls ■ Login, image viewer, date picker, menus, etc. 5
  6. 6. Scenarios ● Hide the browser ● Provide native look & feel ● Access to native services ● Offline and cached data 6
  7. 7. Scenario: Hide the Browser ● Sub scenarios ■ Address bars should be hidden ■ App specific actions should be shown ■ Bookmarks on home screens should look like bookmarks to native apps ● Android and Blackberry show that an app is 'just' a web app. iPhone is a little better 7
  8. 8. In the web browser the address bar keeps coming up and the menu button shows generic browser actions Android (similar on Blackberry – see appendix) 8
  9. 9. Instead app specific actions should be shown and the browser bar should be hidden Android 9
  10. 10. The browser's actions are displayed at the bottom The address bar can be toggeled on/off iPhone 10
  11. 11. When launched from home page bookmark the generic actions don't show up The address bar is toggeled off initially iPhone 11
  12. 12. Scenario: Hide the Browser ● Hide address bar ■ iPhone: Works out of the box ■ Android: Dojo 1.5 (dojox/mobile) hides the address bar automatically ● Hide app specific actions (Android and Blackberry) ■ Possible solutions require native apps/shells with embedded browsers at this point ■ Neither PhoneGap, nor other frameworks support this functionality at this point but hopefully in the future 12
  13. 13. Scenario: Native Look ● Many iPhone apps use the typical iPhone style ● Android has it's own style but few apps use it ● Blackberry doesn't have it's own style ● Not all apps use these styles, but many of the most popular apps, esp. for iPhone 13
  14. 14. Scenario: Native Feel ● 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 14
  15. 15. iPhone Style 15
  16. 16. Android Style 16
  17. 17. Dojo 1.5 ● 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 17
  18. 18. Reusable XPages Controls using Dojo 1.5 ● The project leverages Dojo 1.5 ● Custom styles can be used ● This part of the project works on Lotus Domino 8.5.1 and iPhone and Android ● 10 reusable controls are provided to assemble custom apps ● A live version of this app is available under http://i.openntf.org 18
  19. 19. Loading of new Content ● View control loads new entries auto- matically when scrolling down ● Progress indicators for view and document loading 19
  20. 20. Creation of new Documents ● Project shows how to create new documents (via Ajax) 20
  21. 21. Bookmarks ● Pages including pages with documents can be bookmarked ■ e.g. http://i.openntf.org/niklas/ MobileControls1.0.0.nsf/ m.xsp#document&unid=E58 F1FE324BBC2418625771A00 1C5263 21
  22. 22. Navigation ● Browser and device navigation buttons are supported 22
  23. 23. Sticky Scrollbars ● When navigating back to the view the scrollbars are sticky 23
  24. 24. Custom Styles ● Custom styles can be used 24
  25. 25. Reusable Controls ● 8 reusable XPages Controls are provided to assemble custom apps 25
  26. 26. Controls: mConfiguration and mHeader 26
  27. 27. Controls: mRectangle, Header and Entry 27
  28. 28. Controls: mPage and mView 28
  29. 29. Controls: mPage and mDocumentContainer 29
  30. 30. Control myDocument is app specific 30
  31. 31. New Documents can be created via custom Code 31
  32. 32. Blackberry ● Webkit browser of Torch simulator 32
  33. 33. Scenario: Access Native Services ● Sub scenarios ■ Local contacts ■ Camera ■ GPS/geolocation ■ Accelerometer ■ Gestures (e.g. shake, orientation change) ■ Local filesystem ■ Media (e.g. pick photo) 33
  34. 34. Sample Scenario: Take Picture and upload to Domino 34
  35. 35. Scenario: 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 35
  36. 36. PhoneGap Demo App 36
  37. 37. JavaScript to use Camera 37
  38. 38. Scenario: 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 38
  39. 39. Reusable XPages Controls leveraging Dojo Mobile 1.5 including Offline ● Same blog application as previously taken offline 39
  40. 40. Reusable XPages Controls leveraging Dojo Mobile 1.5 including Offline ● This part of the project demonstrates how to take a Notes view and Notes documents offline ● Works on iPhone and Android [and Firefox] ● A live version is available under http://208.85.188.19/niklas/MobileControls200.nsf/m.xsp 40
  41. 41. Reusable XPages Controls leveraging Dojo Mobile 1.5 including Offline ● 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 41
  42. 42. Manifest File 42
  43. 43. Offline Detection 43
  44. 44. Controls, Controls, Controls ● Reused and packaged as XPages controls from various projects ■ Dojo 1.5 ■ Wink tookit 1.0 ■ cubiq.org 44
  45. 45. 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 45
  46. 46. Image Carousel ● From Dojo ● Switch between images via the icons on the left and right hand side 46
  47. 47. Image Viewer ● From Dojo Mobile ● Flip between images and zoom in/out 47
  48. 48. Slide In Menu ● From cubiq.org 48
  49. 49. Pop Up Menu ● From Wink toolkit 49
  50. 50. Spinning Wheel ● From cubiq.org 50
  51. 51. Date Picker Control ● From Wink toolkit 51
  52. 52. Modal Window ● From Wink toolkit 52
  53. 53. Static Line Items ● From Dojo 53
  54. 54. Resources – Open Source Projects ● XPages Mobile Controls Project: http://mobilecontrols.openntf.org ● PhoneGap: http://www.phonegap.com ● Dojo: http://www.dojotoolkit.org ● Wink Tookit: http://www.winktoolkit.org/ ● Cubiq.org: http://cubiq.org/ 54
  55. 55. Resources – Demos ● Dojo sample: http://i.openntf.org ● Dojo sample including offline: http://208.85.188.19/niklas/MobileControls200.nsf/ m.xsp ● Non Dojo sample: http://m.openntf.org 55
  56. 56. Resources – Videos ● Dojo sample: http://www.youtube.com/watch?v=atu7c0wApwY ● Dojo sample including offline: http://www.youtube.com/watch?v=xNht4vviamw ● Non Dojo sample: http://www.youtube.com/watch?v=-efgOkbIK9U ● XCamera: http://www.youtube.com/watch?v=M2DsAuAojnE ● Simple offline samples: http://www.youtube.com/watch?v=XkFWYHO-1ek 56
  57. 57. 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 57
  58. 58. Project License OpenNTF Alliance XPages Mobile Controls © Copyright IBM Corp. 2010 This product includes software contributed to OpenNTF Alliance – (http://www.OpenNTF.org/) Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License 58
  59. 59. Project License Dojo Mobile 1.5 http://download.dojotoolkit.org/release-1.5.0/ Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved. Available via Academic Free License >= 2.1 OR the modified BSD license. see http://dojotoolkit.org/license for details PhoneGap 0.9.0 is required but not part of this project http://www.phonegap.com/ Available under the MIT license see http://www.phonegap.com/license for details The Slide In Menu control uses an open source project from cubiq.org Copyright (c) 2009 Matteo Spinelli, http://cubiq.org/ Available under the MIT license http://cubiq.org/dropbox/mit-license.txt Project (version: 2010.05.28 – v0.1 beta 1): http://cubiq.org/slide-in-menu 59
  60. 60. Project License The Spinning Wheel control uses an open source project from cubiq.org Copyright (c) 2009 Matteo Spinelli, http://cubiq.org/ Available under the MIT license http://cubiq.org/dropbox/mit-license.txt Project (version: 2009/07/09): http://cubiq.org/spinning-wheel-on-webkit-for-iphone-ipod-touch wink tookit 1.0 is required but not part of this project http://www.winktoolkit.org/download/wink_1.0_optimized.zip Available under the simple BSD license see http://www.winktoolkit.org/download/licence.txt for details 60
  61. 61. Appendix - Scenario: Hide the Browser 61
  62. 62. In the web browser the address bar keeps coming up and the menu button shows generic browser actions Android 62
  63. 63. Bookmarks can be added to home page but they look different to native apps Android 63
  64. 64. Only links to native apps look native Android 64
  65. 65. This native app uses an embedded web browser The actions show the app's actions defined in a custom XPage control Android 65
  66. 66. Android actions can be defined in custom control Android & Blackberry 66
  67. 67. In the web browser the menu button shows generic browser actions Blackberry 67
  68. 68. This native app uses an embedded web browser The actions show the app's actions defined in a custom XPage control Blackberry 68
  69. 69. The browser's actions are displayed at the bottom The address bar can be toggeled on/off iPhone 69
  70. 70. Bookmarks can be added to home page and they look native iPhone 70
  71. 71. When launched from home page bookmark the generic actions don't show up The address bar is toggeled off initially iPhone 71
  72. 72. Appendix - XPages Sample App using Lotus Domino 8.5.1 only 72
  73. 73. XPages Sample App using Lotus Domino 8.5.1 only ● Another part of the project shows how to build similar apps via Lotus Domino 8.5.1 only without Dojo 1.5 ● This approach also works on some Blackberry devices. Note that this approach is not as robust on Android and iPhone when compared to Dojo 1.5 ● A live version of this app is available under http://m.openntf.org 73
  74. 74. 74
  75. 75. Setup ● Copy MobileControls040.nsf to your data directory and launch m.xsp 75
  76. 76. Appendix – Offline Mini Samples 76
  77. 77. Local Storage Mini Samples 77
  78. 78. sessionStorage and localStorage 78
  79. 79. SQL Storage 79
  80. 80. Cache Resources Samples ● Sample shows how to cache Dojo JavaScript files, images and stylesheets ● A reusable control is provided to refresh the cache and to see the cache status and events 80
  81. 81. Legal Disclaimer ● © IBM Corporation 2010. All Rights Reserved. ● The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for 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 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. ● 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. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. 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. ● IBM, Lotus Notes, Domino, Lotus iNotes ● Android is a trademark of Google Inc. ● iPhone is a trademark of Apple Inc. ● The Trademark Blackberry is owned by Research In Motion Limited 81

×