This tutorial shows you how to tap into your phone’s sensors by using Phone Gap and HTML5. Here you’ll build a simple Accelerometer and Geo-locator for cross platform deployment. The Visual Studio 10 source file is attached.
What’s Phone Gap?
PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best… HTML and JavaScript. Phone Gap lets you use a single code base to publish to multiple platforms.
What you’ll be doing?
You’ll build your application in HTML and JQueryMobile using the Windows 7 Phone SDK in Visual Studio 10 and the cordova (or phone gap) JavaScript package. Then you’ll zip the www folder and upload it to the Phone Gap Build, here all the major phone applications will be created.
The API’s you’ll be accessing can be found (along with documentation) on the Phone Gap site (http://phonegap.com/) and are: Accelerometer, Camera, Capture, Compass, Connection, Contacts, Device, Events, File, Geolocation, Media, Notification, and Storage.
Note: When Adobe purchased nitobi it transferred Phone Gap to Apache Software Foundation and changed the name to Cordova. Cordova like Phone Gap is open source.
Getting Started
1. First download and install the Windows Phone SDK into Visual Studio 10.
http://www.microsoft.com/en-us/download/details.aspx?displaylang=en&id=27570/
2. Download Cordova (Phone Gap) from phonegap.com
http://phonegap.com/download
3. Unzip the download above (phonegap-phonegap-1.7.0-0-g475bfd2.zip) and navigate to
phonegap-phonegap-475bfd2->lib->windows-> CordovaStarter-1.7.0.zip
Note: In this case we choose the windows folder since we are developing using the Windows Phone SDK. But it doesn’t matter, all you are doing is creating an html page for the phone gap wrapper. You could have done the development in another platform.
Leave the CordovaStarter-1.7.0.zip as a zip file and copy and paste it into Visual Studio’s Project Templates -> Silverlight for Windows Phone folder
The full path is:
Documents->Visual Studio 2010->Templates-> Project Templates -> Silverlight for Windows Phone
If the Silverlight for Windows Phone folder does not exist go ahead and create it.
4. In Visual Studio 10, create a new project and choose Silverlight for Windows Phone (CordovaStarter). Name it Geolocator and hit OK.
A basic phone web structure will be created which contains the cordova JavaScript package and a basic html index page, as shown below in the Solution Explorer:
5. Download JQuery (http://jquery.com/) and JQueryMobile (http://jquerymobile.com/) and drag them along with the JQueryMobile images into the www folder (as shown below) and add their references to your html page (see the attached source files).
HTML Page References to be added (in your index.html page)
- <link rel=”stylesheet” href=”jquery.mobile-1.0.1.css”/>
- <script src=”jquery-1.7.1.js”></script>
- <script src=”jquery.mobile-1.0.1.js”></script>
Note: Remove the master.css link reference since you are using jquery.mobile-1.0.1.css as your style sheet instead.
You are now ready to start programming in JQueryMobile, but wait there are other JavaScript libraries you can program in. Here are a few other JavaScript alternatives to JQueryMobile (just in case you want a little more chrome): Sensa Touch, JqTouch, KendoUI.
6. In the index.html page, the onDiviceReady method starts up when your device is ready. To it, add two navigator methods watch Acceleration and watch Position. These methods listen for changes to your Accelerometer and Geo-locator sensors and sends them to an onSuccess method as shown below in the code:
- function onDeviceReady() {
- //document.getElementById(“welcomeMsg”).innerHTML += “Cordova is ready! version=” + window.device.cordova;
- console.log(“onDeviceReady. You should see this message in Visual Studio’s output window.”);
- var options = { frequency: 1000 }; // Update every 1 seconds
- navigator.accelerometer.watchAcceleration(onSuccessAccl, onError, options);
- navigator.geolocation.watchPosition(onSuccessGeo, onError, options);
- }
7. Then add the following onSuccess methods for the Accelerometer, Geolocation sensors and error method:
- function onSuccessAccl(a) {
- $(‘#aX’).html(a.x);
- $(‘#aY’).html(a.y);
- $(‘#aZ’).html(a.z);
- $(‘#aTime’).html(a.timestamp);
- };
- function onSuccessGeo(p) {
- $(‘#lat’).html(p.coords.latitude);
- $(‘#lng’).html(p.coords.longitude);
- };
- function onError() {
- alert(‘onError!’);
- };
8. In the body tag of index.html add some JQueryMobile magic for formatting the data output:
- <body>
- <div id=”home” data-role=”page”>
- <div data-role=”header”>
- <h1>Sensors</h1>
- </div>
- <div data-role=”content”>
- Accelerometer and Geolocation!
- <br />
- <p>Accelerometer Data</p>
- <p id=”aX”></p>
- <p id=”aY”></p>
- <p id=”aZ”></p>
- <p id=”aTime”></p>
- <br />
- <p>Geolocation Data</p>
- <p id=”lat”></p>
- <p id=”lng”></p>
- </div>
- <div data-role=”footer” >
- <a href=”#dialogpage”>Tech Footer</a>
- </div>
- </div>
- </body>
9. Finally, in the properties folder change the WMAppManifest.xml file by adding a sensors tag as shown below.
Test the program by running Ctrl+F5 (Debug-> Start Without Debugging).
The Windows Phone has an Accelerometer simulator that helps you see the data change in 3D as shown below:
The Windows Phone has a Location simulator that lets you see the lat long change.
10. Once your program is complete, zip the www folder and send it to Phone Gap Build to make it cross platform…more on that in our next tutorial!
Lively's Flash Builder Users Group 