Getting start with PhoneGap in Windows Phone 7

PhoneGap History

First developed at an iPhoneDevCamp event in San Francisco, PhoneGap went on to win the People's Choice Award at O'Reilly Media's 2009 Web 2.0 Conference and the framework has been used to develop many apps.
Apple Inc. has confirmed that the framework has its approval, even with the new 4.0 developer license agreement changes. The PhoneGap framework is used by several mobile application platforms such as Worklight andappMobi as the backbone of their mobile client development engine.
Adobe officially announced the acquisition of Nitobi Software on October 4, 2011.
Coincident with that, the PhoneGap code was contributed to the Apache Software Foundation to start a new project called Apache Cordova.
The project's original name, Apache Callback, was viewed as too generic.

Introduction

Here in this section we will get to know the introduction part of phone gap. PhoneGap is also called Apache Cordova is an open-source mobile development framework developed by Nitobi Software. PhoneGap is an open source framework for building cross-platform mobile applications with HTML, CSS, and JavaScript. PhoneGap is an HTML5 appication platform that allows you to author native applications with web technologies and get access to APIs and appication stores.

pg 1.jpg

Phone Gap
Developer(s)	Nitobi
Initial release	2005
Preview release	1.3.0 / December 19, 2011; 23 days ago
Development status	Active
Written in	JavaScript, HTML5 and CSS3
Operating system	iOS, Android, webOS, Windows Mobile, Symbian, BlackBerry and Windows Phone 7
Available in	English
Type	mobile development framework
License	Modified BSD license or the MIT License
Website	http://www.phonegap.com/

Before starting to use PhoneGap you need to use the following steps:

Step 1 : First you need to have Visual Studio 2010 in your machine. If you don't have it then install it.

Step 2 : System requirement for PhoneGap. Prerequisite to install the PhoneGap is the Operating System. PhoneGap requiresWindows 7 or Windows Vista Service Pack 2

Step 3 : Download the service pack 1 for Visual Studio. You can easily download it from the following link.

http://www.microsoft.com/download/en/details.aspx?id=23691.

Step 4 : Download the Window phone developer tools. You can easily download it from the following link.

http://www.microsoft.com/download/en/details.aspx?id=13890.

Step 5 : Download the Windows Phone SDK 7.1. You can easily download it from the following link.

http://www.microsoft.com/download/en/details.aspx?id=27570 .

Step 6 : Download PhoneGap. You can easily download it from the link http://phonegap.com/download/ .

Step 6 : The downloaded file is a zip file which contains the necessary templates for developing Windows Phone App using PhoneGap for Visual Studio 2010. Copy the file and extract it to the Visual Studio C# template folder . This is usually C:\Users\[USERNAME]\Documents\Visual Studio 2010\Templates\ProjectTemplates\Silverlight for Windows Phone

Now Create application using PhoneGap

Step 1 : Open Visual Studio 2010

pg 2.jpg

Step 2 : Open File menu -select new - Choose Project then.

pg 3.jpg

Step 3 : In this step select Silverlight for Windows Phone - PhoneGapStarter . Rename the application according to your need then click ok.

Solution Explorer for the application.

pg 5.jpg

Step 4 : Go to the www folder from solution explorer as shown on below fig. Click on the www folder and double-click on index.html.

pg 8.jpg

Go to the source and provide the given script.

pg 9.jpg

Step 4 : Design script

<!DOCTYPEhtml>
<html>
<head>
<metaname="viewport"content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;"/>
<metahttp-equiv="Content-type"content="text/html; charset=utf-8"/>
<title>PhoneGap WP7</title>
<linkrel="stylesheet"href="master.css"type="text/css"media="screen"title="no title"charset="utf-8"/>
<scripttype="text/javascript"charset="utf-8"src="phonegap-1.3.0.js"></script>
<scripttype="text/javascript">
function Button1_onclick()
{
navigator.notification.alert("Hi");
}
</script>
</head>
<body>
<p>
<inputid="Button1"type="button"value="Click"onclick="return Button1_onclick()" />
</p>
</body>
</html>

Step 5 : Run the application. Press F5 and click the button.

pg 6.jpg

After clicking the button, the output will look like as follows:

pg 7.jpg

Thanks !

4 Comments

Join the conversation! Your thoughts help the community grow.

Mahesh Chand14y ago
Good start Deepak. Anoop, Phone Gap is a Framework that can build applications for iPhone, Windows Phone, Android and other mobile devices using same code base. So we don't have to manage 5 different types of projects.
- Deepak Dwij14y ago
  Thanks for your valuable word !
- Anoop Tiwari14y ago
  Thanx sir for reply .. sir i have made 4 0r 5 app in windows phone & i m looking forward to make my collage app on it could you help me
Anoop Tiwari14y ago
what are the advantages of windowgap