Wireless Wednesdays: Part 2
Upcoming SlideShare
Loading in...5

Wireless Wednesdays: Part 2



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

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



Total Views
Views on SlideShare
Embed Views



1 Embed 2

https://twitter.com 2



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Wireless Wednesdays: Part 2 Wireless Wednesdays: Part 2 Presentation Transcript

  • Getting Started with Mobile Development Part 2: March 5, 2014
  • 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
  • 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
  • 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
  • • 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
  • XPages Dojo Mobile Controls
  • Agenda 1 Introduction 2 Installation 3 Wizard 4 Manual Development 5 Tips and Tricks 1
  • 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
  • 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
  • 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
  • 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
  • New App Wizard  Very simple process  First decide on the prefix for your mobile XPage – Open Xsp Properties, General tab – Default is “m_” 6
  • New App Wizard  Create new XPage “m_home”  Drag a “Single Page Application” onto the XPage 7
  • 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
  • New App Wizard  First we’ll create a home page using the Application Navigator option 9
  • New App Wizard  Next we’ll add two “Document Collections” which will be our views  And then a Document Viewer 10
  • New App Wizard  Note that the number of steps will increase dynamically as you add pages 11
  • New App Wizard  For the home page, we set the Title label and we are also going to add a “New” button 12
  • New App Wizard  For the home page we can add static entries, we want one for each of our views 13
  • New App Wizard  For the First Name view, we want to add navigation to get to the home page 14
  • New App Wizard  We’ll bind onto an existing view “People By First Name” 15
  • 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
  • New App Wizard  Repeat the process for the Last Name view 17
  • New App Wizard  For the Contact Form we need to add buttons to Edit and Save and Delete 18
  • 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
  • New App Wizard  When the wizard finishes, four new custom controls are created automatically 20
  • New App Wizard  When the XPage is saved and compiled we have: 21
  • New App Wizard  If you change the User Agent to iOS then you’ll see this 22
  • 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
  • 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
  • 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
  • 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
  • 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
  • OneUI IDX Theme 28
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 38