2. Try it !
http://www.openntf.org/mobile
or
http://www.openntf.org/Projects/pmt.nsf/ProjectLookup/XPages%20Mobile%20Controls
or
2
3. Agenda
●
Overview
●
Mobile apps with native look and feel
●
Mobile apps accessing native services
●
Mobile apps caching data and supporting offline
3
4. 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
4
5. 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
5
6. Project Overview
●
Reusable XPages Controls using Dojo Mobile 1.5
●
XPages Sample App using Lotus Domino 8.5.1 only
●
XCamera using PhoneGap
●
Simple HTML5 Offline Samples using Lotus Domino
8.5.2
●
Reusable XPages Controls leveraging Dojo Mobile 1.5
including Offline
●
Login Control using IBM Lotus iNotes® Ultralite
6
7. Scenarios
●
Hide the browser
●
Provide native look & feel
●
Access to native services
●
Offline and cached data
7
8. 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
8
9. In the web
browser the
address bar
keeps coming up
and the menu
button shows
generic browser
actions
Android (similar on Blackberry – see appendix)
9
12. When launched
from home page
bookmark the
generic actions
don't show up
The address bar
is toggeled off
initially
iPhone
12
13. 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
13
14. 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
14
15. 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
15
18. 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
●
Dojo 1.5 has not been released yet but the code is
available in the dojotoolkit SVN trunk
18
19. 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
19
20. Loading of new Content
●
View control loads
new entries auto-
matically when
scrolling down
●
Progress indicators
for view and
document loading
20
21. Creation of new Documents
●
Project shows how to create
new documents (via Ajax)
21
22. 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
22
23. Navigation
●
Browser and device navigation
buttons are supported
23
24. Sticky Scrollbars
●
When navigating back to the view the scrollbars are
sticky
24
33. Setup
●
The Dojo mobile code
has to be imported into
the NSF (see
ReadMe.pdf for more
details)
●
Copy
MobileControls1.0.0.nsf
to your data directory
and launch the XPages
m.xsp or o.xsp
33
34. 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
34
39. 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
39
42. Setup: PhoneGap
●
PhoneGap needs to be configured and then recompiled
for the specific platforms -> requires native SDKs
●
Config
■
Name
■
URL
■
Icon
42
43. Setup: Domino Designer
●
The PhoneGap JavaScript files
(in 0.9 only one file for Android)
need to be imported into NSF
(see ReadMe.pdf for details)
43
44. 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
44
48. 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
48
49. Reusable XPages Controls leveraging Dojo
Mobile 1.5 including Offline
●
Same blog
application as
previously
taken offline
49
50. 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
50
51. 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
51
57. Setup
●
Import the two generated
js files into MobileControls200.nsf
●
Import dojox/mobile
●
See ReadMe.pdf for more details
●
Copy MobileControls200.nsf
to your Domino data directory
and launch m.xsp
57
58. Login Control
●
Another part of the project
is the login control for mobile
devices
●
This is not an XPages control
but leverages Lotus iNotes
code
58
59. Resources – Open Source Projects
●
XPages Mobile Controls Project:
http://www.openntf.org/mobile
●
PhoneGap:
http://www.phonegap.com
●
Dojo:
http://www.dojotoolkit.org
59
64. Project License
The dojo/hash.js file is part of Dojo 1.4.
Copyright (c) 2004-2009, 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
Dojo Mobile 1.5 is required but not part of this project
Copyright (c) 2004-2009, 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 via MIT
see http://www.phonegap.com/license for details
64