prasad android journal

58
1. Create a phonegap application to retrieve the information about the device. MyPhoneGapActivity.java packageme.abc.device; importorg.apache.cordova.DroidGap; importandroid.os.Bundle; public class MyPhoneGapActivity extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); } } Index.html <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="width=320; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Device Information</title> <script type="text/javascript" charset="utf-8" src="cordova- 1.9.0.js"></script> <script type="text/javascript" charset="utf-8"> varonDeviceReady = function() { document.getElementById("dn").innerHTML = device.name document.getElementById("pv").innerHTML = device.phonegap document.getElementById("mp").innerHTML = device.platform document.getElementById("plv").innerHTML = device.version document.getElementById("devready").innerHTML = "OnDeviceReady fired."; }; functioninit() { document.addEventListener("deviceready", onDeviceReady, true); } </script>

Upload: dharitrathod

Post on 26-Dec-2015

20 views

Category:

Documents


1 download

DESCRIPTION

Top Secret

TRANSCRIPT

Page 1: Prasad Android Journal

1. Create a phonegap application to retrieve the information about the device.

MyPhoneGapActivity.java

packageme.abc.device;importorg.apache.cordova.DroidGap;importandroid.os.Bundle;public class MyPhoneGapActivity extends DroidGap {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html><head><meta name="viewport" content="width=320; user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Device Information</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

varonDeviceReady = function() {document.getElementById("dn").innerHTML = device.namedocument.getElementById("pv").innerHTML = device.phonegapdocument.getElementById("mp").innerHTML = device.platformdocument.getElementById("plv").innerHTML = device.versiondocument.getElementById("devready").innerHTML = "OnDeviceReady fired."; };

functioninit() {document.addEventListener("deviceready", onDeviceReady, true); } </script>

</head><body onload="init();" id="stage" class="theme"><h2>Device Information</h2><table border=2><tr><td>Device Name</td><td id="dn"></td></tr>

Page 2: Prasad Android Journal

<tr><td>Device Phonegap</td><td id="pv"></td></tr><tr><td>Device Platform</td><td id="mp"></td></tr><tr><td>Device Version</td><td id="plv"></td></tr></table>

<p>Your app goes here.</p><p>

<span id="devready">onDeviceReady not fired.</span></p>

</body></html>

Output

Page 3: Prasad Android Journal

2. Create a phonegap application to check the network connection of the device.

MyPhoneGapActivity.java

packageme. abc.connect;importorg.apache.cordova.DroidGap;importandroid.os.Bundle;public class MyPhoneGapActivity extends DroidGap {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html><head><meta name="viewport" content="width=320; user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Minimal AppLaud App</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

varonDeviceReady = function() {checkConnection(); };

functioninit() {document.addEventListener("deviceready", onDeviceReady, false); }

functioncheckConnection() {

varnetworkState=navigator.network.connection.type;var states={};states[Connection.UNKNOWN]='Unknown connection';states[Connection.ETHERNET]='Ethernet connection';states[Connection.WIFI]='WiFi connection';states[Connection.CELL_2G]='Cell 2G connection';states[Connection.CELL_3G]='Cell 3G connection';states[Connection.CELL_4G]='Cell 4G connection';states[Connection.NONE]='No connection';alert('Connection type : '+states[networkState]);

}

Page 4: Prasad Android Journal

</script>

</head><body onload="init();" id="stage" class="theme"><h2>Connection Network</h2>

</body></html>

Output

Page 5: Prasad Android Journal

3. Create a phonegap application to create and save the contacts in the device.

MyPhoneGapActivity.java

packageme.abc.contacts; importorg.apache.cordova.DroidGap;importandroid.os.Bundle; public class MyPhoneGapActivity extends DroidGap {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html> <head> <meta name="viewport" content="width=320; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Minimal AppLaud App</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> <script type="text/javascript" charset="utf-8">

var onDeviceReady = function() {document.getElementById("createbutton").addEventListener("click",createc); };function init() {document.addEventListener("deviceready", onDeviceReady, true); } function createc() {

var contact=navigator.contacts.create();var x=document.getElementById("firstname").value;contact.displayName=x;var mname=new ContactName();

mname.familyName=document.getElementById("familyname").value;contact.name=mname;var phonnums=[2];phonnums[0]=new

ContactField('work',document.getElementById("phonework").value,false);phonnums[1]=new

ContactField('mobile',document.getElementById("phonehome").value,false);contact.phoneNumbers=phonnums;

Page 6: Prasad Android Journal

contact.save(onsuccess,onerror); }function onsuccess() { var x=document.getElementById("firstname").value;

alert("New Contact Created :" + x); }function onerror(r) {

alert("Error = "+r.code); }

</script>

</head> <body onload="init();" id="stage" class="theme">

<p> <h1>Contact Creation</h1>

<form><table border=1> <tr>

<td>First name</td> <td><input type="text" id="firstname"></td>

</tr> <tr>

<td>Family name</td> <td><input type="text" id="familyname"></td>

</tr> <tr>

<td>Phone Home</td> <td><input type="text" id="phonehome"></td>

</tr> <tr>

<td>Phone Work</td> <td><input type="text" id="phonework"></td>

</tr> <tr> <td align=center colspan=2> <input type="button" id="createbutton" value="Create Contact"> </td> <tr> </table></form>

</p><p>

</body></html>

Page 7: Prasad Android Journal

Output

Page 8: Prasad Android Journal

4. Create a phonegap application to display the contact information for a specific individual.

MyPhoneGapActivity.java

packageme.abc.displayall; importorg.apache.cordova.DroidGap;importandroid.os.Bundle; public class MyPhoneGapActivity extends DroidGap {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html><head><meta name="viewport" content="width=320; user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Contact Information App</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

varonDeviceReady = function() {navigator.splashscreen.hide;

var options=new ContactFindOptions();options.multiple=true;var fields=["phoneNumbers","name"];navigator.contacts.find(fields,onSuccess,onError,options);document.getElementById("devready").innerHTML = "OnDeviceReady fired."; };

functiononSuccess(contacts){

varul=document.getElementById("list");alert("Con:"+contacts.length);for(var index=0;index<contacts.length;index++){

alert("Con:"+(index+1));var name=contacts[index].name.formatted;varphoneNumber=contacts[index].phoneNumbers[0].value;var li=document.createElement('li');li.innerHTML="<a href='tel://'+phoneNumber+'\'>"+name+"</a>";ul.appendChild(li);

}}

Page 9: Prasad Android Journal

functiononError(){

alert('onError!');}

functioninit() {document.addEventListener("deviceready", onDeviceReady, true); } </script></head><body onload="init();" id="stage" class="theme">

<p>Your app goes here.</p><h1>Contacts</h1><ul id="list"></ul>

</body></html>

Output

5. Create a phonegap application to search the contact from the device using honorificPrefix(Dr.,Ms., Mrs.)

Page 10: Prasad Android Journal

MyPhoneGapActivity.java

packageme.abc.search;importorg.apache.cordova.DroidGap;importandroid.os.Bundle;public class MyPhoneGapActivity extends DroidGap {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html><head><meta name="viewport" content="width=320; user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>honorificPrefix App</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

varonDeviceReady = function() {document.getElementById("searchbutton").addEventListener("click",handleSearch); };functiononE(r) {

document.getElementById("results").innerHTML="";alert("Sorry an error was thrown");

}functiononS(contacts){

alert("Find success");var s="";for(vari=0;i<Math.min(10,contacts.length);i++){

s+="<p>"+contacts[i].name.familyName+"<br>"+contacts[i].displayName+"<br>"+contacts[i].phoneNumbers[0].value+"<br>"+contacts[i].phoneNumbers[1].value+"</p>";

}document.getElementById("results").innerHTML=s;

}functioninit() {document.addEventListener("deviceready", onDeviceReady, true); } functionhandleSearch()

Page 11: Prasad Android Journal

{var search=document.getElementById("name").value;var fields=['*'];var fields1=['displayName','phoneNumbers'];var options=new ContactFindOptions();options.filter=search;options.multiple=true;document.getElementById("results").innerHTML="Searching";navigator.contacts.find(fields,onS,onE,options);

} </script></head><body onload="init();" id="stage" class="theme">

<h1>Contact Search</h1><form> Search contacts<input type="text" id="name"></br></br><input type="button" id="searchbutton" value="search"><div id="results"></div></form></body></html>

Output

Page 12: Prasad Android Journal

6) Create a small phonegap application to implement the SPLASH SCREEN. Also change the default icon of the application.

MyPhoneGapActivity.java

package com.abc.contacts;

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class MyPhoneGapActivity extends DroidGap {@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.setIntegerProperty("splashscreen", R.drawable.mobilesamsung3);super.loadUrl("file:///android_asset/www/display.html",5000);

}}

Index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta name="viewport" content="width=320, user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Contact Information App</title>

<link rel="stylesheet" type="text/css" href="style.css"/><script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

var onDeviceReady = function() {var options=new ContactFindOptions();options.multiple=true;var fields=["phoneNumbers","name"];navigator.contacts.find(fields,onSuccess,onError,options);

};function onSuccess(contacts){

var ul=document.getElementById("list4");for(var index=0;index<contacts.length;index++){

var name=contacts[index].name.formatted;var phoneNumber=contacts[index].phoneNumbers[0].value;var li=document.createElement('li');

li.innerHTML="<a class='anchor' href='tel://'+phoneNumber+'\' >"+name+"</a>";

Page 13: Prasad Android Journal

ul.appendChild(li);}

}function onError(){ alert('onError!'); }function init() { document.addEventListener("deviceready", onDeviceReady, true);

} </script></head><body onload="init();" id="stage" class="theme">

<h1>Contacts</h1>

<div id="wrapper"><h3>Contacts List</h3><div id="list4"><ul></ul></div>

</div></body></html>

Output

Page 14: Prasad Android Journal

7) Create a phonegap application to retrieve all the contacts from the device in a hyperlink and the hyper link click should allow the user to call that contact.

MyPhoneGapActivity.java

package com.abc.contacts;

import org.apache.cordova.DroidGap;import android.os.Bundle;

public class MyPhoneGapActivity extends DroidGap {@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/display.html");

}}

Index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta name="viewport" content="width=320; user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Contact Information App</title>

<link rel="stylesheet" type="text/css" href="style.css"/><script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

var onDeviceReady = function() {navigator.splashscreen.hide;var options=new ContactFindOptions();options.multiple=true;var fields=["phoneNumbers","name"];navigator.contacts.find(fields,onSuccess,onError,options);

};function onSuccess(contacts){

var ul=document.getElementById("list4");for(var index=0;index<contacts.length;index++){

var name=contacts[index].name.formatted;var phoneNumber=contacts[index].phoneNumbers[0].value;var li=document.createElement('li');li.style="{color:#eee}";var a=document.createElement('a');

Page 15: Prasad Android Journal

li.innerHTML="<a class='anchor' href='tel://'+phoneNumber+'\' >"+name+"</a>";

ul.appendChild(li);}}function onError(){

alert('onError!');}function init() {

document.addEventListener("deviceready", onDeviceReady, true); } </script></head><body onload="init();" id="stage" class="theme">

<h1>Contacts</h1><div id="wrapper">

<h3>Contacts List</h3><div id="list4"> <ul> /ul></div>

</div></body></html>

Page 16: Prasad Android Journal

Output

Page 17: Prasad Android Journal

8) Write the steps of connecting your android device to Eclipse.

