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

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,206
On Slideshare
3,564
From Embeds
2,642
Number of Embeds
7

Actions

Shares
Downloads
59
Comments
0
Likes
2

Embeds 2,642

http://www.scottlogic.co.uk 2,058
http://mobile.dzone.com 526
http://www.scottlogic.com 53
http://www.dzone.com 2
http://sl-ws-069.scottlogic.co.uk 1
http://dev.scottlogic.co.uk 1
http://www.dev.scottlogic.co.uk 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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? http://bit.ly/gartner-wp7-share
  • 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 http://bit.ly/property-finderWP7 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 http://bit.ly/wp7-multipage-phonegapSingle-page applications Page updates as application state changes ‘think’ GMail
  • 11. Twitter Search http://knockoutjs.com/ Demo running FireFox Back-button handling
  • 12. 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!
  • 13. 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
  • 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 http://jquerymobile.com/
  • 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 http://xamarin.com/monotouchAppcelerator Titanium Previously ran JavaScript in browser, now compiles to native http://www.appcelerator.com/Adobe Mobile Air AS3 running within the Air runtime http://www.adobe.com/products/air.html
  • 24. Questions?Image credit: Lattice by ColinBroug(http://www.sxc.hu/photo/1359433)