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.
![pg 4.jpg]()
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 !