Wireless Wednesdays: Part 2
-
Upload
teamstudio -
Category
Technology
-
view
269 -
download
2
description
Transcript of Wireless Wednesdays: Part 2
![Page 1: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/1.jpg)
Getting Started with Mobile Development
Part 2: March 5, 2014
![Page 2: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/2.jpg)
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
![Page 3: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/3.jpg)
• 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
![Page 4: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/4.jpg)
• 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
![Page 5: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/5.jpg)
• 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
![Page 6: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/6.jpg)
XPages Dojo Mobile Controls
![Page 7: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/7.jpg)
Agenda
Introduction
Installation
Wizard
Manual Development
Tips and Tricks
1
2
3
1
4
5
![Page 8: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/8.jpg)
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
![Page 9: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/9.jpg)
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
![Page 10: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/10.jpg)
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
![Page 11: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/11.jpg)
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
![Page 12: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/12.jpg)
New App Wizard
Very simple process
First decide on the prefix for your mobile XPage
– Open Xsp Properties, General tab
– Default is “m_”
6
![Page 13: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/13.jpg)
New App Wizard
Create new XPage “m_home”
Drag a “Single Page Application”
onto the XPage
7
![Page 14: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/14.jpg)
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
![Page 15: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/15.jpg)
New App Wizard
First we’ll create a home page using the Application Navigator
option
9
![Page 16: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/16.jpg)
New App Wizard
Next we’ll add two “Document Collections” which will be
our views
And then a Document Viewer
10
![Page 17: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/17.jpg)
New App Wizard
Note that the number of steps will increase dynamically as
you add pages
11
![Page 18: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/18.jpg)
New App Wizard
For the home page, we set the Title label and we are also
going to add a “New” button
12
![Page 19: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/19.jpg)
New App Wizard
For the home page we can add static entries, we want one for
each of our views
13
![Page 20: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/20.jpg)
New App Wizard
For the First Name view, we want to add navigation to get to
the home page
14
![Page 21: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/21.jpg)
New App Wizard
We’ll bind onto an existing view “People By First Name”
15
![Page 22: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/22.jpg)
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
![Page 23: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/23.jpg)
New App Wizard
Repeat the process for the Last Name view
17
![Page 24: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/24.jpg)
New App Wizard
For the Contact Form we need to add buttons to Edit and
Save and Delete
18
![Page 25: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/25.jpg)
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
![Page 26: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/26.jpg)
New App Wizard
When the wizard finishes, four new custom controls are
created automatically
20
![Page 27: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/27.jpg)
New App Wizard
When the XPage is saved and compiled we have:
21
![Page 28: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/28.jpg)
New App Wizard
If you change the User Agent to iOS then you’ll see this
22
![Page 29: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/29.jpg)
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
![Page 30: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/30.jpg)
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
![Page 31: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/31.jpg)
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
![Page 32: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/32.jpg)
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
![Page 33: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/33.jpg)
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
![Page 34: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/34.jpg)
OneUI IDX Theme
28
![Page 35: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/35.jpg)
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
![Page 36: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/36.jpg)
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
![Page 37: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/37.jpg)
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
![Page 38: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/38.jpg)
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
![Page 39: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/39.jpg)
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
![Page 40: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/40.jpg)
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
![Page 41: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/41.jpg)
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
![Page 42: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/42.jpg)
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
![Page 43: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/43.jpg)
Contact Matt @mattwhite
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
![Page 44: Wireless Wednesdays: Part 2](https://reader034.fdocuments.net/reader034/viewer/2022042521/5496f1ceac79592f2e8b521e/html5/thumbnails/44.jpg)
38