![pg 2.jpg]()
Step 2 : Open File menu ->select new ->Choose Project then.
![pg 3.jpg]()
Step 3 : Select the new phone application and rename it according to your requirement.
![output.jpg]()
Step 4 : After the opening up source code, replace code by given code with PhotoGap.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="main.js"></script>
</head>
<body>
<h1>PhoneGap photo demo</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>
</body>
</html>
Step 5 : Code for 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. For creating a new main.js file -go to www then right click -add new items then select Text file and rename it by main.js.
![output0.jpg]()
![output00.jpg]()
Scripting for getting info using JavaScript
Put the given JavaScript on main.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;
}
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() {
navigator.notification.alert(message, "", "Error");
}
Step 7 : Output Press F5.
![Output1.jpg]()
Whenever we click on the select photo button the output looks like:
![Output2.jpg]()
Choose a picture by clicking on a displaying picture you will find some more picture.
![output3.jpg]()
When you choose your desired picture from the above pictures your output on the PhoneGap look likewise.
![output4.jpg]()