3/29/13 How to create HTML5 apps on Window s Phone w ith PhoneGap msdn.microsoft.com/en-us/hh771462.aspx 1/13 How to create HTML5 apps on Windows Phone with PhoneGap By David Rousset 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 wil l 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. 1. Introduction 2. Ph oneGap: a framework fillin g the gap 3. Let’s create our first PhoneGap project 4. Getting the accelerometer’s values from JavaScript 5. Re view of a complete sample with the HTML5 Platformer game 1. Forcing the landscape orientation 2. Handl ing various resolutions 3. Loadin g the levels with calls to the file system instead of using XHR 4. Modific ation of the gameplay to use the accelerometer 5. Screenshots of the resu lt and FPS on some phones 6. Complete Visual Studio Solution to download 6. Conclusion 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 th rough the GP U of your Windows Phone. Thus, combined with JavaScript, IE9 can now serve as a base ofinteresting user’s experiences usually reserved to “native code”.
13
Embed
How to Create HTML5 Apps on Windows Phone With PhoneGap
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
7/30/2019 How to Create HTML5 Apps on Windows Phone With PhoneGap
3/29/13 How to create HTML5 apps on Windows Phone with PhoneGap
msdn.microsoft.com/en-us/hh771462.aspx 2/13
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 [1]” 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 [2] . Mozilla
has started an interesting work by more or less forking those specifications via
what they call Web APIs [3] to support their Boot To Gecko [4] 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
3/29/13 How to create HTML5 apps on Windows Phone with PhoneGap
msdn.microsoft.com/en-us/hh771462.aspx 5/13
4. Copy the PhoneGapStarter.zip and PhoneGapCustom.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 PhoneGapproject. 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 thephonegap-1.3.0.js file 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
7/30/2019 How to Create HTML5 Apps on Windows Phone With PhoneGap
3/29/13 How to create HTML5 apps on Windows Phone with PhoneGap
msdn.microsoft.com/en-us/hh771462.aspx 6/13
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 JavaScriptWe’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:
We will simply use 3 <div> tags to display the current X, Y & Z values of the
accelerometer.
Next step is to change the last default <script> block by this one:
Well the code is relatively self-explicit I think. The very first thing to note is
that you need to wait for the “deviceready ” event raised by PhoneGap to be
sure to be in a stable state. You then need to subscribe to this event. In our case,
we will be call-backed into the OnDeviceReady() function. This function is
getting the references to the 3 <div> tags and then asks to be notified by any changes done inside the accelerometer every 500ms with the startWatch()
function. The notifications will be sent to the onSuccess() function that will
have access to the acceleration object containing the x, y & z values. You’ll find
the complete documentation on the PhoneGap site: PhoneGap Documentation
- API Reference - Accelerometer
This is all you need to do on the JavaScript side. However, to make it works, you
need to specify in the project’s properties that you want to request access tothe device’s sensor. The capabilities needed for the proper execution of our
application are listed inside the WMAppManifest.xml file available in the
“ Properties” directory. By default, since 1.3.0, PhoneGap is listing the strict
If you’re testing the very same code on your phone configured to use a French
local (as mine for instance! Description: Clignement d'œil), you will have thefeeling that the application doesn’t work at all… which is indeed the case. I’ve
then spent some time debugging the code and I’ve discovered that the following
3/29/13 How to create HTML5 apps on Windows Phone with PhoneGap
msdn.microsoft.com/en-us/hh771462.aspx 10/13
small resolutions by maintaining a stable 60 fps framerate.
Loading the levels with calls to the file system instead of using XHR
In the initial code, the .TXT files linked to the each level were stored on the webserver and downloaded via XmlHttpRequest calls. As we’re now running
everything client-side in offline mode, XHR local calls are not very
appropriated. I’ve then replaced the initial code of the
PlatformerGame.prototype.LoadNextLevel function by this one:
I’ve just re-used the code available in the PhoneGap documentation: FileReader
. As you can see, you have a full access to the Windows Phone file system from
JavaScript with PhoneGap.
Cool tip: to help you debugging what’s really stored in the Isolated Storage of
the phone or not, you should have a look to this awesome tool: IsoStoreSpy [15]
written by Samuel Blanchard.
Modification of the gameplay to use the accelerometerWell, last part is just to mix all parts of this article to obtain the final result. For
that, I’ve added the following code into the constructor of the Player object in
the Player.js file:
Here is the function that will be call-backed during the accelerometer
variations:
I’ve also added an handler on the “onmousedown ” event on the canvas to jump
when the user tap on the screen.
Screenshots of the result and FPS on some phones
First, let’s review the result within the Windows Phone emulator:
3/29/13 How to create HTML5 apps on Windows Phone with PhoneGap
msdn.microsoft.com/en-us/hh771462.aspx 11/13
We have a framerate varying from 54 to 60 fps on my machine. On a real device,
the framerate differs logically between models. Let’s take the first game level.On the LG E900, the framerate is around 22 fps. On the HTC Radar, it’s around
31 fps. On the Nokia Lumia 800, it’s around 42 fps.
The gameplay could then be not very convincing in most cases. Indeed, I’m
using a fullscreen canvas to draw the whole game. This is not a very good idea
for the mobile limited power CPU, even if the Nokia seems powerful enough tohandle this approach. A better methodology could be to cut the screen stage
into various little canvas that will then be moved by modifying the CSS
7/30/2019 How to Create HTML5 Apps on Windows Phone With PhoneGap