html5 windowsphone,How to create HTML5 apps on Windows Phone with PhoneGap

We will first see in this article

what the added values of PhoneGap for HTML5 applications are. We’ll then

discover how to create our very first project where we will retrieve the

accelerometer’s values from our JavaScript code. At last, we will review a

complete HTML5 gaming sample almost ported as-is to PhoneGap to use the

accelerometer available on the Windows Phones.

Forcing

the landscape orientation

Handling

various resolutions

Loading

the levels with calls to the file system instead of using XHR

Modification

of the gameplay to use the accelerometer

Screenshots

of the result and FPS on some phones

Complete

Visual Studio Solution to download

Introduction

The Mango update for Windows

Phone came with the support of HTML5 thanks to the embedded IE9 browser.

As the desktop version, the mobile version of IE9 delivers hardware

acceleration through the GPU of your Windows Phone. Thus, combined with

JavaScript, IE9 can now serve as a base of interesting user’s experiences

usually reserved to "native code".

The Pros of using HTML5 as a development

platform is a relative promise to easily re-use parts of the code on others

compatibles platforms like Android or iOS. HTML5 has then driven a lot of

interests from the mobiles developers’ ecosystem during the last months.

However, even if the

HTML5/CSS3/SVG & JavaScript specifications have greatly evolved during the

last months, they still lack some major features to build mobile

applications. Indeed, a phone or a tablet exposes specific capabilities

like: GPS, accelerometer, camera, sending SMS, accessing contacts, etc.

To have access to these

capabilities from the JavaScript code, the W3C has been working now for a while

on what we call "Device APIs" or DAP.

Unfortunately, we can consider that no implementation currently exists of those

specifications as this document seems to confirm: Standards for

Web Applications on Mobile: November 2011 current state and roadmap .

Mozilla has started an interesting work by more or less forking those

specifications via what they call Web APIs to

support their Boot To

Gecko

project. This is then a good news as a form of implementation seems to start

with an on-going discussions with the W3C. However, even if things start to

move slowly, we will probably have to wait for several years before having a

stable official W3C specification implemented widely on all platforms.

So the question is: what should

we do in the meantime? Can HTML5 really address those scenarios?

PhoneGap:

a framework filling the gap

While

waiting on real standardized specifications, we don’t have the choice: we need

to create some bridges between JavaScript and the native code of the

targeted platform to have access to its capabilities. The idea is then the

following one: taking the native languages of each platform (C#, Objective-C

and Java) and creating a framework with these languages that will expose

interfaces to the JavaScript developer.

This is exactly what PhoneGap is doing. Let’s take the Windows

Phone case which is the main topic of this article. A Windows Phone’s PhoneGap

project is simply a Silverlight application hosting the WebBrowser control (and

thus IE9) as well as a Silverlight Assembly written in C# which does the job to

access to the accelerometer, GPS, contacts, camera and so on. In this way, as a

JavaScript developer, you will use a DLL named WP7GapClassLib.dll (the

PhoneGap core runtime) without even knowing it via the usage of the code

embedded in the phonegap-1.3.0.jsfile. This DLL contains some C# code

which does calls to the Silverlight runtime available on the phone. As the

runtime has access to all the capabilities of the phone, the JavaScript will do

also. The JavaScript library will then act as a gateway between both worlds.

Moreover, the good point of using this library is that your code will most of

the time works as-is on the PhoneGap versions of Android or iOS. PhoneGap

offers then an interesting form of portability.

Please note by the way that the

PhoneGap support for Windows Phone is now totally complete since the recent

1.3.0 version:

At last, PhoneGap offers also

another interesting service. It embeds your .js, .css, .html, .png resources

inside its projects to package it as a classical application. In summary, you

can use PhoneGap to package your HTML5 application for the various

applications' stores. This is for instance the case of the SujiQ

Windows Phone application built using this approach.

Let’s

create our first PhoneGap project

Prerequisites

Here are the very first steps you

need to follow:

Download the Windows Phone

SDK: Windows

Phone SDK

Download the last version of

Phone (1.3.0 today) on their site: http://phonegap.com/

Unzip the downloaded file

Copy the PhoneGapStarter.zipandPhoneGapCustom.zip files into \Documents\Visual

Studio 2010\Templates\ProjectTemplates

File->New

project

Once the previous steps are done,

you will be able to create your first PhoneGap project. Start Visual Studio

2010, select the "Visual C#" templates and filter them via the "Gap" keyword.

You should then see a new type of project named PhoneGapStarter:

Name your project "MyFirstPhoneGapProject".

Once done, you will find the files I was talking about before in the Solution

Explorer:

You just now have to insert your

HTML5 application into the "www" directory.

Here are several tips I’d like to

share with you about this default project template:

never ever touch the phonegap-1.3.0.jsfile if you’d like to keep a portable code on other versions of

PhoneGap

all files you will add inside the "www" directory must be set as "Content"

in the properties window

instead of the WP7GapClassLib.dll binary file, you can add a reference

to the WP7GapClassLib.csproj C# project available in the "Windows

Phone\framework" directory of the downloaded PhoneGap archive. It will help

you debugging or discovering the native code of the PhoneGap library if needed.

Ok, let’s now start by doing

something normally impossible by default with IE9 Mango: accessing to the

accelerometer’s values from JavaScript.

Getting

the accelerometer’s values from JavaScript

We’re going to see here how to

get the values sent back by the accelerometer (of the emulator or the real

device) in a very simple way.

Open the "index.html"

page and change its default body by this one:

HTML

Copy Code

Accelerometer sample