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.