Published on March 6, 2014
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 firstname.lastname@example.org 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
Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...
In this presentation we will describe our experience developing with a highly dyna...
Presentation to the LITA Forum 7th November 2014 Albuquerque, NM
Un recorrido por los cambios que nos generará el wearabletech en el futuro
Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...
Your business users want to access their Notes & Domino applications on their mobile devices. Join our second free webinar in a four-part series ...
Lets Play Wednesdays - Let's Play - The Ship: Part 2 ... Lets Play Wednesdays - Let's Play - Amnesia: A Machine For Pigs - Duration: 44:30.
Others Repair Parts; Charger / Data Cable; Tools - Repair Phone; ... LG G Flex 2 , H950 H955 H955A H955P US995 LS996 LCD + Digitizer Assembly. Price: $64.75.
This is "Crisis in the Wilderness - Part 2 (Wednesdays in Lent)" by abidinghope on Vimeo, the home for high quality videos and the people who love them.
Get 2 for 1 cinema tickets every Wednesday at Vue. See the latest movie releases at your local Vue Cinemas for less with our EE Wednesdays cinema tickets.
EE is ending Orange Wednesdays, ... Experts warn wireless flaw could let hackers take over billions of ... Part of the Daily Mail, ...
Connections Part 2. February 24, 2016. With no intent, this week continues last week's theme of connections.
Bring your Windows PC or tablet to life on a large screen. Using the Wireless Display Adapter from Microsoft, you can watch your favorite videos, use your ...