Blog

Building Windows Phone Application using PhoneGap

Abhishek / Friday, March 29, 2013
WindowsPhone8_logo
 

  PhoneGap_logo

  

 

 

 

There is a lot of buzz about building Hybrid mobile applications. In this blog series we will talk about building Hybrid mobile applications using PhoneGap. For those who are new to hybrid apps let’s review the pros and cons of this approach.

 

Hybrid Application Architecture

Why Hybrid?

  • Hybrid apps lets you develop and deploy apps much quicker to the app store/marketplace, as you do not have to rewrite the code for different platforms. (HTML5 can be used across different platforms for the markup!)
  • Web developers can re-use their existing knowledge rather than learning various development environment/languages.
  • Transforming an existing web apps into Hybrid mobile app is much simpler than creating native apps for different platforms (Windows Phone, iOS, Android, etc.)

These are few of the reasons why Hybrid apps are a good option. In this blog we will use PhoneGap to build a native/hybrid Windows Phone App.

 

Why not Hybrid?

  • When you need a 3D gaming app or an app that requires very high FPS (frames per second), as Hybrid apps runs in a webview. (It is as good as Web Application)
  • When you want to use native API's/gestures specific to a particular platform. In Hybrid app you may not be able to use all the native API's!
  • You need the world's best user experience out of an app! Native is the way to go.

 

What is PhoneGap?

PhoneGap is a free and open source framework that allows you to create mobile apps using standardized web APIs for differnet platforms. You get to create mobile apps using web technologies (HTML,CSS, and JavaScript).

You can check out the Supported Features/API'sby PhoneGap.

 

Setting up the Environment for building Windows Phone Application using PhoneGap:

Requirements:
  • App Hub membershipfor deployment via Marketplace
  • Installing Windows Phone SDK + Cordova (And extract its content.) Note: The software underlying PhoneGap is Apache Cordova, hence referred as Cordova at times.
  • Extract Phonegap-[ver].zip, and go to lib -> Windows-Phone-8
  • Copy CordovaWP8AppFull-x.x.x.zip template to the folder : \My Documents\Visual Studio 2012\Templates\ProjectTemplates\
Setup New Project:
  • Open Visual Studio and choose New Project
  • Select CordovaWP8AppFull-x.x.x.zip template, and name the project
Project Structure:
  • 'www'folder contains Cordova html/js/css resources in your application. Make sure you add in all resources under this folder.
  • Make sure you set all resources added to this folder as content, else the resource would not be rendered.
Build the Project:
  • Run the solution in the emulator (F5)
  • You may test this XAP on a test device

image

Check out Mihail’s blog which talks about the difference between CordovaWP8AppFull-x.x.x.zip and CordovaWP8AppStandAlone-x.x.x.zip templates which you can find in the PhoneGap folder.


Now we are ready to get started with PhoneGap for Windows Phone 8 using the default template.

Let's try and access some native features using PhoneGap's API's.

For example let's try to find out the Location of the device using the location API's

 

We can call the native GPS/ geolocation API using the cordova method:

geolocation.getCurrentPosition

  1. navigator.geolocation.getCurrentPosition(geolocationSuccess,
  2.                                  [geolocationError],
  3.                                  [geolocationOptions]);

 

Permissions required:

  1. <Capabilities>
  2.   <Capability Name="ID_CAP_LOCATION" />
  3. Capabilities>
 

You will need to add the respective permissions/capabilities in the WPAppManifest.xml. While you submit your app for deploying it on the marketplace, Microsoft runs a static analyzer against your application to figure out what capabilities does your app requires to run. Microsoft will place a disclaimer on your app on usage of these capabilities. (In fact the app might get rejected by Microsoft if the capabilities found out by their analysis doesn't match the capabilities mentioned by you!)

 
Another example:
Accessing Device Details using HTML/JS code:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>Device Properties Sampletitle>
  5.  
  6.     <script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js">script>
  7.     <script type="text/javascript" charset="utf-8">
  8.  
  9.         // Wait for Cordova to load
  10.         //
  11.         document.addEventListener("deviceready", onDeviceReady, false);
  12.  
  13.         // Cordova is ready
  14.         //
  15.         function onDeviceReady() {
  16.             var element = document.getElementById('deviceProperties');
  17.  
  18.             element.innerHTML = 'Device Name: ' + device.model + '
    '     +
  19.                                 'Device Cordova: ' + device.cordova + '
    '     +
  20.                                 'Device Platform: ' + device.platform + '
    '     +
  21.                                 'Device UUID: ' + device.uuid + '
    '     +
  22.                                 'Device Model: ' + device.model + '
    '     +
  23.                                 'Device Version: ' + device.version + '
    '    ;
  24.         }
  25.     script>
  26.   head>
  27.   <body>
  28.     <p id="deviceProperties">Loading device properties...p>
  29.   body>
  30. html>


Permissions Required:

  1. <Capabilities>
  2.   <Capability Name="ID_CAP_WEBBROWSERCOMPONENT" />
  3.   <Capability Name="ID_CAP_IDENTITY_DEVICE" />
  4.   <Capability Name="ID_CAP_IDENTITY_USER" />
  5. Capabilities>

 

 

You can download the sample which accesses the device details using Cordova and prints it on the screen. You can find detailed API Documentation of PhoneGap here.

I will be blogging on using IgniteUI controls with Cordova in my next blog. And in the later blogs we will also learn about PhoneGap build service.

 

Cheers,
Abhishek
@narainabhishek