0
Developing cross-platform mobile  applications with PhoneGap         @ColinEberhardt
OverviewWhy cross-platform?Introduction to PhoneGap PhoneGap APIs, History of PhoneGap WP7A simple PhoneGap application Ho...
Why cross platform?                      http://bit.ly/gartner-wp7-share
Rewrite for each platform
What is PhoneGap?                           Phone APIs              HTML /             JavaScript             Application ...
PhoneGap APIs  Accelerometer   Events  Compass         File  Camera          Geolocation  Capture         Media  Connectio...
PhoneGap for Windows Phone 7PhoneGap, first stable release, Feb 2009Matt Lacey, August 2010, initial implementationPhoneGa...
Our first PhoneGap appPhoneGap application template  Overview of the various files   ‘www’ folder - HTML / JS / image asse...
How does it work?                   PhoneGap                 PhoneGap C#                   JavaScript                   co...
Applications stylesMulti-page applications  Separate HTML pages  JavaScript re-loaded between each page  No state transfer...
Twitter Search       http://knockoutjs.com/       Demo running FireFox       Back-button handling
Native look and feelCSS Styling  Does not support pressed stateDisable pinch / tap zoom  Requires some ‘hacking’  http://b...
The WP7 IE9 browserPros Much better than the pre-mango! http://bit.ly/ie9-mobile-features   Canvas, video, audio   Many CS...
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  h...
Property Finder iOS
PhoneGap Build
Property Finder iOS (video)
Is PhoneGap a viable approach?Set-up cost is low  PhoneGap build removes the need for a Mac  Browser-based testingBrowser ...
Is PhoneGap a viable approach?  Create an application with its own identity
The JavaScript advantageJavaScript is ubiquitous  Re-use code for a Windows 8 Metro App  Re-use code for web-appJavaScript...
Would I use it? Or go native? It depends!   Project budget   Number of platforms targeted   Richness of content being deli...
PhoneGap alternativesMonoTouch  C# with bindings to native controls  http://xamarin.com/monotouchAppcelerator Titanium  Pr...
Questions?Image credit: Lattice by ColinBroug(http://www.sxc.hu/photo/1359433)
Upcoming SlideShare
Loading in...5
×

Developing cross platform mobile applications with phone gap for windows phone

5,648

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,648
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
60
Comments
0
Likes
2
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
  • Transcript of "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? http://bit.ly/gartner-wp7-share
    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 http://bit.ly/property-finderWP7 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 http://bit.ly/wp7-multipage-phonegapSingle-page applications Page updates as application state changes ‘think’ GMail
    11. 11. Twitter Search http://knockoutjs.com/ Demo running FireFox Back-button handling
    12. 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. 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. 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 http://jquerymobile.com/
    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 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. 24. Questions?Image credit: Lattice by ColinBroug(http://www.sxc.hu/photo/1359433)
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×