Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application

Beyond the Basics:
Enhance your Enterprise Mobile Application
June
4,
2014

Introducing

•  Tools
for
collabora9ve
compu9ng
in
mid-‐size
and
large

enterprises,
primarily
for
IBM
Notes

•  Easy-‐to-‐use
tools
for
developers
and
administrators

•  Unplugged:
easy
mobiliza9on
of
Notes
apps
to
Blackberry,

Android
and
iOS

•  2300+
ac9ve
customers,
47
countries

•  Oﬃces
in
US,
UK
and
Japan

•  Your
mobile
Domino
server:
take
your
Notes
apps
with

you!

•  End-‐users
access
Notes
applica9ons
from
mobile
devices

whether
online
or
oﬄine

•  Leverages
exis9ng
skills
and
technology
–
XPages
–
a

replica9on
model
you
already
know

•  Unplugged
3.1
recently
released

Teamstudio
Unplugged

• 

Con9nuity
–
Mobile
offline
access
to
BCM

programs

• 

OneView
Approvals
–
Expense
approvals;

anywhere,
any9me

• 

CustomerView
–
lightweight
CRM

framework
for
field
sales
and
field
service

teams

•  Contacts
–
customer
informa9on
database

•  Ac9vi9es
–
customer
ac9vity
log

•  Media
–
mobile
offline
file
storage
and
access

Unplugged
Template
Apps

•  Next
webinar
with
TLCC:
Bootstrap4XPages

•  June
17

•  Promo1ons:

•  Show
us
your
Unplugged
Mobile
Controls
app
by
June
30th

for
a
chance
to
win
a
Bose
music
system

•  Demo
Teamstudio
Con9nuity
by
June
30th
for
a
chance
to

win
an
iPad
mini

Beyond the Basics:
Enhance your Enterprise Mobile Application
June 4th 2014

Agenda
Introduction
Google Maps Demo/Development
Image Gallery
1
2
3
2

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
 In April we looked at Unplugged Controls
 In May we looked jQuery Mobile
3

Previous Wireless Wednesdays
 http://www.youtube.com/user/TeamstudioUnplugged
4

Introduction
 Richard Sharpe
–  Independent Software Consultant
–  Over 16 years Industry experience
–  Background includes:
•  Java/Websphere Projects
•  Notes/Domino Projects
•  Mobile projects on and off since 2000
•  Agile Project Management
•  Speaker at various conferences on the above topics
–  @MobileAppsRule
–  Rich_Sharpe@qualitydev.net / Richard_Sharpe@teamstudio.com
5

Introduction
 Expand on the frameworks looked at so far
 How can we enhance our mobile apps?
–  JQuery Mobile – Inserting Google Maps
–  Unplugged Controls – Creating a media gallery
6

Demo 1 – Google Maps (jQuery
Mobile)
7

Import jQuery and jQuery Mobile
8
 As detailed in May’s Wireless Wednesday Part 4
  http://www.youtube.com/watch?v=e-EPfL4uLS4&list=PL9nOJ-
QrsuFZH_I-t-p0AcJoahlRZsqBF

Import Google Maps API as a
Resource
9

Using Google Maps
 Add a div with an ID of map-canvas where you want to
integrate Google Maps
10

Using Google Maps in jQuery Mobile
 Add script to use the Google Map Services and display the map
–  Mandatory - Init:
11

 Add script to use the Google Map Services and display the map
–  Mandatory – Error handling and trigger:
12

 Add required services
–  Example uses directions service:
 Add globals
13
 Add call to service and add to map

 Add Service Call:
14

 Show Designer and demo
15

Gotchas
 Map may not display unless user performs a refresh
–  Usually occurs if JQM app is paged via ajax
–  Add rel=“external” to the links in the calling page
16
 Map does not display
  Ensure div id=“map-canvas” has css style height property set

Google MapsV3 API
17
https://developers.google.com/maps/documentation/javascript/reference

Demo 2 – Image Gallery (Unplugged Controls)
18
 Why not use a jQuery plug-in?
–  Google ‘jQuery gallery plug-in’ and there are a LOT to
choose from
–  ShineTime is one of my favorites:
•  http://www.jqueryscript.net/gallery/jQuery-Gallery-
Plugin-with-Animated-Shine-Effects-ShineTime.html

ShineTime
19
 Easy to use/code:
–  Very basic plug-in
–  Uses thumbnails and full images (xp:repeat control)
–  Minimal css and javascript

Using the Unplugged Controls
20
 Our design for field engineers:

21
 Our design for field engineers:

22
 Create UnpMain.xsp and set the layout:
–  Drag in UnpHeader, UnpFooter, UnpScrollableArea and
relevant css resources (unplugged.css)
ALL Files

23
 Set the datasource to a view (or something with the images)

24
 Create a div id=“content”
 Drag in a UnpScrollableArea
 Drag a xp:panel onto the ScrollableArea Facet – add
styleClass=“thumbnailContainer”
 Drag in a xp:RepeatControl and bind to theView datasource
–  Add a Collection Name e.g. myImages
 Within the Repeat add a Div with style=“display:inline;”
 Add the code to display the image from the repeated data
elements …

25

26
 Add the following CSS in a file
and add the file to
UnpMain.xsp as a resource

28
 After xp:Repeat add unp:unpPhoto control ??????????
 After the xp:footer add the following xp:scriptblock

29
 UnpPhoto control is an edited version of the UnpAlert
Control (similar to UnpDialog)
 UnpAlert is available on GitHub now – will be released in
OpenNTF in June with 3.3
 A control to show content in a floating area locking out the
background content, with a close button
 Literally a bunch of divs to display an image nicely with a close
button…… (you could just copy the code – next slide –
directly into the xpage)

32
 Further Work:
–  Integrating Camera http://www.youtube.com/watch?
v=dITMq2eDzcE&list=PL9nOJ-QrsuFbC4d2QEUucs_duxwPbELvK

Next Release of Unplugged Controls
 Version 3.3 will be released end June
 We’re currently working on the scope but the list of possible
items at the moment are:
–  New UnpAlert control
–  Improvements to Accordion control
–  Calendar Control
–  Bug fixes
33

Thanks For Attending
Stay tuned for next Wireless Wednesday series
34

Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application

More Related Content

Viewers also liked (20)

Similar to Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application (20)

More from Teamstudio (20)

Recently uploaded (20)

Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application