Wireless Wednesdays: Part 3


Published on

Your business users want to access their Notes & Domino applications on their mobile devices. Join our third webinar in a free four-part series and have two experienced experts, Matt White and Rich Sharpe, guide you through what you need to know.

The first webinar on Jan. 8 took a look at the tools and frameworks that can help you. The second webinar on Mar. 5 took a deeper dive into one of the main alternatives: IBM Dojo Mobile Controls. The second half of the series will tackle the other main alternatives: Unplugged Mobile Controls and JQuery Mobile. Matt and Rich will pick out the good, the bad, and the ugly stories from their Domino development experiences.

In Part 3, learn:
-Unplugged Mobile Controls
-Performance considerations
-Handling offline requirements
-Pros and cons vs. alternatives

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Wireless Wednesdays: Part 3

  1. 1.       Getting Started with Mobile Development Part  3:  April  2,  2014  
  2. 2. Introducing   •  Your  mobile  Domino  server:  take  your  Notes  apps  with   •  Tools  for  collaboraFve  compuFng  in  mid-­‐size  and  large   enterprises,  primarily  for  IBM  Notes   •  Easy-­‐to-­‐use  tools  for  developers  and  administrators   •  Unplugged:  easy  mobilizaFon  of  Notes  apps  to  Blackberry,   Android  and  iOS   •  2300+  acFve  customers,  47  countries   •  Offices  in  US,  UK  and  Japan  
  3. 3. •  Your  mobile  Domino  server:  take  your  Notes  apps  with   you!   •  End-­‐users  access  Notes  applicaFons  from  mobile  devices   whether  online  or  offline   •  Leverages  exisFng  skills  and  technology  –  XPages  –  a   replicaFon  model  you  already  know   •  Unplugged  3.0  recently  released   Teamstudio  Unplugged  
  4. 4. •                 ConFnuity  –  Mobile  offline  access  to  BCM    programs   •                 OneView  Approvals  –  Expense  approvals;    anywhere,  anyFme   •                 CustomerView  –  lightweight  CRM    framework  for  field  sales  and  field  service    teams   •  Contacts  –  customer  informaFon  database   •  AcFviFes  –  customer  acFvity  log   •  Media  –  mobile  offline  file  storage  and  access   Unplugged  Template  Apps  
  5. 5. •  Unplugged  Mobile  Controls  User  Group  –  April  meeFng   tomorrow   •  Next  webinar  with  TLCC:  Ask  the  XPages  Experts  –  April  10   •  Next  Wireless  Wednesdays  webinar:  Part  4  –  May  7   •  Promo<on:  Demo  the  Unplugged  Admin  Console  and  be  entered   to  win  a  Galaxy  Tab  3    
  6. 6. Unplugged Controls
  7. 7. Agenda Introduction Installation Development Tips and Tricks 1 2 3 2 4
  8. 8. Wireless Wednesdays  A series of webinars where we discuss XPages mobile development for the enterprise  In January we looked at an introduction to mobile  In February, at Connect, we talked about creating the Unplugged Controls project  In March we looked at Dojo Mobile  This month we’re talking Unplugged Controls  Still to come –  jQuery Mobile 3
  9. 9. Introduction  Unplugged Mobile Controls are created by Teamstudio as a set of open source development tools  To aid development of applications to run on Teamstudio Unplugged  But the controls are free, open source and can run in a mobile browser as well –  You can use the controls even if you don’t use Unplugged 4
  10. 10. Introduction  The idea is to make creating a really good mobile application in XPages a simple process: –  Add custom controls and resources to your database –  Created XPages using the controls –  If it’s a simple app you don’t even need to write any code  There are 18 controls –  Everything from headers / footers, views, forms dialogs –  We’re always adding more 5
  11. 11. Introduction  A few key deliverables with the Controls: –  Have to work well on both phones and tablets –  Have to perform well •  We aim for a sub second response time inside Unplugged –  Have to work inside Unplugged and mobile web browsers •  Unplugged is always the primary target, but if a feature doesn’t work in a browser it is a bug –  Have to be easily re-styled •  More on this later 6
  12. 12. Installation  The controls are released on OpenNTF: –  http://unplugged.openntf.org  Download the latest release –  One template with the controls, and all resources –  Two sample apps that you can use as a guide  Documentation is available as well http://unplugged.github.io/unplugged-controls/index.html 7
  13. 13. Development  Copy across required XPages, Custom Controls, resources from template: 8
  14. 14. Development  Set up your forms and views, we’re using the same app as last month –  Don’t worry you’ll be able to download all this at the end of the session! 9
  15. 15. Create Layout  We need a custom control to handle layout, much like any other XPages application  Add 2 stylesheets to the resources 10
  16. 16. Create Layout  Next we want to drag in a UnpHeader control 11
  17. 17. Create Layout  Drag in a UnpFooter below the UnpHeader 12
  18. 18. Create Layout  Between the Header and Footer, drag in a UnpNavigatorComputed  We need to create a JSON object which describes the menu items –  Lots of options, but in this demo we just want two menu items 13
  19. 19. Create Layout  Finally for the layout control, we want to add an editable area inside a div with an id of content –  (note the id relates to the menu items we set up earlier) –  Save the custom control 14
  20. 20. Create Home Page  Add a new XPage called UnpMain  Drag in our layout custom control  Drag a panel into the editable area in the layout 15
  21. 21. Create Home Page  Drag a UnpScrollableArea into the Panel  And then add a UnpFlatView inside the UnpScrollableArea 16
  22. 22. Test Home Page  Save and preview the XPage 17
  23. 23. Create SecondView  Create an XPage called ByLastName 18
  24. 24. Create FormViewer   Create a new XPage called EmployeeRead   Add a document data binding   As before, add layout structure, but this time add a UnpFormViewer 19
  25. 25. Create FormViewer  Add all of the other fields to display in the same way 20
  26. 26. Create Form Editor  Add a new XPage called Employee  Add the usual structure, with a UnpFormEditor control  Add the fields to the page: –  We use CSS classes to control functionality •  required •  deletable •  autocomplete 21
  27. 27. Create Form Editor 22
  28. 28. Create Form Editor 23  For a date picker use this format  Remember to set the type to get the correct keyboard  We offer “native” style switch controls
  29. 29. Finished App  So we have a (very simple) application that supports viewing and editing data  There’s a whole load more the controls can do, check out the Sampler application for examples  What we’ve done will work in mobile web browsers, but also in Unplugged.  In the Unplugged control panel application, add configuration for our new app 24
  30. 30. Sync with Unplugged devices  Unplugged will offer a native experience  Offline support 25
  31. 31. Restyler  In the download from OpenNTF we offer three themes:  Light Dark iOS7 26
  32. 32. Restyler  But you can also create your own themes  Go to http://restyler.teamstudio.com  Over 100 variables allow you to create pretty much any UI needed  Save & Export will allow you to preview the theme on your device  Or you can download an nsf with the custom theme included 27
  33. 33. Limitations of the Controls  Early OS versions of webkit (mobile browser) –  E.g. used 3rd party libs for scrolling  Some logic not obvious as developed first for Unplugged product  Limitations due to nature of XPages model and AJAX –  E.g. saving photos or saving docs using xp:button requires full page refresh 28
  34. 34. Limitations of Controls  Only one (form) datasource can be updated/saved  Upgrades between major releases (2.x to 3.x etc) not as easy as copying files due to structure changes  Can use with other CSJS mobile libs but not XPages Ext Lib (inc Mobile IBM Dojo Widgets) 29
  35. 35. Unplugged Controls User Group  A virtual user group meets first Thursday of each month  Next event tomorrow: –  http://bit.ly/1dvMWfD –  Deep dive into the UnpComputedNavigator control –  Demo of a Field Service application built using a mix of the controls and jQuery Mobile including camera integration –  Q&A 30
  36. 36. Next Release  Version 3.2 will be release later this month –  JavaScript optimisation –  Fixed several bugs for large tablets on Android –  Improved cross database functionality 31
  37. 37. 32