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

Tweet about this event Mention us: @Teamstudio @TLCCLTD

@gacres99 Oct. 7, 2014

@Teamstudio teamstudio.com

@TLCCLTD

tlcc.com

Courtney Carter Inbound Marketing Specialist

Teamstudio

Who We Are • Teamstudio’s background is in creating tools for

collaborative computing in mid-size and large enterprises, primarily for IBM Notes

• Easy-to-use tools for developers and administrators • 2300+ active customers, 47 countries • Offices in US, UK and Japan • Entered mobile space in 2010 with Unplugged: easy

mobilization of Notes apps to Blackberry, Android and iOS

Teamstudio Unplugged • Your mobile Domino server: take your IBM Notes

apps with you! • End-users access Notes applications from mobile

devices whether online or offline • Leverages existing skills and technology – XPages –

a replication model you already know • Unplugged 3.1

Unplugged Templates • Continuity – Mobile offline access to

BCM programs

• OneView Approvals – Expense approvals; anywhere, anytime

• CustomerView – lightweight CRM framework for field sales and field service teams

• Contacts – customer information database • Activities – customer activity log • Media – mobile offline file storage and access

• Next Wireless Wednesdays webinar: Oct. 22, 2014 o Introduction to XControls

o With Matt White

• Unplugged Developer Assistance Program promotion: o Sign up to learn about our Unplugged Developer Assistance Program before

Oct. 31, 2014, and be automatically entered to win an iPad or Android tablet.

1

#XPages

Your Hosts Today:

Howard Greenberg TLCC

@TLCCLtd

Paul Della-Nebbia TLCC

@PaulDN

The XPages Mobile Controls: What's New In 9.0.1

How can TLCC Help YOU!

2

• Private classes at your location or virtual

•XPages Development •Support Existing Apps •Administration

• Let us help you become an expert XPages developer!

• Delivered via Notes • XPages • Development • Admin • User

Self-Paced

Courses Mentoring

Instructor-Led

Classes

Application Development

and Consulting

Free Demo

Courses!

3

• Save hundreds and even Thousands of Dollars on the most popular courses and packages: XPages Development Notes and Domino Development Domino Administration

• Now extended through October 24th http://www.tlcc.com/fallsale

Want to Learn More?

4

• TLCC’s Mobile XPages Development Courses Two versions - either 8.5 or 9.0 Uses Mobile Controls

• Take at your own pace An instructor is a click away

• What you will learn: Display Domino views/documents Build navigation between pages HTML 5 Input types Add Google Maps to your application How to test your application plus much more!

Special Price for Attendees 50% off - $299! http://www.tlcc.com/mobile-webinar

Upcoming and Recorded Webinars

5

• November - Access Data from XPages with the Relational Controls

• December - Tips for Building Your First XPages Java Application

www.tlcc.com/xpages-webinar

View Previous Webinars (use url above)

Asking Questions – Q and A at the end

6

Your Presenter Today:

7

#XPages

Graham Acres Brytek Systems

@gacres99

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

Questions????

8

Upcoming Events: TLCC Fall Sale Engage Meeting on October 30 in Brussels DNUG: November 11-12 in Leipzig, Germany Social Connections, November 13 in Stockholm DanNotes, November 19 in Denmark ConnectED, Orlando in January

Question and Answer Time!

9

Teamstudio Questions? contactus@teamstudio.com 877-228-6178

TLCC Questions?

howardg@tlcc.com paul@tlcc.com 888-241-8522 or 561-953-0095

Howard Greenberg

#gacres99

#XPages

@TLCCLtd

@Teamstudio

@PaulDN

Paul Della-Nebbia Courtney Carter Graham Acres

Special Offer for TLCC Mobile course - http://www.tlcc.com/mobile-webinar