Working With JavaScript, CSS And HTML in PhoneGap

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.





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.

Whenever we click on the select photo button the output looks like:

Choose a picture by clicking on a displaying picture you will find some more picture.



When you choose your desired picture from the above pictures your output on the PhoneGap look likewise.