jQuery Mobile & PhoneGap

Up and Running with jQuery Mobile & PhoneGap Build @ChrisGriﬃth

ese opinions and thoughts are my own, and may or
may not re ect the opinions of the company that I work for. Disclaimer

e interface con guration is markup-driven, which means you can
pre y much create your entire basic app interface in HTML, without needing to write a single line of JavaScript. (Of course, you'll still need to write JavaScript if your app is to do anything useful!) What does jQuery Mobile do?

What pla5orms support jQuery Mobile?

<!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/ jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.js"></script> </head> <body> </body> </html>

<body> <div id="homePage"> <div> <h1>Page Title</h1> </div> <div> <p>My page
content</p> </div> <div> <h4>Footer</h4> </div> </div> </body>

data- a ributes are a wonderful new feature of HTML5
that let you add any a ributes you like to an element. All you have to do is start your a ribute name with the data- pre x. data-‐*

<body> <div id="homePage" data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div
data-role="content"> <p>My page content</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> </body>

<body> <div id="homePage" data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div
data-role="content"> <p>My page content</p> <p><a href="#about">About this app</a></p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <div data-role="page" id="about"> <div data-role="header"> <h1>About This App</h1> </div> <div data-role="content"> <p>This app rocks! <a href="#homePage">Go home</a></p> </div> </div> </body> Pages within pages

To turn a link into a bu on in jQuery
Mobile, simply add data-role="bu on" to the a tag: <a href="#about" data-role="button">About this app</a> Bu>ons

Lists are used for data display, navigation, result lists, and
data entry. jQuery Mobile includes a wide range of list types and forma ing examples to cover most common design pa erns. Lists

<li> <a href img src="images/rush.png" class="ui- li-thumb"> <h3 class="ui-li-heading">Fly by
Night</h3> <p class="ui-li-desc">(1975)</p> </a> </li> List Code -‐ Sample

<div data-role="page" id="twenty-one-twelve" data-add-back-btn="true"> OR <script> $(document).bind("mobileinit",
function(){ $.mobile.page.prototype.options.addBackBtn=true; }); </script> Back?

<div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a
href="#">Three</a></li> </ul> </div> </div> Tabs

Icons can be added to navbar items by adding the
data-icon a ribute specifying a standard mobile icon to each anchor. By default, icons are added above the text (data-iconpos="top"). e following examples add icons to a navbar in a footer. Icons in navbars

18x18 pixels saved as a PNG-‐8 with alpha transparency
.ui-icon-myapp-email { background-image: url("app-icon-email.png"); } 36x36 pixels saved as a PNG-‐8 with alpha transparency @media only screen and (-webkit-min-device-pixel-ratio: 2) { .ui-icon-myapp-email { background-image: url("app-icon-email-highres.png"); background-size: 18px 18px; } } Custom Icons

Fixed header markup example: <div data-role="header" data-position="fixed"> <h1>Fixed Header!</h1> </div>
Fixed footer markup example: <div data-role="footer" data-position="fixed"> <h1>Fixed Footer!</h1> </div> Fixed Toolbars

To tell the framework to apply the persistent behavior, add
a data-id a ribute to the footer of all HTML pages in the navigation set to the same ID. It's that simple: if the page you're navigating to has a header or footer with the same data-id, the toolbars will appear xed outside of the transition. Persistent Footer navigaKon bar

<div data-role="footer" data-id="myTabs" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="a.html">Friends</a></li> <li><a
href="b.html">Albums</a></li> <li><a href="c.html">Emails</a></li> <li><a href="d.html" >Info</a></li> </ul> </div> </div> To set the active state of an item in a persistent toolbar, add a class of ui-state-persist in addition to ui-btn-active to the corresponding anchor. <li><a href="d.html” class="ui-btn-active ui-state-persist">Info</a></ li> Persistent Footer navigaKon bar

JSON (JavaScript Object NotaDon) is a lightweight data-‐ interchange format.
It is easy for humans to read and write. It is easy for machines to parse and generate.

var tourDates = {concerts: [ { "id": 0, "tourloc":"Manchester, NH",
"tourVenue": "Verizon Wireless Arena", "tourDate": "Sep-7" }, { "id": 1, "tourloc":"Washington, DC", "tourVenue": "Jiffy Lube Live Amphitheater", "tourDate": "Sep-9" } ]}; Sample JSON Data

TemplaKng or DRY soluKons hLp://mustache.github.com/

Basic Template var person = { firstName: "Christopher", lastName:
”Griffith", blogURL: "http://chrisgriffith.wordpress.com" }; var template = "<h1>{{firstName}} {{lastName}}</h1>Blog: {{blogURL}}"; var html = Mustache.to_html(template, person); $('#sampleArea').html(html);

Theming Tools

•  The web is sandboxed •  The web has
no good oﬄine story •  The web cannot parDcipate in app store distribuDon revenue •  The web cannot access most device APIs •  The web has awful tooling Mobile Web is great but…

ApplicaDon container that allows you to build naDvely installed
apps using HTML, CSS & JavaScript What is PhoneGap?

What is PhoneGap? Your Code

What is PhoneGap? Your Code NaKve Web View

NaKve APIs

NaKve APIs NaKve App -‐ .apk, .ipa, etc

What pla5orms support PhoneGap?

Since it is HTML, CSS & JSS, can I use
exisKng tools/frameworks?

CauKon… PhoneGap uses the NATIVE browser on the
device to render the HTML/CSS/JS Keep that in mind, as that can aﬀect the experience

Ge[ng Started h>p://incubator.apache.org/cordova/

PhoneGap Community

Building it phonegap.com/start

Building it build.phonegap.com

<?xml version="1.0" encoding="UTF-‐8"?> <widget xmlns = "hLp://www.w3.org/ns/widgets" xmlns:gap
= "hLp://phonegap.com/ns/1.0" id = "com.ajsoaware.demos.mobilecampla" versionCode="" version = "1.0"> <name>Rush</name> <descripDon>A sample jQuery Mobile applicaDon</descripDon> <author href="hLp://www.aj-‐soaware.com" email="chris.griﬃ[email protected]">Chris Griﬃth</author> <preference name="phonegap-‐version" value="1.8.1" /> <preference name="orientaDon" value="portrait" /> <preference name="target-‐device" value="universal" /> <preference name="fullscreen" value="false" /> <preference name="webviewbounce" value="true" /> <preference name="prerendered-‐icon" value="true" /> <preference name="stay-‐in-‐webview" value="true" /> <preference name="ios-‐statusbarstyle" value="black-‐opaque" /> <preference name="disable-‐cursor" value="true" /> <preference name="android-‐minSdkVersion" value="7" /> <preference name="android-‐maxSdkVersion" value="11" /> <preference name="android-‐installLocaDon" value="Auto" /> <feature name="hLp://api.phonegap.com/1.0/geolocaDon"/> <icon src="assets/icon_57.png" gap:plajorm="ios" width="57" height="57" /> <icon src="assets/icon_72.png" gap:plajorm="ios" width="72" height="72" /> <icon src="assets/icon_114.png" gap:plajorm="ios" width="114" height="114" /> <icon src="assets/icon_144.png" gap:plajorm="ios" width="144" height="144" /> <icon src="assets/icon_48.png" gap:plajorm="android" gap:density="mdpi" /> <icon src="assets/icon_72.png" gap:plajorm="android" gap:density="hdpi" /> <icon src="assets/icon_96.png" gap:plajorm="android" gap:density="xhdpi" /> <icon src="assets/icon_48.png" gap:plajorm="winphone" /> <gap:splash src="assets/320x480.png" width="320" height="480" /> <gap:splash src="assets/640x960.png" width="640" height="960" /> <gap:splash src="assets/320x480.png" gap:plajorm="android" gap:density="mdpi" /> <gap:splash src="assets/480x800.png" gap:plajorm="android" gap:density="hdpi" /> </widget>

ConﬁGAP hLp://aj-‐soaware.com/conﬁgap/

Building it <Demo>

Device Access Accelerometer Camera Capture
Compass ConnecKon Contacts Device InformaKon File GeolocaKon Media NoKﬁcaKon Storage Out of the box, PhoneGap provides support for a number of basic device APIs

Camera API example

Debugging It’s all just HTML/JS, so you can use
your browser! Take advantage of Chrome Developer tools/Firebug to test your app’s UI.

Plugins Barcode Reader Child Browser iAd
ApplicaDon Preferences Screen Shot External Screen In App Purchase Manager Local NoDﬁcaDons Push NoDﬁcaDons Calendar hLps://github.com/phonegap/phonegap-‐plugins

Now go build something!

Thanks! chris.griffi[email protected] @chrisgriffith hLp://chrisgriffith.wordpress.com/

jQuery Mobile & PhoneGap

jQuery Mobile & PhoneGap

More Decks by Chris Griffith

Other Decks in Technology

Featured

Transcript