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

  • 243 views
Uploaded 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 …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
243
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
4
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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