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

• 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

Teamstudio Unplugged

• 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 Template Apps

• 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

Introduction

Installation

Wizard

Manual Development

Tips and Tricks

1

2

3

1

4

5

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

application-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/unplugged-

controls/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

37

Next Event All things jQuery Mobile

Wednesday 2nd April 10am EDT / 3pm BST

Register here:

http://info.teamstudio.com/wirelesswednesdays-nalaemea-3

38