The XPages Mobile Controls: What's New In Notes 9.0.1
-
Upload
graham-acres -
Category
Software
-
view
73 -
download
0
description
Transcript of The XPages Mobile Controls: What's New In Notes 9.0.1
![Page 1: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/1.jpg)
MWLUG 2014
MS103: The XPages Mobile Controls: What's New In Notes 9.0.1
Graham Acres, President, Brytek Systems Inc.
![Page 2: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/2.jpg)
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
![Page 3: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/3.jpg)
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
![Page 4: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/4.jpg)
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
![Page 5: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/5.jpg)
Your Options
• Tools you can use – wide variety!
– Dojo Mobile
– jQuery Mobile
– Sencha Touch
– Kendo UI
– Appcelerator
– Bluemix
– XPages
– OpenNTF
![Page 6: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/6.jpg)
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/
![Page 7: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/7.jpg)
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
![Page 8: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/8.jpg)
The XPages Mobile Controls
• Mobile Theme
– Application Configuration > Xsp Properties
![Page 9: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/9.jpg)
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
![Page 10: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/10.jpg)
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)
![Page 11: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/11.jpg)
The XPages Mobile Controls
![Page 12: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/12.jpg)
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
![Page 13: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/13.jpg)
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
![Page 14: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/14.jpg)
Device Bean
• deviceBean.isMobile
• deviceBean.isTablet
• deviceBean.isIphone
• deviceBean.isIpad
• deviceBean.isAndroid
• deviceBean.isBlackberry
• deviceBean.isWindows
![Page 15: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/15.jpg)
Interaction
• Orientation
– CSS
– onOrientationChange Event
![Page 16: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/16.jpg)
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
![Page 17: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/17.jpg)
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
![Page 18: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/18.jpg)
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?
![Page 19: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/19.jpg)
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
![Page 20: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/20.jpg)
The Candidate App
![Page 21: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/21.jpg)
The Candidate Application
![Page 22: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/22.jpg)
The Candidate App
![Page 23: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/23.jpg)
The Candidate Application
July 1 – July 31, 2012
![Page 24: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/24.jpg)
The Candidate Application
July 1 – July 31, 2014 July 1 – July 31, 2012
![Page 25: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/25.jpg)
Demo
• Demo
![Page 26: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/26.jpg)
XPages Demo
![Page 27: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/27.jpg)
XPages Demo
![Page 28: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/28.jpg)
XPages Demo
![Page 29: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/29.jpg)
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
![Page 30: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/30.jpg)
Demo
www.brytek.ca/mwlug
www.brytek.ca/iOS8
![Page 31: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/31.jpg)
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
![Page 32: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/32.jpg)
OpenNTF: Unplugged
![Page 33: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/33.jpg)
OpenNTF: Unplugged
![Page 34: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/34.jpg)
OpenNTF: Bootstrap4XPages
• Bootstrap4XPages
– http://www.bootstrap4xpages.com/
– http://www.openntf.org/main.nsf/project.xsp?r=project/Bootstrap4XPages
– https://github.com/OpenNTF/Bootstrap4XPages
![Page 35: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/35.jpg)
OpenNTF: Bootstrap4XPages
![Page 36: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/36.jpg)
OpenNTF: Bootstrap4XPages
![Page 37: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/37.jpg)
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
![Page 38: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/38.jpg)
OpenNTF: XControls
![Page 39: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/39.jpg)
OpenNTF: XControls
![Page 40: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/40.jpg)
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/
![Page 41: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/41.jpg)
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?
![Page 42: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/42.jpg)
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
![Page 43: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/43.jpg)
Questions
![Page 44: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/44.jpg)
Thank You
• www.brytek.ca
• @gacres99
• grahamacres.wordpress.com
![Page 45: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/45.jpg)
Appendix
• Demo screenshots
![Page 46: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/46.jpg)
![Page 47: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/47.jpg)
![Page 48: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/48.jpg)
![Page 49: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/49.jpg)
![Page 50: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/50.jpg)
![Page 51: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/51.jpg)
![Page 52: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/52.jpg)
![Page 53: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/53.jpg)
Use ‘Enabled’
![Page 54: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/54.jpg)
• In this case I allowed the creation of New documents
![Page 55: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/55.jpg)
![Page 56: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/56.jpg)
![Page 57: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/57.jpg)
![Page 58: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/58.jpg)
![Page 59: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/59.jpg)
![Page 60: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/60.jpg)
![Page 61: The XPages Mobile Controls: What's New In Notes 9.0.1](https://reader036.fdocuments.net/reader036/viewer/2022081821/54956adbb47959ee538b4586/html5/thumbnails/61.jpg)