Wireless Wednesdays: Part 2

50 %
50 %
Information about Wireless Wednesdays: Part 2

Published on March 6, 2014

Author: Teamstudio

Source: slideshare.net


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

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


Add a comment

Related presentations

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

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

[Webinar] Wireless Wednesdays: Part 2 - YouTube

Your business users want to access their Notes & Domino applications on their mobile devices. Join our second free webinar in a four-part series ...
Read more

Lets Play Wednesdays - Let's Play - The Ship: Part 2 - YouTube

Lets Play Wednesdays - Let's Play - The Ship: Part 2 ... Lets Play Wednesdays - Let's Play - Amnesia: A Machine For Pigs - Duration: 44:30.
Read more

Wireless Parts Inc.

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

Crisis in the Wilderness - Part 2 (Wednesdays in Lent) on ...

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

EE Wednesdays 2 for 1 Cinema Tickets at Vue Cinemas

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

EE is ending Orange Wednesday's 2-for-1 cinema ticket perk ...

EE is ending Orange Wednesdays, ... Experts warn wireless flaw could let hackers take over billions of ... Part of the Daily Mail, ...
Read more

Connections Part 2 — whimsicalstitch.com

Connections Part 2. February 24, 2016. With no intent, this week continues last week's theme of connections.
Read more

Microsoft Wireless Display Adapter | Microsoft Accessories

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