Getting Started with jQuery Mobile

Transcript

1. Getting started with jQuery Mobile @BradBroulik BradBroulik.blogspot.com Slides: bit.ly/codecamp-jqm
2. Follow along: bit.ly/codecamp-jqm http://farm6.staticflickr.com/5262/5565984041_8e335f0ec0.jpg
3. Sent text message Used application Used browser Accessed social networking site Played games Listened to music 28.7% 33.7% 39.2% 52.1% 54.2% 75.9% Top Mobile Activities Mobile Content Usage (U.S.) 3 Month Avg. Ending Nov. 2012 vs. 3 Month Avg. Ending Aug. 2012 Source: comScore MobiLens
4. Facebook’s top mobile client is mobile web http://www.mobify.com/blog/mobile-stats-57-of-mobile-posting-on-facebook-from-mobile-web/
5. Twitter’s top mobile client is also mobile web Twitter via http://www.lukew.com/ff/entry.asp?1413
6. “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
7. Simplify the journey http://i132.photobucket.com/albums/q24/BluSky07/MOBILE%20GAMES%202/OregonTrailv321.png
8. One codebase... CSS3
9. no device customer left behind iOS Android Blackberry Windows WebOS Meego Kindle Nook Desktop Bada
10. Simplified Markup-Driven Development <div data-role="page"> <div data-role="header"> <h1>Page Header</h1> </div> <div data-role="content"> <p>Hello jQuery Mobile!</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div>
11. Unified User Interface
12. A-Grade experience C-Grade experience Progressive Enhancement
13. Responsive Design
14. Portrait Landscape Responsive Forms
15. Default Theme Alternate Theme Themable Styling
16. Accessible
18. http://www.flickr.com/photos/wongdood/3379046643/sizes/z/in/photostream/ Getting Started in 60 seconds
19. 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>
20. 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
21. 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>
22. More enhancements... <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Now Playing</li> <li> <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>
23. Add theming and branding <div data-role="header" data-theme="b"> <h1>Movies</h1> </div> <div data-role="content"> <ul data-role="listview" data-theme="a"> <li data-role="list-divider">Now Playing</li> <li> <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>
24. ThemeRoller http://jquerymobile.com/themeroller/
25. Single vs multi-page template <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 data-role="content"> Contact information... </div> </div> </body>
26. Single-page + prefetch <body> <div data-role="header"> <h1>Prefetch</h1> </div> <a href="contact.html" data-prefetch="true">Contact Us</a> </body>
27. Ajaxified Navigation
28. Step 1, tap the button to navigate to another page Ajaxified Navigation
29. Step 2, framework loads the next page side-by-side Ajaxified Navigation
30. Ajaxified Navigation Step 3, framework transitions to next page
31. Ajaxified Navigation Step 4, transition complete
32. Transitions <a href="#" data-role="button" data-transition="slide">slide</a>
33. Popups Usecases: •alerts •dialogs •tooltips •menus •forms •anything... <div data-role="popup" id="popupWarning"> <div data-role="header" class="ui-corner-top"> <h1>Warning</h1> </div> <div data-role="content" class="ui-corner-bottom"> <p>No internet connection. Please try again later.</p> <a href="#" data-role="button" data-rel="back">OK</a> </div> </div> <a href="#popupWarning" data-rel="popup" data-role="button">Popup</a> $('#popupWarning').popup( "open" ); // Or dynamically open popup
34. <div data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#" id="home" data-icon="home" class="ui-btn-active">Home</a></li> <li><a href="#" id="movies" data-icon="star">Movies</a></li> <li><a href="#" id="theatres" data-icon="grid">Theatres</a></li> </ul> </div> </div> Tab bars icon name standard icons custom icons
35. Segmented Control <div class="segmented-control ui-bar-d"> <div data-role="controlgroup" data-type="horizontal"> <a href="#in-theatres" data-role="button" data-theme="b">In Theatres</a> <a href="#coming-soon" data-role="button" data-theme="d">Coming Soon</a> <a href="#top-rated" data-role="button" data-theme="d">Top Rated</a> </div> </div> <style> .segmented-control { text-align:center;} .segmented-control .ui-controlgroup { margin: 0.2em; } </style>
36. Keyboard sensitive input types
37. Radio & Checkbox
38. Slider & Switch
39. Grids
40. Gradients
41. Themes: defaults & inheritance page theme set to “e”
42. Events Diagram mobileinit $(document).on("mobileinit", function(){ $.mobile.defaultPageTransition = "slide"; $.mobile.ajaxEnabled = false; }); pageinit $(document).on("pageinit", "#my-page", function(e) { // Setup event handler for login button $("#loginButton").on("click", function (e) { alert("Login clicked..."); }); });
43. <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 $.mobile.changePage( newPage ); }); </script> $.mobile API
44. Panels (sliding drawer) jQ uery M obile 1.3
45. Responsive tables jQ uery M obile 1.3
46. Responsive tables jQ uery M obile 1.3
47. Responsive grids jQ uery M obile 1.3
48. More new features... jQ uery M obile 1.3 Listview autocomplete data-clear-btn=”true” New icons
49. Inspiration jqmgallery.com
50. http://codiqa.com/
51. Adobe Shadow http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow/ Simplifies multi-device testing
52. + =
53. http://www.flickr.com/photos/oddne/3838032598/sizes/l/in/photostream/ How can we gain a performance advantage?
54. Prefer Native jQuery Mobile Widgets Custom message box adds overhead Native inset list uses 80% less CSS! Compatible across all browsers! Simplifies maintenance!
55. 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
56. Remove Unused Plugins Download Builder •grid •navbar •select •slider •textinput •transitions •checkboxradio •collapsible •collapsibleset •controlgroup •fieldContain •fixedToolbar http://jquerymobile.com/download-builder/
57. Cache highly accessed read-only pages <div data-role="page" data-dom-cache="true"> <div data-role="header"> <h1>Popular Page</h1> </div> <div data-role="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur hendrerit nisl et tortor tincidunt mattis. </div> </div>
58. 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/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> Example: bonus/config/https/https-template.html
59. Performance Analysis Tools http://developer.yahoo.com/yslow/mobile http://blaze.io/mobile
60. You have safely arrived at your destination http://i132.photobucket.com/albums/q24/BluSky07/MOBILE%20GAMES%202/OregonTrailv321.png
61. Resources • @jquerymobile • #jquerymobile
62. Questions? Can I integrate with Google or Bing Maps? What’s coming in the 1.4 release? Server-side versus client-side integration? Can I integrate with RESTful Services?
63. Thank You! @BradBroulik BradBroulik.blogspot.com Slides: bit.ly/codecamp-jqm