Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Beginning jQuery Mobile


Published on

Beginning jQuery Mobile presentation to jQuery LA on 28 August 2012.

Published in: Technology, Design
  • Be the first to comment

Beginning jQuery Mobile

  1. 1. Beginning jQuery Mobile or Enough to Get You Started,but not Enough to Make You Dangerous
  2. 2. Who Am I?I am a Microsoft Certified Solution Developerand I’ve been developing software since 1979.Since 2009, I have been focused on developingmobile applications, for  iPhone, Android,Windows Phone 7, and the mobile web.
  3. 3. What We Won’t Cover• The Server Side• HTML5 in Depth• Validation• Device Apps
  4. 4. What We Will Cover• jQuery Mobile Intro.• How it Works• Form Elements• List Magic• Multi-Page Apps• Events
  5. 5. What We Will Cover• The Kernel• The ThemeRoller• Debugging• Performance Tips• Summary• Links
  6. 6. Quick Intro to jQuery MobileA unified, HTML5-based user interface systemfor all popular mobile device platforms, built onthe rock-solid jQuery and jQuery UIfoundation. Its lightweight code is built withprogressive enhancement, and has a flexible,easily theme-able design.
  7. 7. Demo #1
  8. 8. Page Structure• Header• Footer• Content Area
  9. 9. Header• Page Title• Left Button• Right Button
  10. 10. Footer• Title• Buttons
  11. 11. Content AreaThis is where your stuff goes.
  12. 12. How It Works• Dynamic DOM Manipulation• HTML5 Pseudo-Attributes• There is no free lunch
  13. 13. Dynamic DOM Manipulation• Show the Original Markup• Show the “Annotated” Markup
  14. 14. HTML5 Pseudo- Attributes• JQM Uses Pseudo-Attributes (data-)• Standard Browser Behavior - Ignore Unknown Attributes• Allows for Some Functionality on low-end browsers
  15. 15. Form Elements (aka widgets)• buttons• sliders• radio buttons• checkboxes• select menus• etc.
  16. 16. Lists• Basic Lists• Nested Lists• List Dividers• Split Lists• etc.
  17. 17. Multi-Page Apps• basic setup• transitions• passing data between pages
  18. 18. Events
  19. 19. Touch• tap• taphold• swipe• swipeleft• swiperight
  20. 20. Page• Page Load• Page Change• Page Transitions• Page Initialization• Page Remove• Layout
  21. 21. Page Load• pagebeforeload• pageload• pageloadfailed
  22. 22. Page Change• pagebeforechange• pagechange• pagechangefailed
  23. 23. Page Transition• pagebeforeshow• pageshow• pagebeforehide• pagehide
  24. 24. Page Create• pagebeforecreate• pagecreate• pageinit
  25. 25. Miscellaneous• pageremove• updatelayout• orientationchange
  26. 26. PerformanceTips• Watch the size of the DOM• Selectors • Narrow Them • Cache Them• Reference the active Page
  27. 27. Debugging• What’s the Problem?• Analogues• WEINRE & Adobe Shadow• iWebInspector• Opera Mobile Emulator
  28. 28. AnaloguesIn biochemistry, an analog is a substance thatis similar, but not identical, to another.For us, it is a browser that is similar, but notidentical, to the one we wish to test.
  29. 29. Analogues• iPhone - Safari• Android - Chrome• Windows Phone 7 - IE• Blackberry - Safari/Chrome
  30. 30. AnaloguesDon’t assume that if it works on the analog,it will work on the device. Always test on adevice.
  31. 31. WEINRE• Created by Patrick Mueller in JavaScript• WEb INspector REmote (pronounced like winery)• WebKit Only! (It uses built in hooks)• Allows for inspection of HTML/CSS• Remote console.log• NOT A DEBUGGER
  32. 32. Adobe Shadow• Chrome Extension + iOS app & Android app• WEINRE with a better UI• Inspection of HTML/CSS• Remote console.log• NOT A DEBUGGER
  33. 33. iWebInspector• Runs only on the iOS Simulator• Inspection of HTML/CSS• Remote console.log• True Remote Debugging
  34. 34. Opera Mobile Emulator• Runs using desktop Opera & Opera Mobile or Opera Mobile Emulator• Inspection of HTML/CSS• Remote console.log• True Remote Debugger
  35. 35. Sencha Touch 2.0
  36. 36. Sencha Touch 2.0<!DOCTYPE html><html><head> <title>Hello World</title> <script src="lib/touch/sencha-touch.js" type="text/javascript"></script> <script src="app/app.js" type="text/javascript"></script> <link href="lib/touch/resources/css/sencha-touch.css"rel="stylesheet" type="text/css" /></head><body></body></html>
  37. 37. Sencha Touch 2.0new Ext.Application({ launch: function() { new Ext.Panel({ fullscreen: true, dockedItems: [{xtype:toolbar, title:My First App}], layout: fit, styleHtmlContent: true, html: <h2>Hello World!</h2>I did it! }); }});
  38. 38. jQuery Mobile...• is free and open source• uses regular web programing paradigms• is easy
  39. 39. Useful URLs•••• docs/1.x/1.5.0/
  40. 40. Useful URLs••• mobile/
  41. 41. Books• jQuery Mobile Jon Reid Sebastopol, CA: O’Reilly Media Inc., 2011• Master Mobile Web Apps with jQuery Mobile 2nd ed. Matt Doyle Brighton, UK: Elated Communications Ltd, 2011