Getting Started With PhoneGap sample application Day 3

Rama Sagar
Posted by in Mobile Development category on for Beginner level | Points: 250 | Views : 4399 red flag

PhoneGap is a open source API that we can use to develop applications that run on variety of mobile devices and platforms
Recommendation
Read Getting Started With PhoneGap setup Day 2 before this article.

Introduction

This article takes you a step further in getting started with PhoneGap series. Today, we will learn how to create a sample application using Phonegap archives  In case you may want to read the Day 1 and Day 2 article, please refer to the below links:

Getting started with PhoneGap Day 1

Getting started with PhoneGap Day 2

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

If we want to create a Windows Phone Application using PhoneGap and other web technologies then you need to select the Corodova template. Let us begin by selecting this template and creating a sample Application.as shown below



After creation of the project, examine the Solution Explorer; you will find a folder created with the name www:


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:


<!DOCTYPE html>

<html>
   
<head>
       
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       
<meta name="format-detection" content="telephone=no" />
       
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
       
<link rel="stylesheet" type="text/css" href="css/index.css" />

           
<script type="text/javascript" src="cordova.js"></script>
       
<script type="text/javascript" src="js/index.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("sampleMsg").innerHTML +=
                               
"This is sample cordova/PhoneGap Application"
              console
.log("onDeviceReady. You should see this message in Visual Studio's output window.");
         
}
     
</script>

       
<title>Hello World</title>
   
</head>
   
<body>
     
<h2>sample</h2>
   
<div id="sampleMsg">
   
</div>
   
</body>
</html>

Output:-



Conclusion

In this article we have learned how to develop Windows Phone applications using PhoneGap or Cordova. In future articles we will explore other capabilities and features of PhoneGap or Cordova. 

Reference

http://docs.phonegap.com/en/edge/guide_platforms_index.md.html

Page copy protected against web site content infringement by Copyscape

About the Author

Rama Sagar
Full Name: RamaSagar Pulidindi
Member Level: Silver
Member Status: Member,MVP
Member Since: 12/30/2012 1:51:40 AM
Country: India
ramasagar
http://www.ramasagar.com
A Software Profesional working in Microsoft .NET technologies since year 2008, and I work for Dake ACE. I am passionate about .NET technology and love to contribute to the .NET community at Dot Net Funda

Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)