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


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

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

7


 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 [email protected]  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


 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


 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

Technology

Wireless Wednesdays: Part 4