Transcription
MOBILE DEVELOPMENTWith jQuery Mobile & PhoneGapby Pete Freitag / Foundeo Inc.petefreitag.com / foundeo.comMonday, January 10, 2011
AGENDA Learnto build mobile web sites using jQueryMobile andHTML5 Learnabout PhoneGap for building native iPhone/iOS &Android AppsMonday, January 10, 2011
JQUERYMOBILEA touch optimized HTML5Framework for building mobilewebsites and apps.Monday, January 10, 2011
ALPHAjQuery Mobile is currently inAlpha 2, so keep in mind thatnot all features are implementedor stable at this time.Monday, January 10, 2011
TOUCH OPTIMIZED? UIControls need to be big enough to touch. Minimizethe need for typing Nomouseover, mousemove events, instead you have eventslike swipe, swipeleft, swiperight, orientationchange, tap,taphold, etc. OptomizedMonday, January 10, 2011Form Controls
MOBILE OS SUPPORTMonday, January 10, 2011
BUT I DON’T KNOW JQUERY Youdon’t even need to know JavaScript to build asimple jQuery Mobile Web Site or App. Ifyou know jQuery you will feel right at home, when itcomes time to add dynamic interactions. ButMonday, January 10, 2011don’t worry if you don’t know any jQuery!
WHAT’S IN JQUERY MOBILE? Pages& Dialogs Toolbars(Header & Footer bars) Button’s(Including a set of stock icons) FormControls (Slider’s, Toggles, enhanced radio, checkbox, etc) List ViewMonday, January 10, 2011Control
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 JSMonday, January 10, 2011
DATA-ROLE’SMobile uses an HTML attribute called: data-role toassociate an element with a widget. For example: jQuery 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
DATA-WHAT? HTML5added a feature called custom data attributes. Anytag attribute that begins with data- may be used as acustom data storage associated with the element. Soinstead of doing div id ”cat#cat.id#” /div you cando div data-id ”#cat.id#” . /div and it will still pass asvalid HTML5. MoreMonday, January 10, 2011here: http://ejohn.org/blog/html-5-data-attributes/
PAGES AHTML Document can consist of multiple pages. Pages arelinked together via a link to #pageElementIDMonday, January 10, 2011
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
THEME’S jQueryMobile comes with several color schemes which canbe controlled using the data-theme attribute. Youcan specify a data-theme on a page, buttons, toolbar’s, etc. Tryspecifying data-theme a,b,c,d,eMonday, January 10, 2011
BUTTONS Youcan create a button by adding data-role ”button” to abutton tag, an a tag, or input type submit button reset image Addan icon to the button using data-icon ”icon-name” Bydefault the icon goes on the left, you can put it on theright, top or bottom by specifying data-iconpos or to just usethe icon use data-iconpos ”notext”Monday, January 10, 2011
BUTTON ICONS Comes Youwith several iconscan use your owncustom icons easily.Monday, January 10, 2011
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 Viewoptions available, see docs.Monday, January 10, 2011
WORKING WITH FORMS FormElement’s should be wrapped in a div with a datarole ”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
ALPHA LIMITATIONS JavaScript API’sseam to be in flux. It can be tricky to updatecontent dynamically. Stillwaiting on some handy things like a date picker. Overallit’s a very functional alpha, but there certainly aresome bugs.Monday, January 10, 2011
JQUERY MOBILE We’vejust scratched the surface of what you can do withjQuery Mobile. Checkout: http://jquerymobile.com/Monday, January 10, 2011
PHONEGAPwww.phonegap.comMonday, January 10, 2011
WHAT IS PHONEGAP? ASet of templates for building native iOS, Android,Blackberry, Symbian, and WebOS using HTML, CSS, andJavaScript.Monday, January 10, 2011
PHONEGAP.JS phonegap.jscontains a device neutral javascript API foraccessing native device API’s such as: Camera Accelerometer GPS Compass Address Book / Contacts Media (Audio / Video) Events And More see docs.phonegap.comMonday, January 10, 2011for a full reference.
PHONEGAP PLUGINS Thereare several plugins for accessing functionality that maybe platform specific. For Example: Keychain Access PayPal API NativeMonday, January 10, 2011(for storing sensitive data on iOS)PluginiPhone Controls
CREATING AN IOS APP DownloadXcode and the iOS SDK from Apple DownloadPhoneGap Runthe PhoneGapLibInstaller.pkg installer LaunchXcode, create a new project, and select the PhoneGapTemplate ClickBuild & Run to launch the iOS Simulator.Monday, January 10, 2011
CREATING AN IOS APPMonday, January 10, 2011
CREATING AN IOS APPEditindex.htmlMonday, January 10, 2011
CREATING AN IOS APPany css, js, or images your app will use in the wwwfolder. Place EditResources/Default.png this is your startup image. EditResources/icon.png this is your app icon. EditResources/AppName-Info.plist settings such as BundleDisplay Name.Monday, January 10, 2011
IPHONE DEMOMonday, January 10, 2011
CREATING AN ANDROID APP Downloadand install the Android SDK Tips: http://www.petefreitag.com/item/763.cfm Install Android CreateEclipse Plugina New Android Project in Eclipse See: android-eclipse-quickstartMonday, January 10, 2011
ANDROID DEMOMonday, January 10, 2011
DEMO MILEAGEPAD.COMColdFusion Powered:MileagePad.comMonday, January 10, 2011
QUESTIONS?Thank You!petefreitag.com / foundeo.comMonday, January 10, 2011
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-
