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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
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