wireless wednesdays: beyond the basics - enhance your enterprise mobile application

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 –  Rich_Sharpe@qualitydev.net / Richard_Sharpe@teamstudio.com

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