The fourth webinar in this mobile development series guides you through jQuery Mobile. In Part 4, learn: -jQuery Mobile -Performance considerations -Handling offline requirements -Pros and cons vs. alternatives

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

2. 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

3. • 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

4. •
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

5. • 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

6. jQuery Mobile

7. Agenda
Introduction
Installation
Development
Tips and Tricks
1
2
3
2
4

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

9. 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

10. 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

11. Installation (option 1)
 You will need to edit the first few lines of
jquery.mobile-1.3.2.js from this:
 To this:
6

12. 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

13. 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

14. 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

15. 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

16. 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

17. 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

18. Create layout custom control
 Now we add the rest of the structure of the page
13

19. CreateViews
 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

20. CreateViews
 We need to add our own view navigation
15

21. CreateViews
 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

22. TestViews
 We can now test our views
17

23. 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

24. 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

25. 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

26. Create Contact Form
 The Submit and Cancel buttons are normal links, but again we
add some attributes for styling
21

27. Test Contact Form
 Now we can test our form in the browsers
22

28. Themes
 http://themeroller.jquerymobile.com
23

29. 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

30. 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 ) {...});

31. 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

32. Upgrading to jQuery Mobile 1.4.x
 Full upgrade guide available at:
http://jquerymobile.com/upgrade-guide/1.4/

33. 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

34. 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

35. 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

36. 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

37. 32