Cordova (Formerly PhoneGap) - Getting Started in Windows Phone
In this article I will talk about how to get started with Cordova (formerly PhoneGap) in Windows Phone.
Step 1: Download PhoneGap from here. At the time of writing this article lates version of PhoneGap available was 2.0.0.
Step 2: Unzip the downloaded file.
Step 3: Search for CordovaStarter-2.0.0.zip in the unzipped folder downloaded in the above step. In earlier version it was PhoneGapStarter.zip. In 2.0.0 the location of CordovaStarter-2.0.0.zip is as shown below.
Step 4: Place the CordovaStarter-2.0.0.zip in \My Documents\Visual Studio 2010\Templates \ProjectTemplates
Step 5: Now open VS2010 and Create New Project, Select Visual C# from Installed Templates option and you will get option of CordovaStarter-2.0.0. Now click OK.
Step 6: The project structure looks like below in Cordova 2.0.0.
Step 7: Now we are all set to use PhoneGap or Cordova. Open index.html. index.html gets loaded when you run the applicaiton.
It is important to make sure device is ready before you try to access device properties. The API might not work correctly if the device is not ready.
As you know PhoneGap or Cordova uses JavaScript APIs to access device. It is important to notice that JavaScript can start working as soon as DOM is ready but Device needs to be ready to access device properties using JavaScript APIs.
PhoneGap or Cordova provides onDeviceReady method which gets invoked when device is ready.
Place below code in the index.html page.
<!DOCTYPE html>
<html>
<head>
<title>Getting Started Sample</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
var init = function init() {
// Wait for Cordova to load
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
function onDeviceReady() {
alert("Device is ready to be used.");
}
};
window.onload = init;
</script>
</head>
<body>
</body>
</html>
Step 8: Now run. the application and once device is ready, alert will be displayed like below.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)
