Rapidly Develop Mobile Web Applications with jQuery Mobile

@mikehostetler

Rapidly Develop Mobile Web Applications with

Wednesday, October 19, 11

@mikehostetler

Who am I?


@mikehostetler


@mikehostetler


@mikehostetler


@mikehostetler

http://learn.appendto.com




@mikehostetler


@mikehostetler

Many More ...


@mikehostetler

The Mobile Frontier ...


@mikehostetler

6.9 Billion People


@mikehostetler

Mobile is available to 90%


@mikehostetler

5.3 Billion+ Active Subscriptions

http://www.itu.int/ITU-D/ict/material/FactsFigures2010.pdf




@mikehostetler

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






@mikehostetler

10+ billion by 2013


@mikehostetler


@mikehostetler

Know Better ... Do Better

?


@mikehostetler

The is the webPeople expect it to work everywhere


@mikehostetler

The Solution?


@mikehostetler


@mikehostetler

jQuery Philosophy ...


@mikehostetler

Unified System

Universal Access

Easy Development


@mikehostetler

One Codebase - Multiple Platforms


@mikehostetler

Desktop Too!


@mikehostetler

In <3 with Web Standards


@mikehostetler

Built on jQuery Core ...


@mikehostetler

Familiar API Style

It’s just jQuery!

$( document ).delegate( ".city", "click", function ( e ) { $( "#dialog" ).one( "pagehide", function () { $.mobile.changePage( 'cities.php' ); }).dialog( "close" ); });


@mikehostetler

Small Filesize


@mikehostetler

Mobile Browser Grades

Basic HTMLCBA

Enhanced experience without Ajax

Full experience with Ajax-based animated page transitions.


@mikehostetler

Graded Browser Support


@mikehostetler

Doesn’t Break the Web


@mikehostetler

Unified Experience


@mikehostetler

Accessible


@mikehostetler

Normalizes Input Paradigms


@mikehostetler

Compiles to Native

+ =


@mikehostetler

The Con’s ...


@mikehostetler

Perceived Performance


@mikehostetler

Native Look & Feel

vs.


@mikehostetler

Device API’s


@mikehostetler

Offline Access

( )


@mikehostetler

These are hard problems ...


@mikehostetler

Choose the right tool ...


@mikehostetler

Current Project Status


@mikehostetler

Just released jQuery Mobile RC1


@mikehostetler


@mikehostetler


@mikehostetler


@mikehostetler

More at http://jqmgallery.com


http://jqmgallery.com

http://jqmgallery.com

@mikehostetler

Standard in Adobe CS5.5


@mikehostetler

Shipping in Visual Studio Soon ...


@mikehostetler

Lets dive in ...


@mikehostetler

Download the code

http://jquerymobile.com/download https://github.com/jquery/jquery-mobile

or use a CDN ...


http://jquerymobile.com/download

http://jquerymobile.com/download

https://github.com/jquery/jquery-mobile

https://github.com/jquery/jquery-mobile

@mikehostetler

Pages


@mikehostetler

Your First Page!<!DocType HTML>

<html> <head> <meta charset=”utf-8”> <title>My first jQuery Mobile Page!</title> </head> <body> .... </body></html>


@mikehostetler

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>


http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css




http://code.jquery.com/jquery-1.6.4.min.js


http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js




@mikehostetler




</head> ....</html>












@mikehostetler




</head> ....</html>












@mikehostetler

Building your Page<body>

<div data-role=”page”>

<p>Hello World!</p>

</div>

</body>


@mikehostetler

The role of data attributes ...<body>

<div data-role=”page”>

<p>Hello World!</p>

</div>

</body>


@mikehostetler

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>


@mikehostetler

Lists


@mikehostetler

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>


@mikehostetler

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>


@mikehostetler

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>


@mikehostetler

Add Links <ul data-role="listview" data-inset="true"> <li> <a href=”http://jquery.com”> jQuery </a> </li> ... </ul>


http://jquery.com

http://jquery.com

@mikehostetler

More Examples ...


@mikehostetler

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>


@mikehostetler

Nested Lists = Drillable Pages


@mikehostetler

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>


http://jquery.com

http://jquery.com

@mikehostetler

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>


@mikehostetler

Filter Bar<div data-role=”content”>

<h2>Hello World!</h2> <ul data-role="listview" data-filter="true"> .... </ul>

</div>


@mikehostetler

Adding List Items


@mikehostetler

