Wireless Wednesdays: Part 2

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

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

Wireless Wednesdays: Part 2

More Related Content

What's hot (12)

Similar to Wireless Wednesdays: Part 2 (20)

More from Teamstudio (20)

Recently uploaded (20)

Wireless Wednesdays: Part 2