Prasad Android Journal

Post on 26-Dec-2015

19 views 1 download

description

Top Secret

transcript

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>

<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

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]);

}

</script>

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

</body></html>

Output

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;

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>

Output

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);

}}

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.)

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()

{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

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>";

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

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');

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>

Output

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.

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.'

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!

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>

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

Output

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(){

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

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){

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"/>

<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

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 />';

}

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

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);}

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

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")

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>

Output

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');

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>

Output

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>

Output

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">

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

Output

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>

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

Output

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>

</body></html>

Output