Append, then Refresh!$(‘ul#jquery’).

.append(

‘<li><a href=”http://sizzlejs.com”>Sizzle JS</a></li>’

).listview( ‘refresh’ );


http://sizzlejs.com

http://sizzlejs.com

@mikehostetler

Theming


@mikehostetler

Basic Theming<div data-role=”page” data-theme=”a”>

<div data-role=”content”> .... </div>

</div>


@mikehostetler

Side by Side


@mikehostetler

ThemeRoller


@mikehostetler

Links & Navigation


@mikehostetler

External Links <ul data-role="listview" data-inset="true" data-theme=”e”> <li> <a href=”http://jquery.com”> jQuery </a> </li> ... </ul>


http://jquery.com

http://jquery.com

@mikehostetler

Internal + Hijax + DOM Injection <ul data-role="listview" data-inset="true" data-theme=”e”> <li> <a href=”jquery.html”> jQuery </a> </li> ... </ul>

Click!


http://jquery.com

http://jquery.com

@mikehostetler

Internal + Hijax + DOM Injection

/index.html /jquery.html


@mikehostetler


/jquery.html/index.html


@mikehostetler


/jquery.html/index.html


@mikehostetler

Transitions


@mikehostetler

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>


http://jquery.com

http://jquery.com

@mikehostetler

Multi-Page & Pre-Fetch


@mikehostetler

Multiple Pages, One DOM<body>

<div data-role=”page” id=”page1”> <p>Hello World!</p> </div>


</body>


@mikehostetler

Pre-Fetching<body>

<div data-role=”page” id=”page1”> <p>Hello World!</p> <a href="prefetchMe.html" data-prefetch> ... </a> </div>


</body>


@mikehostetler

Forms


@mikehostetler

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>


@mikehostetler

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>


@mikehostetler

Optimized for Width Changes


@mikehostetler

Progressive Enhancement


@mikehostetler

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>


@mikehostetler

Text Input Helpers

”password” ”email” ”tel”


@mikehostetler

Text Area’s Grow


@mikehostetler

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>


@mikehostetler

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>


@mikehostetler

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>


@mikehostetler

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>


@mikehostetler

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>


@mikehostetler

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>


@mikehostetler

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>


@mikehostetler

Extra’s


@mikehostetler

Dialog’s<div data-role="content">

<a href="foo.html" data-rel="dialog">Open dialog</a>

</div>


@mikehostetler

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>


@mikehostetler

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>


@mikehostetler

Navbar’s<div data-role="page"> .... <div data-role="footer">

<div data-role="navbar"> <ul> <li>Summary</li> ... </ul> </div> </div></div>


@mikehostetler

Fixed Positioning<div data-role="page">

<div data-role="header" data-position="fixed"> <h1>Fixed toolbars</h1> </div>

</div>


@mikehostetler

Persistent Footer Bar<div data-role="footer">

<div data-role="navbar" class="ui-state-persist"> <p><a href=”#”>Friends</a></p> </div></div>


@mikehostetler

Events


@mikehostetler

New Events

‣ tap, taphold

‣ swipe, swipeleft, swiperight

‣ scrollstart, scrollstop

‣orientationchange

‣ Page Load: pageloadbefore, pageload, pageloadfailed

‣ Page Change: pagechangebefore, pagechange, pagechangefailed

‣Many More!


@mikehostetler

Virtual Mouse Events

‣ vmouseover

‣ vmousedown

‣ vmousemove

‣ vmouseup

‣ vmouseclick - WARNING!

‣ vmousecancel


@mikehostetler

API Methods


@mikehostetler

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 */ });


@mikehostetler

Loading Message$.mobile.showLoadingMessage()

$.mobile.hideLoadingMessage()


@mikehostetler

The Data Question ...


@mikehostetler

Those data- attributes ...Don’t use:

$.data

Use:

jqmData() andjqmRemoveData()


@mikehostetler

URL’s & Paths


@mikehostetler

URL’s & Paths$.mobile.path

URL: http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread#msg-content

obj = { domain: ‘http://jblas:[email protected]:8080’, host: ‘mycompany.com:8080’, pathname: ’/mail/inbox’, directory: ‘/mail/’}


http://jblas:[email protected]:8080/mail/inbox?msg=1234&type=unread#msg-content




http://jblas:[email protected]:8080

http://jblas:[email protected]:8080

@mikehostetler

http://filamentgroup.com

Thanks to the Filament Group!




@mikehostetler

Thanks to the jQuery Mobile Team!


@mikehostetler

Thanks to the Sponsors!


@mikehostetler

Thank You!@mikehostetler

http://mike-hostetler.comhttp://learn.appendto.com

Links: http://bitly.com/neWK0vRate: http://j.mp/nQgs8V








http://bitly.com/neWK0v




Technology

Rapidly Develop Mobile Web Applications with jQuery Mobile