building cross-platform mobile applications with html5
DESCRIPTION
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.TRANSCRIPT
Building Cross-Platform Mobile Applications with HTML5 and PhoneGap
Jeff ProsiseCofounderWintellect
What is PhoneGap?Framework for cross-platform mobile appsHTML5, JavaScript, and CSS
Access native platform features from JavaScriptAccess accelerometer, camera, contacts, and much morePhonegap.js provides API and relies on per-platform PhoneGap binaries
Supports most major mobile platformsiOS, Android, Windows Phone, Blackberry, etc.
PhoneGap Build builds native packages
Supported Platforms and Features
DemoHello, PhoneGap
PhoneGap BuildCloud-based service for compiling HTML5 assets produced with PhoneGap into native binaries
Config.xmlOptional build-configuration file<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns=http://www.w3.org/ns/widgets
xmlns:gap=http://phonegap.com/ns/1.0
id="com.phonegap.example"
version="1.0.0">
<name>PhoneGap Demo</name>
<description>Sample PhoneGap Application</description>
<feature id="http://api.phonegap.com/1.0/contacts" required="true" version="1.0.0.0" />
</widget>
DemoPhoneGap Build
Notification APInavigator.notification provides methods for prompting and alerting users
Method Description
alert Displays an alert box or dialog box
beep Plays an audible beep
confirm Displays a confirmation dialog
vibrate Vibrates the device for the specified number of seconds
Alerting the Usernavigator.notification.alert("Hello, PhoneGap!");
Connection APInavigator.network.connection.type property reveals type of network connectionConnection.UNKNOWNConnection.ETHERNETConnection.WIFIConnection.CELL_2G / 3G / 4G
Also indicates whether device is connectedConnection.NONE
Getting Connection Informationvar states = {};
states[Connection.UNKNOWN] = "Unknown connection";
states[Connection.ETHERNET] = "Ethernet connection";
states[Connection.WIFI] = "WiFi connection";
states[Connection.CELL_2G] = "Cell 2G connection";
states[Connection.CELL_3G] = "Cell 3G connection";
states[Connection.CELL_4G] = "Cell 4G connection";
states[Connection.NONE] = "No network connection";
var state = navigator.network.connection.type;
navigator.notification.alert(states[state]);
Device APIwindow.device properties provide information about host device
Property Description
name Device name
phonegap PhoneGap version
platform Operating system name
uuid Device ID
version Operating system version
Getting Device Informationvar info =
"Device name: " + device.name + "\r\n" +
"Device ID: " + device.uuid + "\r\n" +
"PhoneGap Version: " + device.phonegap + "\r\n" +
"Platform: " + device.platform + " " + device.version;
navigator.notification.alert(info, null, "Device Information");
PhoneGap EventsEvents fired by PhoneGap for suspending, resuming, back-button presses, and more
Event Description
deviceready Fired when PhoneGap is fully loaded and initialized
pause/resume Fired when application is paused (suspended) or resumed
online/offline Fired when network connection status changes
batterylow 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
Using deviceready Eventsdocument.addEventListener("deviceready", onDeviceReady, false);
.
.
.
function onDeviceReady() {
// Don't use the PhoneGap API any earlier than this!
}
Using pause and resume Eventsdocument.addEventListener("pause", onSuspending, false);
document.addEventListener("resume", onActivated, false);
.
.
.
function onSuspending() {
// TODO: Save application state in case the application
// is terminated after it's suspended
}
function onActivated() {
// TODO: Restore application state saved in onSuspending
}
DemoState Management
Accelerometernavigator.accelerometer provides API for getting acceleration vectors at specified intervals
Method DescriptiongetCurrentAcceleration
Gets current X, Y, and Z acceleration vectors
watchAcceleration Provides acceleration vectors at specified time intervals
clearWatch Cancels a watch created with watchAcceleration
Using the Accelerometervar id = navigator.accelerometer.watchAcceleration(onSuccess, onError, { frequency: 50 });
function onSuccess(acceleration) {
var ax = acceleration.x;
var ay = acceleration.y;
var az = acceleration.z;
}
function onError() {
navigator.notification.alert("Accelerometer error");
navigator.acceleration.clearWatch(id);
}
Enabling Accelerometer Usage<!--
On WP7, the highlighted line must be added to the application manifest (WMAppManifest.xml)
-->
<Capabilities>
<Capability Name="ID_CAP_IDENTITY_DEVICE" />
<Capability Name="ID_CAP_IDENTITY_USER" />
<Capability Name="ID_CAP_LOCATION" />
<Capability Name="ID_CAP_NETWORKING" />
<Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
<Capability Name="ID_CAP_SENSORS" />
</Capabilities>
DemoAccelerometer
Compassnavigator.compass provides API for getting compass headings at specified intervals
Method Description
getCurrentHeading Gets the current heading (heading and magnetic)
watcHeading Provides the heading at specified time intervals
clearWatch Cancels a watch created with watchHeading
watchHeadingFilter Provides a new heading every time it changes by the specified number of degrees
clearWatchFilter Cancels a watch creates with watchHeadingFilter
Using the Compassvar id = navigator.compass.watchHeading(onSuccess, onError,
{ frequency: 50 }); // 50 milliseconds
function onSuccess(heading) {
var trueHeading = heading.trueHeading;
var magHeading = heading.magneticHeading;
var accuracy = heading.headingAccuracy;
}
function onError(error) {
navigator.notification.alert(Compass.ERROR_MSG[error]);
navigator.compass.clearWatch(id);
}
Enabling Compass Usage<!--
On WP7, the highlighted line must be added to the application manifest (WMAppManifest.xml)
-->
<Capabilities> <Capability Name="ID_CAP_IDENTITY_DEVICE" /> <Capability Name="ID_CAP_IDENTITY_USER" /> <Capability Name="ID_CAP_LOCATION" /> <Capability Name="ID_CAP_NETWORKING" /> <Capability Name="ID_CAP_WEBBROWSERCOMPONENT" /> <Capability Name="ID_CAP_SENSORS" /></Capabilities>
DemoCompass
CameraNavigator.camera provides API for shooting photos and choosing photos from the pictures library
Method Description
getPictures Snaps a photo with the camera, or returns a photo selected from the pictures library
Snapping a Picturevar options = { destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.CAMERA, encodingType: Camera.EncodingType.JPEG, quality: 100};
navigator.camera.getPicture(onSuccess, onFail, options);
function onSuccess(imageData) { var image = document.getElementById("output"); image.src = "data:image/jpeg;base64," + imageData;}
function onFail(message) { navigator.notification.alert(message);}
Choosing a Picturevar options = { destinationType: Camera.DestinationType.DATA_URL, sourceType: Camera.PictureSourceType.PHOTOLIBRARY,};
navigator.camera.getPicture(onSuccess, onFail, options);
function onSuccess(imageData) { var image = document.getElementById("output"); image.src = "data:image/jpeg;base64," + imageData;}
function onFail(message) { navigator.notification.alert(message);}
Enabling Camera Usage<!--
On WP7, the highlighted lines must be added to the application manifest (WMAppManifest.xml)
-->
<Capabilities> <Capability Name="ID_CAP_IDENTITY_DEVICE" /> <Capability Name="ID_CAP_IDENTITY_USER" /> <Capability Name="ID_CAP_LOCATION" /> <Capability Name="ID_CAP_NETWORKING" /> <Capability Name="ID_CAP_WEBBROWSERCOMPONENT" /> <Capability Name="ID_CAP_ISV_CAMERA" /> <Capability Name="ID_CAP_CAMERA" /> <Capability Name="ID_CAP_MEDIALIB" /></Capabilities>
DemoCamera
Contactsnavigator.contacts provides API for creating new contacts and finding existing ones
Method Description
create Creates a contact
find Queries the contacts database and returns matching contacts
Enumerating Contacts// Show the display name of all contacts
var options = new ContactFindOptions();
options.multiple = true;
navigator.contacts.find(["displayName"],
onSuccess, onError, options);
function onSuccess(contacts) {
for (var i = 0; i < contacts.length; i++) {
navigator.notification.alert(contacts[i].displayName);
}
}
Querying Contacts// Show the display name of all contacts containing "Hill"
var options = new ContactFindOptions();options.multiple = true;options.filter = "Hill";navigator.contacts.find(["displayName"], onSuccess, onError, options);
function onSuccess(contacts) { for (var i = 0; i < contacts.length; i++) { navigator.notification.alert(contacts[i].displayName); }}
Enabling Contacts Usage<!--
On WP7, the highlighted line must be added to the application manifest (WMAppManifest.xml)
-->
<Capabilities>
<Capability Name="ID_CAP_IDENTITY_DEVICE" />
<Capability Name="ID_CAP_IDENTITY_USER" />
<Capability Name="ID_CAP_LOCATION" />
<Capability Name="ID_CAP_NETWORKING" />
<Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
<Capability Name="ID_CAP_CONTACTS" />
</Capabilities>
DemoContacts
Download the Code
http://www.wintellect.com/downloads/phonegap.zip
Be what’s next: Windows 8 Metro Apps• Find everything here
http://aka.ms/mbl-win8• Save the date! March 23: Windows 8 Developer Day
and “Nacht van Windows 8 / La Nuit de Windows 8 (app-a-thon coding night)
• Start today!• Building Windows 8 blog: http://aka.ms/mbl-win8/build• Learn with Windows 8 Dev Preview: http://aka.ms/mbl-win8/devprev • Learn about Windows Store and opportunities:
http://aka.ms/mbl-win8/store
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.