Over the last several months we've demonstrated building the same simple application using different libraries (jQuery Mobile, IBM Dojo, Unplugged Controls) and compared some pros and cons. To round off this series, an experienced expert, Rich Sharpe, will do some demos and put this stuff into practice. Learn how to enhance your mobile enterprise applications by: -Integrating GoogleMaps into a jQueryMobile application -Adding a mobile image gallery using the Unplugged Controls -And more.

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

2. 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
• Offices
in
US,
UK
and
Japan

3. • Your
mobile
Domino
server:
take
your
Notes
apps
with
you!
• End-­‐users
access
Notes
applica9ons
from
mobile
devices
whether
online
or
offline
• Leverages
exis9ng
skills
and
technology
–
XPages
–
a
replica9on
model
you
already
know
• Unplugged
3.1
recently
released
Teamstudio
Unplugged

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

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

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

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

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

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

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

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

12. Demo 1 – Google Maps (jQuery
Mobile)
7

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

14. Import Google Maps API as a
Resource
9

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

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

17. Using Google Maps in jQuery Mobile
 Add script to use the Google Map Services and display the map
– Mandatory – Error handling and trigger:
12

18. Using Google Maps in jQuery Mobile
 Add required services
– Example uses directions service:
 Add globals
13
 Add call to service and add to map

19. Using Google Maps in jQuery Mobile
 Add Service Call:
14

20. Using Google Maps in jQuery Mobile
 Show Designer and demo
15

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

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

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

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

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

26. Using the Unplugged Controls
21
 Our design for field engineers:

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

28. Using the Unplugged Controls
23
 Set the datasource to a view (or something with the images)

29. Using the Unplugged Controls
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 …

30. Using the Unplugged Controls
25

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

32. Demo
27

33. Using the Unplugged Controls
28
 After xp:Repeat add unp:unpPhoto control ??????????
 After the xp:footer add the following xp:scriptblock

34. Using the Unplugged Controls
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)

35. UnpPhoto
30

36. Demo
31

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

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

39. Thanks For Attending
Stay tuned for next Wireless Wednesday series
34