Reader Level:
Articles

"Hello World" Windows Phone Application Using PhoneGap or Cordova

By Dhananjay Kumar on May 17, 2012
In this article, we will set up an environment for development of Windows Phone Applications using PhoneGap.
  • 0
  • 0
  • 11930

In this article, we will set up an environment for development of Windows Phone Applications using PhoneGap.

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

PhnGp1.jpg

In the Lib folder open the Windows folder:

PhnGp2.jpg

From the Windows Folder copy the zipped file CoroDovaStarter to the folder:

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

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

Now open Visual Studio and create a new project; you should have a new project template named CordovaStarter:

PhnGp3.jpg

If you want to create a Windows Phone Application using PhoneGap and other web technologies then you need to select the CorodovaStarter template. Let us begin by selecting this template and creating a Hello World Application. After creation of the project, examine the Solution Explorer; you will find a folder created with the name www:

PhnGp4.jpg

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

PhnGp5.jpg

All the scripts on the page are executed when the device becomes ready. The Readiness of the device can be:

PhnGp6.jpg

All the scripts should be written in the deviceready function:

PhnGp7.jpg

If you run the application after making the above changes, you should be getting the following output:

PhnGp8.jpg

Eventually index.html should have the code 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 applications using PhoneGap or Cordova. In a futire article we will explore other capabilities and features of PhoneGap or Cordova.

COMMENT USING

Trending up