Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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?

Slide 7

Slide 7 text

What pla5orms support jQuery Mobile?

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Page Title

Slide 10

Slide 10 text

Page Title

Slide 11

Slide 11 text

Page Title

Slide 12

Slide 12 text

Page Title

My page content

Footer

Slide 13

Slide 13 text

Page Title

My page content

Footer

Slide 14

Slide 14 text

Page Title

My page content

Footer

Slide 15

Slide 15 text

Page Title

My page content

Footer

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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-‐*

Slide 18

Slide 18 text

Page Title

My page content

Footer

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Page Title

My page content

About this app

Footer

About This App

This app rocks! Go home

Pages within pages

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Fly by Night

(1975)

List Code -‐ Sample

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

OR $(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn=true; }); Back?

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

One
Two
Three

Tabs

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

Fixed header markup example:

Fixed Header!

Fixed footer markup example:

Fixed Footer!

Fixed Toolbars

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Friends
Albums
Emails
Info

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.

Info Persistent Footer navigaKon bar

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Basic Template var person = { firstName: "Christopher", lastName: ”Griffith", blogURL: "http://chrisgriffith.wordpress.com" }; var template = "

Blog: {{blogURL}}"; var html = Mustache.to_html(template, person); $('#sampleArea').html(html);

Slide 42

Slide 42 text

Theming Tools

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

•  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…

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

What is PhoneGap? Your Code

Slide 51

Slide 51 text

What is PhoneGap? Your Code NaKve Web View

Slide 52

Slide 52 text

What is PhoneGap? Your Code NaKve Web View NaKve APIs

Slide 53

Slide 53 text

What is PhoneGap? Your Code NaKve Web View NaKve APIs NaKve App -‐ .apk, .ipa, etc

Slide 54

Slide 54 text

What pla5orms support PhoneGap?

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

PhoneGap Community

Slide 60

Slide 60 text

Building it phonegap.com/start

Slide 61

Slide 61 text

Building it build.phonegap.com

Slide 62

Slide 62 text

Rush A sample jQuery Mobile applicaDon Chris Griﬃth

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Building it

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Camera API example

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

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.

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

Now go build something!

Slide 74

Slide 74 text

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