Cross-Platform Mobile Apps With jQuery Mobile

jQuery is the hugely popular JavaScript framework that powers nearly half of the top ten thousand most visited websites. You’ll learn how you can use these everyday web technologies to create compelling mobile experiences for your visitors while still supporting older devices. We’ll be covering topics such as navigational structure, layouts, toolbars and the all important list view. But just building a mobile site will only get you so far. You’ll also learn techniques to improve your page load times and tips to roll your own theme with style sheets and icons to help your apps stand out from the crowd.

Transcript

1. Cross-Platform Mobile Apps With jQuery Mobile
2. Cross-Platform Mobile Apps With jQuery Mobile
3. Mike Bobiney • Owner, Tap Through Apps LLC
4. Mike Bobiney • Owner, Tap Through Apps LLC • Work for Vectorform.com
5. Mike Bobiney • Owner, Tap Through Apps LLC • Work for Vectorform.com • Bunch of iOS dev & emerging tech
6. Mike Bobiney • Owner, Tap Through Apps LLC • Work for Vectorform.com • Bunch of iOS dev & emerging tech • 6+ years of enterprise web dev with ASP.NET
7. Mike Bobiney • Owner, Tap Through Apps LLC • Work for Vectorform.com • Bunch of iOS dev & emerging tech • 6+ years of enterprise web dev with ASP.NET • DetroitRuby.org User Group
8. Mike Bobiney • Owner, Tap Through Apps LLC • Work for Vectorform.com • Bunch of iOS dev & emerging tech • 6+ years of enterprise web dev with ASP.NET • DetroitRuby.org User Group • Homebrewer
9. Overview
11. • A library that simplifies JavaScript with features like selectors, event handling and Ajax interactions and is supported cross- browser.
12. • A library that simplifies JavaScript with features like selectors, event handling and Ajax interactions and is supported cross- browser. Open Source
14. • Not an alternative to jQuery but rather built upon it
15. • Not an alternative to jQuery but rather built upon it • Used to build accessible touch-friendly mobile UI
16. • Not an alternative to jQuery but rather built upon it • Used to build accessible touch-friendly mobile UI • Built on jQuery 1.6.4 and jQuery 1.7.1 support is coming soon but should be okay to use
17. • Not an alternative to jQuery but rather built upon it • Used to build accessible touch-friendly mobile UI • Built on jQuery 1.6.4 and jQuery 1.7.1 support is coming soon but should be okay to use
18. “The web should work everywhere”
19. And they mean everywhere..
20. One Size Fits All
21. One Size Fits All
22. One Size Fits All
23. jQueryMobile != jqTouch "While a few frameworks exist now (such as jQTouch, iUI, and Sencha Touch) none of them even attempt to provide a consistent experience beyond the safety of iOS, Android, and webOS." - John Resig
24. Vendor Support Visual Studio 2010 & Adobe Dreamweaver CS5
25. Works with PhoneGap
26. Works with PhoneGap Ubiquitous App development with PhoneGap Friday January 13, 2012 @ 10:45 AM in Salon F
27. Buzzword Compliant HTML5 CSS3
28. Mobile Only Users US / UK 25%
29. 3-Level Graded Browser Support Progressive Enhancement • C-Grade: Basic HTML • B-Grade: Enhanced Style, No Ajax • A-Grade: Full Enhanced Style, Ajax and CSS Transitions
30. Grade A Apple iOS 3.2-5.0 Android 2.1-2.3 Android Honeycomb Windows Phone 7-7.5 Blackberry 6.0 Blackberry 7 Blackberry Playbook Palm WebOS (1.4-3.0) HP Touchpad Opera Mobile 11.0 Kindle 3 and Fire http://jquerymobile.com/gbs/
31. Grade A Apple iOS 3.2-5.0 Android 2.1-2.3 Android Honeycomb Windows Phone 7-7.5 Blackberry 6.0 Blackberry 7 Blackberry Playbook Palm WebOS (1.4-3.0) HP Touchpad Opera Mobile 11.0 Kindle 3 and Fire Most current desktop browser http://jquerymobile.com/gbs/
32. Grade A Apple iOS 3.2-5.0 Android 2.1-2.3 Android Honeycomb Windows Phone 7-7.5 Blackberry 6.0 Blackberry 7 Blackberry Playbook Palm WebOS (1.4-3.0) HP Touchpad Opera Mobile 11.0 Kindle 3 and Fire Most current desktop browser http://jquerymobile.com/gbs/ Grade B Blackberry 5.0 Opera Mini (5.0-6.0) Nokia Symbian
33. Grade A Apple iOS 3.2-5.0 Android 2.1-2.3 Android Honeycomb Windows Phone 7-7.5 Blackberry 6.0 Blackberry 7 Blackberry Playbook Palm WebOS (1.4-3.0) HP Touchpad Opera Mobile 11.0 Kindle 3 and Fire Most current desktop browser http://jquerymobile.com/gbs/ Grade B Blackberry 5.0 Opera Mini (5.0-6.0) Nokia Symbian Grade C Blackberry 4.x Windows Mobile aka “feature phones” No media queries support
34. Where to get it? • http://jquerymobile.com/download/ • https://github.com/jquery/jquery-mobile • Content Delivery Networks • http://code.jquery.com/ • Microsoft Ajax CDN
35. Page Structure
36. Common Single Page Structure <div  data-­‐role="page"> <div  data-­‐role="header"> <div  data-­‐role="content"> <div  data-­‐role="footer">
37. Common Single Page Structure <div  data-­‐role="page"> <div  data-­‐role="header"> <div  data-­‐role="content"> <div  data-­‐role="footer"> optional }
38. <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <!-- the three things that jQuery Mobile needs to work --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>My Page</h1> </div> <div data-role="content"> <p>My page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html>
39. Multi Page Structure <div  data-­‐role="page"> <div  data-­‐role="header"> <div  data-­‐role="content"> <div  data-­‐role="footer">
40. <div  data-­‐role="header"> <div  data-­‐role="content"> <div  data-­‐role="footer"> Multi Page Structure (embedded) <div  data-­‐role="page">
41. <div  data-­‐role="header"> <div  data-­‐role="content"> <div  data-­‐role="footer"> Multi Page Structure (embedded) <div  data-­‐role="page"> <div  data-­‐role="page"  id=”home”>
42. <div  data-­‐role="header"> <div  data-­‐role="content"> <div  data-­‐role="footer"> <div  data-­‐role="page"  id=”about”> <div  data-­‐role="header"> <div  data-­‐role="content"> <div  data-­‐role="footer"> Multi Page Structure (embedded) <div  data-­‐role="page"> <div  data-­‐role="page"  id=”home”>
43. Links to embedded pages <a  href="#about">About  this  app</a> Links to external pages <a  href="about.html">About  this  app</a>
44. <a href="#somepage" data-rel="dialog" data-transition="pop">Show Popup</a>
45. <a href="#somepage" data-rel="dialog" data-transition="pop">Show Popup</a>
46. PRO TIP / Good Idea Include links to the jQuery and jQuery Mobile scripts in the head section of each document, so that the documents are stand-alone and can be bookmarked if necessary.
47. Buttons
48. Whip those anchor links into shape! Buttons defaults to full width <a href="#about" data-role="button">About this app</a>
49. Inline Buttons <a href="index.html" data-role="button" data-inline="true">Cancel</a> <a href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>
50. Grouped Buttons <ul data-role="controlgroup" data-type="horizontal"> <li><a href="index.html" data-role="button" class="ui-btn-active">Basics</a></li> <li><a href="options.html" data-role="button">Options</a></li> <li><a href="methods.html" data-role="button">Methods</a></li> <li><a href="events.html" data-role="button">Events</a></li> </ul>
51. Working with icons
52. <a href="index.html" data-role="button">Button</a> Button Icons
53. <a href="index.html" data-role="button">Button</a> <a href="index.html" data-role="button" data-icon="star">Button</a> Button Icons
54. Icon Positions
55. PRO TIP Low Retina (HD) dimension 18x18 36x36 Your icon should be pure white, with dimensions of 18x18 pixels. Save the icon as a PNG-8 image with a transparent background. DIY Best Results
56. Don’t forget the little guys @media  only  screen  and  (-­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio:  1.5),              only  screen  and  (min-­‐-­‐moz-­‐device-­‐pixel-­‐ratio:  1.5),              only  screen  and  (min-­‐resolution:  240dpi)  {    .ui-­‐icon-­‐myapp-­‐phone  {        background-­‐image:  url(/myapp/icons/phone-­‐hd.png); } } Normal Retina
57. http://developer.android.com/resources/dashboard/screens.html High Density is the norm for smart phones
58. http://developer.android.com/resources/dashboard/screens.html High Density is the norm for smart phones
59. http://developer.android.com/resources/dashboard/screens.html High Density is the norm for smart phones
60. Transitions
61. Creating Page Transitions <a href="newpage.html" data-transition="transitionName">New Page</a> transitionName transitionName slide (default) pop slideup fade slidedown flip* * doesn’t render correctly on android
62. Reverse Transition <a href=”#home” data-rel="back">Get Me Outta Here!</a> • Mimics the back button rather than adding page to history • Optionally supply href value to support “C grade” browsers • Back button defaults to the reverse transition that was used to get there
63. Reverse Transition <a href=”#home” data-rel="back">Get Me Outta Here!</a> • Mimics the back button rather than adding page to history • Optionally supply href value to support “C grade” browsers • Back button defaults to the reverse transition that was used to get there
64. Reverse Transition <a href=”#home” data-rel="back">Get Me Outta Here!</a> • Mimics the back button rather than adding page to history • Optionally supply href value to support “C grade” browsers • Back button defaults to the reverse transition that was used to get there
65. Clean URL’s • Loads page using the old deep-linking history mechanism • Calls history.replaceState() to make the url cleaner to read (if supported)
66. Forms
67. Touch Friendly
68. Radio Lists
69. Support for HTML 5 Input Types type type email tel url number time date month week datetime color <input type="type" name="time" id="time" value="" />
70. Support for HTML 5 Input Types type type email tel url number time date month week datetime color <input type="type" name="time" id="time" value="" />
71. Support for HTML 5 Input Types type type email tel url number time date month week datetime color <input type="type" name="time" id="time" value="" />
72. Support for HTML 5 Input Types type type email tel url number time date month week datetime color <input type="type" name="time" id="time" value="" />
73. Expandable Text Areas • Automatically adjusts height
74. Responsive Forms
75. Responsive Forms <div data-role="fieldcontain">...</div>
76. Orientation Change $(function() { $(window).orientationchange( function( e ) { alert( "You rotated your device to " + e.orientation + "orientation" ); }); }); /* Portrait */ @media screen and (orientation:portrait) { /* Portrait styles */ } /* Landscape */ @media screen and (orientation:landscape) { /* Landscape styles */ }
77. List views
78. List View
79. <ul data-role="listview"> <li><a href="#">The Godfather</a></li> <li><a href="#">Inception</a></li> <li><a href="#">Pulp Fiction</a></li> <li><a href="#">Schindler's List</a></li> <li><a href="#">12 Angry Men</a></li> <li><a href="#">Star Wars: Episode V</a></li> <li><a href="#">The Dark Knight</a></li> <li><a href="#">The Lord of the Rings</a></li> </ul> List View
80. <ol data-role="listview"> <li><a href="#">The Godfather</a></li> <li><a href="#">Inception</a></li> <li>Pulp Fiction (sold out)</li> <li><a href="#">Schindler's List</a></li> <li><a href="#">12 Angry Men</a></li> <li><a href="#">Star Wars: Episode V</a></li> <li><a href="#">The Dark Knight</a></li> <li><a href="#">The Lord of the Rings</a></li> </ol> Ordered List View
81. <ul data-role="listview" data-inset="true"> ! <li><a href="acura.html">Acura</a></li> ! <li><a href="audi.html">Audi</a></li> ! <li><a href="bmw.html">BMW</a></li> </ul> List view inset
82. List view <ul data-role="listview"> <li><a href="#">United States</a></li> <li><a href="#">Great Britain</a></li> <li><a href="#">Germany</a></li> <li><a href="#">France</a></li> </ul>
83. <ul data-role="listview" data-filter="true"> <li><a href="#">United States</a></li> <li><a href="#">Great Britain</a></li> <li><a href="#">Germany</a></li> <li><a href="#">France</a></li> </ul> Filtered List View Full text search is the default algorithm
85. <ul data-role="listview" data-inset="true"> <li data-role="divider">Monday, November 14</li> <li><a href="#"> <h4>To Do Item 1</h4> <p style="font-weight:bold">To do item 1 summary</p> <p class="ui-li-aside">Due at 12pm</p> <p>This is the detail text for ToDo Item 1</p> </a></li> <li><a href="#"> <h4>To Do Item 2</h4> <p style="font-weight:bold">To do item 2 summary</p> <p class="ui-li-aside">Due at 2pm</p> <p>This is the detail text for ToDo Item 2</p> </a></li> <!-- etc etc --> </ul>
86. Fixed Toolbars
87. <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="menu.html" data-icon="grid" class="ui-btn-active">Menu</a></li> <li><a href="favorites" data-icon="star">Favorites</a></li> <li><a href="foo.html" data-icon="gear">Settings</a></li> </ul> </div> </div>
88. <div data-role="footer" data-position="fixed"> <div data-role="navbar" data-iconpos="left"> <ul> <li><a href="menu.html" data-icon="grid">Menu</a></li> <li><a href="favorites" data-icon="star">Favorites</a></li> <li><a href="foo.html" data-icon="gear">Settings</a></li> </ul> </div> </div>
89. True Fixed Toolbars <script src="jquery.js"></script> <script type="text/javascript"> $(document).bind("mobileinit", function() { $.extend( $.mobile, { // depreciated in ver 1.1 touchOverflowEnabled: true }); }); </script> <script src="jquery-mobile.js"></script> works on iOS 5 / Android 2.2+ with zoom disabled. Gets depreciated in 1.1 in exchange for more elegant solution.
90. Themes
91. Default Theme
92. Swatches
93. a)Highest priority elements, such as headers and footers. Swatches
94. a)Highest priority elements, such as headers and footers. b)Less important elements than swatch ‘a’, such as dividers in list views and headers in nested lists. Swatches
95. a)Highest priority elements, such as headers and footers. b)Less important elements than swatch ‘a’, such as dividers in list views and headers in nested lists. c)Elements with a “normal” level of importance. This covers many elements including the page body, buttons, standard list items, and so on. Swatches
96. a)Highest priority elements, such as headers and footers. b)Less important elements than swatch ‘a’, such as dividers in list views and headers in nested lists. c)Elements with a “normal” level of importance. This covers many elements including the page body, buttons, standard list items, and so on. d)An alternative to the ‘b’ swatch, again to indicate a secondary level of importance to the ‘a’ swatch. Swatches
97. a)Highest priority elements, such as headers and footers. b)Less important elements than swatch ‘a’, such as dividers in list views and headers in nested lists. c)Elements with a “normal” level of importance. This covers many elements including the page body, buttons, standard list items, and so on. d)An alternative to the ‘b’ swatch, again to indicate a secondary level of importance to the ‘a’ swatch. e)An accent swatch, for times when you want to make an element stand out in the page. jQuery Mobile doesn’t use this swatch by default, so it’s up to you to apply it in situations where you want to use it Swatches
98. Themes
99. • Should contain style rules for at least the five swatches ‘a’ through ‘e’. Themes
100. • Should contain style rules for at least the five swatches ‘a’ through ‘e’. • Can contain up to 26 swatches (a-z) Themes
101. • Should contain style rules for at least the five swatches ‘a’ through ‘e’. • Can contain up to 26 swatches (a-z) • Has several global settings, including fonts, drop shadows, and corner radius values for buttons and boxes Themes
102. • Should contain style rules for at least the five swatches ‘a’ through ‘e’. • Can contain up to 26 swatches (a-z) • Has several global settings, including fonts, drop shadows, and corner radius values for buttons and boxes • Are optional (more on this later) Themes
103. Overriding themes <a  href="index.html"  data-­‐role="button"  data-­‐theme="a">Theme  a</a> (Prevents the inherited style from parent elements)
104. Disable Themes <select name="foo" id="foo" data-role="none"> <option value="a" >A</option> <option value="b" >B</option> <option value="c" >C</option> </select> $(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.keepNative = "select, input.foo, textarea.bar"; });
105. jquery.mobile.structure.css everything you need except the theme (colors, fonts, etc.)
106. jquery.mobile.structure.css everything you need except the theme (colors, fonts, etc.) css/ ├──  structure │      ├──  index.php │      ├──  jquery.mobile.button.css │      ├──  jquery.mobile.collapsible.css │      ├──  jquery.mobile.controlgroup.css │      ├──  jquery.mobile.core.css │      ├──  jquery.mobile.dialog.css │      ├──  jquery.mobile.forms.checkboxradio.css │      ├──  jquery.mobile.forms.fieldcontain.css │      ├──  jquery.mobile.forms.select.css │      ├──  jquery.mobile.forms.slider.css │      ├──  jquery.mobile.forms.textinput.css │      ├──  jquery.mobile.grids.css │      ├──  jquery.mobile.headerfooter.css │      ├──  jquery.mobile.listview.css │      ├──  jquery.mobile.navbar.css │      └──  jquery.mobile.transitions.css └──  themes        └──  default                ├──  images                │      ├──  ajax-­‐loader.png                │      ├──  icons-­‐18-­‐black.png                │      ├──  icons-­‐18-­‐white.png                │      ├──  icons-­‐36-­‐black.png                │      └──  icons-­‐36-­‐white.png                ├──  index.php                └──  jquery.mobile.theme.css
107. jquery.mobile.structure.css everything you need except the theme (colors, fonts, etc.) css/ ├──  structure │      ├──  index.php │      ├──  jquery.mobile.button.css │      ├──  jquery.mobile.collapsible.css │      ├──  jquery.mobile.controlgroup.css │      ├──  jquery.mobile.core.css │      ├──  jquery.mobile.dialog.css │      ├──  jquery.mobile.forms.checkboxradio.css │      ├──  jquery.mobile.forms.fieldcontain.css │      ├──  jquery.mobile.forms.select.css │      ├──  jquery.mobile.forms.slider.css │      ├──  jquery.mobile.forms.textinput.css │      ├──  jquery.mobile.grids.css │      ├──  jquery.mobile.headerfooter.css │      ├──  jquery.mobile.listview.css │      ├──  jquery.mobile.navbar.css │      └──  jquery.mobile.transitions.css └──  themes        └──  default                ├──  images                │      ├──  ajax-­‐loader.png                │      ├──  icons-­‐18-­‐black.png                │      ├──  icons-­‐18-­‐white.png                │      ├──  icons-­‐36-­‐black.png                │      └──  icons-­‐36-­‐white.png                ├──  index.php                └──  jquery.mobile.theme.css code.jquery.com/mobile/1.0/ jquery.mobile.structure-1.0.min.css { I'm on the CDN!
108. Disclaimer: speaker is not a designer Limited Time Only
109. Page Performance
110. Enable Cache <div data-role="page" id="cacheMe" data-dom-cache="true">...</div>
111. Enable Cache • Multi-page documents are cached • Anything loaded via ajax is removed on pagehide() • Expires and Cache-Control HTTP headers <div data-role="page" id="cacheMe" data-dom-cache="true">...</div>
112. Prefetching <a  href="prefetchMe.html"  data-­‐prefetch>  ...  </a> On page load jQuery Mobile prefetches links with this attribute making it instantly available when clicked.
113. $.mobile.loadPage( "about/us.html" ); //cue the page loader $.mobile.showPageLoadingMsg(); $(document).bind("mobileinit", function(){ $.extend( $.mobile , { foo: bar }); }); Setting global options Load an external page, enhance its content, and insert it into the DOM Some useful methods
114. Global Settings autoInitializePage activePageClass ajaxEnabled defaultPageTransition defaultDialogTransition loadingMessage
115. PRO TIP On the client $('#aboutPage').live( 'pagebeforecreate',function(event) { // manipulate the page markup });
116. Events Events Events tap/click taphold swipe swipeleft swiperight $(“#mybutton”).bind("tap",  function(  event,  data  ){ ... })
117. Roadmap
118. • (v1.1) Mid/Late February • Download Builder Tool • Fixed toolbar improvements • Smoother transitions • (v1.2) Late Spring: • New components & refinements • Fetch content without page transitions, think pull to refresh or image galleries
119. Popup Component
120. Helpful Resources
121. Useful Resources www.jquerymobile.com/blog/ www.elated.com
122. jqmgallery.com
123. iCodemash.com
124. @mikebob labs.vectorform.com Questions?
125. DetroitRuby.org 2nd Thursday of the month in Downtown Detroit