PhoneGap 1.2 Installation for Android in Eclipse


PhoneGap , the open source framework for accessing native features in Mobile Web is quite appealing in the field of accessing Geolocation, Phone Contacts, Toggle Accelerometer, Call, Taking Snapshot, Vibration for Alerts ..

  • The installation of PhoneGap 1.2 for Android applications in eclipse is quite easy. Download PhoneGap 1.2 from www.phonegap.com & extract the .ZIP & switch to the Android folder .

  •  Create a new Android project in Eclipse for PhoneGap.

  • Now create a new folder called /libs & paste the phonegap-1.2.0.js from the Android folder of the PhoneGap SDK .ZIP.

  • Lets add a new folder called ‘/assets’ under project node in eclipse & create a subfolder under it called ‘www’ & paste the mobile webcontent of the mobile website including .css, .js & .html. Here, pasting the index.html from the Android folder of the PhoneGap.

  • Next , create a new folder names /xml under  /res folder under the project node in eclipse & paste the two .xml files named phonegap.xml & plugins.xml.

  • Next , lets add the following code in AndroidManifest.xml for accessing the device native features in Android Mobile Web apps.

<supports-screensandroid:largeScreens=“true”

android:normalScreens=“true”

android:smallScreens =“true”

android:resizeable =“true”

android:anyDensity =“true”

/>

<uses-permissionandroid:name=“android.permission.CAMERA”/>

<uses-permissionandroid:name=“android.permission.VIBRATE”/>

<uses-permissionandroid:name=“android.permission.ACCESS_COARSE_LOCATION”/>

<uses-permissionandroid:name=“android.permission.ACCESS_FINE_LOCATION”/>

<uses-permissionandroid:name= “android.permission.ACCESS_LOCATION_EXTRA_COMMANDS”

/>

<uses-permissionandroid:name=“android.permission.READ_PHONE_STATE”/>

<uses-permissionandroid:name=“android.permission.INTERNET”/>

<uses-permissionandroid:name=“android.permission.RECEIVE_SMS”/>

<uses-permissionandroid:name=“android.permission.RECORD_AUDIO”/>

<uses-permissionandroid:name=“android.permission.MODIFY_AUDIO_SETTINGS”/>

<uses-permissionandroid:name=“android.permission.READ_CONTACTS”/>

<uses-permissionandroid:name=“android.permission.WRITE_CONTACTS”/>

<uses-permissionandroid:name=“android.permission.WRITE_EXTERNAL_STORAGE”/>

<uses-permissionandroid:name=“android.permission.ACCESS_NETWORK_STATE”/>

<uses-permissionandroid:name=“android.permission.GET_ACCOUNTS”/>

<uses-permissionandroid:name=“android.permission.BROADCAST_STICKY”/>

<uses-featureandroid:name=“android.hardware.camera”/>

<uses-featureandroid:name=“android.hardware.camera.autofocus”/>

  •   Modify the following code in PhoneGapAndroidActivity,java :

package com.android.PhoneGap;

import android.app.Activity;

import android.os.Bundle;

import com.phonegap.*;

import com.android.PhoneGap.*;

public class PhoneGap_AndroidActivity extends DroidGap {

   /** Called when the activity is first created. */

   @Override

   public void onCreate(Bundle savedInstanceState) {

       super.onCreate(savedInstanceState);

       super.loadUrl(“file:///android_asset/www/index.html”);

    }

}

  • Lets check the PhoneGap activity in Android as native application of Mobile web apps.

Advertisements

HTML 5 LocalStorage Mobile Web Application with PhoneGap for Windows Phone 7& i-Os


One of the great feature of HTML 5 is the support of localstorage & sessionstorage which is also redefined in Windows Phone as Isolated Storage. Building Offline Application Cache with manifest  files thus becomes easy for web apps of smartphones.

This article demonstrates how to use localstorage functionality in HTML 5 with PhoneGap support. For this rendering just creating a Mobile JQuery Project from Visual Studio template as like this:

  • Next some HTML 5 Code in Index.aspx as basic CSS 3 styles & JavaScript rendering.

<%

@Page Language=”C#”AutoEventWireup=”true”CodeBehind=”Index.aspx.cs”Inherits=”MobileWeb_App.Index” %>

<!DOCTYPE htmlPUBLIC“-//W3C//DTD XHTML 1.0 Transitional//EN”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

<title>Mobile Web without Server</title>

<script>

document.addEventListener(“DOMContentLoaded”, function () {

var foodList = document.getElementById(‘foodList’);

var foodField = document.getElementById(‘foodName’);

document.getElementById(‘foodForm’).addEventListener(‘submit’, function (evt) {

evt.preventDefault();

var newFood = foodField.value;

var newFoodItem = document.createElement(‘li’);

newFoodItem.innerHTML = newFood;

foodList.appendChild(newFoodItem);

foodField.value =“”;

return false;

},

false);

});

</script>

<style>

 body

{

background:white;

}

div#main

{

background:#ccc;

border:black1pxsolid;

height: 82%;

padding:10%;

width:80%;

-webkit-border-radius:8px;

}

</style>

<meta name=”viewport”content=”width=device-width,initial scale=”1.0/>

</head>

<body>

<div id=”main”>

<h1>List Some Food</h1>

<form id=”foodForm”>

<input type=”text”id=”foodName”placeholder=”A name of Food”/>

<button id=”submitFood”>Tell Us</button><br/>

<ul id=”foodList”>

</ul>

</form>

</div>

</body>

</html>

  • Lets look in iPhone 4 Mobile Safari.

  • Lets add some code for localstorage in HTML 5 which will be stored as browser offline cache.

var  l = window.localStorage.length;

var i = 0;

var storedFoodName;

function addNewFoodItem(foodName) {

var newFoodItem = document.createElement(‘li’);

newFoodItem.innerHTML = foodName;

foodList.appendChild(newFoodItem);

}

for (i; i < 1; i++) {

storedFoodName = window.localStorage.key(i);

if (storedFoodName.match(/^food[.]/))

addNewFoodItem(window.localStorage.getItem(storedFoodName))

}

  •  Lets have output for Windows Phone 7 & HTML 5 supported Internet Explorer 9 with GPU acceleration.

  • Internet Explorer 9 renders like this:

%d bloggers like this: