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/Bootstrap4
XPages
– 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 CarterGraham Acres
Special Offer for TLCC Mobile course - http://www.tlcc.com/mobile-webinar

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

  • 1.
    The XPages MobileControls: What's New In Notes 9.0.1 Tweet about this event Mention us: @Teamstudio @TLCCLTD @gacres99 Oct. 7, 2014
  • 2.
  • 3.
    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
  • 4.
    Teamstudio Unplugged • Yourmobile 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
  • 5.
    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
  • 6.
    • Next WirelessWednesdays 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.
  • 7.
    1 #XPages Your Hosts Today: HowardGreenberg TLCC @TLCCLtd Paul Della-Nebbia TLCC @PaulDN The XPages Mobile Controls: What's New In 9.0.1
  • 8.
    How can TLCCHelp 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!
  • 9.
    3 • Save hundredsand 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
  • 10.
    Want to LearnMore? 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
  • 11.
    Upcoming and RecordedWebinars 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)
  • 12.
    Asking Questions –Q and A at the end 6
  • 13.
    Your Presenter Today: 7 #XPages GrahamAcres Brytek Systems @gacres99
  • 14.
    MWLUG 2014 MS103: TheXPages Mobile Controls: What's New In Notes 9.0.1 Graham Acres, President, Brytek Systems Inc.
  • 15.
    Graham Acres • IBMLotus 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
  • 16.
    Agenda • Mobility in2014, 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
  • 17.
    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
  • 18.
    Your Options • Toolsyou can use – wide variety! – Dojo Mobile – jQuery Mobile – Sencha Touch – Kendo UI – Appcelerator – Bluemix – XPages – OpenNTF
  • 19.
    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/
  • 20.
    The XPages MobileControls • 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
  • 21.
    The XPages MobileControls • Mobile Theme – Application Configuration > Xsp Properties
  • 22.
    The XPages MobileControls • 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
  • 23.
    The XPages MobileControls • 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)
  • 24.
  • 25.
    What’s New inNotes 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
  • 26.
    What’s New inNotes 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
  • 27.
    Device Bean • deviceBean.isMobile •deviceBean.isTablet • deviceBean.isIphone • deviceBean.isIpad • deviceBean.isAndroid • deviceBean.isBlackberry • deviceBean.isWindows
  • 28.
    Interaction • Orientation – CSS –onOrientationChange Event
  • 29.
    Interaction • Touch-Based – onTouchStartEvent – onTouchEnd Event • Multitouch-Based – Viewport Meta Tag – Calculate and Set Optimum Zoom • Width • Height • Initial-scale • Maximum-scale • Minimum-scale • User-scalable
  • 30.
    Extensions • These requirethe 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
  • 31.
    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?
  • 32.
    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
  • 33.
  • 34.
  • 35.
  • 36.
    The Candidate Application July1 – July 31, 2012
  • 37.
    The Candidate Application July1 – July 31, 2014 July 1 – July 31, 2012
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
    Lessons Learned • Limitedchoices 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
  • 43.
  • 44.
    OpenNTF: Unplugged • TeamstudioUnplugged – http://www.openntf.org/main.nsf/project.xsp?r=project/Unplugged %20XPages%20Mobile%20Controls – http://unplugged.github.io/unplugged-controls/index.html – YouTube channel
  • 45.
  • 46.
  • 47.
    OpenNTF: Bootstrap4XPages • Bootstrap4XPages –http://www.bootstrap4xpages.com/ – http://www.openntf.org/main.nsf/project.xsp?r=project/Bootstrap4 XPages – https://github.com/OpenNTF/Bootstrap4XPages
  • 48.
  • 49.
  • 50.
    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
  • 51.
  • 52.
  • 53.
    Resources • MWLUG 2012Can 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/
  • 54.
    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?
  • 55.
    Summary • XPages mobilecontrols 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
  • 56.
  • 57.
    Thank You • www.brytek.ca •@gacres99 • grahamacres.wordpress.com
  • 58.
  • 66.
  • 67.
    • In thiscase I allowed the creation of New documents
  • 75.
  • 76.
    Upcoming Events: TLCC FallSale 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 CarterGraham Acres Special Offer for TLCC Mobile course - http://www.tlcc.com/mobile-webinar