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

17. None

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