Your SlideShare is downloading. ×
Wireless Wednesdays: Part 4
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Wireless Wednesdays: Part 4


Published on

The fourth webinar in this mobile development series guides you through jQuery Mobile. …

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

Published in: Technology, Business

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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 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:parameter name="xsp.resources.aggregate" value="true" /> </> <xp:this.resources> <xp:styleSheet href="" /> <xp:headTag tagName="script"> <xp:this.attributes> <xp:parameter name="type" value="text/javascript" /> <xp:parameter name="src" value="" /> </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="" /> </xp:this.attributes> </xp:headTag>  From  More details at:  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  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:
  • 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: – 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