Your business users want to access their Notes & Domino applications on their mobile devices. Join our third webinar in a free 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 on Mar. 5 took 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 3, learn: -Unplugged Mobile Controls -Performance considerations -Handling offline requirements -Pros and cons vs. alternatives

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

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

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

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

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

6. Unplugged Controls

7. Agenda
Introduction
Installation
Development
Tips and Tricks
1
2
3
2
4

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

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

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

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

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

13. Development
 Copy across required XPages, Custom Controls, resources
from template:
8

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

15. Create Layout
 We need a custom control to handle layout, much like any
other XPages application
 Add 2 stylesheets to the resources
10

16. Create Layout
 Next we want to drag in a UnpHeader control
11

17. Create Layout
 Drag in a UnpFooter below the UnpHeader
12

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

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

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

21. Create Home Page
 Drag a UnpScrollableArea into the Panel
 And then add a UnpFlatView inside the UnpScrollableArea
16

22. Test Home Page
 Save and preview the XPage
17

23. Create SecondView
 Create an XPage called ByLastName
18

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

25. Create FormViewer
 Add all of the other fields to display in the same way
20

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

27. Create Form Editor
22

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

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

30. Sync with Unplugged devices
 Unplugged will offer a native experience
 Offline support
25

31. Restyler
 In the download from OpenNTF we offer three themes:
 Light Dark iOS7
26

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

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

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

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

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

37. 32