Creating Windows Store App Using PhoneGap (Cordova)

02/12/2012

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.

image

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

  1. Download PhoneGap 2.2.0 – http://phonegap.com/download
  2. Create Blank JavaScript project.
  3. Add “cordova-2.2.0.js” JavaScript file to your js folder. (Located in \lib\windows8)
  4. 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");
}

SNAGHTMLdf29fd0

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
        });
}

image

Don’t forget to apply “Microphone” & “Webcam” capabilities under package.appmanifest file.

image

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 image in your package.appmanifest file.

image

image

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 image in your package.appmanifest file.

image

Download Demo Project

Add comment
facebook linkedin twitter email

Leave a Reply