Rapidly Develop Mobile Web Applications with jQuery Mobile
Upcoming SlideShare
Loading in...5
×
 

Rapidly Develop Mobile Web Applications with jQuery Mobile

on

  • 3,420 views

This case study focuses on how to effectively use jQuery Mobile to develop robust, cross-platform, mobile web applications. We’ll present an overview of jQuery Mobile, outlining the goals and aims ...

This case study focuses on how to effectively use jQuery Mobile to develop robust, cross-platform, mobile web applications. We’ll present an overview of jQuery Mobile, outlining the goals and aims of the project and the pros and cons. You’ll learn the capabilities of jQuery Mobile, walk through the API and review current, sample applications. You’ll also look at an app appendTo has built that demonstrates how easy and efficient it is to build an application with jQuery Mobile.

Statistics

Views

Total Views
3,420
Slideshare-icon Views on SlideShare
3,378
Embed Views
42

Actions

Likes
4
Downloads
74
Comments
0

4 Embeds 42

http://thenativeapp.com 27
http://paper.li 7
http://www.linkedin.com 6
http://a0.twimg.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Rapidly Develop Mobile Web Applications with jQuery Mobile Rapidly Develop Mobile Web Applications with jQuery Mobile Presentation Transcript

    • Rapidly Develop Mobile Web Applications with @mikehostetlerWednesday, October 19, 11
    • Who am I? @mikehostetlerWednesday, October 19, 11
    • @mikehostetlerWednesday, October 19, 11
    • @mikehostetlerWednesday, October 19, 11
    • @mikehostetlerWednesday, October 19, 11
    • http://learn.appendto.com @mikehostetlerWednesday, October 19, 11
    • @mikehostetlerWednesday, October 19, 11
    • Many More ... @mikehostetlerWednesday, October 19, 11
    • The Mobile Frontier ... @mikehostetlerWednesday, October 19, 11
    • 6.9 Billion People @mikehostetlerWednesday, October 19, 11
    • Mobile is available to 90% @mikehostetlerWednesday, October 19, 11
    • 5.3 Billion+ Active Subscriptions http://www.itu.int/ITU-D/ict/material/FactsFigures2010.pdf @mikehostetlerWednesday, October 19, 11
    • 7% of US Traffic comes from SmartPhones and Tablets http://www.comscore.com/Press_Events/Press_Releases/2011/10/ Smartphones_and_Tablets_Drive_Nearly_7_Percent_of_Total_U.S._Digital_Traffic @mikehostetlerWednesday, October 19, 11
    • 10+ billion by 2013 @mikehostetlerWednesday, October 19, 11
    • @mikehostetlerWednesday, October 19, 11
    • Know Better ... Do Better ? @mikehostetlerWednesday, October 19, 11
    • The is the web People expect it to work everywhere @mikehostetlerWednesday, October 19, 11
    • The Solution? @mikehostetlerWednesday, October 19, 11
    • @mikehostetlerWednesday, October 19, 11
    • jQuery Philosophy ... @mikehostetlerWednesday, October 19, 11
    • Unified System Universal Access Easy Development @mikehostetlerWednesday, October 19, 11
    • One Codebase - Multiple Platforms @mikehostetlerWednesday, October 19, 11
    • Desktop Too! @mikehostetlerWednesday, October 19, 11
    • In <3 with Web Standards @mikehostetlerWednesday, October 19, 11
    • Built on jQuery Core ... @mikehostetlerWednesday, October 19, 11
    • Familiar API Style It’s just jQuery! $( document ).delegate( ".city", "click", function ( e ) { $( "#dialog" ).one( "pagehide", function () { $.mobile.changePage( cities.php ); }).dialog( "close" ); }); @mikehostetlerWednesday, October 19, 11
    • Small Filesize @mikehostetlerWednesday, October 19, 11
    • Mobile Browser Grades C Basic HTML B Enhanced experience without Ajax Full experience with Ajax-based A animated page transitions. @mikehostetlerWednesday, October 19, 11
    • Graded Browser Support @mikehostetlerWednesday, October 19, 11
    • Doesn’t Break the Web @mikehostetlerWednesday, October 19, 11
    • Unified Experience @mikehostetlerWednesday, October 19, 11
    • Accessible @mikehostetlerWednesday, October 19, 11
    • Normalizes Input Paradigms @mikehostetlerWednesday, October 19, 11
    • Compiles to Native + = @mikehostetlerWednesday, October 19, 11
    • The Con’s ... @mikehostetlerWednesday, October 19, 11
    • Perceived Performance @mikehostetlerWednesday, October 19, 11
    • Native Look & Feel vs. @mikehostetlerWednesday, October 19, 11
    • Device API’s @mikehostetlerWednesday, October 19, 11
    • Offline Access ( ) @mikehostetlerWednesday, October 19, 11
    • These are hard problems ... @mikehostetlerWednesday, October 19, 11
    • Choose the right tool ... @mikehostetlerWednesday, October 19, 11
    • Current Project Status @mikehostetlerWednesday, October 19, 11
    • Just released jQuery Mobile RC1 @mikehostetlerWednesday, October 19, 11
    • @mikehostetlerWednesday, October 19, 11
    • @mikehostetlerWednesday, October 19, 11
    • @mikehostetlerWednesday, October 19, 11
    • More at http://jqmgallery.com @mikehostetlerWednesday, October 19, 11
    • Standard in Adobe CS5.5 @mikehostetlerWednesday, October 19, 11
    • Shipping in Visual Studio Soon ... @mikehostetlerWednesday, October 19, 11
    • Lets dive in ... @mikehostetlerWednesday, October 19, 11
    • Download the code http://jquerymobile.com/download https://github.com/jquery/jquery-mobile or use a CDN ... @mikehostetlerWednesday, October 19, 11
    • Pages @mikehostetlerWednesday, October 19, 11
    • Your First Page! <!DocType HTML> <html> <head> <meta charset=”utf-8”> <title>My first jQuery Mobile Page!</title> </head> <body> .... </body> </html> @mikehostetlerWednesday, October 19, 11
    • Add the <script> tags ... <!DocType HTML> <html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.js"></script> </head> .... </html> @mikehostetlerWednesday, October 19, 11
    • Add the <script> tags ... <!DocType HTML> <html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.js"></script> </head> .... </html> @mikehostetlerWednesday, October 19, 11
    • Add the <script> tags ... <!DocType HTML> <html> <head> .... <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0rc1/ jquery.mobile-1.0rc1.min.js"></script> </head> .... </html> @mikehostetlerWednesday, October 19, 11
    • Building your Page <body> <div data-role=”page”> <p>Hello World!</p> </div> </body> @mikehostetlerWednesday, October 19, 11
    • The role of data attributes ... <body> <div data-role=”page”> <p>Hello World!</p> </div> </body> @mikehostetlerWednesday, October 19, 11
    • Full Sample Page <body> <div data-role=”page”> <div data-role=”header”> ... </div> <div data-role=”content”> ... </div> <div data-role=”footer”> ... </div> </div> </body> @mikehostetlerWednesday, October 19, 11
    • Lists @mikehostetlerWednesday, October 19, 11
    • Basic List <div data-role=”content”> <h2>Hello World!</h2> <ul> <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ul> </div> @mikehostetlerWednesday, October 19, 11
    • Add the List View Role <div data-role=”content”> <h2>Hello World!</h2> <ul data-role="listview"> <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ul> </div> @mikehostetlerWednesday, October 19, 11
    • Inset Style <div data-role=”content”> <h2>Hello World!</h2> <ul data-role="listview" data-inset="true" > <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ul> </div> @mikehostetlerWednesday, October 19, 11
    • Add Links <ul data-role="listview" data-inset="true"> <li> <a href=”http://jquery.com”> jQuery </a> </li> ... </ul> @mikehostetlerWednesday, October 19, 11
    • More Examples ... @mikehostetlerWednesday, October 19, 11
    • Ordered Lists <div data-role=”content”> <h2>Hello World!</h2> <ol data-role="listview"> <li>jQuery</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li>QUnit</li> </ol> </div> @mikehostetlerWednesday, October 19, 11
    • Nested Lists = Drillable Pages @mikehostetlerWednesday, October 19, 11
    • Count Bubbles <ul data-role="listview"> <li><a href=”http://jquery.com”> jQuery <span class="ui-li-count">1.6.4</span> </a></li> ... </ul> @mikehostetlerWednesday, October 19, 11
    • List Dividers <ul data-role="listview"> <li data-role="list-divider">Core</li> <li>jQuery</li> <li data-role="list-divider">UI</li> <li>jQuery UI</li> <li>jQuery Mobile</li> <li data-role="list-divider">Testing</li> <li>QUnit</li> </ul> @mikehostetlerWednesday, October 19, 11
    • Filter Bar <div data-role=”content”> <h2>Hello World!</h2> <ul data-role="listview" data-filter="true"> .... </ul> </div> @mikehostetlerWednesday, October 19, 11
    • Adding List Items @mikehostetlerWednesday, October 19, 11
    • Append, then Refresh! $(‘ul#jquery’). .append( ‘<li><a href=”http://sizzlejs.com”>Sizzle JS</a></li>’ ).listview( ‘refresh’ ); @mikehostetlerWednesday, October 19, 11
    • Theming @mikehostetlerWednesday, October 19, 11
    • Basic Theming <div data-role=”page” data-theme=”a”> <div data-role=”content”> .... </div> </div> @mikehostetlerWednesday, October 19, 11
    • Side by Side @mikehostetlerWednesday, October 19, 11
    • ThemeRoller @mikehostetlerWednesday, October 19, 11
    • Links & Navigation @mikehostetlerWednesday, October 19, 11
    • External Links <ul data-role="listview" data-inset="true" data-theme=”e”> <li> <a href=”http://jquery.com”> jQuery </a> </li> ... </ul> @mikehostetlerWednesday, October 19, 11
    • Internal + Hijax + DOM Injection <ul data-role="listview" data-inset="true" data-theme=”e”> Click! <li> <a href=”jquery.html”> jQuery </a> </li> ... </ul> @mikehostetlerWednesday, October 19, 11
    • Internal + Hijax + DOM Injection /index.html /jquery.html @mikehostetlerWednesday, October 19, 11
    • Internal + Hijax + DOM Injection /index.html /jquery.html @mikehostetlerWednesday, October 19, 11
    • Internal + Hijax + DOM Injection /index.html /jquery.html @mikehostetlerWednesday, October 19, 11
    • Transitions @mikehostetlerWednesday, October 19, 11
    • External Links <ul data-role="listview" data-inset="true" data-theme=”e”> <li> <a href=”http://jquery.com” data-transition="pop"> jQuery a’ Poppin </a> </li> ... </ul> @mikehostetlerWednesday, October 19, 11
    • Multi-Page & Pre-Fetch @mikehostetlerWednesday, October 19, 11
    • Multiple Pages, One DOM <body> <div data-role=”page” id=”page1”> <p>Hello World!</p> </div> <div data-role=”page” id=”page2”> <p>Hello World!</p> </div> </body> @mikehostetlerWednesday, October 19, 11
    • Pre-Fetching <body> <div data-role=”page” id=”page1”> <p>Hello World!</p> <a href="prefetchMe.html" data-prefetch> ... </a> </div> <div data-role=”page” id=”page2”> <p>Hello World!</p> </div> </body> @mikehostetlerWednesday, October 19, 11
    • Forms @mikehostetlerWednesday, October 19, 11
    • Basic Form with Labels <div data-role="content"> <form action="#" method="get"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </form> </div> @mikehostetlerWednesday, October 19, 11
    • Containers <div data-role="content"> <form action="#" method="get"> <div data-role="fieldcontain"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </div> </form> </div> @mikehostetlerWednesday, October 19, 11
    • Optimized for Width Changes @mikehostetlerWednesday, October 19, 11
    • Progressive Enhancement @mikehostetlerWednesday, October 19, 11
    • Text Input <div data-role="content"> <form action="#" method="get"> <div data-role="fieldcontain"> <label for="example">Example:</label> <input type="text" name="example" value="" /> </div> </form> </div> @mikehostetlerWednesday, October 19, 11
    • Text Input Helpers ”password” ”email” ”tel” @mikehostetlerWednesday, October 19, 11
    • Text Area’s Grow @mikehostetlerWednesday, October 19, 11
    • Flip Switch <form action="#" method="get"> <div data-role="fieldcontain"> <label for="slide">Flip switch:</label> <select name="slide" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> </div> </form> </div> @mikehostetlerWednesday, October 19, 11
    • Radio Buttons <form action="#" method="get"> <div data-role="fieldcontain"> <input type="radio" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form> </div> @mikehostetlerWednesday, October 19, 11
    • Checkboxes Too <form action="#" method="get"> <div data-role="fieldcontain"> <input type="checkbox" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form> </div> @mikehostetlerWednesday, October 19, 11
    • Horizontal Set <form action="#" method="get"> <div data-role="fieldcontain" data-type=”horizontal”> <input type="checkbox" name="choice-1" value="choice-1"> <label for="choice-1">Apples</label> </div> ... </form> </div> @mikehostetlerWednesday, October 19, 11
    • Select Lists <form action="#" method="get"> <div data-role="fieldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1"> <option value="std">Standard: 7 day </option> ... </select> </div> </form> </div> @mikehostetlerWednesday, October 19, 11
    • Select Lists <form action="#" method="get"> <div data-role="fieldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1"> <option value="std">Standard: 7 day </option> ... </select> </div> </form> </div> @mikehostetlerWednesday, October 19, 11
    • Select Lists - Non-Native <form action="#" method="get"> <div data-role="fieldcontain"> <label for="choice-1"> Choose shipping method:</label> <select name="choice-1" data-native-menu="false"> <option value="std">Standard: 7 day </option> ... </select> </div> </form> @mikehostetlerWednesday, October 19, 11
    • Extra’s @mikehostetlerWednesday, October 19, 11
    • Dialog’s <div data-role="content"> <a href="foo.html" data-rel="dialog">Open dialog</a> </div> @mikehostetlerWednesday, October 19, 11
    • Button’s <div data-role="content"> <a href="#" data-role="button"> Link Button</a> <a href="#" data-role="button" data-icon="star">Star Icon!</a> </div> @mikehostetlerWednesday, October 19, 11
    • Toolbar’s <div data-role="page"> <div data-role="header" data-position="inline"> <a href="index.html" data-icon="delete">Cancel</a> <h1>Edit Contact</h1> <a href="index.html" data-icon="check">Save</a> </div> </div> @mikehostetlerWednesday, October 19, 11
    • Navbar’s <div data-role="page"> .... <div data-role="footer"> <div data-role="navbar"> <ul> <li>Summary</li> ... </ul> </div> </div> </div> @mikehostetlerWednesday, October 19, 11
    • Fixed Positioning <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Fixed toolbars</h1> </div> </div> @mikehostetlerWednesday, October 19, 11
    • Persistent Footer Bar <div data-role="footer"> <div data-role="navbar" class="ui-state-persist"> <p><a href=”#”>Friends</a></p> </div> </div> @mikehostetlerWednesday, October 19, 11
    • Events @mikehostetlerWednesday, October 19, 11
    • New Events ‣ tap, taphold ‣ swipe, swipeleft, swiperight ‣ scrollstart, scrollstop ‣ orientationchange ‣ Page Load: pageloadbefore, pageload, pageloadfailed ‣ Page Change: pagechangebefore, pagechange, pagechangefailed ‣ Many More! @mikehostetlerWednesday, October 19, 11
    • Virtual Mouse Events ‣ vmouseover ‣ vmousedown ‣ vmousemove ‣ vmouseup ‣ vmouseclick - WARNING! ‣ vmousecancel @mikehostetlerWednesday, October 19, 11
    • API Methods @mikehostetlerWednesday, October 19, 11
    • Changing Pages // Mimic’s a ‘tap’ or ‘click’ $.mobile.changePage( ‘about/us.html’ OR $(‘#about’), { /* options */ } ); // Fetches external URL, inserts it into the DOM $.mobile.loadPage( ‘about/us.html’, { /* options */ } ); @mikehostetlerWednesday, October 19, 11
    • Loading Message $.mobile.showLoadingMessage() $.mobile.hideLoadingMessage() @mikehostetlerWednesday, October 19, 11
    • The Data Question ... @mikehostetlerWednesday, October 19, 11
    • Those data- attributes ... Don’t use: $.data Use: jqmData() and jqmRemoveData() @mikehostetlerWednesday, October 19, 11
    • URL’s & Paths @mikehostetlerWednesday, October 19, 11
    • URL’s & Paths $.mobile.path URL: http://jblas:password@mycompany.com:8080/mail/inbox? msg=1234&type=unread#msg-content obj = { domain: ‘http://jblas:password@mycompany.com:8080’, host: ‘mycompany.com:8080’, pathname: ’/mail/inbox’, directory: ‘/mail/’ } @mikehostetlerWednesday, October 19, 11
    • Thanks to the Filament Group! http://filamentgroup.com @mikehostetlerWednesday, October 19, 11
    • Thanks to the jQuery Mobile Team! @mikehostetlerWednesday, October 19, 11
    • Thanks to the Sponsors! @mikehostetlerWednesday, October 19, 11
    • Thank You! @mikehostetler http://mike-hostetler.com http://learn.appendto.com Links: http://bitly.com/neWK0v Rate: http://j.mp/nQgs8V @mikehostetlerWednesday, October 19, 11