SETUP:PhoneGapStarter app loaded into VS4WP7Emulator started, accelerometer simulator startedFireFox started, pointing to TwitterSearch index page, property finder iOS on other tabVS4Web started with index.html, app.js, twitterSearchViewModel.js, applicationViewModel.js, wp7.css loaded
NOTE: This is quite specific to the WP7 implementation of PhoneGap
Execute applicationWalkthroughShow folder structure – mirrors Silverlight applicationKnockout-JS view modelShow how to run within FireFoxBack-button handling
Just play the vid!
NOTE: Horrible code required for vertical scrolling!
Create a UI that works across platforms
Developing cross-platform mobile applications with PhoneGap @ColinEberhardt
OverviewWhy cross-platform?Introduction to PhoneGap PhoneGap APIs, History of PhoneGap WP7A simple PhoneGap application How PhoneGap worksA more complex application KnockoutJS – MVVM, Property Finder iOS ‘view’Is PhoneGap a viable approach?
PhoneGap APIs Accelerometer Events Compass File Camera Geolocation Capture Media Connection Notification Contacts Storage Device
PhoneGap for Windows Phone 7PhoneGap, first stable release, Feb 2009Matt Lacey, August 2010, initial implementationPhoneGap for WP7 beta, Sept 2011Mango roll-out, Oct 2011Adobe acquires Nitobi, Oct 2011Property Finder enters Marketplace, Nov 2011 http://bit.ly/property-finderWP7 fully supported, Jan 2012
Our first PhoneGap appPhoneGap application template Overview of the various files ‘www’ folder - HTML / JS / image assets GapSourceDictionary.xml Regular WP7 Silverlight filesSimple modification Read accelerometer data
Native look and feelCSS Styling Does not support pressed stateDisable pinch / tap zoom Requires some ‘hacking’ http://bit.ly/suppress-pinchGray highlight You’re stuck with it!
The WP7 IE9 browserPros Much better than the pre-mango! http://bit.ly/ie9-mobile-features Canvas, video, audio Many CSS3 featuresCons A lack of touch events The ‘gray link’ issue http://bit.ly/stackoverflow-gray-highlight
Property Finder (video)The first HTML5-based WP7 app (I think!)Uncovered a few PhoneGap issues!
Cross platform?Knockout JS enables the use of MVVMThe ‘view’ code is currently WP7 specificFor iOS use a different view http://jquerymobile.com/
Property Finder iOS
Property Finder iOS (video)
Is PhoneGap a viable approach? Create an application with its own identity
Would I use it? Or go native? It depends! Project budget Number of platforms targeted Richness of content being delivered Willingness to depart from native UIs
Questions?Image credit: Lattice by ColinBroug(http://www.sxc.hu/photo/1359433)