The XPages Mobile Controls: What's New In Notes 9.0.1
-
Upload
graham-acres -
Category
Software
-
view
72 -
download
0
description
Transcript of The XPages Mobile Controls: What's New In Notes 9.0.1
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