Beyond the Basics:
Enhance your Enterprise Mobile Application
June	
  4,	
  2014	
  
Introducing	
  
•  Tools	
  for	
  collabora9ve	
  compu9ng	
  in	
  mid-­‐size	
  and	
  large	
  
enterprises,	
  primar...
•  Your	
  mobile	
  Domino	
  server:	
  take	
  your	
  Notes	
  apps	
  with	
  
you!	
  
•  End-­‐users	
  access	
  N...
•  	
  	
  	
  	
  	
  	
  	
  	
  Con9nuity	
  –	
  Mobile	
  offline	
  access	
  to	
  BCM	
  
	
  programs	
  
•  	
  	
...
•  Next	
  webinar	
  with	
  TLCC:	
  Bootstrap4XPages	
  
•  June	
  17	
  
•  Promo1ons:	
  
•  Show	
  us	
  your	
  U...
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 l...
Previous Wireless Wednesdays
 http://www.youtube.com/user/TeamstudioUnplugged
4
Introduction
 Richard Sharpe
–  Independent Software Consultant
–  Over 16 years Industry experience
–  Background includ...
Introduction
 Expand on the frameworks looked at so far
 How can we enhance our mobile apps?
–  JQuery Mobile – Insertin...
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-EPf...
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 ha...
Using Google Maps in jQuery Mobile
 Add required services
–  Example uses directions service:
 Add globals
13
 Add call...
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=“ex...
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 ther...
ShineTime
19
 Easy to use/code:
–  Very basic plug-in
–  Uses thumbnails and full images (xp:repeat control)
–  Minimal c...
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, UnpScrollableAre...
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 Scrol...
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 follow...
Using the Unplugged Controls
29
 UnpPhoto control is an edited version of the UnpAlert
Control (similar to UnpDialog)
 U...
UnpPhoto
30
Demo
31
Using the Unplugged Controls
32
 Further Work:
–  Integrating Camera http://www.youtube.com/watch?
v=dITMq2eDzcE&list=PL9...
Next Release of Unplugged Controls
 Version 3.3 will be released end June
 We’re currently working on the scope but the ...
Thanks For Attending
Stay tuned for next Wireless Wednesday series
34
Upcoming SlideShare
Loading in...5
×

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

352

Published on

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.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
352
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1.       Beyond the Basics: Enhance your Enterprise Mobile Application June  4,  2014  
  2. 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. 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. 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. 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. 6. Beyond the Basics: Enhance your Enterprise Mobile Application June 4th 2014
  7. 7. Agenda Introduction Google Maps Demo/Development Image Gallery 1 2 3 2
  8. 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. 9. Previous Wireless Wednesdays  http://www.youtube.com/user/TeamstudioUnplugged 4
  10. 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. 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. 12. Demo 1 – Google Maps (jQuery Mobile) 7
  13. 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. 14. Import Google Maps API as a Resource 9
  15. 15. Using Google Maps  Add a div with an ID of map-canvas where you want to integrate Google Maps 10
  16. 16. Using Google Maps in jQuery Mobile  Add script to use the Google Map Services and display the map –  Mandatory - Init: 11
  17. 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. 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. 19. Using Google Maps in jQuery Mobile  Add Service Call: 14
  20. 20. Using Google Maps in jQuery Mobile  Show Designer and demo 15
  21. 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. 22. Google MapsV3 API 17 https://developers.google.com/maps/documentation/javascript/reference
  23. 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. 24. ShineTime 19  Easy to use/code: –  Very basic plug-in –  Uses thumbnails and full images (xp:repeat control) –  Minimal css and javascript
  25. 25. Using the Unplugged Controls 20  Our design for field engineers:
  26. 26. Using the Unplugged Controls 21  Our design for field engineers:
  27. 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. 28. Using the Unplugged Controls 23  Set the datasource to a view (or something with the images)
  29. 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. 30. Using the Unplugged Controls 25
  31. 31. Using the Unplugged Controls 26  Add the following CSS in a file and add the file to UnpMain.xsp as a resource
  32. 32. Demo 27
  33. 33. Using the Unplugged Controls 28  After xp:Repeat add unp:unpPhoto control ??????????  After the xp:footer add the following xp:scriptblock
  34. 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. 35. UnpPhoto 30
  36. 36. Demo 31
  37. 37. Using the Unplugged Controls 32  Further Work: –  Integrating Camera http://www.youtube.com/watch? v=dITMq2eDzcE&list=PL9nOJ-QrsuFbC4d2QEUucs_duxwPbELvK
  38. 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. 39. Thanks For Attending Stay tuned for next Wireless Wednesday series 34
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×