Connecting Your Android Device to Eclipse:

1. Before we start, you must enable debugging mode on your Android device. Open the 'Applications' folder and select 'Development.' On the subsequent screen, ensure the 'USB Debugging' checkbox is ticked.

2. If you're developing on Windows, you'll need to install the USB driver for your device. Your first stop should be the list of OEM USB Drivers maintained by Google.

Page 18: Prasad Android Journal

3. Connect the device to your computer using the appropriate USB cable.

4. Inside your Eclipse installation, open the 'Run' menu and select 'Run Configurations.'

5. Select the Android project you wish to run/debug and open the 'Target' tab.

6. Ensure 'Always prompt to pick device' is selected, click 'Apply' and 'Run.'

Page 19: Prasad Android Journal

7. The 'Android Device Chooser' will open. If you've connected your device successfully, it will be listed under 'Choose a running Android device.' Select your device and click 'OK.'

8. Check your device - your app will have made the leap from Eclipse onto your screen!

Page 20: Prasad Android Journal

9. Create a phonegap application to query the device orientation in the x, y, and z direction(Static Accelerometer).

MyPhoneGapActivity.java

packageme.abc.accelerometer; importorg.apache.cordova.DroidGap;importandroid.os.Bundle; public class MyPhoneGapActivity extends DroidGap {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html><head><meta name="viewport" content="width=320; user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Accelerometer App</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

varonDeviceReady = function() {document.getElementById("devready").innerHTML = "OnDeviceReady fired."; };

document.addEventListener("deviceready",loaded,false);function loaded(){

navigator.accelerometer.getCurrentAcceleration(onSuccess,onError);}functiononSuccess(acceleration){

alert("Called");alert('Acceleration X: '+ acceleration.x + '\n' +'Acceleration Y: '+ acceleration.y + '\n' +'Acceleration Z: '+ acceleration.z + '\n' +'Timestamp: '+ acceleration.timestamp + '\n');

}functiononError(){alert("Error");}

functioninit() {document.addEventListener("deviceready", onDeviceReady, true); } </script></head>

Page 21: Prasad Android Journal

<body onload="init();" id="stage" class="theme"><h2>Accelerometer App</h2></body></html>

Output

Page 22: Prasad Android Journal

10. Create a phonegap application that watches the device orientation in the x, y, and z direction(Dynamic Accelerometer).

MyPhoneGapActivity.java

packageme.abc.watch;importorg.apache.cordova.DroidGap;importandroid.os.Bundle;public class MyPhoneGapActivity extends DroidGap {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html><head><meta name="viewport" content="width=320; user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Dynamic Accelerometer App</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

varwatchID=null;varonDeviceReady = function() {start(); }; functioninit() {document.addEventListener("deviceready", onDeviceReady, true); }

function start(){

var options = { frequency: 1000 };watchID =

navigator.accelerometer.watchAcceleration(onSuccess,onError,options);}functiononSuccess(acceleration){

document.getElementById("acc").innerHTML='Acceleration X: '+ acceleration.x + '<br/>' +

'Acceleration Y: '+ acceleration.y + '<br/>' +'Acceleration Z: '+ acceleration.z + '<br/>' +'Timestamp: '+ acceleration.timestamp + '<br/>';

}functiononError(){

Page 23: Prasad Android Journal

alert("Error");}function stop(){

if(watchID){

navigator.accelerometer.clearWatch(watchID);watchID=null;document.getElementById("deviceready").innerHTML=watchID;

}}

</script></head><body onload="init();" id="stage" class="theme"><h2>Dynamic Accelerometer App</h2><div id="acc">Waiting</div><button type="button" onClick="startb()">Start</button>

<button type="button" onClick="stopb()">Stop</button></body></html>

Output

Page 24: Prasad Android Journal

11. Create a phonegap application using jquerymobilethat provides access to the audio, image, and video capture capabilities of the device.

MyPhoneGapActivity.java

packageme.abc.jquery; importorg.apache.cordova.DroidGap;importandroid.os.Bundle; public class MyPhoneGapActivity extends DroidGap {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html><head>

<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>jQuery Mobile: Demos and Documentation</title><link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" /><link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /><link rel="stylesheet" href="docsdemos-style-override.css" /><script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script><script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script><!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to

package web app) --><script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">var res;varonDeviceReady = function(){

res = document.getElementById("captureResults");}functioninit(){

document.addEventListener("deviceready",onDeviceReady,true);}functiondoCapture(){

res.innerHTML = "Initiating capture...";varnumItems = document.getElementById("numItems").value;varcapDur = document.getElementById("duration").value;varcaptureType = document.getElementById("captureType").selectedIndex;switch(captureType){

Page 25: Prasad Android Journal

case 0:navigator.device.capture.captureAudio(onCaptureSuccess,onCaptureError,{duration: capDur,

limit: numItems});break;case 1:

navigator.device.capture.captureImage(onCaptureSuccess,onCaptureError,{limit: numItems});break;case 2:

navigator.device.capture.captureVideo(onCaptureSuccess,onCaptureError,{duration: capDur, limit: numItems});

break;}

}functiononCaptureSuccess(fileList){

vari, len, htmlStr;len = fileList.length;if(len>0){

htmlStr = "<p>Results:</p><ol>";for(i=0, len; i<len; i++){

alert(fileList[i].fullPath);htmlStr+='<li><a

href="'+fileList[i].fullPath+'">'+filelist[i].name+'</a></li>';}htmlStr+="</ol>";alert(htmlStr);res.innerHTML = htmlStr;

}}</script>

</head><body onload="init();"><div data-role="header"><h1>Capture Demo</h1></div><div data-role="content"><label for="captureType">Capture Type:</label><select id="captureType" name="captureType"><option value="0">Audio</option><option value="1">Image</option><option value="2">Video</option></select><label for="numItems">Number of Items</label><input type="range" name="numItems" id="numItems" value="1" min="1" max="5"/><label for="duration">Duration</label><input type="range" name="duration" id="duration" value="5" min="1" max="10"/>

Page 26: Prasad Android Journal

<input type="button" id="captureButton" value="Capture" onClick="doCapture();"><div id="captureResults"></div></div><div data-role="footer"><h1>Page Footer</h1></div></body></html>

Output

Page 27: Prasad Android Journal

12) Create a phonegap application that provides current location information of the device to the user.

MyPhoneGapActivity.java

package com.abc.geolocation;

import org.apache.cordova.DroidGap;import android.os.Bundle;

public class MyPhoneGapActivity extends DroidGap {@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html> <head> <meta name="viewport" content="width=320; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>User’s Geo Location</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> <script type="text/javascript" charset="utf-8">

var watchID = null; var onDeviceReady = function() { var option = {enableHighAccuracy:true,frequency:5000}; navigator.geolocation.getCurrentPosition(onSuccess,onFailure); };

function onSuccess(position) { var element = document.getElementById('geolocation'); element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' + 'Longitude: ' + position.coords.longitude + '<br />' + 'Altitude: ' + position.coords.altitude + '<br />' + 'Accuracy: ' + position.coords.accuracy + '<br />' + 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' + 'Heading: ' + position.coords.heading + '<br />' + 'Speed: ' + position.coords.speed + '<br />' + 'Timestamp: ' + position.timestamp + '<br />';

}

Page 28: Prasad Android Journal

function onFailure(error){alert("Code :" + error.code + "\n" + "Message :" +error.message);

} function init() { document.addEventListener("deviceready", onDeviceReady, true); } </script> </head> <body onload="init();" id="stage" class="theme"> <h2>User's Geo Location</h2>

<div id='geolocation'></div> </body></html>

Output

Page 29: Prasad Android Journal

13. Create a phonegap application with which user can watch its location information.

MyPhoneGapActivity.java

packageme.abc.geoposition; importorg.apache.cordova.DroidGap;importandroid.os.Bundle; public class MyPhoneGapActivity extends DroidGap {

@Override public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html><head><meta name="viewport" content="width=320; user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Location App</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

var watchID=null; var onDeviceReady = function() {// start();document.getElementById("startwatch").addEventListener("click",startWatch);document.getElementById("stopwatch").addEventListener("click",stopWatch);};function onSuccess(position){

var geo=document.getElementById('geolocation');geo.innerHTML='Latitude: '+ position.coords.latitude +'<br/>'+

'Longitude: '+ position.coords.longitude +'<br/>'+'Altitude: '+ position.coords.altitude +'<br/>'+'Accuracy: '+ position.coords.accuracy +'<br/>'+'Altitude Accuracy: '+ position.coords.altitudeAccuracy +'<br/>'+'Heading: '+ position.coords.heading +'<br/>'+'Speed: '+ position.coords.speed +'<br/>'+'Timestamp: '+ position.timestamp +'<br/>';

}function onError(error){

alert(error.code);}function init() {

document.addEventListener("deviceready", onDeviceReady, true);}

Page 30: Prasad Android Journal

function startWatch(){

var options = {enableHighAccuracy: true, frequency: 2000 };watchID = navigator.geolocation.watchPosition(onSuccess,onError,options);

}function stopWatch(){

if(watchID){

navigator.geolocation.clearWatch(watchID);watchID=null;document.getElementById("geolocation").innerHTML=watchID;

}}

</script></head>

<body onload="init();" id="stage" class="theme"><h3>Watch User's Geo location</h3><div id="geolocation">GPS</div><button id="startwatch" type="button" onClick="startWatch()">Start</button>

<button id="stopwatch" type="button" onClick="stopWatch()">Stop</button></body>

</html>Output

Page 31: Prasad Android Journal

14. Create a phonegap application that provides Visual, audible, and tactile device notifications.(NOTIFICATION)

MyPhoneGapActivity.java

packageme.abc.notification; importorg.apache.cordova.DroidGap;importandroid.os.Bundle; public class MyPhoneGapActivity extends DroidGap {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE html><html><head>

<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>jQuery Mobile: Demos and Documentation</title>

<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.1.0.css" /><link rel="stylesheet" href="docs/assets/css/jqm-docs.css" /><link rel="stylesheet" href="docsdemos-style-override.css" /><script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script><script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script><!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to

package web app) --><script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script>

function doAlert(){var msgtext = document.getElementById("msgtext").value;navigator.notification.alert(msgtext,onAlert,"Welcome");

}function onAlert(){

alert("U Clicked alert button!");}function doConfirm(){

var msgtext = document.getElementById("msgtext").value;navigator.notification.confirm(msgtext,onDoConfirm,"Sample

Confirmation","Yes,No");}function onDoConfirm(button){

if(button=="1")

Page 32: Prasad Android Journal

alert("Thanks for saying yes!");else if(button=="2")

alert("Oops!");}function doBeep(){

var beeps = document.getElementById("beeps").value;navigator.notification.beep(beeps);

}

function doVibrate(){var vibe = document.getElementById("vibrate").value;navigator.notification.vibrate(vibe);

}</script>

</head> <body> <div data-role="page" id="jqm-home" class="type-home">

<div data-role="header"><h1>Notification Demo</h1>

</div><div data-role="content">

<div data-role="fieldcontain"><label for="msgtext">Message Text:</label><input type="text" id="msgtext" name="msgtext" placeholder="This is a

message"/><div data-role="controlgroup" data-type="horizontal">

<input type="button" value="Alert" onclick="doAlert();"><input type="button" value="Confirm" onclick="doConfirm();">

</div><div data-role="fieldcontain">

<label for="beeps">No. of beeps</label><input type="range" id="beeps" name="beeps" min=1 max=5

value="1"/><div data-role="button" onclick="doBeep();">Beep</div>

</div><div data-role="fieldcontain">

<label for="vibrate">No. of vibrates</label><input type="range" id="vibrate" name="vibrate" min=100 max=1000

step=100 value="100"/><div data-role="button" onclick="doVibrate();">Vibrate</div>

</div></div>

</div></div></body></html>

Page 33: Prasad Android Journal

Output

Page 34: Prasad Android Journal

15. Create a phonegap application for accessing google map and the marker should mark the current location of the device on google map.

MyPhoneGapActivity.java

packageme.abc.maps; importorg.apache.cordova.DroidGap;importandroid.os.Bundle; public class MyPhoneGapActivity extends DroidGap {

@Override public void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html> <head> <meta name="viewport" content="width=320; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Minimal AppLaud App</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?

v=3&sensor=true"></script> <script type="text/javascript" charset="utf-8">

var onDeviceReady = function() { alert('device ready called'); navigator.geolocation.getCurrentPosition(onSuccess,onError); };

function onSuccess(position){alert('onSuccess called'); var latlng = new

google.maps.LatLng(position.coords.latitude,position.coords.longitude);var mapOptions =

{center:latlng,panControl:false,zoomControl:true,zoom:16,mapTypeId: google.maps.MapTypeId.ROADMAP};

var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);

var marker = new google.maps.Marker({position:latlng,map:map});

} function onError(error){ alert('onError called');

Page 35: Prasad Android Journal

var errString= ""; if(error.code) {

switch(error.code){ case 1: errString = 'Unable to obtain the location info because device does not have

permission to use that service'; break; case 2: errString = 'Unable to obtain the location info bcuz the device location could not

be determined'; break; case 3: errString = 'Unable to obtain the location within the specified time allocation'; break; default: errString = 'Unable to obtain the location of device due to an unknown error'; }

} alert(errString); } function init() { document.addEventListener("deviceready", onDeviceReady, true); } </script> <style type="text/css">

#map-canvas{height:300px;width:300px;

}</style> </head> <body onload="init();" id="stage" class="theme"> <h3> You are here</h3> <div id="map-canvas"> <div/></html>

Page 36: Prasad Android Journal

Output

Page 37: Prasad Android Journal

16) Create a phonegap application to implement an event listener to device ready event along with an event handler.

MyPhoneGapActivity.java

packageme.abc.event; importorg.apache.cordova.DroidGap;importandroid.os.Bundle; public class MyPhoneGapActivity extends DroidGap {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html> <head> <meta name="viewport" content="width=320; user-scalable=no" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>Minimal AppLaud App</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script> <script type="text/javascript" charset="utf-8">

var onDeviceReady = function() { document.getElementById("devready").innerHTML = "OnDeviceReady fired."; alert("OnDeviceReady fired."); }; function init() { document.addEventListener("deviceready", onDeviceReady, true); } </script>

</head> <body onload="init();" id="stage" class="theme"> <h2>Device Ready</h2>

<p></p><p>

<span id="devready">onDeviceReady not fired.</span> </p>

</body></html>

Page 38: Prasad Android Journal

Output

Page 39: Prasad Android Journal

17. Create a phonegap application to implement an event listener to Application Status events along with an event handler.

MyPhoneGapActivity.java

packageme.abc.event; importorg.apache.cordova.DroidGap;importandroid.os.Bundle; public class MyPhoneGapActivity extends DroidGap {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html><head><meta name="viewport" content="width=320; user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Event Listenerto ApplnstatusApp</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

vardt; varonDeviceReady = function() {document.getElementById("devready").innerHTML = "OnDeviceReady fired.";document.addEventListener("pause", onPause, false);document.addEventListener("resume", onResume, false); }; functiononPause(){dt=new Date(); }functiononResume(){var d=new Date(); d=(d-dt)/1000;alert("Paused for "+d+" seconds"); }functioninit() {document.addEventListener("deviceready", onDeviceReady, true); } </script></head><body onload="init();" id="stage" class="theme">

Page 40: Prasad Android Journal

<h2>Application Status App</h2></body></html>

Output

Page 41: Prasad Android Journal

18 )Create a phonegap application to implement an event listener to Network status events along with an event handler.

MyPhoneGapActivity.java

package com.abc.EventHandlers;

import org.apache.cordova.DroidGap;import android.os.Bundle;

public class MyPhoneGapActivity extends DroidGap {@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/pause.html");

}}

Index.html

<!DOCTYPE HTML><html><head><meta name="viewport" content="width=320; user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Event Listenerto ApplnstatusApp</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

var dt; var onDeviceReady = function() {//document.getElementById("devready").innerHTML = "OnDeviceReady fired.";document.addEventListener("online", onOnline, false);document.addEventListener("offline", onOffline, false); }; function onOnline(){

alert("Internet Online");}function onOffline(){

alert("Internet Offline");}function init() {

document.addEventListener("deviceready", onDeviceReady, true);}

</script></head>

Page 42: Prasad Android Journal

<body onload="init();" id="stage" class="theme"><h2>Application Status App</h2></body></html>

Output

Page 43: Prasad Android Journal

19. Create a phonegap application to implement an event listener to Button events along with an event handler.

MyPhoneGapActivity.java

packageme.abc.event; importorg.apache.cordova.DroidGap;importandroid.os.Bundle; public class MyPhoneGapActivity extends DroidGap {

@Overridepublic void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);super.loadUrl("file:///android_asset/www/index.html");

}}

Index.html

<!DOCTYPE HTML><html><head><meta name="viewport" content="width=320; user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>Minimal AppLaud App</title>

<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script><script type="text/javascript" charset="utf-8">

varonDeviceReady = function() {document.getElementById("devready").innerHTML = "OnDeviceReady fired.";document.addEventListener("menubutton", onMenuButton, false);document.addEventListener("searchbutton", onSearchButton, false);document.addEventListener("backbutton", onBackButton, false); };functiononMenuButton(){alert("Menu"); }functiononSearchButton(){alert("Search"); }functiononBackButton(){alert("Back"); }functioninit() {document.addEventListener("deviceready", onDeviceReady, true); } </script></head><body onload="init();" id="stage" class="theme"><h2>Event Listener to Button event App</h2>

Page 44: Prasad Android Journal

</body></html>

Output

Page 45: Prasad Android Journal