Presented at MWLUG 2014 (Aug/2014), and as a webinar in conjunction with Teamstudio and TLCC (Oct/2014) There are new XPages mobile controls available to us as developers in Notes 9.0.1 and they make it even easier to add a mobile layer to your Notes and Domino applications. This session will present those new controls and how to use them with an existing traditional Domino application. We will show you how to take an app that was built with Notes 6.x and add a mobile interface. In addition to the XPages mobile controls we will show the same application built using the free mobile tools available from OpenNTF. You will leave the session with practical examples of how to take the first step to putting a fresh mobile face on your applications and everything that goes with it.

1. MWLUG 2014
MS103: The XPages Mobile Controls: What's New In Notes 9.0.1
Graham Acres, President, Brytek Systems Inc.

2. 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

3. 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

4. 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

5. Your Options
•Tools you can use – wide variety!
–Dojo Mobile
–jQuery Mobile
–Sencha Touch
–Kendo UI
–Appcelerator
–Bluemix
–XPages
–OpenNTF

6. 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/

7. 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

8. The XPages Mobile Controls
•Mobile Theme
–Application Configuration > Xsp Properties

9. 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

10. 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)

11. The XPages Mobile Controls

12. 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

13. 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

14. Device Bean
•deviceBean.isMobile
•deviceBean.isTablet
•deviceBean.isIphone
•deviceBean.isIpad
•deviceBean.isAndroid
•deviceBean.isBlackberry
•deviceBean.isWindows

15. Interaction
•Orientation
–CSS
–onOrientationChange Event

16. 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

17. 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

18. 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?

19. 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

20. The Candidate App

21. The Candidate Application

22. The Candidate App

23. The Candidate Application
July 1 – July 31, 2012

24. The Candidate Application
July 1 – July 31, 2014
July 1 – July 31, 2012

25. Demo
•Demo

26. XPages Demo

27. XPages Demo

28. XPages Demo

29. 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

30. Demo
www.brytek.ca/mwlug
www.brytek.ca/iOS8

31. 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

32. OpenNTF: Unplugged

33. OpenNTF: Unplugged

34. OpenNTF: Bootstrap4XPages
•Bootstrap4XPages
–http://www.bootstrap4xpages.com/
–http://www.openntf.org/main.nsf/project.xsp?r=project/Bootstrap4XPages
–https://github.com/OpenNTF/Bootstrap4XPages

35. OpenNTF: Bootstrap4XPages

36. OpenNTF: Bootstrap4XPages

37. 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

38. OpenNTF: XControls

39. OpenNTF: XControls

40. 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/

41. 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?

42. 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

43. Questions

44. Thank You
•www.brytek.ca
•@gacres99
•grahamacres.wordpress.com

45. Appendix
•Demo screenshots

53. Use ‘Enabled’

54. •In this case I allowed the creation of New documents