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