CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 12 PhoneGap APIMar 8, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Tuesday, March 8, 2011References2PhoneGap documentation, http://docs.phonegap.com/index.htmlTuesday, March 8, 2011PhoneGap API3AccelerometerCameraCompassContactsDeviceEventsFileGeolocationMediaNetworkNotificationStorageProvides JavaScript accessNot all platforms have access to all APITuesday, March 8, 2011Debugging JavaScript in PhoneGap4No debuggerUse console.log()alert()Tuesday, March 8, 20115PhoneGap JavaScript console.log(text)iPhoneOutput in console"Console" item in "Run" menuAndroidUse LogCatOpen DDMS view"Window" menu, "Open Perspective" itemthen "Other" then "DDMS"If don't have LogCat view then"Window>"Show View">"LogCat"Tuesday, March 8, 2011PhoneGap Documentation etc.6PhoneGap API documentation contains examples of each functionhttp://docs.phonegap.com/index.htmlPhoneGap News Grouphttp://groups.google.com/group/phonegapTuesday, March 8, 20117Geolocation APIgeolocation.getCurrentPositiongeolocation.watchPositiongeolocation.clearWatchMethods ArgumentsgeolocationSuccess (function)geolocationError (function)geolocationOptions (Hash)Tuesday, March 8, 2011Example8 <script type="text/javascript" charset="utf-8"> function onBodyLoad() { document.addEventListener("deviceready",onDeviceReady,false);} function onDeviceReady() { navigator.geolocation.getCurrentPosition(onSuccess, onError); } function onSuccess(position) { var element = document.getElementById('geolocation'); element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' + 'Longitude: ' + position.coords.longitude + '<br />'; } function onError(error) { alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } </script> </head> <body onload="onBodyLoad()"> <p id="geolocation">Finding geolocation...</p> </body></html>Tuesday, March 8, 2011Example from PhoneGap API documentationOutput9Latitude: 32.76558Longitude: -117.073042Altitude: 156.034813Accuracy: 17.068495Altitude Accuracy: 23.164149Heading: -1Speed: 0Timestamp: Thu Jan 15 1970 16:58:58 GMT-0800 (PST)on iPhone continued to get new readings in the consoleTuesday, March 8, 2011Note the timestampStorage10PhoneGap supportsW3C Web SQL Database (SQL)Local Storage (Key-value pairs)API same as covered earlierAndroidiOSBlackBerry WebWorks (OS 6.0+)Tuesday, March 8, 2011Example11function populateDB(tx) { tx.executeSql('DROP TABLE DEMO'); tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)'); tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")'); tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")');}function errorCB(err) { alert("Error processing SQL: "+err.code);}function successCB() { alert("success!");}var db = window.openDatabase("Database", "1.0", "PhoneGap Demo", 200000);db.transaction(populateDB, errorCB, successCB);Tuesday, March 8, 2011Example from PhoneGap documentation - http://docs.phonegap.com/phonegap_storage_storage.md.html#StorageAlerts12 function alertDismissed() { } function showAlert() { navigator.notification.alert( 'You are the winner!', // message alertDismissed, // callback 'Game Over', // title 'Done' // buttonName ); } </script> </head> <body onload="onLoad()"> <p><a href="#" onclick="showAlert(); return false;">Show Alert</a></p> </body></html>Tuesday, March 8, 2011Example from http://docs.phonegap.com/phonegap_notification_notification.md.htmlNetwork13network.isReachable(reachableHostname, reachableCallback, [reachableOptions])Just determines If the device is on-lineType of connectionIf can reach a given domainfunction reachableCallback(reachability) { var networkState = reachability.code || reachability; var states = {}; states[NetworkStatus.NOT_REACHABLE] = 'No network connection'; states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection'; states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK] = 'WiFi connection'; alert('Connection type: ' + states[networkState]);}navigator.network.isReachable('phonegap.com', reachableCallback);Tuesday, March 8, 2011Media14PhoneGap Media only supported on AndroidHTML 5 media supported on iOS and AndroidTuesday, March 8, 2011Files15FileReaderAndroid, BlackBerry WebWorks 5.0 +, iOSFileWriterAndroid, BlackBerry WebWorks 5.0 +, iOSFileTransferAndroid, BlackBerry WebWorks 5.0 +Upload files via HTTP, HTTPSTuesday, March 8, 2011Writing a file16 function writeFile() { var paths = navigator.fileMgr.getRootPaths(); var writer = new FileWriter(paths[0] + "write.txt"); writer.onwrite = writeSuccess; writer.onerror = fail; writer.write("some sample text"); } function writeSuccess() { console.log("Write has succeeded"); } function fail(evt) { console.log("fail: " + evt.target.error.code); } Works fine on AndroidDid not work on iPhone(did once but could not reproduce result)Tuesday, March 8, 2011paths[0] is the Documents folder on iPhoneReading a file17 function fail(evt) { console.log("fail: " + evt.target.error.code); } function readLoad(evt) { console.log("readLoad: " + evt.target.result); } function readFile() { console.log("read"); var paths = navigator.fileMgr.getRootPaths(); var reader = new FileReader(); reader.onerror = fail; reader.onload = readLoad; reader.readAsText(paths[0] + "write.txt"); }Tuesday, March 8, 2011Camera18camera.getPictureAccess to device cameraTake picturesAccess pictures in Photo libraryYou application resumes after camera/Photo Library is doneAndroidiOSBlackBerry WebWorks (OS 5.0+)Palm (?)Each platform has quirksAndroid QuirksIgnores the allowEdit parameter.Camera.PictureSourceType.PHOTOLIBRARY and Camera.PictureSourceType.SAVEDPHOTOALBUM both display the same photo album.Tuesday, March 8, 2011Camera Example19 function capturePhoto() { navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 }); } function onPhotoDataSuccess(imageData) { var smallImage = document.getElementById('smallImage');
View Full Document
Unlocking...