Working With JavaScript, CSS And HTML in PhoneGap

Deepak Dwij
Jan 20, 2012
13.4k
0
0
Article

Introduction

In this article we are going to have a very interesting session with a PhoneGapPhoto application. In this application we will have a very close look at HTML, JavaScript and CSS.

Let's see how to work with HTML, JavaScript and CSS in PhoneGap applications.

Step 1 : Open Visual Studio 2010

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.

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.

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.