Introduction to Phone Gap

PhoneGap is an HTML5 application platform that allows you to author native applications with web technologies and get access to APIs and application stores. PhoneGap is basically used for developing working code for iPhones, Androids, Blackberries, and WebOS devices that contains HTML, Cascading Style Sheet(CSS) and JavaScript. PhoneGap supports the following features across many of the major smart phone devices:

Accelerator
Camera
Compass
contacts
Files
Geolocation
Media
Network
Notifications (alerts, sounds, vibrations)
Storage

Applications of PhoneGap

Working with Contacts
With PhoneGap, you can easily do the following contacts features: Create a contact using the create() method, Save the contact by using save() method, Find a contact using find() method, Clone a contact using clone() method, Remove a contact using remove() method.
Working with Camera
The PhoneGap API provides two ways to capture images, and one is giving access to the camera object. The second is by using media capture API.
Working with media files
Using Media Capture API, we can also use it to capture audio and video data as well. This allows you to start and stop a recording, play, stop and pause media files and even display an audio file's duration.
Working with Storage Options
PhoneGap also supports a Web SQL database. As with HTML5, you'll be working with SQLite locally, which is normally more than sufficient to create all kinds of rich data back-ends.

PhoneGap API

API, an abbreviation of Application Program Interface, is a set of routines, protocols, and tools for building software applications. A good API makes it easier to develop a program by providing all the building blocks. A programmer then puts the blocks together. An API may describe the ways in which a particular task is performed. So here are the API components:

Accelerator- Tap into the device's motion sensor.
Camera- Capture a photo using the device's camera.
Capture- Capture media files using the device's media capture applications.
Compass- Obtain the direction the device is pointing to.
Connection- Quickly check the network state.
Contacts- Work with the device's contact database.
Device- Gather device-specific information.
Events- Hook into native events through JavaScript.
File- Hook Into native file system through JavaScript.
Geolocation- Make your app location aware.
Media- Record and play back audio files.
Network- Visual, audible, tactile device notification.
Storage- Hook into the device native storage options.

Installation and Configuring PhoneGap

1. Requirements

System Requirements - Windows 7, Windows Vista w/ sp2

Note: Running in VM has issues, if you are on a Mac, you will need to setup a bootcamp partition with Windows 7 or Vista

2. Installation

a) Download the free tools
- http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=27570
b) Membership
In order to submit apps and test apps on a device, you will need to become an App Hub member.
- http://create.msdn.com/en-US/home/membership
c) Get the PhoneGap code
- Download + unzip the latest copy of PhoneGap from http://wiki.phonegap.com/w/page/39991939/Getting%20Started%20with%20PhoneGap%20iOS%20using%20Xcode%204.
- From the unzipped 'Windows Phone' folder copy the file PhoneGapStarter.zip to your templates folder:
C:\Users\[USERNAME]\Documents\Visual Studio 2010\Templates\ProjectTemplates\Silverlight for Windows Phone.

3. Setup a new project

a) Open Visual Studio Express for Windows Phone and choose 'New Project'
b) Select PhoneGapStarter
c) Give your project a name, and select 'OK'

4. Review the project structure

a) The 'www' folder contains your PhoneGap html/js/css and any other resources included in your app.
b) Any content that you add here needs to be a part of the Visual Studio project, and it must be set as content.
c) The 'Properties' folder contains the 'WMAppManifest.xml' in which you specify the permissions of your application.

5. Build and Deploy to Emulator

a) Select Windows Phone Emulator in the top drop-down menu.
b) To start debugging, press F5 then hit the green play button beside the Windows Phone Emulator in the top drop-down menu.

wndws phoneemulatr.jpg

6. Build your project for the device

In order to test your application on a device, the device must be registered. Click here to read documentation of deploying and testing on your Windows Phone.

a) Make sure your phone is connected, and the screen is unlocked
b) In Visual Studio, select 'Windows Phone Device' from the top drop-down menu.
c) Hit the green play button beside the drop-down menu to start debugging or press

Code for index.html

<!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>PhoneGap 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="phonegap-1.3.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 += "PhoneGap is started for using
it...! version is=" + window.device.phonegap;
console.log("onDeviceReady. You should see this message in Visual Studio's output
window.");
}
</script>
</head>
<body>
<h1>Hello Everyone</h1>
<div id="welcomeMsg"></div>
<p></p>
</body>
</html>

OUTPUT

final op.jpg

and when you click on the OK button.

2nd final op.jpg

Resources

Here are some useful resources:

Introduction and Prerequisities of Windows Phone 7Starting Window Phone 7 development with Silverlight: Hour 1Code to select photo on Windows Phone 7