Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Express jQuery Mobile Training

Express jQuery Mobile Training

A 2-day training course for learning jQuery Mobile

Brad Broulik

January 06, 2013
Tweet

More Decks by Brad Broulik

Other Decks in Technology

Transcript

  1. No hoax, two days of live jQuery Mobile training with

    real problems and real solutions! http://www.flickr.com/photos/42757699@N04/5215096404/
  2. Agenda Day 1 Day 2 •The jQuery Mobile advantage •Getting

    Started with jQuery Mobile •Grab the code •Getting up and running •Single-page template •Multi-page template •Ajax navigation •Transitions •Buttons •Header buttons •Exercise #1: Creating a Disney mobile site ! ! •Segmented control •Toolbars •Tab bars •Popups •Lists •Basic list •Inset list •List dividers •List with thumbnails •List with icons •List with split buttons •List badges (count bubbles) •List filtering •Fixed lists •Dynamic lists •Exercise #2: Creating a list of Disney Parks •Forms •Select menu •Radio buttons •Checkboxes •Flipswitch •Switch •Grids •Basic grids •Multi-row grids •Uneven grids Collapsible content blocks Collapsible content sets •Themes •List example •Themeroller •Theme defaults and inheritance •Exercise #3: Creating a custom theme ! •Configuring jQuery Mobile •jQuery Mobile methods •jQuery Mobile events diagram •What’s new in jQuery Mobile 1.3 •Exercise #4: Sliding drawer & responsive grid •Responsive Patterns •Performance tips •Debugging •Maps integration •Client-side Twitter integration •Backbone and Require.JS •PhoneGap •Bar and Pie Charts
  3. “A UI framework for building cross-platform Mobile Web applications” “With

    a single jQuery Mobile codebase we can create a unified user experience for nearly all mobile devices” jQ uery M obile 1.3 5
  4. Simplified Markup-Driven Development ! <div data-role="page"> <div data-role="header"> <h1>Page Header</h1>

    </div> ! <div class=“ui-content"> <p>Hello jQuery Mobile!</p> </div> ! <div data-role="footer"> <h4>Page Footer</h4> </div> </div> 9
  5. 16

  6. Build a page #1 ! <h2>Movies</h2> ! <ul> <li><a href="#">Kung

    Fu Panda</a></li> <li><a href="#">Pirates</a></li> <li><a href="#">X-Men<a><li> </ul> 18
  7. Add jQuery Mobile #2 ! <head> <title>Step Two - Add

    jQuery Mobile</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile.min.css" /> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> </head> CDN repository or download via jquerymobile.com/download 19
  8. Enhance: data- attributes #3 ! <div data-role="header"> <h2>Movies</h2> </div> !

    <ul data-role="listview"> <li><a href="#">Kung Fu Panda</a></li> <li><a href="#">Pirates</a></li> <li><a href="#">X-Men></a><li> </ul> 20
  9. More enhancements... 21 ! <div class=“ui-content"> <ul data-role="listview" data-inset="true"> <li

    data-role="list-divider">Now Playing</li> <li class=“ui-li-has-thumb“> <a href="#"> <img src="images/kungfupanda2.jpg" /> <h3>Kung Fu Panda</h3> <p>Rated: PG</p> <p>Runtime: 95 min.</p> </a> </li> </ul> </div>
  10. Add theming and branding ! <div data-role="header" data-theme="b"> <h1>Movies</h1> </div>

    ! <div class=“ui-content"> <ul data-role="listview" data-theme="a"> <li data-role="list-divider">Now Playing</li> <li class=“ui-li-has-thumb“> <a href="#"> <img src="images/kungfupanda2.jpg" /> <h3>Kung Fu Panda</h3> <p>Rated: PG</p> <p>Runtime: 95 min.</p> </a> </li> </ul> </div> 22
  11. Learning jQuery Mobile step-by-step 23 1) Learn the jQuery Mobile

    data-attributes and CSS 2) Learn to configure jQuery Mobile 3) Learn the jQuery Mobile events
  12. Download code: http://bit.ly/training-jqm-code Grab the code 24 Download and run

    local Run anywhere: http://bit.ly/training-jqm-run Run anywhere
  13. Getting up and Running 25 Example: ch2/template.html Book: p13 IMPORTANT:

    The sequence of the CSS and JavaScript files must appear in the order as listed in template.html. The order is necessary to properly initialize the dependencies before they are referenced by jQuery Mobile.
  14. Single-page template 26 Book: p190 <div data-role="page"> <div data-role="header"> <h1>Page

    Header</h1> </div> ! <div class=“ui-content"> <p>Hello jQuery Mobile!</p> </div> ! <div data-role="footer"> <h4>Page Footer</h4> </div> </div>
  15. Multi-page template 27 <body> ! <!-- page #1 --> <div

    data-role="page" id="home" data-title="Welcome"> <div data-role="header"> <h1>Multi-Page</h1> </div> ! <a href="#contact-info" data-role="button">Contact Us</a> </div> ! <!-- page #2 --> <div data-role="page" id="contact-info" data-title="Contacts"> <div data-role="header"> <h1>Contact Us</h1> </div> ! <div class=“ui-content"> Contact information... </div> </div> ! </body> Example: ch2/multi-page.html Book: p18
  16. 28 Example: ch2/prefetch.html Book: p20 Single-page + prefetch TIP: We

    can asynchronously load pages into the DOM by adding the data-prefetch=”true” attribute on any link. The prefetched links will get loaded in the background after the active page is shown. <body> ! <div data-role="header"> <h1>Prefetch</h1> </div> ! <a href="contact.html" data-prefetch="true">Contact Us</a> ! </body>
  17. Single-page versus Multi-page 29 TIP: In most cases it is

    recommended to leverage the single-page model and dynamically append popular pages to the DOM in the background. We can achieve this behavior by adding the data-prefetch attribute to any link we want to dynamically load: ! <a href=”page2.html” data-prefetch=”true”></a> ! This hybrid approach allows us to selectively choose which links we want to load and cache. Again, this pattern is only recommended for pages that are accessed very frequently because this behavior will trigger an additional HTTP request to load the page dynamically Book: p20
  18. Ajax navigation 30 Example: ch2/hijax.html Book: p21 TIP: By default,

    all pages are loaded via Ajax. This behavior can be disabled: $.mobile.ajaxEnabled = false; NOTE: The “from” and “to” page will both be cached in the DOM to enable transitions.
  19. External links are loaded without Ajax 35 IMPORTANT: Ajax navigation

    will not be used for situations where you load an external link: <!-- Ajax navigation will be ignored when loading a page with a rel="external" or target attribute -->
 <a href="multi-page.html" rel=”external”>Home</a> <!-- Ajax navigation will be ignored -->
 <a href="multi-page.html" target=”_blank”>Home</a> Under these conditions, normal HTTP request processing will occur. Furthermore, CSS transitions will not be applied. As mentioned earlier, the framework is able to achieve smooth transitions by dynamically loading the "from" and "to" pages into the same DOM and then applying a smooth CSS transition. Without Ajax navigation the transition will not appear as smooth and the default loading message will not be shown during the transition.
  20. A multi-page can’t be loaded via Ajax 36 IMPORTANT: When

    linking to a page that contains multiple pages, you must add rel="external" to its link. <!-- Must include rel="external" when linking to multi-page documents --> <a href="multi-page.html" rel="external">Home</a> <!-- May optionally use the target attribute --> <a href="multi-page.html" target="_blank">Home</a> This will perform a full-page refresh. It is required because jQuery Mobile cannot load a multi-page document into the DOM of an active page. It would cause a namespace collision with how jQuery Mobile leverages the URL hash (#). jQuery Mobile leverages the hash value to identify internal pages within a multi-page document. However, there is a plugin available to make this possible: https://github.com/ToddThomson/jQuery-Mobile-Subpage-Widget
  21. Transitions 37 Examples: •ch2/transitions.html •bonus/config/transitions/ios.html Book: p25 TIP: You can

    set a “backward” transition by adding data-direction=”reverse” to your links. For instance, a reverse transition is applied by default when transitioning back in history. However, if you have a “home” link on your header you will need to apply the data-direction=”reverse” attribute otherwise the default “forward” effect would occur: ! <a href=”home.html” data-direction=”reverse” class=”ui-btn ui-btn-right ui-icon- home ui-btn-icon-notext”></a> <a href="#" class=“ui-button" data-transition="slide">slide</a>
  22. Buttons 38 Examples: • ch4/link-buttons.html • ch4/form-buttons.html • ch4/image-buttons.html •

    ch4/icon-buttons-standard.html • ch4/icon-only-buttons.html • ch4/icon-positioning.html • ch4/icon-buttons-custom.html • ch4/dynamic-buttons.html (optional) Book: p64 TIP: If you want buttons to sit side-by-side and consume the entire width of the screen, us a 2-column grid. We will explore flexible grid layouts in more detail tomorrow. TIP: The image src for the custom button icon was loaded with the data URI scheme. This can be a performant alternative to loading small images externally because we eliminate an HTTP request: background: url(data:image/png;base64,iVBORw0KG...);
  23. Header buttons 39 Example: ch3/header-buttons.html Book: p42 TIP: If you

    want to disable the automatic initialization of buttons or any other control, you may add the data-role=”none” attribute to the element and jQuery Mobile will not enhance the control:
 <button data-role=”none”>Button element</button> TIP: To fix a truncated header see ch3/truncation-fixed.html
  24. 1) Create the Disney site as shown in the wireframes

    above. 2) Link the “Disney Parks” button to the “Disney parks coming soon...” page on the right using a “slide” transition. 3) Add a home icon in the header that links (reverse transition) back to the home page. 4)The solution for the exercise can be found at bonus/exercises/ex1/index.html. Exercise #1 - Disney mobile site 40
  25. Segmented control 41 Example: ch3/header-segmented-control.html Book: p45 NOTE: This example

    uses a multi-page template. What page is shown first in a multi-page template?
  26. Toolbars 42 Examples: •ch3/toolbar-icons-standard.html •ch3/toolbar-segmented-control.html Book: p53 TIP: For custom

    icons see http:/ /glyphish.com/. The next slide shows an example of how to attach custom icons to a toolbar or tab bar button.
  27. Tab bars 43 Examples: •ch3/tabbar-icons-standard.html •ch3/tabbar-icons-custom.html Book: p56 CAUTION: jQuery

    Mobile is an excellent framework for building applications that display responsively across mobile, tablet, and desktop browsers. While the header and footer components provide a "native" feel on mobile devices they translate poorly when viewed on the desktop. If your jQuery Mobile application is targeted for a diverse set of browser sizes you may prefer to omit the header and footer components. As an alternative, you may find it more beneficial to add custom header or footer markup directly within the content section.
  28. Basic List 45 Example: ch5/list-basic.html Book: p107 <ul data-role="listview"> <li><a

    href="#">Action</a></li> <li><a href="#">Adventure</a></li> <li><a href="#">Comedy</a></li> </ul>
  29. Inset List 46 Example: ch5/list-inset.html Book: p108 <ul data-role="listview" data-inset="true">

    <li data-role="list-divider">Contact Options</li> <li class=“ui-li-has-thumb“> <a href="#"><img src=“phone.png">Call</a> </li> <li class=“ui-li-has-thumb“> <a href="#"><img src=“envelope.png">Email</a> </li> </ul>
  30. List dividers 47 Example: ch5/list-dividers.html Book: p109 TIP: Auto dividers

    (data-autodividers=”true”) is a new feature in JQM 1.2.
  31. List with thumbnails 48 Example: ch5/list-thumbnails.html Book: p111 <ul data-role="listview">

    <li class=“ui-li-has-thumb“> <a href="#"> <img src="kungfupanda2.jpg" /> <h3>Kung Fu Panda</h3> <p>Rated: PG</p> <p>Runtime: 95 min.</p> </a> </li> </ul>
  32. List with icons 49 Example: ch5/list-icons.html Book: p112 <li class=“ui-li-has-thumb“>

    <a href="#"> <img src="user.png" class="ui-li-icon"> <p><strong>Go See It!</strong></p> </a> </li> .ui-li-icon { max-width:16px; max-height:16px; }
  33. List with split buttons 50 Example: ch5/list-split-buttons.html Book: p113 <ul

    data-split-icon="star" data-split-theme="d"> <li class=“ui-li-has-thumb“> <a href="#"> <img src="kungfupanda2.jpg" /> <h3>Kung Fu Panda</h3> <p>Rated: PG</p> <p>Runtime: 95 min.</p> </a> <a href="#">Buy Tickets</a> </li> </ul>
  34. <ul data-role="listview" data-count-theme="e"> <li class=“ui-li-has-thumb“> <img src="../images/111-user.png" class="ui-li-icon"> <p>Thanks for

    the review.</p> <span class="ui-li-count">1 day</span> </li> </ul> List badges 51 Example: ch5/list-badges.html Book: p117
  35. 1)Create a listing of Disney Parks as shown above. The

    image icons are available in bonus/ exercises/ex2/images. 2)The solution for the exercise can be found at bonus/exercises/ex2/index.html. Exercise #2 - Disney Parks List 55
  36. Forms 57 Examples: •ch4/form-request.html •ch4/native.html Book: p77 TIP: Prefer to

    disable Ajax on all form submissions (data-ajax=”false”) because Ajax does not play well with the POST/Redirect/GET (double-submit) pattern.
  37. Calendar 58 Example: •bonus/plugins/datebox/calbox.html NOTE: The DateBox API and documentation

    can be found at http:/ /dev.jtsage.com/jQM-DateBox2/ <input name="mydate" type="date" data- role="datebox" data-options='{ "mode":"calbox", "themeDateToday":"a", "themeDatePick":"b", "useFocus":true, "afterToday":true, // blackout past days "maxDays":365}'> // blackout days > 365 TIP: The original size of the day buttons were 30 X 36 px. I increased them to 40 X 40 px to make them more touch friendly.
  38. Select menu 59 Examples: •ch4/select-menu-native.html •ch4/select-menu-custom.html •ch4/dynamic-select-menu.html Book: p83 TIP:

    Prefer native select menus for best performance. TIP: Prefer custom select menus when you want your users to select multiple otptions (select-menu-custom.html).
  39. Radio buttons 60 Examples: •ch4/radio-buttons.html •ch4/dynamic-radio-buttons.html Book: p90 Caution: Horizontal

    radio buttons or checkboxes will wrap if their container is not wide enough to display them on a single row. You may reduce their font size if wrapping is an issue: .ui-controlgroup-horizontal .ui-radio label {font-size: 13px !important;}
  40. Checkboxes 61 Examples: •ch4/checkboxes.html •ch4/dynamic-checkboxes.html Book: p94 TIP: To hide

    labels in an accessible way attach the ui-hidden-accessible style to the element. For instance, we applied this technique to the search field. This will gracefully hide the label while preserving 508 compliance: ! <label for="search" class="ui-hidden-accessible">Search</label> <input type="search" id="search" placeholder="Search" />
  41. Switch 63 Examples: •ch4/switch-control.html •ch4/dynamic-switch-control.html Book: p99 TIP: When building

    forms it is recommended to semantically associate each form field with its corresponding label. The label's for attribute and the input's id attribute establish this relationship: <label for=”first-name”>First name:</label> <input type=”text” name=”first-name” id=”first-name” value=”” /> This association creates 508-compliant applications that are accessible to assistive technologies. Accessibility is often required by government or state agencies. You can test your mobile application for compliance with the WAVE3 tool (see http:/ /wave.webaim.org/).
  42. Basic grids 64 Examples: •ch6/grid-2col.html •ch6/grid-3col.html •ch6/grid-4col.html •ch6/grid-5col.html Book: p125

    <div data-role="content" > <!-- Grid container --> <div class="<grid-css-attribute>"> <!-- Blocks --> <div class="<block-css-attribute>">Block A</div> <div class="<block-css-attribute>">Block B</div> </div> </div> Grid Template:
  43. Multi-row grids 65 Example: ch6/grid-multi-row.html Book: p132 NOTE: Emoji icons

    are a performant alternative to images because they consume zero HTTP requests and their payload is only a few characters of text. Unfortunately, Emoji icons are currently only supported in iOS. Data URIs are a platform neutral alternative.
  44. Collapsible content blocks 67 Example: ch6/collapsible-block.html Book: p136 TIP: Collapsible

    content blocks have several advantages when compared to an inline page structure. First, we can collapse content into segmented groups to make them all visible within a single view. And secondly, our users will be more efficient because we have eliminated scrolling from the user experience.
  45. Collapsible content sets 68 Example: ch6/collapsible-set.html Book: p140 NOTE: A

    collapsible block allows you to have many blocks expanded or collapsed at once. Collapsible sets only allow one segment open at a time.
  46. Themes 69 Examples: •ch7/theme-list1.html •ch7/theme-list2.html Book: p147 TIP: If you

    plan to style your entire jQuery Mobile application with custom themes it is recommended to use the structure-only CSS file from jQuery Mobile’s download site (http:/ /jquerymobile.com/download). This is a lightweight alternative for applications that do not need the default themes and it simplifies the management of the custom themes.
  47. Theme defaults & inheritance 71 Examples: •ch7/theme-defaults.html •ch7/theme-inheritance.html Book: p153

    NOTE: All components will inherit the theme of the page container. The page defaults to the “ a” theme.
  48. Themes and min-height 72 Example: ch7/min-height.html Book: p158 TIP: By

    default, the minimum height of the content container will only stretch the height of the components inside. This is an issue when the theme of the content is different than the theme of its page container. We can remedy this issue with CSS. For instance, we can set the minimum height of our content container to the height of the screen (see min-height.html): .ui-content { min-height:inherit; }
  49. Open bonus/exercises/ex3/index.html. Create a custom “red” theme for dangerous actions

    (delete buttons). When complete, the solution should appear as shown above. In Themeroller, complete the following tasks: 1) Import the existing custom-theme.css file. 2) Create a new red color for the “c” swatch. 3) Export the new theme, import it into your exercise and set the new red swatch for all dangerous buttons. 4) The CSS solution for the exercise can be found at bonus/exercises/ex3/css/custom-theme- solution.css Exercise #3 - Creating a custom theme 73
  50. Configuring jQuery Mobile 74 Example: ch8/config.html Book: p171 Online: http://api.jquerymobile.com/global-config/

    $(document).on("mobileinit", function(){ $.mobile.ajaxEnabled = false; // Disable ajax $.mobile.defaultPageTransition = "slide"; $.mobile.loader.prototype.options.text = "Loading..."; }); TIP: To load scripts dynamically by page see bonus/config/js/load-scripts-dynamically.js TIP: To manually remove cached pages from the DOM see bonus/config/js/backbone.js
  51. $.mobile API 75 <input type=button id="changePage" value="Open dynamic page"> !

    ! ! <script> $( "#changePage" ).on( "click", function() { // Create page markup var newPage = $("<div data-role=header><h1>Hi</h1></div>Hello Again!"); // Add page to page container newPage.appendTo( $.mobile.pageContainer ); // Enhance and open new page $( “body”).pagecontainer( “change”, newPage ); }); </script>
  52. jQuery Mobile methods 76 Examples: ch8/changePage-dynamic.html Book: p176 Online: http://api.jquerymobile.com/category/methods/

    .pagecontainer( “change” #page);! .pagecontainer( “load” “page.html”);! $.mobile.loading( “show” );! $.mobile.path.parseUrl();! .pagecontainer( “getActivePage” );
  53. pagebeforechange pagecontainerbeforeload pagebeforecreate Load page Page enhancements pagecreate DOM “Ready”

    pagecontainerload pagecontainerbeforeshow Page transition pagecontainershow pagechange Triggered on document Triggered on page Triggered on page container mobileinit pagecontainertransition pagecontainerbeforetransition No Page transition pagebeforecreate Page enhancements pagecreate DOM “Ready” pagebeforechange pagebeforechange pagecontainerbeforetransition pagecontainerbeforehide pagecontainerbeforeshow pagechange pagecontainertransition pagecontainerhide pagecontainershow Complete Yes Setup config settings Complete Change Page Is cached ! page? Change Page Events diagram
  54. Listview auto-complete jQ uery M obile 1.3 <ul data-filter="true" data-filter-reveal="true"

    data-filter-placeholder="Search contacts..."> Examples: •bonus/1.3/listview-autocomplete-local.html •bonus/1.3/listview-autocomplete-remote.html 83
  55. File input support jQ uery M obile 1.3 <input type="file"

    name="avatar"> Example: •bonus/1.3/file-input.html 84
  56. More new features... jQ uery M obile 1.3 Dual range

    slider data-clear-btn=”true” New icons •New demo & API sites •jQuery 1.9.1 (and 2.0.0) support 85
  57. 1)Add a sliding drawer to your existing Disney home page.

    The drawer will contain the navigational menu for the site. 2)Add a two-column responsive grid to your existing Disney home page. These two blocks will contain promotional text with an optional image. 3)The solution for the exercise can be found at bonus/exercises/ex4/index.html. Ex #4 - Sliding drawer & responsive grid 86
  58. Ajax include pattern http://filamentgroup.com/lab/ajax_includes_modular_content/ NOTE: Technology articles are only loaded

    when min-width: 30em NOTE: Entertainment articles are lazy loaded after page load 91
  59. Prefer Native jQuery Mobile Widgets Custom message box adds overhead

    Native inset list uses 80% less CSS! Compatible across all browsers! Simplifies maintenance! 93
  60. Remove Unused Themes <head> ! <meta charset="utf-8"> <title>Custom Theme</title> <meta

    name="viewport" content="width=device-width, initial-scale=1"> <link rel=stylesheet href="css/theme/custom-theme.css" /> <link rel=stylesheet href="css/structure/jquery.mobile.structure.css"/> <script type="text/javascript" src="jquery-min.js"></script> <script type="text/javascript" src="jquery.mobile-min.js"></script> </head> jQuery Mobile’s structure file without default theme 94
  61. Remove Unused Plugins Download Builder •grid •navbar •select •slider •textinput

    •transitions •checkboxradio •collapsible •collapsibleset •controlgroup •fieldContain •fixedToolbar http://jquerymobile.com/download-builder/ 95
  62. Cache highly accessed read-only pages <div data-role="page" data-dom-cache="true"> <div data-role="header">

    <h1>Popular Page</h1> </div> ! <div class=“ui-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit nisl et tortor tincidunt mattis. </div> </div> 96
  63. Prefer the CDN-hosted resources <head> <meta charset="utf-8"> <title>CDN Hosted minified

    and gzipped jQuery Mobile files</title> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;"> <link rel="stylesheet" href="http://code.jquery.com/jquery.mobile.min.css" /> <script src="http://code.jquery.com/jquery.min.js"></script> <script src="http://code.jquery.com/jquery.mobile.min.js"></script> </head> Example: bonus/config/https/https-template.html 97
  64. Maps integration 101 Examples: •ch9/maps.html (Google) •bonus/maps/map.html (Google) •bonus/maps/bing/maps.html (Bing)

    Book: p222 NOTE: Nearly 75% of Web developers use Geolocation, making it the most popular HTML5 API.
  65. Client-side Twitter integration 102 Example: ch9/reviews.html Book: p202 TIP: To

    view all the data elements that are available from Twitter's search API, launch this string in your browser: “http:/ /search.twitter.com/ search.json?q=xmen”. This is the basic search API where the value of the “q” parameter is our searchable keyword(s). In this case, we are searching Twitter for any tweets with the keyword “xmen” in them.
  66. Client-side RSS integration 103 Example: bonus/rss/rss.html NOTE: Most social media

    sites have a public API for accessing their data: Twitter: http:/ /dev.twitter.com LinkedIn: http:/ /developer.linkedin.com/rest Facebook: http:/ /developers.facebook.com
  67. In this demo we show you how to: • Use

    backbone and require.js for client-side MVC integration. • How to use the multi-page template to load all pages in a single request. • How to load data from Twitter's Restful API. • How to cache the Twitter resultset in localStorage. Backbone and Require.JS 104