jquery mobile phonegap
DESCRIPTION
PhonegapTRANSCRIPT
![Page 1: Jquery Mobile Phonegap](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/1.jpg)
MOBILE DEVELOPMENTWith jQuery Mobile & PhoneGap
by Pete Freitag / Foundeo Inc.petefreitag.com / foundeo.com
Monday, January 10, 2011
![Page 2: Jquery Mobile Phonegap](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/2.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/3.jpg)
JQUERYMOBILEA touch optimized HTML5
Framework for building mobile websites and apps.
Monday, January 10, 2011
![Page 4: Jquery Mobile Phonegap](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/4.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/5.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/6.jpg)
MOBILE OS SUPPORT
Monday, January 10, 2011
![Page 7: Jquery Mobile Phonegap](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/7.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/8.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/9.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/10.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/11.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/12.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/13.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/14.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/15.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/16.jpg)
BUTTON ICONS
• Comes with several icons
• You can use your own custom icons easily.
Monday, January 10, 2011
![Page 17: Jquery Mobile Phonegap](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/17.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/18.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/19.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/20.jpg)
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 22: Jquery Mobile Phonegap](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/22.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/23.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/24.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/25.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/26.jpg)
CREATING AN IOS APP
Monday, January 10, 2011
![Page 27: Jquery Mobile Phonegap](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/27.jpg)
CREATING AN IOS APP
Edit index.html
Monday, January 10, 2011
![Page 28: Jquery Mobile Phonegap](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/28.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/29.jpg)
IPHONE DEMO
Monday, January 10, 2011
![Page 30: Jquery Mobile Phonegap](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/30.jpg)
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](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/31.jpg)
ANDROID DEMO
Monday, January 10, 2011
![Page 32: Jquery Mobile Phonegap](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/32.jpg)
DEMO MILEAGEPAD.COM
ColdFusion Powered: MileagePad.com
Monday, January 10, 2011
![Page 33: Jquery Mobile Phonegap](https://reader034.vdocument.in/reader034/viewer/2022042703/55cf96a8550346d0338cf062/html5/thumbnails/33.jpg)
QUESTIONS?
Thank You!petefreitag.com / foundeo.com
Monday, January 10, 2011