Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application
-
Upload
teamstudio -
Category
Technology
-
view
336 -
download
0
description
Transcript of Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application
![Page 1: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/1.jpg)
Beyond the Basics: Enhance your Enterprise Mobile Application June 4, 2014
![Page 2: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/2.jpg)
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
![Page 3: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/3.jpg)
• 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
![Page 4: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/4.jpg)
• 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
![Page 5: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/5.jpg)
• 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
![Page 6: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/6.jpg)
Beyond the Basics:
Enhance your Enterprise Mobile Application
June 4th 2014
![Page 7: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/7.jpg)
Agenda
Introduction
Google Maps Demo/Development
Image Gallery
1
2
3
2
![Page 8: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/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 In March we looked at Dojo Mobile In April we looked at Unplugged Controls In May we looked jQuery Mobile
3
![Page 9: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/9.jpg)
Previous Wireless Wednesdays http://www.youtube.com/user/TeamstudioUnplugged
4
![Page 10: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/10.jpg)
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
![Page 11: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/11.jpg)
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
![Page 12: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/12.jpg)
Demo 1 – Google Maps (jQuery Mobile)
7
![Page 13: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/13.jpg)
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
![Page 14: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/14.jpg)
Import Google Maps API as a Resource
9
![Page 15: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/15.jpg)
Using Google Maps
Add a div with an ID of map-canvas where you want to integrate Google Maps
10
![Page 16: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/16.jpg)
Using Google Maps in jQuery Mobile Add script to use the Google Map Services and display the map
– Mandatory - Init:
11
![Page 17: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/17.jpg)
Using Google Maps in jQuery Mobile Add script to use the Google Map Services and display the map
– Mandatory – Error handling and trigger:
12
![Page 18: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/18.jpg)
Using Google Maps in jQuery Mobile Add required services
– Example uses directions service: Add globals
13
Add call to service and add to map
![Page 19: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/19.jpg)
Using Google Maps in jQuery Mobile Add Service Call:
14
![Page 20: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/20.jpg)
Using Google Maps in jQuery Mobile Show Designer and demo
15
![Page 21: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/21.jpg)
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
![Page 22: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/22.jpg)
Google Maps V3 API
17
https://developers.google.com/maps/documentation/javascript/reference
![Page 23: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/23.jpg)
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
![Page 24: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/24.jpg)
ShineTime
19
Easy to use/code: – Very basic plug-in – Uses thumbnails and full images (xp:repeat control) – Minimal css and javascript
![Page 25: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/25.jpg)
Using the Unplugged Controls
20
Our design for field engineers:
![Page 26: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/26.jpg)
Using the Unplugged Controls
21
Our design for field engineers:
![Page 27: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/27.jpg)
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
![Page 28: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/28.jpg)
Using the Unplugged Controls
23
Set the datasource to a view (or something with the images)
![Page 29: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/29.jpg)
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 …
![Page 30: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/30.jpg)
Using the Unplugged Controls
25
![Page 31: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/31.jpg)
Using the Unplugged Controls
26
Add the following CSS in a file and add the file to UnpMain.xsp as a resource
![Page 32: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/32.jpg)
Demo
27
![Page 33: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/33.jpg)
Using the Unplugged Controls
28
After xp:Repeat add unp:unpPhoto control ?????????? After the xp:footer add the following xp:scriptblock
![Page 34: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/34.jpg)
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)
![Page 35: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/35.jpg)
UnpPhoto
30
![Page 36: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/36.jpg)
Demo
31
![Page 37: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/37.jpg)
Using the Unplugged Controls
32
Further Work: – Integrating Camera http://www.youtube.com/watch?
v=dITMq2eDzcE&list=PL9nOJ-QrsuFbC4d2QEUucs_duxwPbELvK
![Page 38: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/38.jpg)
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
![Page 39: Wireless Wednesdays: Beyond the Basics - Enhance your Enterprise Mobile Application](https://reader033.fdocuments.us/reader033/viewer/2022051608/545aecf7b1af9fba5d8b5752/html5/thumbnails/39.jpg)
Thanks For Attending
Stay tuned for next Wireless Wednesday series
34