Creating a mobile application framework with XPages

If you create a lot of mobile web applications, you may notice other frameworks such as JQuery Mobile and the XPages Mobile Controls just don't do exactly what you need. So we created our own, specifically designed for XPages. In this session you'll learn about the open source framework that's been have created. We'll show how it allows you to quickly drag and drop standard custom controls into an XPage to create a mobile application. We'll also talk about the process of creating an open source project and future plans.

Transcript

1. © 2014 IBM Corporation BP201: Creating a Mobile Application Framework with XPages Richard Sharpe, Teamstudio Matt White, London Developer Co-op
2. Agenda §  Introduction §  The what and the why §  How to Get Started §  Demo Time! §  Restyler §  Future Roadmap §  Questions 2
3. Introduction If you create a lot of mobile web applications, you may notice other frameworks such as JQuery Mobile and the XPages Mobile Controls just don't do exactly what you need. So we created our own, specifically designed for XPages. In this session you'll learn about the open source framework that's been have created. We'll show how it allows you to quickly drag and drop standard custom controls into an XPage to create a mobile application. We'll also talk about the process of creating an open source project and future plans. 3
4. Products we’re using §  IBM Domino® Server 9.0.1 – (but should equally work on 8.5.3) §  IBM Notes® 9.0.1 §  IBM Domino Designer® 9.0.1 §  Teamstudio® Unplugged® 3.0 4
5. Who are we – Richard Sharpe 5 §  Developer/Manager since 1998 – Originally Java, More recently focused on mobile web development using XPages – Worked on Mobile Apps/Architecture on and off since 2000 – Worked on implementing Build Systems and Quality Gates §  Worked at IBM in late 1990’s, Aspective (IBM Business Partner) and Teamstudio (10 years) §  Co-founder of Phoenix Scrum User Group (Agile)
6. Who are we – Matt White §  Domino web developer since 1996 – XPages developer since 2008 – More recently focused on mobile web development using XPages §  Founding Consultant with London Developer Co-op – A small group of experienced enterprise software developers including: •  Mark Myers •  Julian Woodward •  Ben Poole 6
7. What are the Controls? §  A suite of 18 Custom Controls which can be assembled quickly to create a mobile application that will run on phones and tablets 7 Accordion A-Z Picker Debug Toolbar Dialog Flat View Footer Form Editor Form Viewer Header Horizontal View Navigator Computed Navigator Scrollable Area Search Results Swipe View Tabbed Footer Typography Read Workspace
8. What are the Controls? §  Designed to work for mobile devices – Primarily targeted at Teamstudio Unplugged – but also designed to work as mobile web applications – not designed to be used for desktop browsers §  Will handle different screen sizes – so you can run your application on phones or tablets and it will work equally well 8
9. What are the controls? §  We supply three default themes – Dark – Light – iOS 7 §  You can create your own either manually or using our Restyler website 9
10. Why did we build them? §  Frustrated with performance of other frameworks (e.g. jQuery Mobile) running inside UIWebView §  Frustrated at the design restrictions with other frameworks (Dojo Mobile Controls) – Easy to create simple apps but very difficult to create full featured apps – Dojo Mobile Controls are tightly integrated •  Although Unplugged Controls do have a small level of coupling, not nearly the same – Bootstrap (even 3.0) is really primarily a desktop framework that degrades gracefully 10
11. Why did we build them? §  Frustrated with the level of difficulty of combining external frameworks with XPages and Domino Designer §  Designed to be modular widgets – If you just want to use the header, for example, then you can §  We wanted a good set of base controls than can then be easily modified for different client requirements 11
12. How to get started §  You can download the latest release from OpenNTF – http://unplugged.openntf.org – Contains two example databases •  Unplugged Controls is our dev and test application •  Unplugged Sampler is a more polished application -  great for demos -  is a more “real world” implementation of an Unplugged Controls app §  There is also a Github project – https://github.com/unplugged/unplugged-controls §  Documentation can be found on Github as well: – http://unplugged.github.io/unplugged-controls/index.html §  And if you want to create your own theme the Restyler is available at: – http://restyler.teamstudio.com 12
13. Demo Time §  For our most basic demo we will… – Add header – Add footer – Add simple navigator – Add View – Add a form viewer and editor – Test on desktop then on a mobile device 13
14. Demo Time §  Add the required resources to a new database: – Stylesheets – Files – Images – Script Libraries – Custom Controls – XPages §  In the session download, you can take a copy of the “start.nsf” database to get going quicker 14
15. Demo Time §  Create “layout” custom control §  Import resources: – unplugged.css – unp/font-awesome.css §  Drag in unpHeader custom control: 15
16. Demo Time §  Drag in a unpNavigatorComputed control 16
17. Demo Time §  Add a div called “content” §  Inside that drag in an editable area control §  Finally add a Footer Control §  Save the custom control §  Create a new XPage called UnpMain 17
18. Demo Time §  Drag in the layout custom control §  Inside the editable area, add a UnpScrollableArea §  And inside that add a UnpFlatView control 18
19. Demo Time §  Save the XPage and Test 19
20. Demo Time §  Now we’ll add a second view, this time categorized – Known as UnpAccordion in our world §  We add a second menu item in the layout custom control §  And create a new XPage “PeopleByCountry” 20
21. Demo Time §  Save and Test 21
22. Demo Time §  Next we need to add a form viewer to read data §  The new XPage will be called “Person” – Enable buttons – Set edit mode page to “PersonEdit” – Populate computed fields 22
23. Demo Time §  We need to create a second page to display the page in edit mode §  Very similar to read mode, but we need to handle data slightly differently – Dates for example §  We can also control the functionality of a field with Classes – required – deletable – etc. §  Don’t forget to set the field type to get the correct keyboard 23
24. Demo Time 24
25. Education Resource - Controls Documentation §  http://unplugged.github.io/unplugged-controls/index.html 25
26. Education Resource - Video Tutorials §  http://unplugged.github.io/unplugged-controls/index.html §  Using The Free Unplugged Mobile Controls Series: §  Part 1 – Views and Forms – http://www.youtube.com/watch?v=XHtiOO92A2g §  Part 2 – Editing Data and Creating Docs – http://www.youtube.com/watch?v=wLcfEpdelOM §  Part 3 – Displaying Images and Camera Integration – http://www.youtube.com/watch?v=dITMq2eDzcE 26
27. The Restyler Website §  The CSS which we have created is quite complex – Actually generated using LESS •  http://lesscss.org §  If you don’t want to get your hands dirty in the source code then you can use the Restyler website to create your own theme 27
28. The Restyler Website §  Over 100 variables allow you to control pretty much everything you will need to create a new theme §  Live preview on the website shows the effect of your changes on the Controls §  Our three base themes were created using these same variables – If like me, you’re graphically challenged then you may need to speak to a friendly designer! §  Once you’ve created your theme you have two choices – Sync your device with our server to test your theme for real – Download your theme to integrate with your own custom applications 28
29. Demo Time §  Perform demo of the Restyler Website 29
30. Running an Open Source project §  Deploying to OpenNTF – Oh, the licenses •  Make sure everything you use is available under the correct license, generally MIT or Apache •  The OpenNTF lawyers are there to help you •  Worth getting right so that the largest audience possible is allowed to use your code §  Management via Github – Issue tracker – It’s great to get feedback from people on bugs and new feature requests – People can also branch the code, and even feed it back into the main project – Great place for your documentation as well •  You do have documentation right? §  Regular updates – It’s important that the project is seen to be active 30
31. What’s happening in the future? §  We plan to continue adding functionality to the Controls Library – You can see the list of upcoming items in the Github issues: http://bit.ly/19A9M1J §  More sample applications – Currently we have Teamroom, Document Library and Journal §  We’re always looking for feedback – Either on OpenNTF – Or Github §  Monthly webcasts talking about the Controls – Wireless Wednesdays •  Next event on 5th March at 3pm EST 31
32. §  BP201 - Creating a Mobile Application Framework with Xpages §  Rich Sharpe – @mobileappsrule | richard_sharpe@teamstudio.com §  Matt White – @mattwhite | matt@londc.com §  Session download: http://mattwhite.me/presentations §  Access Connect Online to complete your session surveys using any: – Web or mobile browser – Connect Online kiosk onsite 32
33. 33 Acknowledgements and Disclaimers © Copyright IBM Corporation 2014. All rights reserved. §  U.S. Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp. §  IBM, the IBM logo, ibm.com and Domino are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries, or both. If these and other IBM trademarked terms are marked on their first occurrence in this information with a trademark symbol (® or ™), these symbols indicate U.S. registered or common law trademarks owned by IBM at the time this information was published. Such trademarks may also be registered or common law trademarks in other countries. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml Teamstudio Unplugged Other company, product, or service names may be trademarks or service marks of others. Availability. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS-IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.