© 2014 IBM Corporation

AD503: XPages Mobile Development in IBM Domino 9.0.1 and BeyondEamon Muldoon, IBMTony McGuckin, IBM

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.

“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!”

Tony McGuckinSenior Software Engineer

Ireland Software Labs@tonymcguckin

Eamon MuldoonDevelopment ManagerIreland Software Labs

@eamonmuldoon

Good Morning!Welcome to AD503…

This Mornings Agenda…

XPages Mobile Introduction

XPages Mobile Development in 9.0.1

Beyond Domino 9.0.1

Q&A

XPages Mobile Introduction

XPages*, HTML5, JS, CSS3, other runtime libraries packaged in the app. Executed in a native shell c/w extra JS API.

XPages, HTML5, JS, CSS3. Quick / Low cost development. Executed in a HTML browser so highly portable.

Platform-specific code / Unportable. Unique expertise. Pricey and longer to develop. Delivers rich user experience.

XPages Mobile IntroductionWhat is it?

* Requires additional hybrid integration

OpenNTF Mobile Controls Project

Released early 2010

Based on N/D 8.5.2

Based on Dojo 1.5

XPages Mobile IntroductionHow we got here…

OpenNTF XPages Extension Library

Incorporated into XPages Extension Library in 2011

Based on N/D 8.5.2

Upgrade Pack 1

XPages Mobile support released in Upgrade Pack 1

Based on N/D 8.5.3

Extending core product

N/D 9.0 Social Edition

More robust

Based on Dojo 1.8.1

Discussion / TeamRoom templates mobilized

N/D 9.0.1

Based on Dojo 1.8.3

Robust / Performant

New IBM OneUI IDX Mobile theme

New features & Increased extensibility

2010

2011

2012

2013

2013

Beyond N/D 9.0.1

OpenNTF XPages Extension Library Releases

Responsive, …

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

+

XPages Mobile IntroductionFor your interest…

XPages Mobile Developmentin Domino 9.0.1

XPages Mobile Development in Domino 9.0.1Single 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)

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.orgsince 13th December 2013

XPages Mobile Development in Domino 9.0.1Single Page Application Wizard

+

A Single Page Application control is added to the XPage and Custom Controls as configured

XPages Mobile Development in Domino 9.0.1Single Page Application Wizard

The Wizard outputs a fully functional mobile application with the navigation between pages in place

XPages Mobile Development in Domino 9.0.1Single Page Application Wizard

XPages Mobile Development in Domino 9.0.1Mobile 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

XPages Mobile Development in Domino 9.0.1IBM OneUI IDX Mobile Theme

New IBM OneUI Dojo Extensions (aka IDX) mobile theme

– Common look & feel across devices

XPages Mobile Development in Domino 9.0.1Custom 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-of-the-box CSS and/or JavaScript

XPages Mobile Development in Domino 9.0.1Web vs Mobile Specific Rendering

Same DataView control rendered in web vs mobile

XPages Mobile Development in Domino 9.0.1DataView Touch Scrolling

Touch based “infinite” scrolling

Lazy loads the next set of rows using Partial Refresh

Computable infiniteScroll property on the <xe:dataView/> control

+

XPages Mobile Development in Domino 9.0.1Photo / File Upload

New in-built “Partial Refresh” photo/file upload for mobile & web

XPages Mobile Development in Domino 9.0.1Date / Time Pickers

Native control integration for Date & Time +

XPages Mobile Development in Domino 9.0.1Events & Actions

Events

– OnOrientationChange() / OnResize() / onBefore/AfterTransitionIn/Out()

Actions

– MoveTo SimpleAction– XSP.moveToMPage( view, moveTo, dir, transition, params )

• view The currently selected view.• moveTo The id of the view to be moved to.• dir The direction of the transition.• transition The type of transition to perform.• params Can be a string (&k=v) or an object of key/value pairs {"k":"v"}

– Eg: XSP.moveToMPage(dijit.byId("devicePage"), "#modelPage", 1, "none")

XPages Mobile Development in Domino 9.0.1Device 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()

Beyond Domino 9.0.1

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

Beyond Domino 9.0.1Think!

Key Focus Areas

– Responsive Web Design

– Progressive Enhancement

Delivery Mechanism

– OpenNTF Extension Library Releases

Beyond Domino 9.0.1Key Focus Areas / Delivery Mechanism

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 webexperience

Beyond Domino 9.0.1Key Focus Areas

Beyond Domino 9.0.1RWD / 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

Beyond Domino 9.0.1RWD / 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

+

Beyond Domino 9.0.1Think!

Transparent access via desktop or mobile...

Responsive Server-Side Web Design (RESS) using deviceBean API Touch scrolling plus other in-built gestures

like swipe / double-tap etc

Responsive Client-Side Web Design (RWD) using CSS3/Media Queries/RWD Theme

Mobile specific controls can be embedded in hybrid model

Partner Solutionsand Services

Partner Mobile Solutions & Services TeamStudio Unplugged

─ http://unplugged.teamstudio.com/

We4IT Doclinkr─ http://www.doclinkr.com/en/

Redpill Mobile─ http://redpilldevelopment.com/

Cognizant─ http://www.cognizant.com/InsightsWhitepapers/Lotus-Notes-Mobile-Application-Development-

Using-XPages.pdf

Maarga─ http://www.maargasystems.com/maargas-mobility-services.shtml

And many others....

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

Q&A

Access Connect Online to complete your session surveys using any:– Web or mobile browser – Connect Online kiosk onsite

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

Acknowledgements and Disclaimers

© Copyright IBM Corporation 2014. All rights reserved.

U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.

IBM, the IBM logo, ibm.com, Notes, Domino, and XPages are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml

Other company, product, or service names may be trademarks or service marks of others.

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

The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation 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.

All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. 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.