MWLUG 2014

MS103: The XPages Mobile Controls: What's New In Notes 9.0.1

Graham Acres, President, Brytek Systems Inc.

Graham Acres

• IBM Lotus Notes Developer/Designer since v2.1

• Brytek is an IBM Business Partner based in Vancouver, Canada

• Currently focus on application development (Social Business, XPages, Mobile)

• OpenNTF Contributor

• Away from work

– Cyclist, Ride to Conquer Cancer

• @gacres99

Agenda

• Mobility in 2014, Your Options

• The XPages Mobile Controls

• What’s New in 9.0.1

• The Candidate Application

• XPages Single Page Application Wizard

• Demo in XPages

• OpenNTF Options

– Demo in Unplugged

– Demo in Bootstrap4XPages

– XControls Project

• Resources

– Link to 2012 presentation

• Questions

Mobility in 2014, Your Options

• Usage is increasing

• Capability is increasing

• Demand is increasing

• Expectations are increasing

• Options are increasing

– Devices / screens

• Native apps

• Mobile web pages

Your Options

• Tools you can use – wide variety!

– Dojo Mobile

– jQuery Mobile

– Sencha Touch

– Kendo UI

– Appcelerator

– Bluemix

– XPages

– OpenNTF

Mobility in 2014, Your Options

• You need to be building mobile apps

• XPages provides an option

• … and it’s easy!

• iOS8 – yes, we are at the mercy of vendors – http://www.notesin9.com/2014/09/26/xpages-and-ios8-situation-update-2-second-fix/

The XPages Mobile Controls

• You are building a mobile web site

• Con: Cannot be used offline

• Pro: Build once for all devices

• A best practice is to keep your mobile layer “light” • Your mobile layer may include less overall content compared to the main

site, and offer less functionality/workflow

• It will load faster, be easier to use and be more intuitive

The XPages Mobile Controls

• Mobile Theme

– Application Configuration > Xsp Properties

The XPages Mobile Controls

• Concepts

1. A mobile site in XPages is contained entirely in one XPage • May (should) use Custom Controls

2. Navigation is between “Mobile Page” controls within a “Single Page Application” control

3. Think about your navigation as a first step

The XPages Mobile Controls

• Mobile controls

– Single Page Application

• SelectedPageName property

– Application Page (aka Mobile Page)

• PageName property

– Page Heading

– the rest

• Other controls

– Data View

– Outline

– Form Table

– Form Layout Row

Mobile Page Control

Page Heading Control

Page Content (your choice)

The XPages Mobile Controls

What’s New in Notes 9.0.1

• Mastering Xpages 2nd Edition, Chapter 14

– Testing with a Browser

– Device Bean

– Single Page Application Design Pattern

– Properties (Mobile Theme) “m_”

– Navigation (fade, flip, slide, none) • Navigator, Hierarchical, Context-Sensitive

What’s New in Notes 9.0.1

• Mastering Xpages 2nd Edition, Chapter 14

– Interaction • Orientation, Touch, Multi-Touch

– Themes • DataView, Outline, FormTable, Styling (device-specific buttons)

– Debugging

– Extensions • Infinite Scrolling!

• Wizard!

• Note: requires the Extension Library

Device Bean

• deviceBean.isMobile

• deviceBean.isTablet

• deviceBean.isIphone

• deviceBean.isIpad

• deviceBean.isAndroid

• deviceBean.isBlackberry

• deviceBean.isWindows

Interaction

• Orientation

– CSS

– onOrientationChange Event

Interaction

• Touch-Based

– onTouchStart Event

– onTouchEnd Event

• Multitouch-Based

– Viewport Meta Tag

– Calculate and Set Optimum Zoom

• Width

• Height

• Initial-scale

• Maximum-scale

• Minimum-scale

• User-scalable

Extensions

• These require the Extension Library v901v00_02.x (or higher)

• Infinite Scrolling

– infiniteScroll property in Data View control

• enable, disable, auto

• Wizard

– A demo is worth 1000 words

The Candidate Application

• Let’s Set The Stage

• Question:

1. How many people here provide ongoing technical support for their family members?

2. How many people here have built a web site for one of said family members?

The Candidate App

• For fans of Monty Python…

… my Father is a Lumberjack, and he’s OK

• Chain Saw Collectors Corner

– Traditional Domino web app

– $$ViewTemplateDefault

– www.brytek.ca/cscc.nsf

The Candidate App

The Candidate Application

The Candidate App

The Candidate Application

July 1 – July 31, 2012

The Candidate Application

July 1 – July 31, 2014 July 1 – July 31, 2012

Demo

• Demo

XPages Demo

XPages Demo

XPages Demo

Lessons Learned

• Limited choices of field types to display data

• Only may specify a DataView control for displaying views

• No opportunity to add a column to a view after the first one

• A small quirk: as you work through the wizard, the default value provided to navigate back to is the previous entry in the original configuration list

• No opportunity to compute values in the wizard

• No opportunity to save part way through

• About 30 minutes to configure (30+ pages)

• 30 seconds to generate

Demo

www.brytek.ca/mwlug

www.brytek.ca/iOS8

OpenNTF: Unplugged

• Teamstudio Unplugged

– http://www.openntf.org/main.nsf/project.xsp?r=project/Unplugged%20XPages%20Mobile%20Controls

– http://unplugged.github.io/unplugged-controls/index.html

– YouTube channel

OpenNTF: Unplugged

OpenNTF: Unplugged

OpenNTF: Bootstrap4XPages

• Bootstrap4XPages

– http://www.bootstrap4xpages.com/

– http://www.openntf.org/main.nsf/project.xsp?r=project/Bootstrap4XPages

– https://github.com/OpenNTF/Bootstrap4XPages

OpenNTF: Bootstrap4XPages

OpenNTF: Bootstrap4XPages

OpenNTF: XControls

• XControls

– Released October 3, 2014 (last Friday!)

– From Matt White and Mark Leusink

– http://www.openntf.org/main.nsf/project.xsp?r=project/XControls

– Based on Bootstrap and Bootcards (http://bootcards.org/)

– Supports desktop browsers (IE10+, FF, Chrome, Safari) as well as Safari for iOS, Chrome for Android and Unplugged on both iOS and Android

– UI automatically adapts to the environment and present the best user experience

– All of this with no developer involved, simply drag and drop the controls into your XPages and you’re done!

– Controls and a Sample Application

OpenNTF: XControls

OpenNTF: XControls

Resources

• MWLUG 2012 Can I Get Mobile With That?

– http://ow.ly/AErhy

• Redpill Mobile – http://redpilldevelopment.com

• John Jardin

– http://johnjardin.ukuvuma.co.za/

• Matt White

– http://mattwhite.me/

• Mark Leusink

– http://linqed.eu/

Resources

• Paul Della-Nebbia

– http://pauldn.com/

• TLCC Mobile Xpages Course (8.5 and 9) – http://www.tlcc.com/mobile-webinar

• IBM Connect 2014 Sessions

– AD503, BP201, BP202 (socialbizug.org)

• Mobilizer – Any other favourite approaches for testing?

Summary

• XPages mobile controls give you an entry to mobile development

• The controls are being enhanced

• There are lots of other options too

• Computer geeks aren’t the only kind of geeks

Questions

Thank You

• www.brytek.ca

• @gacres99

• grahamacres.wordpress.com

Appendix

• Demo screenshots

Use ‘Enabled’

• In this case I allowed the creation of New documents