Creating Windows Store App Using PhoneGap (Cordova)
There is new PhoneGap release called – Cordova or PhoneGap 2.2.0 that supports WinRT features, in this post I’ll demonstrate some of the basics of PhoneGap for Windows Store apps.
Download Demo Project
What is PhoneGap?
PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for the platforms you care about.
This means that using PhoneGap in your Windows Store app can also be used by other Mobile OS such as iOS, Android, Windows Phone 7, Blackberry and more.
Enabling PhoneGap for Windows Store app is very easy, all you need is PhoneGap 2.2.0 library (Download), Visual Studio 2012 and Windows 8 OS.
Getting Started with PhoneGap for WinRT
- Download PhoneGap 2.2.0 - http://phonegap.com/download
- Create Blank JavaScript project.
- Add “cordova-2.2.0.js” JavaScript file to your js folder. (Located in \lib\windows8)
- Add reference to cordova js file from default.html page
<script src="/js/cordova-2.2.0.js"></script>
Show MessageDialog
Modify app.onactivated event under default.js file with the following code:
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
document.addEventListener("deviceready", function () {
navigator.notification.alert("Raise 'Windows.UI.Popups.MessageDialog' Using PhoneGap!", null,
"Getting Started with PhoneGap for Windows Store App", "It's Working!");
var appVer = $("#appVersion").textContent = "Version: " + navigator.appVersion;
var appVer = $("#appName").textContent = "Name: " + navigator.appName;
});
} else {
// TODO: This application has been reactivated from suspension.
// Restore application state here.
}
args.setPromise(WinJS.UI.processAll());
}
};
Notice that we are using “navigator” object to call the alert function under notification namespace.
Same for displaying confirmation dialog:
function showConfirm() {
//Message Content
navigator.notification.confirm("Do you like PhoneGap for Windows 8?", function (i) {
var val = "";
switch (i) {
case 2:
val = "No";
break;
case 3:
val = "Maybe";
break;
default:
val = "Yes";
break;
}
$("#confirmResult").textContent = "You clicked '" + val + "'";
//Title //Command Buttons
}, "PhoneGap for Windows 8", "Yes, No, Maybe");
}
Camera Capture
Again instead of using CameraCaptureUI you can use getPicture function under navigator.camera namespace.
function showCamera() {
navigator.camera.getPicture(
function (data) {
var img = $('#cameraImg');
//img.src = "data:image/jpeg;base64," + data;
img.src = data;
},
function (e) {
navigator.notification.alert("Error getting picture");
},
{
quality: 50, destinationType:
Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.CAMERA
});
}
Don’t forget to apply “Microphone” & “Webcam” capabilities under package.appmanifest file.
Pick Image From Image Folder
Start Camera is similar to FilePicker except you need to define “PHOTOLIBRARY” as the source instead of “CAMERA”.
function showBrowseImage() {
navigator.camera.getPicture(
function (data) {
var img = $('#cameraImg');
//img.src = "data:image/jpeg;base64," + data;
img.src = data;
},
function (e) {
navigator.notification.alert("Error getting picture");
},
{
quality: 50, destinationType:
Camera.DestinationType.FILE_URI, sourceType: Camera.PictureSourceType.PHOTOLIBRARY
});
}
Don’t forget to allow 
in your package.appmanifest file.
Geo Location
You can also use PhoneGap for accessing device sensors such as Accelerometer, GeoLocation and more.
function showLocation() {
navigator.geolocation.getCurrentPosition(function (location) {
$("#locationResult").innerHTML = "Latitude: <strong>" + location.coords.latitude + "</strong><br/>Longitude: <strong>" + location.coords.longitude + "</strong>";
}, function (err) {
$("#locationResult").textContent = "Error getting location";
}, { timeout: 30000, enableHighAccuracy: true });
}
Don’t forget to allow 
in your package.appmanifest file.
Download Demo Project