In this post, we will setup environment for development of Windows Phone Application using PhoneGap .

Start with Downloading PhoneGap from github . After downloading of file extract its content and open lib folder

image

In the Lib folder open Window folder

image

From Windows Folder copy zipped file CoroDovaStarter and copy to folder

C:\Users\username\Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#\Silverlight for Windows Phone

Note: If you do not have Silverlight for Windows Phone folder creates it inside Visual C# folder.

Now open visual studio and create new project, you should be having a new project template named CordovaStarter

image

If you want to create Windows Phone Application using PhoneGap and other web technologies then you need to select CorodovaStarter template. Let us start with selecting this template and creating a Hello World Application. After creation of project examine solution explorer, you will find a folder created named www

image

www folder contains HTML,CSS, and JavaScript file. Index.html file is the startup file gets rendered. Index.html is normal HTML file with a div tag, h1 tag , and references to javascript and css file. We need to write required HTML for our application in this file. Let us modify HTML here

image

All the scripts on the page get executed when device is ready. Readiness of device can be

image

All the scripts should be written in deviceready function.

image

If you run the application after making above changes, you should be getting below output.

image

Eventually index.html should be having codes as below,


<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

<title>Cordova WP7</title>
<link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript">

document.addEventListener("deviceready",onDeviceReady,false);

// once the device ready event fires, you can safely do your thing! -jm
function onDeviceReady()
{
document.getElementById("welcomeMsg").innerHTML +=
"This is my first cordova/PhoneGap Application"
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
</script>
</head>
<body>
<h2>DebugMode</h2>
<div id="welcomeMsg">
</div>
</body>
</html>

As of now we have set the environment to develop Windows Phone application using PhoneGap or Cordova. In further post we will explore other capabilities and features of PhoneGap or Cordova.

Advertisements

3 thoughts on ““Hello World “Windows Phone Application using PhoneGap or Cordova

  1. I just like the valuable info you provide for your articles.
    I’ll bookmark your weblog and take a look at once more right here regularly.

    I am somewhat certain I’ll be informed many new stuff right
    right here! Good luck for the next!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s