2. Please Note
IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole
discretion.
Information regarding potential future products is intended to outline our general product direction and it should not be
relied on in making a purchasing decision.
The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver
any material, code or functionality. Information about potential future products may not be incorporated into any contract.
The development, release, and timing of any future features or functionality described for our products remains at our sole
discretion
Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment.
The actual throughput or performance that any user will experience will vary depending upon many factors, including
considerations such as the amount of multiprogramming in the user’s job stream, the I/O configuration, the storage
configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve
results similar to those stated here.
3. “IBM Domino 9.0.1 packs in quite a few new XPages goodies for mobile
application development. In this demo-driven session you will learn first-hand how
to build and debug XPages mobile apps for the tablet and smart phone using all
the latest features, APIs, extensions and best practices available today. You will
see how XPages apps can become responsive in nature and get a glimpse of
what's coming in terms of XPages mobile futures. Lots to learn here!”
4. Good Morning!
Welcome to AD503…
Eamon Muldoon
Development Manager
Ireland Software Labs
@eamonmuldoon
Tony McGuckin
Senior Software Engineer
Ireland Software Labs
@tonymcguckin
7. XPages Mobile Introduction
What is it?
XPages, HTML5, JS,
CSS3. Quick / Low
cost development.
Executed in a HTML
browser so highly
portable.
XPages*, HTML5, JS,
CSS3, other runtime
libraries packaged in
the app. Executed in
a native shell c/w
extra JS API.
* Requires additional hybrid integration
Platform-specific
code / Unportable.
Unique expertise.
Pricey and longer to
develop. Delivers rich
user experience.
8. XPages Mobile Introduction
How we got here…
N/D 9.0 Social Edition
OpenNTF XPages
Extension Library
Discussion / TeamRoom
templates mobilized
Based on N/D 8.5.2
Responsive, …
2013
2011
OpenNTF Mobile
Controls Project
OpenNTF XPages
Extension Library
Releases
Based on Dojo 1.8.1
Incorporated into XPages
Extension Library in 2011
2010
Beyond N/D 9.0.1
More robust
2012
2013
Upgrade Pack 1
N/D 9.0.1
XPages Mobile support
released in Upgrade Pack 1
Based on Dojo 1.8.3
Released early 2010
Based on N/D 8.5.2
Based on N/D 8.5.3
Based on Dojo 1.5
Extending core product
Robust / Performant
New IBM OneUI IDX Mobile theme
New features & Increased extensibility
9. XPages Mobile Introduction
For your interest…
Where you see the following image of Domino +
OpenNTF being used throughout this presentation
indicates that a combination of Notes/Domino 9.0.1
and the most recent available OpenNTF XPages
Extension Library 9.0.1 Release is required for the
particular feature being described
+
11. XPages Mobile Development in Domino 9.0.1
Single Page Application Control
UI behaviors like transitions, dynamic retrieval, scrolling, etc cannot be
seamlessly achieved when switching/interacting with multiple pages in an
application
–
Due to regular HTTP Request / Response round-trip
Single Page Application (SPA) control handles this requirement
–
A single client-side page is used to manage transitioning /
interaction
–
Content is made of “views” - one displayed at a time
•
•
Transition effects happen when views are switched
Views can be statically or lazy-loaded as required
–
Highly fluid, seamless behavior is exposed
–
Commonly known as SPA or SPI (Single Page Interface)
12. XPages Mobile Development in Domino 9.0.1
Single Page Application Wizard
The Wizard allows you to create an initial design
framework for your XPages mobile application
It walks you through the process of creating new
Application Pages (xe:appPage) and populating
them with various mobile controls
Allows you to configure navigation between the
Application Pages and generate Custom Controls
for the content of each Application Page
Available on OpenNTF.org
since 13th December 2013
+
13. XPages Mobile Development in Domino 9.0.1
Single Page Application Wizard
A Single Page Application control is added to the XPage and Custom Controls as configured
14. XPages Mobile Development in Domino 9.0.1
Single Page Application Wizard
The Wizard outputs a fully functional mobile application with the navigation between pages in place
15. XPages Mobile Development in Domino 9.0.1
Mobile Theme Configuration Editor
Allows you to select a mobile theme
– No longer stuck with just iPhone or
Android themes
Choose overrides for iOS and Android
Select your own custom theme if you
need to
Provides a new Debug User Agent
setting for development / testing where
requests mimic the chosen user agent
16. XPages Mobile Development in Domino 9.0.1
IBM OneUI IDX Mobile Theme
New IBM OneUI Dojo Extensions (aka
IDX) mobile theme
– Common look & feel across devices
17. XPages Mobile Development in Domino 9.0.1
Custom Mobile Theming
Custom theming now possible
by creating / extending /
overriding out-of-the-box
themes
Custom resources are served
last to ensure custom code
takes precedence over out-ofthe-box CSS and/or
JavaScript
18. XPages Mobile Development in Domino 9.0.1
Web vs Mobile Specific Rendering
Same DataView control
rendered in web vs mobile
19. XPages Mobile Development in Domino 9.0.1
DataView Touch Scrolling
Touch based “infinite” scrolling
Lazy loads the next set of rows
using Partial Refresh
Computable infiniteScroll
property on the <xe:dataView/>
control
+
20. XPages Mobile Development in Domino 9.0.1
Photo / File Upload
New in-built “Partial
Refresh” photo/file upload
for mobile & web
21. XPages Mobile Development in Domino 9.0.1
Date / Time Pickers
Native control integration for
Date & Time
+
22. XPages Mobile Development in Domino 9.0.1
Events & Actions
Events
– OnOrientationChange() / OnResize() / onBefore/AfterTransitionIn/Out()
Actions
– MoveTo SimpleAction
– XSP.moveToMPage( view, moveTo, dir, transition, params )
•
•
•
•
•
view
moveTo
dir
transition
params
The
The
The
The
Can
currently selected view.
id of the view to be moved to.
direction of the transition.
type of transition to perform.
be a string (&k=v) or an object of key/value pairs {"k":"v"}
– Eg: XSP.moveToMPage(dijit.byId("devicePage"), "#modelPage", 1, "none")
23. XPages Mobile Development in Domino 9.0.1
Device Bean / RESS
New Device Bean available for direct use within SSJS and/or custom Java
– Makes it easy to adapt the contents and resources within an XPage on the server-side to suit the
requesting device
– Beneficial when used in a “Responsive” manner (aka “Responsive Server Side”) to complement
client-side Responsive techniques
Predefined set of methods / properties available
– deviceBean.isIphone() / deviceBean.isAndroid() / etc
Extensible via extension point to allow future / custom methods / properties to be supported
– Eg: deviceBean.getAddressBook() / deviceBean.getOrientation()
25. Beyond Domino 9.0.1
Think!
The “Art of the Possible”
Dojo Mobile 1.8.3 is available for direct use within XPages in Domino 9.0.1
Client-side JS Script using Touch API onTouchStart/Move/End etc
Use Dojo Mobile ScrollableView/Pane's with in-built Touch Scrolling etc
Make leaner, lighter Mobile applications by using Responsive Server-Side (RESS)
capabilities via the deviceBean, and client-side Responsive Web Design (RWD) using
CSS Media Queries / JavaScript mediaQuery Listeners
http://openntf.org/XSnippets.nsf/snippet.xsp?id=react-to-css-media-queries-to-invoke-dynamic-server-sidecontent-and-logic
http://openntf.org/XSnippets.nsf/snippet.xsp?id=react-to-css-media-queries-using-client-side-javascript
Use a responsive framework/toolkit to provide “Responsive” applications
Bootstrap4XPages OpenNTF Project
26. Beyond Domino 9.0.1
Key Focus Areas / Delivery Mechanism
Key Focus Areas
– Responsive Web Design
– Progressive Enhancement
Delivery Mechanism
– OpenNTF Extension Library Releases
27. Beyond Domino 9.0.1
Key Focus Areas
Responsive Web Design (RWD)
─
─
Realizing the true vision of build once,
run anywhere
Increase the number of XPages
controls with responsive renderings
Progressive Enhancement (PE)
─
Support additional gestures/functions
where applicable
─
Support additional events to provide
finer grained control for developers
─
Utilize device specific services
─
Automatic and optional configuration of
controls for desktop, web, or mobile web
experience
28. Beyond Domino 9.0.1
RWD / PE – Enablers
Responsive Web Design (RWD) and Responsive Server-Side (RESS) capabilities would allow you to:
– View the exact same XPages codebase across different form factors (desktop, tablet, smartphone, …)
– Use in-built capabilities to streamline content delivery/exposure on server-side and client-side relative to User
Experience design decisions
Progressive Enhancement (PE) capabilities would allow you to:
– Leverage touch based gestures to enrich the user experience interaction model
29. Beyond Domino 9.0.1
RWD / PE – Enablers
PE capabilities would allow you to:
+
– Touch Scroll a DataView (already available in latest Domino 9.0.1 OpenNTF Release via infiniteScroll)
– Horizontal Swipe a DataView to reveal / lazyload more columns in a narrow form factor
– Double-Tap a Panel to Maximize / Restore size complete with optional lazyload capability
• Also useful for a FormTable to show more form fields when maximized / utilizing more real estate
– Pinch/Zoom a DataView “detail row” to toggle in/out of in-context editing mode
– Drag’n’Drop to a File Upload or from a File Download, or Rich Text Editor directly to/from the underlying file system
– Copy/Paste to/from a Rich Text Editor directly to/from the underlying clipboard / file system
30. Beyond Domino 9.0.1
Think!
Responsive Server-Side
Web Design (RESS) using
deviceBean API
Transparent access via desktop or mobile...
Responsive Client-Side Web
Design (RWD) using CSS3/Media
Queries/RWD Theme
Mobile specific controls can
be embedded in hybrid model
Touch scrolling plus other in-built gestures
like swipe / double-tap etc
32. Partner Mobile Solutions & Services
TeamStudio Unplugged
─
We4IT Doclinkr
─
http://www.cognizant.com/InsightsWhitepapers/Lotus-Notes-Mobile-Application-DevelopmentUsing-XPages.pdf
Maarga
─
http://redpilldevelopment.com/
Cognizant
─
http://www.doclinkr.com/en/
Redpill Mobile
─
http://unplugged.teamstudio.com/
http://www.maargasystems.com/maargas-mobility-services.shtml
And many others....
33. Public XPages Mobile Case Studies
Hendricks Regional Health
─
─
Using XPages to improve staff scheduling & communication, mobile access to field protocols for
EMTs, an insulin drip calculator and more
Click → Link to case study
Imaging Business Machines, LLC.
─
─
Using XPages to modernize existing business applications
Click → Link to case study
VCC
─
XPages mobile controls provide mobile access to VCC's Endeavor project management solution
─
Click → Link to case study
36. Access Connect Online to complete your session surveys using any:
– Web or mobile browser
– Connect Online kiosk onsite
37. Engage Online
SocialBiz User Group socialbizug.org
– Join the epicenter of Notes and Collaboration user groups
Follow us on Twitter
– @IBMConnect and @IBMSocialBiz
LinkedIn http://bit.ly/SBComm
– Participate in the IBM Social Business group on LinkedIn:
Facebook https://www.facebook.com/IBMSocialBiz
– Like IBM Social Business on Facebook
Social Business Insights blog ibm.com/blogs/socialbusiness
– Read and engage with our bloggers