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

Like this? Share it with your network

Share

Developing cross platform mobile applications with phone gap for windows phone

on

  • 6,148 views

 

Statistics

Views

Total Views
6,148
Views on SlideShare
3,506
Embed Views
2,642

Actions

Likes
2
Downloads
56
Comments
0

7 Embeds 2,642

http://www.scottlogic.co.uk 2058
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
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Presentation 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)