Wireless Wednesdays: Part 4

Getting Started with Mobile Development Part  4:  May  7,  2014  

Introducing  •  Tools  for  collabora<ve  compu<ng  in  mid-­‐size  and  large  

enterprises,  primarily  for  IBM  Notes  

•  Easy-­‐to-­‐use  tools  for  developers  and  administrators  

•  Unplugged:  easy  mobiliza<on  of  Notes  apps  to  Blackberry,  Android  and  iOS  

•  2300+  ac<ve  customers,  47  countries  

•  Offices  in  US,  UK  and  Japan  

•  Your  mobile  Domino  server:  take  your  Notes  apps  with  you!  

•  End-­‐users  access  Notes  applica<ons  from  mobile  devices  whether  online  or  offline  

•  Leverages  exis<ng  skills  and  technology  –  XPages  –  a  replica<on  model  you  already  know  

•  Unplugged  3.1  recently  released  

Teamstudio  Unplugged  

•                 Con<nuity  –  Mobile  offline  access  to  BCM    programs  

•                 OneView  Approvals  –  Expense  approvals;    anywhere,  any<me  

•                 CustomerView  –  lightweight  CRM    framework  for  field  sales  and  field  service    teams  

•  Contacts  –  customer  informa<on  database  •  Ac<vi<es  –  customer  ac<vity  log  •  Media  –  mobile  offline  file  storage  and  access  

Unplugged  Template  Apps  

•  Next  webinar  with  TLCC:  Dante’s  Nine  Circles  of  XPages  Heaven  

•  May  13  

•  Next  Wireless  Wednesdays  webinar:  

•  June  4  

•  Promo6on:  Get  our  IBM  Notes  Upgrade  Pack  by  May  31  and  

receive  5  free  Unplugged  licenses  

jQuery Mobile

Agenda

Introduction

Installation

Development

Tips and Tricks

1

2

3

2

4

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  This month we’re talking jQuery Mobile

3

Introduction

  jQuery Mobile (JQM) is an extension to jQuery, the most popular JavaScript framework available today

 Huge number of demos and options to get you going, but for simple applications you can have something setup very quickly –  With a few caveats for XPages

 Custom theming is available by default so you can style your UI without having to touch CSS directly

 Historically quite slow performance wise, but this is getting better

4

Installation

 Here be a few dragons!  Current version of JQM is 1.4.2

–  Our demo today is based on 1.3  Even with 1.3 we have to do some work to get JQM to co-

exist with Dojo –  We have to either change the JQM code or carefully

configure our XPage to work with Dojo   So you’ll need to download version 1.3.2 of jQuery Mobile

and version 1.9.1 of jQuery from their respective websites

5

Installation (option 1)

 You will need to edit the first few lines of jquery.mobile-1.3.2.js from this:

 To this:

6

Installation (option 1)

 Now we can copy the jQuery and JQM files into our application

 The images need to be put into the pseudo directory “images/”

7

Installation (option 1)

 Firstly we’ll add the required resources to our layout custom control

 The order is important, so jQuery first, then JQM  Finally it’s best practice to set the viewport scaling

instructions

8

Installation (Option 2)

<xp:this.properties> <xp:parameter name="xsp.resources.aggregate" value="true" /> </xp:this.properties> <xp:this.resources> <xp:styleSheet href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <xp:headTag tagName="script"> <xp:this.attributes> <xp:parameter name="type" value="text/javascript" /> <xp:parameter name="src" value="http://code.jquery.com/jquery-1.9.1.min.js" /> </xp:this.attributes> </xp:headTag>

  In our layout custom control we could force jQuery and JQM to load before Dojo

Installation (Option 2) <xp:headTag tagName="script"> <xp:this.attributes> <xp:parameter name="type" value="text/javascript" /> <xp:parameter name="src" value="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js" /> </xp:this.attributes> </xp:headTag>

 From blog@hasselba.ch  More details at: http://hasselba.ch/blog/?p=1216  As with option 1, we’d need to set the viewport

Create layout custom control

 Next we create the header and footer bars

  JQM uses attributes in the HTML tags to define how an element will be displayed. –  In this case this div is being marked as the header that will

be fixed to the top of the screen –  Inside the header we have a title set via a custom property –  And a “New Contact” button that will show an icon and be

right aligned 11

Create layout custom control

 The footer bar will have a navbar in it to allow us to switch views

 Note also the data-ajax attributes on the links. False means when clicked the entire page will be loaded

12

Create layout custom control

 Now we add the rest of the structure of the page

13

Create Views

 We want two views, to show contacts by first name and last name

  So we’ll create a custom control to display the data, called personview

14

Create Views

 We need to add our own view navigation

15

Create Views

 Now we can use that custom control in the two view XPages

 This is our home XPage –  For the lastname XPage, we just need to change the name

of the view and the title

16

Test Views

 We can now test our views

17

Create Contact Form

 Now we need to display our contact form for when the user taps a view entry

 First we’ll add a normal document data binding

 And then the layout custom control with a panel inside

18

Create Contact Form

  Inside the panel, we can start adding fields

 A plain text field is very simple, the only difference from a normal field is the addition of the data-clear-btn attribute

 We can change the keyboard type as normal for email, tel etc

19

Create Contact Form

 Date fields will need to have the convert date/time pattern defined as the native picker will be displayed on iOS and Android

20

Create Contact Form

 The Submit and Cancel buttons are normal links, but again we add some attributes for styling

21

Test Contact Form

 Now we can test our form in the browsers

22

Themes

 http://themeroller.jquerymobile.com

23

Upgrading to JQM 1.4.x

 Big changes in 1.4 preparing the way for 1.5 –  Many depricated features will not be triggered/usable in 1.5

 Affected Components: –  Buttons –  Icons –  Navigation –  CSS –  Structure –  Pretty much everything!?!

24

Upgrading to jQuery Mobile 1.4.x

 Biggest impacts are probably: –  pageshow: deprecated

• Old: $( document ).on( "pageshow", function( event, ui ) {...});

• New: $( document ).on( "pagecontainershow", function( event, ui ) {...});

Upgrading to jQuery Mobile 1.4.x  Themes included now consist of only ‘a’ (dark) and ‘b’ (light) –

they want you to use the theme roller

1.3.1 1.4.2

Upgrading to jQuery Mobile 1.4.x

 Full upgrade guide available at: http://jquerymobile.com/upgrade-guide/1.4/

Conclusions

  jQuery Mobile is far and away the most popular mobile web development framework out there –  Lots of addons and resources available –  Simple HTML and JavaScript –  Great documentation –  Easy to theme –  Works both online (in the browser) and offline in

Unplugged app  But…

28

Conclusions

  Integration into Domino and co-existence with Dojo is problematic –  Pre Dojo 1.8 everything is fine so if you’re on an older

version of Domino then you can ignore this –  You’re downloading jQuery, JQM and Dojo. Over a slow

line this could be an issue. • You can disable Dojo but you lose a lot of the standard

XPages functionality  Performance of JQM is still a consideration for lower

powered devices 29

Unplugged Controls User Group

 A virtual user group meets first Thursday of each month  Next event tomorrow:

–  http://unplugged.github.io/unplugged-controls/320/UserGroup.html

–  Rich will be talking about: • Tabbed Footer control • Alerts and Dialogs

30

Next Release of Unplugged Controls

 Version 3.3 will be released in 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 –  Bug fixes –  Anything else you want to add…

31

32