Getting Started with Mobile Development Part  3:  April  2,  2014  

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  

•  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  

•                 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  

•  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  

 

Unplugged Controls

Agenda

Introduction

Installation

Development

Tips and Tricks

1

2

3

2

4

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

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

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

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

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

Development

 Copy across required XPages, Custom Controls, resources from template:

8

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

Create Layout

 We need a custom control to handle layout, much like any other XPages application

 Add 2 stylesheets to the resources

10

Create Layout

 Next we want to drag in a UnpHeader control

11

Create Layout

 Drag in a UnpFooter below the UnpHeader

12

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

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

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

Create Home Page

 Drag a UnpScrollableArea into the Panel  And then add a UnpFlatView inside the UnpScrollableArea

16

Test Home Page

  Save and preview the XPage

17

Create Second View

 Create an XPage called ByLastName

18

Create Form Viewer

  Create a new XPage called EmployeeRead   Add a document data binding   As before, add layout structure, but this time add a UnpFormViewer

19

Create Form Viewer

 Add all of the other fields to display in the same way

20

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

Create Form Editor

22

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

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

Sync with Unplugged devices

 Unplugged will offer a native experience  Offline support

25

Restyler

  In the download from OpenNTF we offer three themes:  Light Dark iOS7

26

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

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

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

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

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

32