Date post: | 14-May-2015 |
Category: |
Business |
Upload: | niklas-heidloff |
View: | 5,405 times |
Download: | 2 times |
1
XPages Mobile ControlsXPages Mobile Controls
http://mobilecontrols.openntf.orghttp://mobilecontrols.openntf.org
Niklas Heidloff, IBM09/01/10
2
AgendaAgenda
● Overview● Mobile apps with native look and feel● Mobile apps accessing native services● Mobile apps caching data and supporting offline
3
Goals of the ProjectGoals 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
Technical GoalsTechnical 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
Project OverviewProject 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.
6
ScenariosScenarios
● Hide the browser● Provide native look & feel● Access to native services● Offline and cached data
7
Scenario: Hide the BrowserScenario: 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
In the web browser the address bar keeps coming up
and the menu button shows generic browser actions
Android (similar on Blackberry – see appendix)Android (similar on Blackberry – see appendix)
9
Instead app specific actions should be shown and the browser bar should be hidden
AndroidAndroid
10
The browser's actions are displayed at the bottom
The address bar can be toggeled on/off
iPhoneiPhone
11
When launched from home page bookmark the generic actions don't show up
The address bar is toggeled off initially
iPhoneiPhone
12
Scenario: Hide the BrowserScenario: 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
Scenario: Native LookScenario: 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
Scenario: Native FeelScenario: 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
iPhone Style iPhone Style
16
Android StyleAndroid Style
17
Dojo 1.5Dojo 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
18
Reusable XPages Controls using Dojo 1.5Reusable 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
Loading of new ContentLoading of new Content
● View control loadsnew entries auto-matically when scrolling down
● Progress indicatorsfor view and document loading
20
Creation of new DocumentsCreation of new Documents
● Project shows how to createnew documents (via Ajax)
21
BookmarksBookmarks
● Pages including pages withdocuments can be bookmarked
■ e.g. http://i.openntf.org/niklas/MobileControls1.0.0.nsf/m.xsp#document&unid=E58F1FE324BBC2418625771A001C5263
22
NavigationNavigation
● Browser and device navigationbuttons are supported
23
Sticky ScrollbarsSticky Scrollbars
● When navigating back to the view the scrollbars are sticky
24
Custom StylesCustom Styles
● Custom styles can be used
25
ReusableReusableControlsControls● 8 reusable
XPages Controlsare providedto assemblecustom apps
26
Controls: mConfiguration and mHeaderControls: mConfiguration and mHeader
27
Controls: mRectangle, Header and EntryControls: mRectangle, Header and Entry
28
Controls: mPage and mViewControls: mPage and mView
29
Controls: mPage and mDocumentContainerControls: mPage and mDocumentContainer
30
Control myDocument is app specificControl myDocument is app specific
31
New Documents can be created via custom CodeNew Documents can be created via custom Code
32
BlackberryBlackberry
● Webkit browser ofTorch simulator
33
Scenario: Access Native ServicesScenario: Access Native Services
● Sub scenarios■ Local contacts■ Camera■ GPS/geolocation■ Accelerometer■ Gestures (e.g. shake, orientation change)■ Local filesystem■ Media (e.g. pick photo)
34
Sample Scenario: Sample Scenario: Take Picture and upload to DominoTake Picture and upload to Domino
35
Scenario: Access Native ServicesScenario: 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
36
PhoneGap Demo AppPhoneGap Demo App
37
JavaScript to use CameraJavaScript to use Camera
38
Scenario: Offline and cached DataScenario: 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
39
Reusable XPages Controls leveraging Dojo Reusable XPages Controls leveraging Dojo Mobile 1.5 including OfflineMobile 1.5 including Offline
● Same blog application as previously taken offline
40
Reusable XPages Controls leveraging Dojo Reusable XPages Controls leveraging Dojo Mobile 1.5 including OfflineMobile 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
41
Reusable XPages Controls leveraging Dojo Reusable XPages Controls leveraging Dojo Mobile 1.5 including OfflineMobile 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
42
Manifest FileManifest File
43
Offline DetectionOffline Detection
44
Controls, Controls, ControlsControls, Controls, Controls
● Reused and packaged as XPages controls from various projects
■ Dojo 1.5■ Wink tookit 1.0■ cubiq.org
45
Login ControlLogin Control
● Another part of the project is the login control for mobiledevices
● This is not an XPages controlbut leverages IBM Lotus iNotes® Ultralite code
46
Image CarouselImage Carousel
● From Dojo● Switch between images
via the icons on the left andright hand side
47
Image ViewerImage Viewer
● From Dojo Mobile● Flip between images and
zoom in/out
48
Slide In MenuSlide In Menu
● From cubiq.org
49
Pop Up MenuPop Up Menu
● From Wink toolkit
50
Spinning WheelSpinning Wheel
● From cubiq.org
51
Date Picker ControlDate Picker Control
● From Wink toolkit
52
Modal WindowModal Window
● From Wink toolkit
53
Static Line ItemsStatic Line Items
● From Dojo
54
Resources – Open Source ProjectsResources – 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/
55
Resources – DemosResources – 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
56
Resources – VideosResources – 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
57
Resources – HTML5Resources – 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
58
Project LicenseProject 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
59
Project LicenseProject LicenseDojo 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
60
Project LicenseProject LicenseThe 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
61
Appendix - Scenario: Hide the BrowserAppendix - Scenario: Hide the Browser
62
In the web browser the address bar keeps coming up
and the menu button shows generic browser actions
AndroidAndroid
63
Bookmarks can be added to home page but they look different to native apps
AndroidAndroid
64
Only links to native apps look native
AndroidAndroid
65
This native app uses an embedded web browser
The actions show the app's actions defined in a custom XPage control
AndroidAndroid
66
Android actions can be defined in custom control
Android &Android &BlackberryBlackberry
67
In the web browser the menu button shows generic browser actions
BlackberryBlackberry
68
This native app uses an embedded web browser
The actions show the app's actions defined in a custom XPage control
BlackberryBlackberry
69
The browser's actions are displayed at the bottom
The address bar can be toggeled on/off
iPhoneiPhone
70
Bookmarks can be added to home page and they look native
iPhoneiPhone
71
When launched from home page bookmark the generic actions don't show up
The address bar is toggeled off initially
iPhoneiPhone
72
Appendix - Appendix - XPages Sample App using Lotus XPages Sample App using Lotus Domino 8.5.1 onlyDomino 8.5.1 only
73
XPages Sample App using Lotus Domino 8.5.1 XPages Sample App using Lotus Domino 8.5.1 onlyonly● 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 underhttp://m.openntf.org
74
75
SetupSetup
● Copy MobileControls040.nsf to your data directory and launch m.xsp
76
Appendix – Appendix – Offline Mini SamplesOffline Mini Samples
77
Local Storage Mini SamplesLocal Storage Mini Samples
78
sessionStorage and localStoragesessionStorage and localStorage
79
SQL StorageSQL Storage
80
Cache Resources SamplesCache Resources Samples
● Sample shows how to cache DojoJavaScript files, images and stylesheets
● A reusable control is provided to refresh the cache and to see the cache status and events
81
Legal DisclaimerLegal 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