Progressive EnhancementUses the HTML5 data-* jQuery Mobile: For Fun and Profit

Daniel CousineauInteractive Software Engineer @ RAPPhttp://dcousineau.com/@dcousineaudcousineau@gmail.com

What Is jQuery Mobile?

Multi PlatformImages from jquerymobile.com

Touch-optimized & ThemableImages from jquerymobile.com

Mobile Web FrameworkUniﬁed User InterfaceMy Term: Half StackWidget LibraryTouch Events

Project Status As of October 19th, 2011: RC2 This talk centers around RC1

More DetailsBuilt on jQueryLightweight (12k compressed)Progressive EnhancementHTML5Accessibility baked-in (WAI-ARIA)Modular & Theme-able

jQuery Mobile Primer

ProvidedInterface elementsSimple device orientation detectionTap & mobile eventsDOES NOT PROVIDE Geo Location, Canvas, LocalStorage, etc. Remember: A ‘HALF’ STACK

<!DOCTYPE html> <!DOCTYPE html><html> <html> <head> <title>Page Title</title> <head> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <title>Hello World</title> <script type="text/javascript" src="/path/to/jquery.js"></script> <script src="path/to/sencha-touch.js" type="text/javascript"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" /> <body> <script type="text/javascript"> <div data-role="page"> new Ext.Application({ <div data-role="content"> launch: function() { <p>Hello World.</p> new Ext.Panel({ </div> fullscreen: true, </div> html: Hello World! </body></html> }); } }); </script> </head> <body></body> </html> Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World

<!DOCTYPE html> <!DOCTYPE html><html> <html> <head> <title>Page Title</title> <head> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <title>Hello World</title> <script type="text/javascript" src="/path/to/jquery.js"></script> <script src="path/to/sencha-touch.js" type="text/javascript"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" /> <body> <script type="text/javascript"> <div data-role="page"> new Ext.Application({ <div data-role="content"> launch: function() { <p>Hello World.</p> new Ext.Panel({ </div> fullscreen: true, </div> html: Hello World! </body></html> }); } }); </script> Semantic & </head> <body></body> Progressive Refinement </html> Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World

In The Beginning<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script></head><body></body></html>

ConfigurationConfiguration ONLY in mobileinit listenerAll mobileinit listeners defined BEFORE loadingjQuery Mobile

In The Beginning<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, { configurationKey: configurationValue }); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script></head><body></body></html>

Think In Pages<div data-role=”page” />Only 1 visible at any timeMultiple allowed per document You can write a single-ﬁle applicationContains header, footer, and content area

<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, {} ); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script></head><body><div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div></div></body></html>

Progressive EnhancementUses the HTML5 data-* attributes to auto-enhanceand conﬁgure widgetsdata-role is now the center of your world.E.g. To create a button, add a <a href=”#” data-role=”button”>LABEL</a> and jQuery Mobile willautomagically set it up during page creation.

<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, {} ); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script></head><body><div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <a href="#">Normal Link</a> <a href="#" data-role="button">Button</a> </div> <div data-role="footer"> <h4>Page Footer</h4> </div></div></body></html>

jQuery Mobile.com Docs http://jquerymobile.com/demos/1.0rc1

Load jQueryMobile JS mobileinit domready pagebeforechange pagebeforecreate Enhance Page pagecreate pagehide pagebeforeshow pagebeforehide Navigate pageshow pagechange

Touch Events tap taphold swipe swipeleft swiperight orientationchange scrollstart scrollstop

Normalized “Virtual” Events vmouseover vmousedown vmousemove vmouseup vclick vmousecancel

Auto-‘AJAX’By default, all local links get a click listenerCan be disabledOverrides default action: Fires XMLHTTP request for target Pulls <div data-role=”page”></div> from results, inserts into DOM Transitions to displaying the new target page

Auto-‘AJAX’By default, all local forms get a submission handlerSame process as links, only overriding for form submit

Auto-‘AJAX’CAUTION: There is no baked-in way to passparameters to AJAX’ed pagesSever side via GET requests to back-endUse #page?key=value, manually parse window.locationDisable / override hash listener

Learn By Doing

Code Time...https://github.com/dcousineau/jQuery-Mobile-For-Fun-And-Proﬁt http://jquerymobile.com/demos/1.0rc1

Wrap Up

http://jqmgallery.com/

Resources@jquerymobilehttp://jquerymobile.com/blog/http://jquerymobile.com/demos/1.0rc1

Advanced LearningPanel / iPad Ready Layouts http://asyraf9.github.com/jquery-mobile/

http://joind.in/3762