wireless wednesdays: beyond the basics - enhance your enterprise mobile application
DESCRIPTION
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.TRANSCRIPT
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
• Offices 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 offline
• 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 – [email protected] / [email protected]
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
Using Google Maps in jQuery Mobile Add script to use the Google Map Services and display the map
– Mandatory – Error handling and trigger:
12
Using Google Maps in jQuery Mobile Add required services
– Example uses directions service: Add globals
13
Add call to service and add to map
Using Google Maps in jQuery Mobile Add Service Call:
14
Using Google Maps in jQuery Mobile 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 Maps V3 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:
Using the Unplugged Controls
21
Our design for field engineers:
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
Using the Unplugged Controls
23
Set the datasource to a view (or something with the images)
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 the View 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 …
Using the Unplugged Controls
25
Using the Unplugged Controls
26
Add the following CSS in a file and add the file to UnpMain.xsp as a resource
Demo
27
Using the Unplugged Controls
28
After xp:Repeat add unp:unpPhoto control ?????????? After the xp:footer add the following xp:scriptblock
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)
UnpPhoto
30
Demo
31
Using the Unplugged Controls
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