jquery mobile phonegap

33
MOBILE DEVELOPMENT With jQuery Mobile & PhoneGap by Pete Freitag / Foundeo Inc. petefreitag.com / foundeo.com Monday, January 10, 2011

Upload: banh-bao

Post on 26-Mar-2015

268 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: Jquery Mobile Phonegap

MOBILE DEVELOPMENTWith jQuery Mobile & PhoneGap

by Pete Freitag / Foundeo Inc.petefreitag.com / foundeo.com

Monday, January 10, 2011

Page 2: Jquery Mobile Phonegap

AGENDA

• Learn to build mobile web sites using jQueryMobile and HTML5

• Learn about PhoneGap for building native iPhone/iOS & Android Apps

Monday, January 10, 2011

Page 3: Jquery Mobile Phonegap

JQUERYMOBILEA touch optimized HTML5

Framework for building mobile websites and apps.

Monday, January 10, 2011

Page 4: Jquery Mobile Phonegap

ALPHAjQuery Mobile is currently in Alpha 2, so keep in mind that

not all features are implemented or stable at this time.

Monday, January 10, 2011

Page 5: Jquery Mobile Phonegap

TOUCH OPTIMIZED?

• UI Controls need to be big enough to touch.

• Minimize the need for typing

• No mouseover, mousemove events, instead you have events like swipe, swipeleft, swiperight, orientationchange, tap, taphold, etc.

• Optomized Form Controls

Monday, January 10, 2011

Page 6: Jquery Mobile Phonegap

MOBILE OS SUPPORT

Monday, January 10, 2011

Page 7: Jquery Mobile Phonegap

BUT I DON’T KNOW JQUERY

• You don’t even need to know JavaScript to build a simple jQuery Mobile Web Site or App.

• If you know jQuery you will feel right at home, when it comes time to add dynamic interactions.

• But don’t worry if you don’t know any jQuery!

Monday, January 10, 2011

Page 8: Jquery Mobile Phonegap

WHAT’S IN JQUERY MOBILE?

• Pages & Dialogs

• Toolbars (Header & Footer bars)

• Button’s (Including a set of stock icons)

• Form Controls (Slider’s, Toggles, enhanced radio, checkbox, etc)

• List View Control

Monday, January 10, 2011

Page 9: Jquery Mobile Phonegap

LET’S GET STARTED<!doctype html><html> <head> <title>jQuery Mobile Example</title> <link rel="stylesheet"

href="jquery.mobile-1.0a2/jquery.mobile-1.0a2.css" /> <script src="jquery-1.4.4.min.js"></script> <script src="jquery.mobile-1.0a2/jquery.mobile-1.0a2.js"></script> </head> <body> </body></html>

1) HTML5 Doctype2) jQuery Mobile CSS2) jQuery Core JS3) jQuery Mobile JS

Monday, January 10, 2011

Page 10: Jquery Mobile Phonegap

DATA-ROLE’S

• jQuery Mobile uses an HTML attribute called: data-role to associate an element with a widget. For example:

• data-role=”page”• data-role=”header”• data-role=”footer”• data-role=”navbar”• data-role=”button”• data-role=”listview”• data-role=”controlgroup”• data-role=”fieldcontain”

Monday, January 10, 2011

Page 11: Jquery Mobile Phonegap

DATA-WHAT?

• HTML5 added a feature called custom data attributes.

• Any tag attribute that begins with data- may be used as a custom data storage associated with the element.

• So instead of doing <div id=”cat#cat.id#”></div> you can do <div data-id=”#cat.id#”>...</div> and it will still pass as valid HTML5.

• More here: http://ejohn.org/blog/html-5-data-attributes/

Monday, January 10, 2011

Page 12: Jquery Mobile Phonegap

PAGES

• A HTML Document can consist of multiple pages. Pages are linked together via a link to #pageElementID

Monday, January 10, 2011

Page 13: Jquery Mobile Phonegap

EXAMPLE PAGES

<div data-role="page" id="home"> <div data-role="header"> <h1>Home</h1> <a href="#settings" data-role="button"> Settings </a> </div></div><div data-role="page" id="settings" data-theme="b"> <div data-role="header"> <h1>Settings</h1> </div> <div data-role="content"> Lorum Ipsum... </div></div>

Monday, January 10, 2011

Page 14: Jquery Mobile Phonegap

THEME’S

• jQuery Mobile comes with several color schemes which can be controlled using the data-theme attribute.

• You can specify a data-theme on a page, buttons, toolbar’s, etc.

• Try specifying data-theme=a,b,c,d,e

