Up and Running with jQuery Mobile & PhoneGap Build

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

ConﬁGAP hLp://aj-‐soYware.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.

Beyond the mobile web PhoneGap is extensible with a
“naDve plugin” model that enables you to write your own naDve logic to access via JavaScript. There are lots of open source plugins at hLps://github.com/phonegap/ phonegap-‐plugins Learn more at hLp:// wiki.phonegap.com/w/page/36752779/ PhoneGap%20Plugins

Now go build something!

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

Up and Running with jQuery Mobile & PhoneGap Build

Up and Running with jQuery Mobile & PhoneGap Build

More Decks by Chris Griffith

Other Decks in Technology

Featured

Transcript