This document discusses mobile development using IBM Notes and Domino. It introduces the Teamstudio Unplugged product for mobilizing Notes applications, and covers tools like the Dojo Mobile controls in the Extension Library. The webinar agenda focuses on installing and using the Dojo Mobile controls through a wizard, manual development, and tips. It also discusses alternative mobile frameworks like Unplugged Controls and jQuery Mobile.

1. Getting Started with Mobile Development
Part 2: March 5, 2014

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

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

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

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

6. XPages Dojo Mobile Controls

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

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
 This month we’re talking Dojo Mobile
 Still to come
– jQuery Mobile
– Unplugged Controls
2

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

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

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

12. New App Wizard
 Very simple process
 First decide on the prefix for your mobile XPage
– Open Xsp Properties, General tab
– Default is “m_”
6

13. New App Wizard
 Create new XPage “m_home”
 Drag a “Single Page Application”
onto the XPage
7

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

15. New App Wizard
 First we’ll create a home page using the Application Navigator
option
9

16. New App Wizard
 Next we’ll add two “Document Collections” which will be
our views
 And then a Document Viewer
10

17. New App Wizard
 Note that the number of steps will increase dynamically as
you add pages
11

18. New App Wizard
 For the home page, we set the Title label and we are also
going to add a “New” button
12

19. New App Wizard
 For the home page we can add static entries, we want one for
each of our views
13

20. New App Wizard
 For the First Name view, we want to add navigation to get to
the home page
14

21. New App Wizard
 We’ll bind onto an existing view “People By First Name”
15

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

23. New App Wizard
 Repeat the process for the Last Name view
17

24. New App Wizard
 For the Contact Form we need to add buttons to Edit and
Save and Delete
18

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

26. New App Wizard
 When the wizard finishes, four new custom controls are
created automatically
20

27. New App Wizard
 When the XPage is saved and compiled we have:
21

28. New App Wizard
 If you change the User Agent to iOS then you’ll see this
22

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

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

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

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

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

34. OneUI IDX Theme
28

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

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

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

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

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

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

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

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

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

44. 38