Monday, January 10, 2011

Page 15: Jquery Mobile Phonegap

BUTTONS

• You can create a button by adding data-role=”button” to a button tag, an a tag, or input type=submit|button|reset|image

• Add an icon to the button using data-icon=”icon-name”

• By default the icon goes on the left, you can put it on the right, top or bottom by specifying data-iconpos or to just use the icon use data-iconpos=”notext”

Monday, January 10, 2011

Page 16: Jquery Mobile Phonegap

BUTTON ICONS

• Comes with several icons

• You can use your own custom icons easily.

Monday, January 10, 2011

Page 17: Jquery Mobile Phonegap

LISTVIEW

<ul data-role="listview" data-theme="c"> <li><a href="#about">About Us</a></li> <li><a href="#settings">Settings</a></li></ul>

More Advanced List View options available, see docs.

Monday, January 10, 2011

Page 18: Jquery Mobile Phonegap

WORKING WITH FORMS

• Form Element’s should be wrapped in a div with a data-role=”fieldcontain” attribute.

<form> <div data-role="fieldcontain"> <label for="slider">Slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> </div></form>

Monday, January 10, 2011

Page 19: Jquery Mobile Phonegap

ALPHA LIMITATIONS

• JavaScript API’s seam to be in flux. It can be tricky to update content dynamically.

• Still waiting on some handy things like a date picker.

• Overall it’s a very functional alpha, but there certainly are some bugs.

Monday, January 10, 2011

Page 20: Jquery Mobile Phonegap

JQUERY MOBILE

• We’ve just scratched the surface of what you can do with jQuery Mobile.

• Checkout: http://jquerymobile.com/

Monday, January 10, 2011

Page 21: Jquery Mobile Phonegap

PHONEGAPwww.phonegap.com

Monday, January 10, 2011

Page 22: Jquery Mobile Phonegap

WHAT IS PHONEGAP?

• A Set of templates for building native iOS, Android, Blackberry, Symbian, and WebOS using HTML, CSS, and JavaScript.

Monday, January 10, 2011

Page 23: Jquery Mobile Phonegap

PHONEGAP.JS

• phonegap.js contains a device neutral javascript API for accessing native device API’s such as:

• Camera• Accelerometer • GPS• Compass • Address Book / Contacts• Media (Audio / Video)• Events• And More see docs.phonegap.com for a full reference.

Monday, January 10, 2011

Page 24: Jquery Mobile Phonegap

PHONEGAP PLUGINS

• There are several plugins for accessing functionality that may be platform specific. For Example:

• Keychain Access (for storing sensitive data on iOS)

• PayPal API Plugin

• Native iPhone Controls

Monday, January 10, 2011

Page 25: Jquery Mobile Phonegap

CREATING AN IOS APP

• Download Xcode and the iOS SDK from Apple

• Download PhoneGap

• Run the PhoneGapLibInstaller.pkg installer

• Launch Xcode, create a new project, and select the PhoneGap Template

• Click Build & Run to launch the iOS Simulator.

Monday, January 10, 2011

Page 26: Jquery Mobile Phonegap

CREATING AN IOS APP

Monday, January 10, 2011

Page 27: Jquery Mobile Phonegap

CREATING AN IOS APP

Edit index.html

Monday, January 10, 2011

Page 28: Jquery Mobile Phonegap

CREATING AN IOS APP

• Place any css, js, or images your app will use in the www folder.

• Edit Resources/Default.png this is your startup image.

• Edit Resources/icon.png this is your app icon.

• Edit Resources/AppName-Info.plist settings such as Bundle Display Name.

Monday, January 10, 2011

Page 29: Jquery Mobile Phonegap

IPHONE DEMO

Monday, January 10, 2011

Page 30: Jquery Mobile Phonegap

CREATING AN ANDROID APP

• Download and install the Android SDK

• Tips: http://www.petefreitag.com/item/763.cfm

• Install Android Eclipse Plugin

• Create a New Android Project in Eclipse

• See: http://wiki.phonegap.com/w/page/30862722/phonegap-android-eclipse-quickstart

Monday, January 10, 2011

Page 31: Jquery Mobile Phonegap

ANDROID DEMO

Monday, January 10, 2011

Page 32: Jquery Mobile Phonegap

DEMO MILEAGEPAD.COM

ColdFusion Powered: MileagePad.com

Monday, January 10, 2011

Page 33: Jquery Mobile Phonegap

QUESTIONS?

Thank You!petefreitag.com / foundeo.com

Monday, January 10, 2011