Step 1 : Open Visual Studio 2010
Step 2 : Open File menu -select new - Choose Project then.
Step 3 : Select the new phone application and rename it according to your requirement.
Step 4 : After opening up the source code, replace the code with the given code for the index.html file:
Scripting for getting User interface
<!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">
// provide our own console if it does not exist ,huge dev aid'
if (typeof window.console == "Undefined") {
window.console = { log: function (str) { window.external.Notify(str); } };
}
// output any errors to console log ,created above'
window.onerror = function (e) {
console.log("window.onError::" + JSON.stringify(e));
};
console.log("Installed console !");
</script>
<script type="text/javascript" charset="uft-8" src="photo.js"></script>
</head>
<body>
<h1> Photo Location</h1>
<div>
<input id="loadImageButton" type="button" value="Select Photo" onclick="selectPhoto(false);" />
<input id="TakePictureButton" type="button" value="Take Photo" onclick="selectPhoto(true);" />
</div>
<div>
<img id="imageControl" alt="" />
</div>
<div>
<span>Current Location : </span>
<ul>
<li> Latitude : <span id="latSpan"></span></li>
<li> Longitude:<span id="lonSpan"></span></li>
</ul>
</div>
</body>
</html>
Designing
Step 5 : Code for the Master.css file.
body
{
background:#000 none repeat scroll 0 0;
color:#ccc;
font-family:Helvetica, Verdana, Geneva, sans-serif;
margin:0;
border-top:1px solid #393939;
}
h1
{
text-align:center;
font-size:18px;
color:#FFC312; /* Mango me! */
}
input[tpye=button]
{
background-color:#000;
border:4px Solid #fff;
padding:4px;
color:#fff;
}
div input[type=button]:nth-child(n+2)
{
margin-left:6px;
}
#imageControl
{
margin-top:80px;
margin-left:10px;
width:300px;
height:300px;
}
Step 6 : In this section we use JavaScript for various functionality for the PhoneGapPhoto application. To create a new main.js file, go to www then right-click - add new items then select Text file and rename to main.js.
Scripting for getting info using JavaScript
Put the given JavaScript in the photo.js file.
/* js file the operations */
var pictureSource;
var destinationType;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
pictureSource = navigator.camera.PictureSourceType;
destinationType = navigator.camera.DestinationType;
getCurrentLocation();
}
function selectPhoto(useCamera) {
if (useCamera) { // take picture
navigator.camera.getPicture(photoLoaded, onError, { allowEdit: true, destinationType: destinationType.FILE_URI });
}
else {
// select from library
navigator.camera.getPicture(photoLoaded, onError, { allowEdit: true, sourceType: pictureSource.PHOTOLIBRARY, destinationType: destinationType.FILE_URI });
}
}
function photoLoaded(imageData) {
var image = document.getElementById("imageControl");
image.src = imageData;
}
function onError(message) {
navigator.notification.alert(message, "", "Error");
}
function getCurrentLocation() {
navigator.geolocation.getCurrentPosition(locationSuccess, onError);
}
function locationSuccess(position) {
var lat = document.getElementById("latSpan");
var lon = document.getElementById("lonSpan");
lat.innerText = position.coords.latitude;
lon.innerText = position.coords.longitude;
}
Step 7 : Output Pres F5
Additional Tools window:
Getting latitude and longitude for the New Delhi location.
Getting latitude and longitude for the Palwal location.
Getting latitude and longitude for the Aligarh location.
Getting latitude and longitude for the Varanasi location.