Developing cross platform mobile applications with phone gap for windows phone


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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
  • Why cross-platform? – market shareIntroduction to PhoneGap – basic architecture, history of WP7 version (Matt Lacey), current status, Nitobi / Apache / Callback CordovaDeveloping simple page-based applications – hello world, page navigation, tombstoning, pinch zoom, back-stackjQuery-MobileDeveloping complex applications – structuring our JavaScript, MVVM, Property Finder – how cross platform is this solution?Knockout-JSBack-stack handlingConclusionsIs this a viable approach? – IE9 issues, gray rectangle,MonoTouch / MonoDroid
  • HTML5 / JavaScript applicationPhoneGap provides: + A packaging mechanism + APIs for features that are outside of the scope of HTML5
  • Timeline me!
  • Anatomy of a basic applicationLaunch itdescribe it …‘www’ folder – HTML5 assetsGapSourceDictionary.xaml – files to load into local storage (required because you cannot read XAP content)ManifestProcessor.js – generates the aboveApp, MainPage, icons …Make changes to read accelerometerAdd JavaScriptAdd HTMLDiscuss how the JavaScript API works.
  • 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 phone gap for windows phone

    1. 1. Developing cross-platform mobile applications with PhoneGap @ColinEberhardt
    2. 2. 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?
    3. 3. Why cross platform?
    4. 4. Rewrite for each platform
    5. 5. What is PhoneGap? Phone APIs HTML / JavaScript Application Phone APIs
    6. 6. PhoneGap APIs Accelerometer Events Compass File Camera Geolocation Capture Media Connection Notification Contacts Storage Device
    7. 7. 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 fully supported, Jan 2012
    8. 8. 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
    9. 9. How does it work? PhoneGap PhoneGap C# JavaScript code Accelerometeracc.getCurrentPosition() window.external.Notify() getAcceleration() DispatchResult() ScriptNotify()
    10. 10. Applications stylesMulti-page applications Separate HTML pages JavaScript re-loaded between each page No state transferred from page-to-page Back-button handling required applications Page updates as application state changes ‘think’ GMail
    11. 11. Twitter Search Demo running FireFox Back-button handling
    12. 12. Native look and feelCSS Styling Does not support pressed stateDisable pinch / tap zoom Requires some ‘hacking’ highlight You’re stuck with it!
    13. 13. The WP7 IE9 browserPros Much better than the pre-mango! Canvas, video, audio Many CSS3 featuresCons A lack of touch events The ‘gray link’ issue
    14. 14. Property Finder (video)The first HTML5-based WP7 app (I think!)Uncovered a few PhoneGap issues!
    15. 15. Cross platform?Knockout JS enables the use of MVVMThe ‘view’ code is currently WP7 specificFor iOS use a different view
    16. 16. Property Finder iOS
    17. 17. PhoneGap Build
    18. 18. Property Finder iOS (video)
    19. 19. Is PhoneGap a viable approach?Set-up cost is low PhoneGap build removes the need for a Mac Browser-based testingBrowser specific JavaScript / CSS code Often handled by existing JavaScript libraries More required if you want to have a native ‘feel’ Currently most people roll-out an iOS look to AndroidWP7 IE9 browser is _almost_ good enough Webkit browsers also have major flaws – overflow:scroll
    20. 20. Is PhoneGap a viable approach? Create an application with its own identity
    21. 21. The JavaScript advantageJavaScript is ubiquitous Re-use code for a Windows 8 Metro App Re-use code for web-appJavaScript is relatively future proofOffline applications Uses the HTML5 app-cache The FT iPad application is a good example Frees you from the marketplace
    22. 22. 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
    23. 23. PhoneGap alternativesMonoTouch C# with bindings to native controls Titanium Previously ran JavaScript in browser, now compiles to native Mobile Air AS3 running within the Air runtime
    24. 24. Questions?Image credit: Lattice by ColinBroug(