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? [email protected] 877-228-6178
TLCC Questions?
[email protected] [email protected] 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
Recommended
