Building Cross-Platform Mobile Applications with HTML5


Published on

Windows Phone 7 is a great platform, but the greatest challenge facing mobile developers today is writing apps that run on all the popular mobile platforms. With HTML5 and PhoneGap, you can write apps that exploit native features of the operating system and run on a wide range of devices. And the recently released PhoneGap 1.3 makes Windows Phone 7 a first-class citizen in the PhoneGap environment. Join the fun as Jeff explores the world of cross-platform mobile development and demonstrates the pros and cons of going HTML5 versus going native.

Published in: Technology
1 Like
  • Be the first to comment

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

No notes for slide

Building Cross-Platform Mobile Applications with HTML5

  1. 1. Framework for cross-platform mobile appsAccess native platform features from JavaScriptSupports most major mobile platformsPhoneGap Build builds native packages
  2. 2. Demo
  3. 3. Cloud-based service for compiling HTML5 assetsproduced with PhoneGap into native binaries
  4. 4. Optional build-configuration file
  5. 5. Demo
  6. 6. navigator.notification provides methods forprompting and alerting users Method Descriptionalert Displays an alert box or dialog boxbeep Plays an audible beepconfirm Displays a confirmation dialogvibrate Vibrates the device for the specified number of seconds
  7. 7. propertyreveals type of network connectionAlso indicates whether device is connected
  8. 8. window.device properties provide informationabout host device Property Descriptionname Device namephonegap PhoneGap versionplatform Operating system nameuuid Device IDversion Operating system version
  9. 9. Events fired by PhoneGap for suspending,resuming, back-button presses, and more Event Descriptiondeviceready Fired when PhoneGap is fully loaded and initializedpause/resume Fired when application is paused (suspended) or resumedonline/offline Fired when network connection status changesbatterylow Fired when battery is low (level is device-specific)batterycritical Fired when battery is critically low (level is device-specific)backbutton Fired when the back button is pressed
  10. 10. Demo
  11. 11. navigator.accelerometer provides API for gettingacceleration vectors at specified intervals Method DescriptiongetCurrentAcceleration Gets current X, Y, and Z acceleration vectorswatchAcceleration Provides acceleration vectors at specified time intervalsclearWatch Cancels a watch created with watchAcceleration
  12. 12. <Capability Name="ID_CAP_SENSORS" />
  13. 13. Demo
  14. 14. navigator.compass provides API for gettingcompass headings at specified intervals Method DescriptiongetCurrentHeading Gets the current heading (heading and magnetic)watcHeading Provides the heading at specified time intervalsclearWatch Cancels a watch created with watchHeading Provides a new heading every time it changes by thewatchHeadingFilter specified number of degreesclearWatchFilter Cancels a watch creates with watchHeadingFilter
  15. 15. <Capability Name="ID_CAP_SENSORS" />
  16. 16. Demo
  17. 17. provides API for shootingphotos and choosing photos from the pictureslibrary Method Description Snaps a photo with the camera, or returns a photo selected fromgetPictures the pictures library
  19. 19. <Capability Name="ID_CAP_ISV_CAMERA" /><Capability Name="ID_CAP_CAMERA" /><Capability Name="ID_CAP_MEDIALIB" />
  20. 20. Demo
  21. 21. navigator.contacts provides API for creating newcontacts and finding existing ones Method Descriptioncreate Creates a contactfind Queries the contacts database and returns matching contacts
  22. 22. options.filter = "Hill";
  23. 23. <Capability Name="ID_CAP_CONTACTS" />
  24. 24. Demo
  25. 25.
  26. 26.