Wireless Wednesdays: Part 2


Published on

Your business users want to access their Notes & Domino applications on their mobile devices. Join our second free webinar in a 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 will take 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 2, learn:
-IBM Dojo Mobile Controls
-Performance considerations
-Pros and cons vs. alternatives

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Wireless Wednesdays: Part 2

  1. 1. Getting Started with Mobile Development Part 2: March 5, 2014
  2. 2. Introducing • Your mobile Domino server: take your Notes apps with • Tools for collaborative computing in mid-size and large enterprises, primarily for IBM Notes • Easy-to-use tools for developers and administrators • Unplugged: easy mobilization of Notes apps to Blackberry, Android and iOS • 2300+ active customers, 47 countries • Offices in US, UK and Japan
  3. 3. Teamstudio Unplugged • Your mobile Domino server: take your 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.0 recently released
  4. 4. Unplugged Template Apps • 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
  5. 5. • Unplugged Mobile Controls User Group - kickoff meeting tomorrow • Next webinar with TLCC: Application Layout Control - March 13 • Next Wireless Wednesdays webinar: Part 3 - April 2 • Promotion: Demo our end-to-end source code control and version management tools, and be entered to win an XBOX gaming system
  6. 6. XPages Dojo Mobile Controls
  7. 7. Agenda 1 Introduction 2 Installation 3 Wizard 4 Manual Development 5 Tips and Tricks 1
  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  This month we’re talking Dojo Mobile  Still to come – jQuery Mobile – Unplugged Controls 2
  9. 9. Introductions  Dojo Mobile Controls are specifically designed to work with XPages  A series of Controls in Domino Designer which you add to a single XPage – Single Page Application model  Depending on your version you may or may not want to do some extra configuration – For the best experience install the most recent Extension Library 3
  10. 10. Installation  For this session we’ll work with Domino 9.0.1 – We also want Extension Library • v901v00_04. 20140226-1506 (released this week) • V03 (January) previous release works similarly – http://extlib.openntf.org  Easiest install is via Update Site – Remember to install on both the server and Domino Designer – http://ibm.co/1b4GFGQ 4
  11. 11. New App Wizard  A new feature in the Extension Library is a wizard which creates a simple Single Page Application for you  It’s important to note that the wizard is just a helper, it does nothing that you cannot do manually yourself – After it’s run you can still edit the source code  Also important to note that the wizard runs once, so you need to have worked out your structure before you start – You’ll need views, forms already configured 5
  12. 12. New App Wizard  Very simple process  First decide on the prefix for your mobile XPage – Open Xsp Properties, General tab – Default is “m_” 6
  13. 13. New App Wizard  Create new XPage “m_home”  Drag a “Single Page Application” onto the XPage 7
  14. 14. New App Wizard  A wizard dialog will appear, this is where we build the application  Make sure to leave the option to create Custom Controls checked  Click the New button to add pages 8
  15. 15. New App Wizard  First we’ll create a home page using the Application Navigator option 9
  16. 16. New App Wizard  Next we’ll add two “Document Collections” which will be our views  And then a Document Viewer 10
  17. 17. New App Wizard  Note that the number of steps will increase dynamically as you add pages 11
  18. 18. New App Wizard  For the home page, we set the Title label and we are also going to add a “New” button 12
  19. 19. New App Wizard  For the home page we can add static entries, we want one for each of our views 13
  20. 20. New App Wizard  For the First Name view, we want to add navigation to get to the home page 14
  21. 21. New App Wizard  We’ll bind onto an existing view “People By First Name” 15
  22. 22. New App Wizard  Now we need to configure the view: – what column to display – the page to open to display documents – whether to enable infinite scrolling 16
  23. 23. New App Wizard  Repeat the process for the Last Name view 17
  24. 24. New App Wizard  For the Contact Form we need to add buttons to Edit and Save and Delete 18
  25. 25. New App Wizard  Configure the list of fields to display and their order  The wizard only allows for text, rich text and date/time, this can be changed later 19
  26. 26. New App Wizard  When the wizard finishes, four new custom controls are created automatically 20
  27. 27. New App Wizard  When the XPage is saved and compiled we have: 21
  28. 28. New App Wizard  If you change the User Agent to iOS then you’ll see this 22
  29. 29. Testing different browsers  Based on the user agent of the browser you will see either an Android or iOS skin  You can override this from the browser using plugins, for example in Chrome I use the “User Agent Switcher” plugin – http://bit.ly/1k3HPSH  Alternatively you can force the switch in Designer 23
  30. 30. Enable New Button  The buttons created by the wizard are placeholders, we need to manually code them  Open the cchome custom control and locate the “New” button  Add a Simple Action to the onClick 24
  31. 31. If you’re earlier than 9.0.1  All the wizard does is help you create Custom Controls.  In fact they are not complex  These are the home XPage and the ccfirstname Custom Control: 25
  32. 32. OneUI IDX Theme  IBM have created their own mobile theme which you can enable in Domino Designer  First you have to create a theme:  The key is the extends property being set to “oneui_idx_v1.3” 26
  33. 33. OneUI IDX Theme  In the XSP properties file use the new theme for the mobile theme  Or you can override the default for just iOS or just Android – This might be useful for iOS to move away from the iOS6 default 27
  34. 34. OneUI IDX Theme 28
  35. 35. OneUI IDX Theme  I had some trouble previewing the IDX theme in my desktop browser – Symptom was no CSS files loading at all  Solution was to manually modify the User Agent using “User Agent Switcher” in Chrome: – http://bit.ly/1k3HPSH 29
  36. 36. Different Field Types  If you want to set the type of fields (e.g. tel, email etc) to get the correct keyboard, beware, you will need to work on the app styling  Likewise, be very careful with the date field type, you’ll get the native picker, but you need to format the field correctly 30
  37. 37. Navigation Issues  You may notice from the sample application that when navigating we always end up at the “home” page  If you want to record a breadcrumb trail of which view the user was in before opening a document, that’s up to you  Not a massive issue in a simple application – But can become a serious concern in a larger multi level application 31
  38. 38. Teamstudio Unplugged Integration  Due to the way the Unplugged application works, you will not be able to use the Mobile controls as provided by the Extension Library  You can absolutely use Dojo in Unplugged, but for Dojo Mobile you would need to manually code the HTML / JS / CSS – Realistically this is a lot of work so it may be more interesting to look at either the Unplugged Mobile Controls or jQuery Mobile 32
  39. 39. Conclusion  The Dojo Mobile Controls are great if… – You want a quick mobile web solution • Especially true for read only  The Dojo Mobile Controls are under continuous development so they will continue to improve – The difference between 2011 and today is huge  You may encounter issues if… – You want offline support – Your application has a complex structure – You need a more responsive design for phones and tablets 33
  40. 40. Resources  Extension Library – http://extlib.openntf.org  AD503 XPages Mobile Development in IBM Domino 9.0.1 and Beyond – http://www.slideshare.net/slideshow/embed_code/3084876 3  Patrick Kwinten Blog Post – http://quintessens.wordpress.com/2014/02/17/single-pageapplication-tutorial/  Sample code for this session: – http://teamstudio.s3.amazonaws.com/DojoMobileDemo.nsf. zip 34
  41. 41. Unplugged Controls  Our own mobile framework can be downloaded for free – http://unplugged.openntf.org – Supports mobile web and Unplugged native apps – http://restyler.teamstudio.com – http://bit.ly/UnpDoco 35
  42. 42. Unplugged Controls User Group  The first virtual Unplugged Controls User group meeting will happen on 6th March at 10am EST / 3pm GMT – http://unplugged.github.io/unpluggedcontrols/310/UserGroup.html  Brief introduction into resources for using the Unplugged Controls (Videos, support etc) – 5-10 mins  Deep Dive – The UnpFormEditor Control – 15 to 20 mins  Real Life Case Study – Athabasca University, a Study Guide application (reference manual) for Students. – 15-20 mins  Q & A – up to 15 mins 36
  43. 43. Contact Matt  @mattwhite  matt@londc.com  http://mattwhite.me Next Event  All things jQuery Mobile  Wednesday 2nd April 10am EDT / 3pm BST  Register here: http://info.teamstudio.com/wirelesswednesdays-nalaemea-3 37
  44. 44. 38