Wireless Wednesdays: Part 4


Published on

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

No notes for slide

Wireless Wednesdays: Part 4

  1. 1.       Getting Started with Mobile Development Part  4:  May  7,  2014  
  2. 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. 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. 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. 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. 6. jQuery Mobile
  7. 7. Agenda Introduction Installation Development Tips and Tricks 1 2 3 2 4
  8. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. Create layout custom control  Now we add the rest of the structure of the page 13
  19. 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. 20. CreateViews  We need to add our own view navigation 15
  21. 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. 22. TestViews  We can now test our views 17
  23. 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. 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. 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. 26. Create Contact Form  The Submit and Cancel buttons are normal links, but again we add some attributes for styling 21
  27. 27. Test Contact Form  Now we can test our form in the browsers 22
  28. 28. Themes  http://themeroller.jquerymobile.com 23
  29. 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. 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. 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. 32. Upgrading to jQuery Mobile 1.4.x  Full upgrade guide available at: http://jquerymobile.com/upgrade-guide/1.4/
  33. 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. 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. 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. 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. 37. 32