1. XPages Mobile Controls
http://mobilecontrols.openntf.org
Niklas Heidloff, IBM
09/01/10
1

2. Agenda
●
Overview
●
Mobile apps with native look and feel
●
Mobile apps accessing native services
●
Mobile apps caching data and supporting offline
2

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. 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. 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. Scenarios
●
Hide the browser
●
Provide native look & feel
●
Access to native services
●
Offline and cached data
6

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. 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. Instead app
specific actions
should be shown
and the browser
bar should be
hidden
Android
9

10. The browser's
actions are
displayed at the
bottom
The address bar
can be toggeled
on/off
iPhone
10

11. When launched
from home page
bookmark the
generic actions
don't show up
The address bar
is toggeled off
initially
iPhone
11

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. 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. 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. iPhone Style
15

16. Android Style
16

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. 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. Loading of new Content
●
View control loads
new entries auto-
matically when
scrolling down
●
Progress indicators
for view and
document loading
19

20. Creation of new Documents
●
Project shows how to create
new documents (via Ajax)
20

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. Navigation
●
Browser and device navigation
buttons are supported
22

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

24. Custom Styles
●
Custom styles can be used
24

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

26. Controls: mConfiguration and mHeader
26

27. Controls: mRectangle, Header and Entry
27

28. Controls: mPage and mView
28

29. Controls: mPage and mDocumentContainer
29

30. Control myDocument is app specific
30

31. New Documents can be created via custom Code
31

32. Blackberry
●
Webkit browser of
Torch simulator
32

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. Sample Scenario:
Take Picture and upload to Domino
34

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. PhoneGap Demo App
36

37. JavaScript to use Camera
37

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. Reusable XPages Controls leveraging Dojo
Mobile 1.5 including Offline
●
Same blog
application as
previously
taken offline
39

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. 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. Manifest File
42

43. Offline Detection
43

44. Controls, Controls, Controls
●
Reused and packaged as XPages controls from various
projects
■
Dojo 1.5
■
Wink tookit 1.0
■
cubiq.org
44

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. Image Carousel
●
From Dojo
●
Switch between images
via the icons on the left and
right hand side
46

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

48. Slide In Menu
●
From cubiq.org
48

49. Pop Up Menu
●
From Wink toolkit
49

50. Spinning Wheel
●
From cubiq.org
50

51. Date Picker Control
●
From Wink toolkit
51

52. Modal Window
●
From Wink toolkit
52

53. Static Line Items
●
From Dojo
53

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. 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. 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. 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. 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. 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. 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. Appendix - Scenario: Hide the Browser
61

62. In the web
browser the
address bar
keeps coming up
and the menu
button shows
generic browser
actions
Android
62

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

64. Only links to
native apps look
native
Android
64

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. Android actions
can be defined in
custom control
Android &
Blackberry 66

67. In the web
browser the
menu button
shows generic
browser actions
Blackberry
67

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. The browser's
actions are
displayed at the
bottom
The address bar
can be toggeled
on/off
iPhone
69

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

71. When launched
from home page
bookmark the
generic actions
don't show up
The address bar
is toggeled off
initially
iPhone
71

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

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

75. Setup
●
Copy MobileControls040.nsf to your data directory and
launch m.xsp
75

76. Appendix – Offline Mini Samples
76

77. Local Storage Mini Samples
77

78. sessionStorage and localStorage
78

79. SQL Storage
79

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. 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