Your SlideShare is downloading. ×
Developing cross platform mobile applications with phone gap for windows phone
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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
  • Transcript

    • 1. Developing cross-platform mobile applications with PhoneGap @ColinEberhardt
    • 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. Why cross platform?
    • 4. Rewrite for each platform
    • 5. What is PhoneGap? Phone APIs HTML / JavaScript Application Phone APIs
    • 6. PhoneGap APIs Accelerometer Events Compass File Camera Geolocation Capture Media Connection Notification Contacts Storage Device
    • 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. 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. How does it work? PhoneGap PhoneGap C# JavaScript code Accelerometeracc.getCurrentPosition() window.external.Notify() getAcceleration() DispatchResult() ScriptNotify()
    • 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. Twitter Search Demo running FireFox Back-button handling
    • 12. Native look and feelCSS Styling Does not support pressed stateDisable pinch / tap zoom Requires some ‘hacking’ highlight You’re stuck with it!
    • 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. Property Finder (video)The first HTML5-based WP7 app (I think!)Uncovered a few PhoneGap issues!
    • 15. Cross platform?Knockout JS enables the use of MVVMThe ‘view’ code is currently WP7 specificFor iOS use a different view
    • 16. Property Finder iOS
    • 17. PhoneGap Build
    • 18. Property Finder iOS (video)
    • 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. Is PhoneGap a viable approach? Create an application with its own identity
    • 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. 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. 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. Questions?Image credit: Lattice by ColinBroug(