JJTyW4BR

· 7 years ago · Nov 30, 2018, 03:20 PM
1S.Y.B.Sc(IT) â€“Semester III Mobile Programming
2Year 2017-18 1 | 1 1 4
3PRACTICAL No.-1
4Aim:
5â€¢ Creating and building simple â€œHello Worldâ€ App using Cordova
6â€¢ Adding and Using Buttons
7â€¢ Adding and Using Event Listeners
8Solution:-
9Step 1 - Creating App:-
10cordova create Prax1 io.cordova.hello HelloWorld
11
12Step 2 - Adding Platforms:-
13cordova platform add android
14
15Step 3 - Building and Running:-
16cordova build android
17cordova emulate android
18cordova run android
19
20
21Go to Prax1ïƒ wwwïƒ index.html and change DEVICE IS READY to Hello World
22index.html
23<html>
24<head>
25<title>Hello World</title>
26</head>
27<body>
28<div class="app">
29<h1>Apache Cordova</h1>
30<div id="deviceready" class="blink">
31<p class="event listening">Connecting to Device</p>
32<p class="event received">Hello World</p>
33</div>
34</div>
35<script type="text/javascript" src="cordova.js"></script>
36<script type="text/javascript" src="js/index.js"></script>
37</body>
38</html
39
40index.html
41<html>
42<head>
43<title>Hello World</title>
44</head>
45<body>
46<div class="app">
47<h1>Apache Cordova</h1>
48<div id="deviceready" class="blink">
49<p class="event listening">Connecting to Device</p>
50<p class="event received">Hello World</p>
51</div>
52<button id = "showAlertDialog">SHOW ALERT DIALOG</button>
53</div>
54<script type="text/javascript" src="cordova.js"></script>
55<script type="text/javascript" src="js/index.js"></script>
56</body>
57</html>
58index.js
59var app = {
60receivedEvent: function(id) {
61document.getElementById("showAlertDialog").addEventListener("click",
62showAlertDialog);
63}
64};
65app.initialize();
66function showLocalStorage()
67{
68alert("Hi I Am Alert Box..");
69}
70
71PRACTICAL NO-2
72a) Aim: Create a application for Armstrong & Prime Number in Cordova
73index.html
74<html>
75<head>
76<title>Hello World</title>
77</head>
78<body>
79<div class="app">
80<h3>Apache Cordova</h3>
81<div id="deviceready" class="blink">
82<p class="event listening">Connecting to Device</p>
83<p class="event received">Hello World</p>
84</div>
85Enter any Number: <input type="text" id="no" /><br>
86<button id="arm">ArmstrongNo</button>
87<button id="prime">PrimeNo</button>
88<p>The Result is : <br>
89<span id = "result"></span>
90</p>
91</div>
92<script type="text/javascript" src="cordova.js"></script>
93<script type="text/javascript" src="js/index.js"></script>
94</body>
95</html>
96index.js
97var app = {
98receivedEvent: function(id) {
99varparentElement = document.getElementById(id);
100varlisteningElement = parentElement.querySelector('.listening');
101varreceivedElement = parentElement.querySelector('.received');
102listeningElement.setAttribute('style', 'display:none;');
103receivedElement.setAttribute('style', 'display:block;');
104console.log('Received Event: ' + id);
105//Armstrong Number
106document.getElementById("arm").addEventListener("click", armstr);
107//Prime Number
108document.getElementById("prime").addEventListener("click", findPrime);
109}
110};
111app.initialize();
112//Adding Function
113
114function armstr()
115{
116var arm=0,a,b,c,d,num;
117num=Number(document.getElementById("no").value);
118temp=num;
119while(temp>0)
120{
121a=temp%10;
122temp=parseInt(temp/10); // convert float into Integer
123arm=arm+a*a*a;
124}
125if(arm==num)
126{
127document.getElementById('result').innerHTML = num + ' is a Armstrong number';
128}
129else
130{
131document.getElementById('result').innerHTML = num + ' is a not Armstrong number';
132}
133}
134function findPrime()
135{
136varnum = document.getElementById('no').value;
137var c = 0;
138for (i = 1; i <= num; i++)
139{
140if (num % i == 0)
141{
142c = c + 1;
143}
144}
145if (c == 2)
146{
147document.getElementById('result').innerHTML = num + ' is a Prime number';
148}
149else
150{
151document.getElementById('result').innerHTML = num + ' is NOT a Prime number';
152}
153}
154
155b) Aim : Create a simple calculator application in Cordova
156index.html
157<html>
158<head>
159<title>Hello World</title>
160</head>
161<body>
162<div class="app">
163<h1>Apache Cordova</h1>
164<div id="deviceready" class="blink">
165<p class="event listening">Connecting to Device</p>
166<p class="event received">Hello World</p>
167</div>
1681st Number : <input type="text" id="firstNumber" /><br>
1692nd Number: <input type="text" id="secondNumber" /><br>
170<button id="add">ADD</button>
171<button id="sub">SUB</button>
172<button id="multi">MULTI</button>
173<button id="div">DIV</button>
174<p>The Result is : <br>
175<span id = "result"></span>
176</p>
177</div>
178<script type="text/javascript" src="cordova.js"></script>
179<script type="text/javascript" src="js/index.js"></script>
180</body>
181</html>
182index.js
183var app = {
184receivedEvent: function(id) {
185varparentElement = document.getElementById(id);
186varlisteningElement = parentElement.querySelector('.listening');
187varreceivedElement = parentElement.querySelector('.received');
188listeningElement.setAttribute('style', 'display:none;');
189receivedElement.setAttribute('style', 'display:block;');
190console.log('Received Event: ' + id);
191document.getElementById("add").addEventListener("click", add);
192document.getElementById("sub").addEventListener("click", sub);
193document.getElementById("multi").addEventListener("click", multi);
194document.getElementById("div").addEventListener("click", div);
195}
196};
197
198app.initialize();
199//Adding Function
200function add()
201{
202num1 = document.getElementById("firstNumber").value;
203num2 = document.getElementById("secondNumber").value;
204document.getElementById("result").innerHTML = +num1 + +num2;
205}
206function sub()
207{
208num1 = document.getElementById("firstNumber").value;
209num2 = document.getElementById("secondNumber").value;
210document.getElementById("result").innerHTML = num1 - num2;
211}
212function multi()
213{
214num1 = document.getElementById("firstNumber").value;
215num2 = document.getElementById("secondNumber").value;
216document.getElementById("result").innerHTML = num1 * num2;
217}
218function div()
219{
220num1 = document.getElementById("firstNumber").value;
221num2 = document.getElementById("secondNumber").value;
222document.getElementById("result").innerHTML = num1 / num2;
223}
224c) Aim : Create a application for currency converter in Cordova
225index.html
226<html>
227<head>
228<title>Hello World</title>
229</head>
230<body>
231<div class="app">
232<h3>Apache Cordova</h3>
233<div id="deviceready" class="blink">
234<p class="event listening">Connecting to Device</p>
235<p class="event received">Hello World</p>
236</div>
237Enter Amount: <input type="text" id="amt"/><br>
238Select Currency:<select id="cur" required>
239<option value="dollar">DOLLAR</option>
240<option value="euro">EURO</option>
241<option value="yen">YEN</option>
242<option value="pound">POUND</option>
243</select>
244</br>
245</br>
246<input type="button" id="conv" value="CONVERT IN RUPEES"/>
247</br>
248<p>The Result is : <br>
249<span id="result"></span>
250</p>
251</div>
252<script type="text/javascript" src="cordova.js"></script>
253<script type="text/javascript" src="js/index.js"></script>
254</body>
255</html>
256index.js
257var app = {
258receivedEvent: function(id) {
259varparentElement = document.getElementById(id);
260varlisteningElement = parentElement.querySelector('.listening');
261varreceivedElement = parentElement.querySelector('.received');
262listeningElement.setAttribute('style', 'display:none;');
263receivedElement.setAttribute('style', 'display:block;');
264console.log('Received Event: ' + id);
265document.getElementById("conv").addEventListener('click',conversion);
266}
267};
268
269app.initialize();
270//Creating a function
271function conversion()
272{
273varnum=parseInt(document.getElementById("amt").value);
274varcurr=document.getElementById("cur").value;
275varrp;
276if(curr=="dollar")
277{
278rp=num*65;
279document.getElementById("result").innerHTML="<b>"+rp+"</b>"
280}
281if(curr=="euro")
282{
283rp=num*77;
284document.getElementById("result").innerHTML="<b>"+rp+"</b>"
285}
286if(curr=="yen")
287{
288rp=num*0.58;
289document.getElementById("result").innerHTML="<b>"+rp+"</b>"
290}
291if(curr=="pound")
292{
293rp=num*86;
294document.getElementById("result").innerHTML="<b>"+rp+"</b>"
295}
296}
297
298d) Aim: Create a application for Factorial , Palindrome & Reverse number in cordova
299index.html
300<html>
301<head>
302<title>Hello World</title>
303</head>
304<body>
305<div class="app">
306<h3>Apache Cordova</h3>
307<div id="deviceready" class="blink">
308<p class="event listening">Connecting to Device</p>
309<p class="event received">Hello World</p>
310</div>
311Enter Num: <input id="num">
312<button id="fact">FACTORIAL</button>
313<button id="pali">PALINDROME</button>
314<button id="rev">REVERSE</button>
315<p id="result">Result is:</p>
316</div>
317<script type="text/javascript" src="cordova.js"></script>
318<script type="text/javascript" src="js/index.js"></script>
319</body>
320</html>
321index.js
322var app = {
323receivedEvent: function(id) {
324varparentElement = document.getElementById(id);
325varlisteningElement = parentElement.querySelector('.listening');
326varreceivedElement = parentElement.querySelector('.received');
327listeningElement.setAttribute('style', 'display:none;');
328receivedElement.setAttribute('style', 'display:block;');
329console.log('Received Event: ' + id);
330document.getElementById("fact").addEventListener("click", factorial);
331document.getElementById("pali").addEventListener("click", palin);
332document.getElementById("rev").addEventListener("click", revr);
333}
334};
335app.initialize();
336S.Y.B.Sc(IT) â€“Semester III Mobile Programming
337Year 2017-18 19 | 1 1 4
338//Adding Function
339function factorial()
340{
341var i, no, fact;
342fact=1;
343no=Number(document.getElementById("num").value);
344for(i=1; i<=no; i++)
345{
346fact= fact*i;
347}
348result = document.getElementById("result");
349result.innerHTML = "FACT= " + fact;
350}
351function palin()
352{
353vara,no,b,temp=0;
354no=Number(document.getElementById("num").value);
355b=no;
356while(no>0)
357{
358a=no%10;
359no=parseInt(no/10);
360temp=temp*10+a;
361}
362if(temp==b)
363{
364alert("Palindrome number");
365}
366else
367{
368alert("Not Palindrome number");
369}
370}
371function revr()
372{
373vara,no,b,temp=0;
374no=Number(document.getElementById("num").value);
375b=no;
376while(no>0)
377{
378a=no%10;
379no=parseInt(no/10);
380temp=temp*10+a;
381}
382S.Y.B.Sc(IT) â€“Semester III Mobile Programming
383Year 2017-18 20 | 1 1 4
384result = document.getElementById("result");
385result.innerHTML = "REVERSE= " + temp;
386}
387
388e) Aim : Create a application to calculate Simple Interest and Compound Interest in
389Cordova
390index.html
391<html>
392<head>
393<title>Hello World</title>
394</head>
395<body>
396<div class="app">
397<h3>Apache Cordova</h3>
398<div id="deviceready" class="blink">
399<p class="event listening">Connecting to Device</p>
400<p class="event received">Hello World</p>
401</div>
402<h5>Simple Interest Calculation</h5>
403Amount: <input id="p"><br/>
404Rate: <input id="r"><br/>
405No. of Years: <input id="n"><br/>
406<button id="calculate">Calculate</button>
407<p id="result"></p>
408<p>The Result is : <br>
409<span id = "result"></span>
410</p>
411</div>
412<script type="text/javascript" src="cordova.js"></script>
413<script type="text/javascript" src="js/index.js"></script>
414</body>
415</html>
416index.js
417var app = {
418receivedEvent: function(id) {
419varparentElement = document.getElementById(id);
420varlisteningElement = parentElement.querySelector('.listening');
421varreceivedElement = parentElement.querySelector('.received');
422listeningElement.setAttribute('style', 'display:none;');
423receivedElement.setAttribute('style', 'display:block;');
424console.log('Received Event: ' + id);
425document.getElementById("calculate").addEventListener("click", calculate);
426}
427};
428app.initialize();
429
430//Adding Function
431function calculate()
432{
433p = document.getElementById("p").value;
434n = document.getElementById("n").value;
435r = document.getElementById("r").value;
436result = document.getElementById("result");
437result.innerHTML = "The interest is=" + (p*n*r/100);
438}
439
440f) Aim: Create A Application For Calculating Compound Interest IN CORDOVA
441index.html
442<html>
443<head>
444<title>Hello World</title>
445</head>
446<body>
447<div class="app">
448<h3>Apache Cordova</h3>
449<div id="deviceready" class="blink">
450<p class="event listening">Connecting to Device</p>
451<p class="event received">Hello World</p>
452</div>
453<h5>Compound Interest Calculation</h5>
454Amount:<input id="p">
455Rate (%):<input id="r"></br>
456No. of Years:<input id="t">
457Compunding Times Per Year:<input id="n" value="1">
458<button id="calculate">Calculate</button>
459<p id="result"></p>
460<p><span id = "result"></span>
461</p>
462</div>
463<script type="text/javascript" src="cordova.js"></script>
464<script type="text/javascript" src="js/index.js"></script>
465</body>
466</html>
467index.js
468var app = {
469receivedEvent: function(id) {
470varparentElement = document.getElementById(id);
471varlisteningElement = parentElement.querySelector('.listening');
472varreceivedElement = parentElement.querySelector('.received');
473listeningElement.setAttribute('style', 'display:none;');
474receivedElement.setAttribute('style', 'display:block;');
475console.log('Received Event: ' + id);
476document.getElementById("calculate").addEventListener("click", calculate);
477}
478};
479app.initialize();
480
481//Adding Function
482function calculate()
483{
484p = document.getElementById("p").value;
485n = document.getElementById("n").value; // no. of compoundings per year
486t = document.getElementById("t").value; // no. of years
487r = document.getElementById("r").value;
488result = document.getElementById("result");
489// The equation is A = p * [[1 + (r/n)] ^ nt]
490A = (p* Math.pow((1 + (r/(n*100))), (n*t)));
491// toFixed is used for rounding the amount with two decimal places.
492result.innerHTML = "The total amount is=" + A.toFixed(2);
493result.innerHTML += "<br> The interest is=" + (A.toFixed(2) - p).toFixed(2);
494}
495
496g) Aim: Create a application for Temprature CONVERTER IN CORODVA
497index.html
498<html>
499</head>
500<title>Hello World</title>
501</head>
502<body>
503<div class="app">
504<h1>Apache Cordova</h1>
505<div id="deviceready" class="blink">
506<p class="event listening">Connecting to Device</p>
507<p class="event received">Device is Ready</p>
508</div>
509Enter Fahrenheit/Celsius: <input type="text" id="fahren" /><br>
510<button id="fc">Find Celsius</button>
511<button id="cf">Find Fahrenheit</button>
512<h4>Output: <span id="output"></span></h4>
513</div>
514<script type="text/javascript" src="cordova.js"></script>
515<script type="text/javascript" src="js/index.js"></script>
516</body>
517</html>
518index.js
519var app = {
520receivedEvent: function(id) {
521varparentElement = document.getElementById(id);
522varlisteningElement = parentElement.querySelector('.listening');
523varreceivedElement = parentElement.querySelector('.received');
524listeningElement.setAttribute('style', 'display:none;');
525receivedElement.setAttribute('style', 'display:block;');
526console.log('Received Event: ' + id);
527document.getElementById("fc").addEventListener("click", findCelsius);
528document.getElementById("cf").addEventListener("click", findFahrenheit);
529}
530};
531app.initialize();
532function findCelsius()
533{
534varfahrenheit = document.getElementById("fahren").value;
535varcelsius;
536if(fahrenheit != '')
537{
538celsius = (fahrenheit - 32) * 5/9;
539document.getElementById("output").innerHTML = celsius.toFixed(2)+'\xB0C';
540}
541else
542{
543document.getElementById("output").innerHTML = "Please enter a value!";
544}
545}
546function findFahrenheit()
547{
548varcelsius = document.getElementById("fahren").value;
549varfahrenheit;
550if(celsius != '')
551{
552fahrenheit = (celsius* 9/5) + 32;
553document.getElementById("output").innerHTML = fahrenheit.toFixed(2)+' \xB0F.';
554}
555else
556{
557document.getElementById("output").innerHTML = "Please enter a value!";
558}
559}
560h) Aim: Create a application for Multiplication Table Square, Cube and Square root in
561Cordova
562index.html
563<html>
564<head>
565<title>Hello World</title>
566</head>
567<body>
568<div class="app">
569<h1>Apache Cordova</h1>
570<div id="deviceready" class="blink">
571<p class="event listening">Connecting to Device</p>
572<p class="event received">Hello World</p>
573</div>
574Enter Number : <input type="text" id="firstNumber" /><br>
575<button id="mul">MULTITAB</button>
576<button id="suq">SQUARE</button>
577<button id="cub">CUBE</button>
578<button id="sqrt">SQUAREROOT</button>
579<p>The Result is : <br>
580<span id = "result"></span>
581</p>
582</div>
583<script type="text/javascript" src="cordova.js"></script>
584<script type="text/javascript" src="js/index.js"></script>
585</body>
586</html>
587index.js
588var app = {
589receivedEvent: function(id) {
590varparentElement = document.getElementById(id);
591varlisteningElement = parentElement.querySelector('.listening');
592varreceivedElement = parentElement.querySelector('.received');
593listeningElement.setAttribute('style', 'display:none;');
594receivedElement.setAttribute('style', 'display:block;');
595console.log('Received Event: ' + id);
596document.getElementById("mul").addEventListener("click", multiTab);
597document.getElementById("suq").addEventListener("click", suqareN);
598document.getElementById("cub").addEventListener("click", cubeN);
599document.getElementById("sqrt").addEventListener("click", squartN);
600}
601};
602
603app.initialize();
604//Adding Function
605function multiTab() {
606num = document.getElementById("firstNumber").value;
607if(!isNaN(num)) {
608var table="";
609var number="";
610for(i=1;i<=10;i++) {
611number = num * i;
612table += num + " * " + i + " = " + number + "<br/>";
613}
614document.getElementById("result").innerHTML = table;
615}
616else {
617document.getElementById("result").innerHTML = "Please Enter a valid Number";
618}
619}
620function suqareN()
621{
622num = document.getElementById("firstNumber").value;
623varsq=num*num;
624document.getElementById("result").innerHTML = sq;
625}
626function cubeN()
627{
628num = document.getElementById("firstNumber").value;
629varcb=num*num*num;
630document.getElementById("result").innerHTML = cb;
631}
632function squartN()
633{
634num = document.getElementById("firstNumber").value;
635varsqt=Math.sqrt(num)
636document.getElementById("result").innerHTML = sqt;
637}
638
639PRACTICAL NO.-3
640Aim:-
641â€¢ Creating and Using Functions
642â€¢ Using Events
643â€¢ Handling and Using Back Button
644A. Creating and Using Functions:-
645Step 1 - Adding Buttons:-
646index.html:
647<html>
648<head>
649<title>Hello World</title>
650</head>
651<body>
652<div class="app">
653<h1>Apache Cordova</h1>
654<div id="deviceready" class="blink">
655<p class="event listening">Connecting to Device</p>
656<p class="event received">Hello World</p>
657</div>
658<button id = "setLocalStorage">SET LOCAL STORAGE</button>
659<button id = "showLocalStorage">SHOW LOCAL STORAGE</button>
660<button id = "removeProjectFromLocalStorage">REMOVE PROJECT</button>
661<button id = "getLocalStorageByKey">GET BY KEY</button>
662</div>
663<script type="text/javascript" src="cordova.js"></script>
664<script type="text/javascript" src="js/index.js"></script>
665</body>
666</html>
667Step 2 - Adding Event Listeners&Creating Functions
668index.js
669var app = {
670receivedEvent: function(id) {
671varlocalStorage = window.localStorage;
672//Adding Event Listener
673document.getElementById("setLocalStorage").addEventListener("click",
674setLocalStorage);
675document.getElementById("showLocalStorage").addEventListener("click",
676showLocalStorage);
677document.getElementById("removeProjectFromLocalStorage").addEventListener("clickâ€,
678removeProjectFromLocalStorage);
679
680document.getElementById("getLocalStorageByKey").addEventListener("click",
681getLocalStorageByKey);
682}
683};
684app.initialize();
685//Adding Function
686function setLocalStorage() {
687localStorage.setItem("Name", "Nitesh");
688localStorage.setItem("Job", "Developer");
689localStorage.setItem("Project", "Mobile App");
690alert('Data Added Successfully..');
691}
692function showLocalStorage() {
693alert(localStorage.getItem("Name"));
694alert(localStorage.getItem("Job"));
695alert(localStorage.getItem("Project"));
696}
697function removeProjectFromLocalStorage() {
698localStorage.removeItem("Project");
699alert('Project Removed..');
700}
701function getLocalStorageByKey() {
702for(i=0;i<3;i++)
703alert(localStorage.key(i));
704}
705
706C.Handling and Using Back Button:
707index.js
708var app = {
709initialize: function() {
710document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
711//Add Event of Button Function here
712document.addEventListener("backbutton", onBackKeyDown, false);
713};
714app.initialize();
715//Adding Function
716functionon BackKeyDown(e) {
717e.preventDefault();
718alert('Back Button is Pressed!');
719}
720
721PRACTICAL NO.-4
722Aim:
723â€¢ Installing and Using Plugins
724â€¢ Installing and Using Battery Plugin
725â€¢ Installing and Using Camera Plugin
726Step 1 - Installing Battery Plugin:
727To install the plugin, we need to open the command prompt window and run the following code.
728>>cordova plugin add cordova-plugin-battery-status
729
730Step 2 - Add Event Listener&Create Callback Function:
731index.js
732var app = {
733onDeviceReady: function() {
734this.receivedEvent('deviceready');
735window.addEventListener("batterystatus", onBatteryStatus, false);
736}
737};
738app.initialize();
739//Adding Function
740functionon BatteryStatus(info) {
741alert("BATTERY STATUS: Level: " + info.level + " isPlugged: " +
742info.isPlugged);
743}
744
745Install Camera Plugin:
746Run the following code in the command prompt window to install this plugin.
747>>cordova plugin add cordova-plugin-camera
748Adding Button and Image:
749index.html
750<html>
751<head>
752<title>Hello World</title>
753</head>
754<body>
755<div class="app">
756<h1>Apache Cordova</h1>
757<div id="deviceready" class="blink">
758<p class="event listening">Connecting to Device</p>
759<p class="event received">Hello World</p>
760</div>
761<button id = "cameraTakePicture">TAKE PICTURE</button>
762<img id = "myImage"></img>
763</div>
764<script type="text/javascript" src="cordova.js"></script>
765<script type="text/javascript" src="js/index.js"></script>
766</body>
767</html>
768Adding Event Listener & Adding Functions (taking photo)
769index.js
770var app = {
771onDeviceReady: function() {
772this.receivedEvent('deviceready');
773document.getElementById("cameraGetPicture").addEventListener("click",
774cameraGetPicture,false);
775}
776};
777app.initialize();
778//Adding Function
779function cameraGetPicture() {
780navigator.camera.getPicture(onSuccess, onFail, {
781quality: 50,
782destinationType: Camera.DestinationType.DATA_URL
783});
784functionon Success(imageData) {
785var image = document.getElementById('myImage');
786image.src = "data:image/jpeg;base64," + imageData;
787}
788
789functionon Fail(message) {
790alert('Failed because: ' + message);
791}
792}
793
794Practical No.-5
795Aim:-
796â€¢ Installing and Using Contacts Plugin
797â€¢ Installing and Using Device Plugin
798â€¢ Installing and Using Accelerometer Plugin
7991. Install Contacts Plugin:
800On Command Prompt type the following command:
801>>cordova plugin add cordova-plugin-contacts
802
803Adding Buttons:
804index.html
805<html>
806<head>
807<title>Hello World</title>
808</head>
809<body>
810<div class="app">
811<h1>Apache Cordova</h1>
812<div id="deviceready" class="blink">
813<p class="event listening">Connecting to Device</p>
814<p class="event received">Hello World</p>
815</div>
816<button id = "createContact">ADD CONTACT</button>
817<button id = "findContact">FIND CONTACT</button>
818<button id = "deleteContact">DELETE CONTACT</button>
819</div>
820<script type="text/javascript" src="cordova.js"></script>
821<script type="text/javascript" src="js/index.js"></script>
822</body>
823</html>
824Add Event Listeners & Callback Function(navigator.contacts.create):
825index.js
826var app = {
827onDeviceReady: function() {
828this.receivedEvent('deviceready');
829document.getElementById("createContact").addEventListener("click", createContact);
830document.getElementById("findContact").addEventListener("click", findContact);
831document.getElementById("deleteContact").addEventListener("click", deleteContact);
832}
833
834};
835app.initialize();
836//Callback Function (navigator.contacts.create)
837function createContact() {
838var myContact = navigator.contacts.create({"displayName": "Test User"});
839myContact.save(contactSuccess, contactError);
840function contactSuccess() {
841alert("Contact is saved!");
842}
843function contactError(message) {
844alert('Failed because: ' + message);
845}
846}
847//Callback Function (navigator.contacts.find)
848function findContact() {
849var options = new ContactFindOptions();
850options.filter = "";
851options.multiple = true;
852fields = ["displayName"];
853navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);
854function contactfindSuccess(contacts) {
855for (var i = 0; i < contacts.length; i++) {
856alert("Display Name = " + contacts[i].displayName);
857}
858}
859function contactfindError(message) {
860alert('Failed because: ' + message);
861}
862}
863//Callback function (delete):
864function deleteContact() {
865var options = new ContactFindOptions();
866options.filter = "Test User";
867options.multiple = false;
868fields = ["displayName"];
869navigator.contacts.find(fields, contactfindSuccess, contactfindError, options);
870function contactfindSuccess(contacts) {
871var contact = contacts[0];
872contact.remove(contactRemoveSuccess, contactRemoveError);
873
874function contactRemoveSuccess(contact) {
875alert("Contact Deleted");
876}
877function contactRemoveError(message) {
878alert('Failed because: ' + message);
879}
880}
881function contactfindError(message) {
882alert('Failed because: ' + message);
883}
884}
885
886Installing Device Plugin:
887To install this plugin, we need to run the following snippet in the command prompt
888cordova plugin add cordova-plugin-device
889
890Adding Button:
891index.html
892<html>
893<head>
894<title>Hello World</title>
895</head>
896<body>
897<div class="app">
898<h1>Apache Cordova</h1>
899<div id="deviceready" class="blink">
900<p class="event listening">Connecting to Device</p>
901<p class="event received">Hello World</p>
902</div>
903<button id = "cordovaDevice">CORDOVA DEVICE</button>
904</div>
905<script type="text/javascript" src="cordova.js"></script>
906<script type="text/javascript" src="js/index.js"></script>
907</body>
908</html>
909Adding Event Listener & Creating Function
910index.js
911var app = {
912onDeviceReady: function() {
913this.receivedEvent('deviceready');
914document.getElementById("cordovaDevice").addEventListener("click",
915cordovaDevice);
916}
917};
918app.initialize();
919//Adding Function
920function cordovaDevice() {
921alert("Cordova version: " + device.cordova + "\n" +
922"Device model: " + device.model + "\n" +
923"Device platform: " + device.platform + "\n" +
924"Device UUID: " + device.uuid + "\n" +
925"Device version: " + device.version);
926}
927
928Install Accelerometer Plugin
929We will install this plugin by using cordova-CLI. Type the following code in the command prompt
930window.
931cordova plugin add cordova-plugin-device-motion
932
933Add Buttons
934index.html
935<html>
936<head>
937<title>Hello World</title>
938</head>
939<body>
940<div class="app">
941<h1>Apache Cordova</h1>
942<div id="deviceready" class="blink">
943<p class="event listening">Connecting to Device</p>
944<p class="event received">Hello World</p>
945</div>
946<button id = "getAcceleration">GET ACCELERATION</button>
947<button id = "watchAcceleration">WATCH ACCELERATION</button>
948</div>
949<script type="text/javascript" src="cordova.js"></script>
950<script type="text/javascript" src="js/index.js"></script>
951</body>
952</html>
953Add Event Listeners & Creating Functions:
954index.js
955var app = {
956onDeviceReady: function() {
957this.receivedEvent('deviceready');
958document.getElementById("getAcceleration").addEventListener("click",
959getAcceleration);
960document.getElementById("watchAcceleration").addEventListener(
961"click", watchAcceleration);
962}
963};
964app.initialize();
965//Adding Function
966function getAcceleration() {
967navigator.accelerometer.getCurrentAcceleration(
968accelerometerSuccess, accelerometerError);
969function accelerometerSuccess(acceleration) {
970alert('Acceleration X: ' + acceleration.x + '\n' +
971'Acceleration Y: ' + acceleration.y + '\n' +
972'Acceleration Z: ' + acceleration.z + '\n' +
973'Timestamp: ' + acceleration.timestamp + '\n');
974};
975function accelerometerError() {
976alert('onError!');
977};
978}
979function watchAcceleration() {
980var accelerometerOptions = {
981frequency: 3000
982}
983var watchID = navigator.accelerometer.watchAcceleration(
984accelerometerSuccess, accelerometerError, accelerometerOptions);
985function accelerometerSuccess(acceleration) {
986alert('Acceleration X: ' + acceleration.x + '\n' +
987'Acceleration Y: ' + acceleration.y + '\n' +
988'Acceleration Z: ' + acceleration.z + '\n' +
989'Timestamp: ' + acceleration.timestamp + '\n');
990setTimeout(function() {
991navigator.accelerometer.clearWatch(watchID);
992}, 10000);
993};
994function accelerometerError() {
995alert('onError!');
996};
997}
998
999Practical No.-6
1000Aim:-
1001â€¢ Install and Using Device Orientation plugin
1002â€¢ Install and Using Device Orientation plugin
1003â€¢ Create and Using Prompt Function
1004Step 1 - Install Device Orientation plugin
1005Open the command prompt window and run the following.
1006>>cordova plugin add cordova-plugin-device-orientation
1007
1008Step 2 - Add Buttons:
1009index.html
1010<html>
1011<head>
1012<title>Hello World</title>
1013</head>
1014<body>
1015<div class="app">
1016<h1>Apache Cordova</h1>
1017<div id="deviceready" class="blink">
1018<p class="event listening">Connecting to Device</p>
1019<p class="event received">Hello World</p>
1020</div>
1021<button id = "getOrientation">GET ORIENTATION</button>
1022<button id = "watchOrientation">WATCH ORIENTATION</button>
1023</div>
1024<script type="text/javascript" src="cordova.js"></script>
1025<script type="text/javascript" src="js/index.js"></script>
1026</body>
1027</html>
1028Step 3 - Add Event Listeners & Creating Functions:
1029index.js
1030var app = {
1031onDeviceReady: function() {
1032this.receivedEvent('deviceready');
1033
1034document.getElementById("getOrientation").addEventListener("click", getOrientation);
1035document.getElementById("watchOrientation").addEventListener("click", watchOrientation);
1036}
1037};
1038app.initialize();
1039//Adding Function
1040functiongetOrientation() {
1041navigator.compass.getCurrentHeading(compassSuccess, compassError);
1042functioncompassSuccess(heading) {
1043alert('Heading: ' + heading.magneticHeading);
1044};
1045functioncompassError(error) {
1046alert('CompassError: ' + error.code);
1047};
1048}
1049functionwatchOrientation(){
1050varcompassOptions = {
1051frequency: 3000
1052}
1053varwatchID = navigator.compass.watchHeading(compassSuccess,
1054compassError, compassOptions);
1055functioncompassSuccess(heading) {
1056alert('Heading: ' + heading.magneticHeading);
1057setTimeout(function() {
1058navigator.compass.clearWatch(watchID);
1059}, 10000);
1060};
1061functioncompassError(error) {
1062alert('CompassError: ' + error.code);
1063};
1064}
1065
1066Aim: Create and Using Prompt Function
1067Step 1 - Installing Dialog
1068Type the following command in the command prompt window to install this plugin.
1069>>cordova plugin add cordova-plugin-dialogs
1070
1071Step 2 - Add Buttons
1072index.html
1073<html>
1074<head>
1075<title>Hello World</title>
1076</head>
1077<body>
1078<div class="app">
1079<h1>Apache Cordova</h1>
1080<div id="deviceready" class="blink">
1081<p class="event listening">Connecting to Device</p>
1082<p class="event received">Hello World</p>
1083</div>
1084<button id = "dialogAlert">ALERT</button>
1085<button id = "dialogConfirm">CONFIRM</button>
1086<button id = "dialogPrompt">PROMPT</button>
1087<button id = "dialogBeep">BEEP</button>
1088</div>
1089<script type="text/javascript" src="cordova.js"></script>
1090<script type="text/javascript" src="js/index.js"></script>
1091</body>
1092</html>
1093Step 3 - Add Event Listeners & Create Function
1094index.js
1095var app = {
1096onDeviceReady: function() {
1097this.receivedEvent('deviceready');
1098document.getElementById("dialogAlert").addEventListener("click", dialogAlert);
1099document.getElementById("dialogConfirm").addEventListener("click", dialogConfirm);
1100
1101document.getElementById("dialogPrompt").addEventListener("click", dialogPrompt);
1102document.getElementById("dialogBeep").addEventListener("click", dialogBeep);
1103}
1104};
1105app.initialize();
1106functiondialogAlert() {
1107var message = "I am Alert Dialog!";
1108var title = "ALERT";
1109varbuttonName = "Alert Button";
1110navigator.notification.alert(message, alertCallback, title, buttonName);
1111functionalertCallback() {
1112console.log("Alert is Dismissed!");
1113}
1114}
1115functiondialogConfirm() {
1116var message = "Am I Confirm Dialog?";
1117var title = "CONFIRM";
1118varbuttonLabels = "YES,NO";
1119navigator.notification.confirm(message, confirmCallback, title, buttonLabels);
1120functionconfirmCallback(buttonIndex) {
1121console.log("You clicked " + buttonIndex + " button!");
1122}
1123}
1124functiondialogPrompt() {
1125var message = "Am I Prompt Dialog?";
1126var title = "PROMPT";
1127varbuttonLabels = ["YES","NO"];
1128vardefaultText = "Default"
1129navigator.notification.prompt(message, promptCallback,
1130title, buttonLabels, defaultText);
1131functionpromptCallback(result) {
1132console.log("You clicked " + result.buttonIndex + " button! \n" +
1133"You entered " + result.input1);
1134}
1135}
1136functiondialogBeep() {
1137var times = 2;
1138navigator.notification.beep(times);
1139}
1140
1141
1142Practical No.-7
1143Aim:-
1144â€¢ Installing and Using File Plugin
1145â€¢ Installing and Using File Transfer Plugin
1146â€¢ Using Download and Upload functions
1147Aim: Installing and Using File Plugin
1148Step 1 - Installing File Plugin:
1149We need to run the following code in the command prompt to install this plugin.
1150>>cordova plugin add cordova-plugin-file
1151Step 2 - Add Buttons:
1152index.html
1153<html>
1154<head>
1155<title>Hello World</title>
1156</head>
1157<body>
1158<div class="app">
1159<h1>Apache Cordova</h1>
1160<div id="deviceready" class="blink">
1161<p class="event listening">Connecting to Device</p>
1162<p class="event received">Hello World</p>
1163</div>
1164<button id = "createFile">CREATE FILE</button>
1165<button id = "writeFile">WRITE FILE</button>
1166<button id = "readFile">READ FILE</button>
1167<button id = "removeFile">DELETE FILE</button>
1168<textarea id = "textarea"></textarea>
1169</div>
1170<script type="text/javascript" src="cordova.js"></script>
1171<script type="text/javascript" src="js/index.js"></script>
1172
1173</body>
1174</html>
1175Step: 3Add Event Listeners & Create File function
1176index.js
1177var app = {
1178onDeviceReady: function() {
1179this.receivedEvent('deviceready');
1180document.getElementById("createFile").addEventListener("click", createFile);
1181document.getElementById("writeFile").addEventListener("click", writeFile);
1182document.getElementById("readFile").addEventListener("click", readFile);
1183document.getElementById("removeFile").addEventListener("click", removeFile);
1184}
1185};
1186app.initialize();
1187//Adding Function
1188function createFile() {
1189var type = window.TEMPORARY;
1190var size = 5*1024*1024;
1191window.requestFileSystem(type, size, successCallback, errorCallback)
1192function successCallback(fs) {
1193fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
1194alert('File creation successfull!')
1195}, errorCallback);
1196}
1197function errorCallback(error) {
1198alert("ERROR: " + error.code)
1199}
1200}
1201function writeFile() {
1202var type = window.TEMPORARY;
1203var size = 5*1024*1024;
1204window.requestFileSystem(type, size, successCallback, errorCallback)
1205function successCallback(fs) {
1206fs.root.getFile('log.txt', {create: true}, function(fileEntry) {
1207fileEntry.createWriter(function(fileWriter) {
1208fileWriter.onwriteend = function(e) {
1209alert('Write completed.');
1210};
1211fileWriter.onerror = function(e) {
1212alert('Write failed: ' + e.toString());
1213};
1214var blob = new Blob(['Lorem Ipsum'], {type: 'text/plain'});
1215fileWriter.write(blob);
1216}, errorCallback);
1217}, errorCallback);
1218}
1219function errorCallback(error) {
1220alert("ERROR: " + error.code)
1221}
1222}
1223function readFile() {
1224var type = window.TEMPORARY;
1225var size = 5*1024*1024;
1226window.requestFileSystem(type, size, successCallback, errorCallback)
1227function successCallback(fs) {
1228fs.root.getFile('log.txt', {}, function(fileEntry) {
1229fileEntry.file(function(file) {
1230var reader = new FileReader();
1231reader.onloadend = function(e) {
1232var txtArea = document.getElementById('textarea');
1233txtArea.value = this.result;
1234};
1235reader.readAsText(file);
1236}, errorCallback);
1237}, errorCallback);
1238}
1239function errorCallback(error) {
1240alert("ERROR: " + error.code)
1241}
1242}
1243function removeFile() {
1244var type = window.TEMPORARY;
1245var size = 5*1024*1024;
1246window.requestFileSystem(type, size, successCallback, errorCallback)
1247function successCallback(fs) {
1248fs.root.getFile('log.txt', {create: false}, function(fileEntry) {
1249fileEntry.remove(function() {
1250alert('File removed.');
1251}, errorCallback);
1252}, errorCallback);
1253}
1254function errorCallback(error) {
1255alert("ERROR: " + error.code)
1256}
1257}
1258
1259B) Aim: Installing and Using File Transfer Plugin
1260Step 1 - Installing File Transfer Plugin
1261We need to open command prompt and run the following command to install the plugin.
1262Step 2 - Create Buttons
1263index.html
1264<html>
1265<head>
1266<title>Hello World</title>
1267</head>
1268<body>
1269<div class="app">
1270<h1>Apache Cordova</h1>
1271<div id="deviceready" class="blink">
1272<p class="event listening">Connecting to Device</p>
1273<p class="event received">Hello World</p>
1274</div>
1275<button id = "uploadFile">UPLOAD</button>
1276<button id = "downloadFile">DOWNLOAD</button>
1277</div>
1278<script type="text/javascript" src="cordova.js"></script>
1279<script type="text/javascript" src="js/index.js"></script>
1280</body>
1281</html>
1282Step 3 - Add Event Listeners, Download Function & Upload Function
1283index.js
1284var app = {
1285onDeviceReady: function() {
1286this.receivedEvent('deviceready');
1287document.getElementById("uploadFile").addEventListener("click", uploadFile);
1288document.getElementById("downloadFile").addEventListener("click", downloadFile);
1289}
1290};
1291
1292app.initialize();
1293//Adding Function
1294function downloadFile() {
1295var fileTransfer = new FileTransfer();
1296var uri = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
1297var fileURL = "///storage/emulated/0/DCIM/myFile";
1298fileTransfer.download(
1299uri, fileURL, function(entry) {
1300console.log("download complete: " + entry.toURL());
1301},
1302function(error) {
1303console.log("download error source " + error.source);
1304console.log("download error target " + error.target);
1305console.log("download error code" + error.code);
1306},
1307false, {
1308headers: {
1309"Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
1310}
1311}
1312);
1313}
1314function uploadFile() {
1315var fileURL = "///storage/emulated/0/DCIM/myFile"
1316var uri = encodeURI("http://posttestserver.com/post.php");
1317var options = new FileUploadOptions();
1318options.fileKey = "file";
1319options.fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);
1320options.mimeType = "text/plain";
1321var headers = {'headerParam':'headerValue'};
1322options.headers = headers;
1323var ft = new FileTransfer();
1324ft.upload(fileURL, uri, onSuccess, onError, options);
1325function onSuccess(r) {
1326console.log("Code = " + r.responseCode);
1327console.log("Response = " + r.response);
1328console.log("Sent = " + r.bytesSent);
1329}
1330
1331function onError(error) {
1332alert("An error has occurred: Code = " + error.code);
1333console.log("upload error source " + error.source);
1334console.log("upload error target " + error.target);
1335}
1336}
1337
1338Practical No.-8
1339Aim:-
1340â€¢ Installing and Using Globalization Plugin
1341â€¢ Installing and Using Media Plugin
1342â€¢ Installing and Using Media Capture Plugin
1343A. Installing and Using Globalization Plugin:-
1344Step-1:- Open command prompt and install the plugin by typing the following code
1345>>cordova plugin add cordova-plugin-globalization
1346Step 2 - Add Buttons
1347index.html
1348<html>
1349<head>
1350<title>Hello World</title>
1351</head>
1352<body>
1353<div class="app">
1354<h3>Apache Cordova</h3>
1355<div id="deviceready" class="blink">
1356<p class="event listening">Connecting to Device</p>
1357<p class="event received">Hello World</p>
1358</div>
1359<button id = "getLanguage">LANGUAGE</button>
1360<button id = "getLocaleName">LOCALE NAME</button>
1361<button id = "getDate">DATE</button>
1362<button id = "getCurrency">CURRENCY</button>
1363</div>
1364<script type="text/javascript" src="cordova.js"></script>
1365<script type="text/javascript" src="js/index.js"></script>
1366</body>
1367</html>
1368
1369Step 3 - Add Event Listeners & Function:
1370index.js
1371var app = {
1372receivedEvent: function(id) {
1373var parentElement = document.getElementById(id);
1374var listeningElement = parentElement.querySelector('.listening');
1375var receivedElement = parentElement.querySelector('.received');
1376listeningElement.setAttribute('style', 'display:none;');
1377receivedElement.setAttribute('style', 'display:block;');
1378console.log('Received Event: ' + id);
1379document.getElementById("getLanguage").addEventListener("click", getLanguage);
1380document.getElementById("getLocaleName").addEventListener("click",
1381getLocaleName);
1382document.getElementById("getDate").addEventListener("click", getDate);
1383document.getElementById("getCurrency").addEventListener("click", getCurrency);
1384}
1385};
1386app.initialize();
1387//For Language Function
1388function getLanguage() {
1389navigator.globalization.getPreferredLanguage(onSuccess, onError);
1390function onSuccess(language) {
1391alert('language: ' + language.value + '\n');
1392}
1393function onError(){
1394alert('Error getting language');
1395}
1396}
1397//For Locale Function
1398function getLocaleName() {
1399navigator.globalization.getLocaleName(onSuccess, onError);
1400function onSuccess(locale) {
1401alert('locale: ' + locale.value);
1402}
1403function onError(){
1404alert('Error getting locale');
1405}
1406}
1407//For Date Function
1408function getDate() {
1409var date = new Date();
1410var options = {
1411formatLength:'short',
1412selector:'date and time'
1413}
1414navigator.globalization.dateToString(date, onSuccess, onError, options);
1415
1416function onSuccess(date) {
1417alert('date: ' + date.value);
1418}
1419function onError(){
1420alert('Error getting dateString');
1421}
1422}
1423//For Currency Function
1424function getCurrency() {
1425var currencyCode = 'IND';
1426navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError);
1427function onSuccess(pattern) {
1428alert('pattern: ' + pattern.pattern + '\n' +
1429'code: ' + pattern.code + '\n' +
1430'fraction: ' + pattern.fraction + '\n' +
1431'rounding: ' + pattern.rounding + '\n' +
1432'decimal: ' + pattern.decimal + '\n' +
1433'grouping: ' + pattern.grouping);
1434}
1435function onError(){
1436alert('Error getting pattern');
1437}
1438}
1439
1440B. Installing and Using Media Plugin
1441Step 1 - Installing Media Plugin
1442Media plugin can be installed by running the following code in command prompt window.
1443>> cordova plugin add cordova-plugin-media
1444Step 2 - Add Buttons
1445index.html
1446<html>
1447<head>
1448<title>Hello World</title>
1449</head>
1450<body>
1451<div class="app">
1452<h3>Apache Cordova</h3>
1453<div id="deviceready" class="blink">
1454<p class="event listening">Connecting to Device</p>
1455<p class="event received">Hello World</p>
1456</div>
1457<button id = "playAudio">PLAY</button>
1458<button id = "pauseAudio">PAUSE</button>
1459<button id = "stopAudio">STOP</button>
1460<button id = "volumeUp">VOLUME UP</button>
1461<button id = "volumeDown">VOLUME DOWN</button>
1462</div>
1463<script type="text/javascript" src="cordova.js"></script>
1464<script type="text/javascript" src="js/index.js"></script>
1465</body>
1466</html>
1467
1468Step 3- Add Event Listeners & Function
1469index.js
1470var app = {
1471receivedEvent: function(id) {
1472var parentElement = document.getElementById(id);
1473var listeningElement = parentElement.querySelector('.listening');
1474var receivedElement = parentElement.querySelector('.received');
1475listeningElement.setAttribute('style', 'display:none;');
1476receivedElement.setAttribute('style', 'display:block;');
1477console.log('Received Event: ' + id);
1478document.getElementById("playAudio").addEventListener("click", playAudio);
1479document.getElementById("pauseAudio").addEventListener("click", pauseAudio);
1480document.getElementById("stopAudio").addEventListener("click", stopAudio);
1481document.getElementById("volumeUp").addEventListener("click", volumeUp);
1482document.getElementById("volumeDown").addEventListener("click", volumeDown);
1483}
1484};
1485app.initialize();
1486//This Function Use For Play
1487var myMedia = null;
1488function playAudio() {
1489var src = " file:///android_asset/www/lovezindagi.mp3 ";
1490if(myMedia === null) {
1491myMedia = new Media(src, onSuccess, onError);
1492function onSuccess() {
1493console.log("playAudio Success");
1494}
1495function onError(error) {
1496console.log("playAudio Error: " + error.code);
1497}
1498}
1499myMedia.play();
1500}
1501//This is Pause and Stop Functions
1502function pauseAudio() {
1503if(myMedia) {
1504myMedia.pause();
1505}
1506}
1507function stopAudio() {
1508if(myMedia) {
1509myMedia.stop();
1510}
1511myMedia = null;
1512}
1513//This is Volume Functions
1514var volumeValue = 0.5;
1515function volumeUp() {
1516if(myMedia && volumeValue < 1) {
1517myMedia.setVolume(volumeValue += 0.1);
1518}
1519}
1520function volumeDown() {
1521if(myMedia && volumeValue > 0) {
1522myMedia.setVolume(volumeValue -= 0.1);
1523}
1524}
1525
1526C. Installing and Using Media Capture Plugin
1527Step1: To install this plugin, we will open command prompt and run the following code
1528>> cordova plugin add cordova-plugin-media-capture
1529
1530Step2: Add Buttons
1531index.html
1532<html>
1533<head>
1534<title>Hello World</title>
1535</head>
1536<body>
1537<div class="app">
1538<h3>Apache Cordova</h3>
1539<div id="deviceready" class="blink">
1540<p class="event listening">Connecting to Device</p>
1541<p class="event received">Hello World</p>
1542</div>
1543<button id = "audioCapture">AUDIO</button>
1544<button id = "imageCapture">IMAGE</button>
1545<button id = "videoCapture">VIDEO</button>
1546</div>
1547<script type="text/javascript" src="cordova.js"></script>
1548<script type="text/javascript" src="js/index.js"></script>
1549</body>
1550</html>
1551Step3: Add Event Listeners & Function
1552index.js
1553var app = {
1554receivedEvent: function(id) {
1555var parentElement = document.getElementById(id);
1556var listeningElement = parentElement.querySelector('.listening');
1557var receivedElement = parentElement.querySelector('.received');
1558listeningElement.setAttribute('style', 'display:none;');
1559receivedElement.setAttribute('style', 'display:block;');
1560console.log('Received Event: ' + id);
1561document.getElementById("audioCapture").addEventListener("click", audioCapture);
1562document.getElementById("imageCapture").addEventListener("click", imageCapture);
1563document.getElementById("videoCapture").addEventListener("click", videoCapture);
1564}
1565};
1566app.initialize();
1567//This Function is Used for Capturing Audio
1568function audioCapture() {
1569var options = {
1570limit: 1,
1571duration: 10
1572};
1573navigator.device.capture.captureAudio(onSuccess, onError, options);
1574
1575function onSuccess(mediaFiles) {
1576var i, path, len;
1577for (i = 0, len = mediaFiles.length; i < len; i += 1) {
1578path = mediaFiles[i].fullPath;
1579alert(mediaFiles);
1580}
1581}
1582function onError(error) {
1583navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
1584}
1585}
1586//This function is used for Capturing Image
1587function imageCapture() {
1588var options = {
1589limit: 1
1590};
1591navigator.device.capture.captureImage(onSuccess, onError, options);
1592function onSuccess(mediaFiles) {
1593var i, path, len;
1594for (i = 0, len = mediaFiles.length; i < len; i += 1) {
1595path = mediaFiles[i].fullPath;
1596alert(mediaFiles);
1597}
1598}
1599function onError(error) {
1600navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
1601}
1602}
1603//This function is used for Capturing Video
1604function videoCapture() {
1605var options = {
1606limit: 1,
1607duration: 10
1608};
1609navigator.device.capture.captureVideo(onSuccess, onError, options);
1610function onSuccess(mediaFiles) {
1611var i, path, len;
1612for (i = 0, len = mediaFiles.length; i < len; i += 1) {
1613path = mediaFiles[i].fullPath;
1614alert(mediaFiles);
1615}
1616}
1617function onError(error) {
1618navigator.notification.alert('Error code: ' + error.code, null, 'Capture Error');
1619}
1620}
1621
1622PRACTICAL NO.-9
1623AIM:-
1624â€¢ Developing Single Page Apps
1625â€¢ Developing Multipage Apps
1626â€¢ Storing Data Locally in a Cordova App
1627A. Developing Single Page Apps:
1628index.html
1629<html>
1630<head>
1631<title>Hello World</title>
1632</head>
1633<body>
1634<div class="app">
1635<h3>Apache Cordova</h3>
1636<div id="deviceready" class="blink">
1637<p class="event listening">Connecting to Device</p>
1638<p class="event received">Hello World</p>
1639</div>
1640ENTER NAME:<input type="text" id="name"></br>
1641ENTER AGE:<input type="text" id="age"></br>
1642ENTER MOBILE:<input type="text" id="mobile"></br>
1643<button id="submit">SUBMIT</button>
1644<button id="clear">CLEAR</button>
1645</div>
1646<script type="text/javascript" src="cordova.js"></script>
1647<script type="text/javascript" src="js/index.js"></script>
1648</body>
1649</html>
1650index.js
1651var app = {
1652receivedEvent: function(id) {
1653var parentElement = document.getElementById(id);
1654var listeningElement = parentElement.querySelector('.listening');
1655var receivedElement = parentElement.querySelector('.received');
1656listeningElement.setAttribute('style', 'display:none;');
1657receivedElement.setAttribute('style', 'display:block;');
1658console.log('Received Event: ' + id);
1659document.getElementById("submit").addEventListener("click",addData);
1660document.getElementById("clear").addEventListener("click",clrData);
1661}
1662};
1663app.initialize();
1664function addData()
1665{
1666myname=document.getElementById("name").value;
1667myage=document.getElementById("age").value;
1668mymobile=document.getElementById("mobile").value;
1669alert("Myname:"+myname+"\n"+"Myage:"+myage+"\n"+"Mymobile:"+mymobile);
1670}
1671function clrData()
1672{
1673document.getElementById("name").value="";
1674document.getElementById("age").value="";
1675document.getElementById("mobile").value="";
1676}
1677
1678B. Developing MultiPage Apps
1679Note:
16801. Here index.html page and index.js file already created by default in current project directory now
1681we have to create 2 HTML and 2 JS page create in the respective directory.
16822. We have to create a 2 copies of index.html and rename it with (page1.html, page2.html) page in
1683parent directory of current project i.e. www directory.
16843. We have to create 2 copies of index.js and rename it with (page1.js, page2.js) page in js directory
1685of current project.
16861. Code for index.html page
1687index.html
1688<html>
1689<head>
1690<title>Index Page</title>
1691</head>
1692<body>
1693<div class="app">
1694<h1>Apache Cordova</h1>
1695<div id="deviceready" class="blink">
1696<p class="event listening">Connecting to Device</p>
1697<p class="event received">Device is Ready</p>
1698</div>
1699<form action="page1.html">
1700ENTER NAME :<input type="text" id="name"></br>
1701ENTER AGE:<input type="text" id="age"></br>
1702ENTER MOBILE:<input type="text" id="mobile"></br>
1703<button type="submit" id="page1">SUBMIT</button>
1704<button id="clear" >CLEAR</button>
1705</form>
1706</div>
1707<script type="text/javascript" src="cordova.js"></script>
1708<script type="text/javascript" src="js/index.js"></script>
1709</body>
1710</html>
1711Code for index.js page
1712index.js
1713var app = {
1714receivedEvent: function(id) {
1715var parentElement = document.getElementById(id);
1716var listeningElement = parentElement.querySelector('.listening');
1717var receivedElement = parentElement.querySelector('.received');
1718listeningElement.setAttribute('style', 'display:none;');
1719receivedElement.setAttribute('style', 'display:block;');
1720console.log('Received Event: ' + id);
1721document.getElementById("page1").addEventListener("click",addData);
1722document.getElementById("clear").addEventListener("click",clrData);
1723}
1724};
1725app.initialize();
1726function addData()
1727{
1728sessionStorage.setItem("name",document.getElementById("name").value);
1729sessionStorage.setItem("age",document.getElementById("age").value);
1730sessionStorage.setItem("mobile",document.getElementById("mobile").value);
1731}
1732function clrData()
1733{
1734document.getElementById("name").value="";
1735document.getElementById("age").value="";
1736document.getElementById("mobile").value="";
1737}
1738Code for page1.html page
1739page1.html
1740<html>
1741<head>
1742<title>Page1 Html</title>
1743</head>
1744<body>
1745<div class="app">
1746<h1>Apache Cordova</h1>
1747<div id="deviceready" class="blink">
1748<p class="event listening">Connecting to Device</p>
1749<p class="event received">Device is Ready</p>
1750</div>
1751<form action="page2.html">
1752SELECT GENDER:<select id="gen">
1753<option>MALE</option>
1754<option>FEMALE</option>
1755<option>OTHER</option>
1756</select>
1757</br>
1758SELECT QUALIFICATION:<select id="quali">
1759<option>SSC</option>
1760<option>HSC</option>
1761<option>UG</option>
1762<option>PG</option>
1763</select>
1764</br>
1765<button type="submit" id="page2">SUBMIT</button>
1766</form>
1767</div>
1768<script type="text/javascript" src="cordova.js"></script>
1769<script type="text/javascript" src="js/page1.js"></script>
1770</body>
1771</html>
1772Code for page1.js page
1773page1.js
1774var app = {
1775receivedEvent: function(id) {
1776var parentElement = document.getElementById(id);
1777var listeningElement = parentElement.querySelector('.listening');
1778var receivedElement = parentElement.querySelector('.received');
1779listeningElement.setAttribute('style', 'display:none;');
1780receivedElement.setAttribute('style', 'display:block;');
1781document.getElementById("page2").addEventListener("click",addData1);
1782console.log('Received Event: ' + id);
1783}
1784};
1785app.initialize();
1786function addData1()
1787{
1788sessionStorage.setItem("gen",document.getElementById("gen").value);
1789sessionStorage.setItem("quali",document.getElementById("quali").value);
1790}
1791Code for page2.html page
1792<html>
1793<head>
1794<title>Page2 HMTL</title>
1795</head>
1796<body>
1797<div class="app">
1798<h1>Apache Cordova</h1>
1799<div id="deviceready" class="blink">
1800<p class="event listening">Connecting to Device</p>
1801<p class="event received">Device is Ready</p>
1802</div>
1803<label>MYNAME IS:</label>
1804<label id="rname"></label></br>
1805<label>MYAGE IS:</label>
1806<label id="rage"></label></br>
1807<label>MYMOBILE IS:</label>
1808
1809<label id="rmobile"></label></br>
1810<label>MYGENDER IS:</label>
1811<label id="rgen"></label></br>
1812<label>MYQUALIFICATION IS:</label>
1813<label id="rquali"></label></br>
1814</div>
1815<script type="text/javascript" src="cordova.js"></script>
1816<script type="text/javascript" src="js/page2.js"></script>
1817</body>
1818</html>
1819Code for page2.js page
1820var app = {
1821receivedEvent: function(id) {
1822var parentElement = document.getElementById(id);
1823var listeningElement = parentElement.querySelector('.listening');
1824var receivedElement = parentElement.querySelector('.received');
1825listeningElement.setAttribute('style', 'display:none;');
1826receivedElement.setAttribute('style', 'display:block;');
1827console.log('Received Event: ' + id);
1828document.getElementById("rname").innerHTML=sessionStorage.getItem("name");
1829document.getElementById("rage").innerHTML=sessionStorage.getItem("age");
1830document.getElementById("rmobile").innerHTML=sessionStorage.getItem("mobile");
1831document.getElementById("rgen").innerHTML=sessionStorage.getItem("gen");
1832document.getElementById("rquali").innerHTML=sessionStorage.getItem("quali");
1833}
1834};
1835app.initialize();
1836ScreenShot
1837
1838C. Storing Data Locally in a Cordova App
1839index.html
1840<html>
1841<head>
1842<title>Index Page</title>
1843</head>
1844<body>
1845<div class="app">
1846<h1>Apache Cordova</h1>
1847<div id="deviceready" class="blink">
1848<p class="event listening">Connecting to Device</p>
1849<p class="event received">Device is Ready</p>
1850</div>
1851ENTER NAME:<input type="text" id="name"></br>
1852ENTER AGE:<input type="text" id="age"></br>
1853ENTER MOBILE:<input type="text" id="mobile"></br>
1854<button type="submit" id="page1">SUBMIT</button>
1855<button id="clear" >CLEAR</button>
1856</div>
1857<script type="text/javascript" src="cordova.js"></script>
1858<script type="text/javascript" src="js/index.js"></script>
1859</body>
1860</html>
1861index.js
1862var app = {
1863receivedEvent: function(id) {
1864var parentElement = document.getElementById(id);
1865var listeningElement = parentElement.querySelector('.listening');
1866var receivedElement = parentElement.querySelector('.received');
1867listeningElement.setAttribute('style', 'display:none;');
1868receivedElement.setAttribute('style', 'display:block;');
1869document.getElementById("page1").addEventListener("click",addData);
1870document.getElementById("clear").addEventListener("click",clrData);
1871console.log('Received Event: ' + id);
1872var localStorage = window.localStorage;
1873}
1874};
1875app.initialize();
1876function addData()
1877{ name=localStorage.setItem("name",document.getElementById("name").value);
1878age=localStorage.setItem("age",document.getElementById("age").value);
1879mobile=localStorage.setItem("mobile",document.getElementById("mobile").value);
1880alert("Name:"+name+"\n"+"Age:"+age+"\n"+"Mobile No:"+mobile);
1881}
1882function clrData()
1883{
1884document.getElementById("name").value="";
1885
1886document.getElementById("age").value="";
1887document.getElementById("mobile").value="";
1888}
1889
1890Practical 10
1891Aim: Using SQLITE Plugin
1892PERFORM CRUD OPERATION ON CORDOVA USING SQLITE
1893STEP 1:-
1894Install SQLite Plugin by using following Command.
1895>>cordova plugin add cordova-sqlite-storage --save
1896
1897STEP 2:
1898Create UI for performing CRUD Operation using SQLITE on CORDOVA.
1899index.html
1900<html>
1901<head>
1902<title>SQLITE EXAMPLE</title>
1903</head>
1904<body>
1905<div class="app">
1906<h1>Apache Cordova</h1>
1907<div id="deviceready" class="blink">
1908<p class="event listening">Connecting to Device</p>
1909<p class="event received">Device is Ready</p>
1910</div>
1911<input type="text" id="fname" placeholder="ENTER FIRST NAME">
1912</br>
1913<input type="text" id="lname" placeholder="ENTER LAST NAME">
1914</br>
1915<input type="text" id="age" placeholder="ENTER AGE">
1916</br>
1917<button id="createDB">CREATE DB</button>
1918<button id="create">CREATE TABLE</button>
1919</br>
1920<button id="insert">INSERT</button>
1921<button id="update">UPDATE</button>
1922</br>
1923<button id="Drop">DELETE</button>
1924<button id="show">SHOW</button>
1925</br>
1926TOTAL RECORDS:<label id="rowCount"></label>
1927<center>
1928<table class="table">
1929<thead>
1930<th>FNAME</th>
1931<th>LNAME</th>
1932<th>AGE</th>
1933</thead>
1934<tbody id="TableData">
1935</tbody>
1936</table>
1937</center>
1938</div>
1939<script type="text/javascript" src="cordova.js"></script>
1940<script type="text/javascript" src="js/index.js"></script>
1941</body>
1942</html>
1943STEP 3:
1944Define and mapping all the Button function in JS file.
1945index.js
1946var app = {
1947receivedEvent: function(id) {
1948varparentElement = document.getElementById(id);
1949varlisteningElement = parentElement.querySelector('.listening');
1950varreceivedElement = parentElement.querySelector('.received');
1951listeningElement.setAttribute('style', 'display:none;');
1952receivedElement.setAttribute('style', 'display:block;');
1953console.log('Received Event: ' +
1954id);document.getElementById("createDB").addEventListener("click",createDb);document.getE
1955lementById("create").addEventListener("click",insert);
1956document.getElementById("insert").addEventListener("click",insert);
1957document.getElementById("show").addEventListener("click",fetchdata);
1958document.getElementById("Drop").addEventListener("click",deletetable);
1959document.getElementById("update").addEventListener("click",updatetable);
1960}
1961};
1962app.initialize();
1963//Creating a DataBase
1964functioncreateDb()
1965{
1966varmyDB = window.sqlitePlugin.openDatabase({ name: "NitMith.db", location: 'default' });
1967alert("DATABASE CREATED SUCCESSFULLY");
1968}
1969//Creating A Table and Inserting Data into it
1970function insert()
1971{
1972varmyDB = window.sqlitePlugin.openDatabase({ name: "NitMith.db", location: 'default' });
1973varfname = document.getElementById("fname").value;
1974varlname = document.getElementById("lname").value;
1975var age = document.getElementById("age").value;
1976myDB.transaction(function(tx)
1977{
1978tx.executeSql('CREATE TABLE IF NOT EXISTS emp (fname text, lname text, age number)');
1979tx.executeSql('INSERT INTO emp (fname,lname,age) VALUES (?,?,?)', [fname, lname,
1980age]);
1981});
1982alert("DATA ADDED SUCCESSFULLY");
1983document.getElementById("fname").value="";
1984document.getElementById("lname").value="";
1985document.getElementById("age").value="";
1986}
1987//Fetching the data from the table
1988functionfetchdata()
1989{
1990varmyDB = window.sqlitePlugin.openDatabase({ name: "NitMith.db", location: 'default' });
1991varnewTable="";
1992myDB.transaction(function(tx)
1993{
1994tx.executeSql('SELECT * FROM emp', [], function(tx, res)
1995{
1996varlen = res.rows.length;
1997document.getElementById('rowCount').innerHTML=len;
1998for (var i = 0; i <len; i++)
1999{
2000newTable=newTable+"<TR><TD>"+res.rows.item(i).fname+"</TD><TD>"+res.rows.item(i).
2001lname+"</TD><TD>"+res.rows.item(i).age+"</TD></TR>";
2002}
2003document.getElementById('TableData').innerHTML=newTable;
2004},
2005function(e)
2006{
2007alert("ERROR"+e);
2008});
2009document.getElementById("fname").value="";
2010document.getElementById("lname").value="";
2011document.getElementById("age").value="";
2012});
2013}
2014//Delete the Data from the Table one by one
2015functiondeletetable()
2016{
2017varmyDB = window.sqlitePlugin.openDatabase({ name: "NitMith.db", location: 'default' });
2018varfname = document.getElementById("fname").value;
2019myDB.transaction(function(tx)
2020{
2021tx.executeSql("DELETE FROM EMP WHERE FNAME='"+ fname +"'");
2022});
2023alert("DATA DELETED SUCCESSFULLY");
2024document.getElementById("fname").value="";
2025document.getElementById("lname").value="";
2026document.getElementById("age").value="";
2027}
2028//Update the Data of the Table
2029functionupdatetable()
2030{
2031varmyDB = window.sqlitePlugin.openDatabase({ name: "NitMith.db", location: 'default' });
2032varfname = document.getElementById("fname").value;
2033varlname = document.getElementById("lname").value;
2034var age = document.getElementById("age").value;
2035myDB.transaction(function(tx)
2036{
2037tx.executeSql("UPDATE emp SET fname='"+fname +"' WHERE lname='"+ lname
2038+"'",[],function(tx,res)
2039{
2040alert("VALUE UPDATED");
2041},
2042function(e)
2043{
2044alert("SOME ERROR OCCUR"+e);
2045});
2046document.getElementById("fname").value="";
2047document.getElementById("lname").value="";
2048document.getElementById("age").value="";
2049});
2050}