Phonegap part two

barbarousmonthΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

87 εμφανίσεις

Phonegap part two
 
 
 
 
 
 
 
 
 
 
Graphic Yohei Shimomae 
Setting up your project for Android 
 
1. For Android make sure you have Eclipse Classic, Android SDK and the ADT plugin for 
Eclipse installed 
2. Then create a new project and create two new folders lib and also create a www 
folder in the assets directory. 
3. Copy the cordova.js file into the www directory and also create a index.html file 
4. Copy the XML folder to the res folder 
5. Copy the cordova.jar file into the lib folder and make sure it is a referenced library 
6. If it is not listed in your reference library right click on the cordova.jar file a menu will 
appear and then open the build sub menu and finally click add to build path 
7. Also make all adjustments to the Activity file: 
 
i. Add:   import org.apache.cordova.*; 
ii. Change the class's extend from Activity to DroidGap 
iii. Replace the setContentView() line with (also don’t forget to include an interval 
that will define how long the splash screen is displayed in milliseconds: 
iv. super.loadUrl(file:///android_asset/www/index.html,10000); 
v. Also Add:   super.setIntegerProperty("splashscreen", R.drawable.splash); 
vi. Also don’t forget to add a splash screen image into your res drawable folders 
 
1. Also if you have defined a splash screen you will want to make sure the splash 
screen is no longer displayed when it is not needed so make sure your index.html 
file has linked to the cordova.js  and then add the following script: 
 
window.onload = function() { 
  document.addEventListener("deviceready" , ready , false); 

 
function ready() { 
  cordova.exec(null, null, "SplashScreen", "hide", []); 

 
But please don’t forget that this is on the cutting edge but however for future 
releases of Phonegap you need to use: 
 
navigator.splashscreen.hide(); 
 
Since this course started Phonegap is now 1.8.1 and over and this should be used 
to hide the splash screen 
Setting up your project for iOS 
A. Download the latest version of Xcode and Phonegap 
B. Extract the Archive of Phonegap open the lib directory and then open the iOS 
directory and install the dmg file (after installing Xcode of course and also make sure 
Xcode is closed whilst you are installing Phonegap) 
C. Open Xcode click create cordova based application 
D. Then go to Build Phases drop down the Compile Sources list and double click each file 
and add the compiler flag –fno‐objc‐arc 
E. Then run the project and let it error 
F. Open the project in finder you will now find it has generated a www folder 
G. Then copy the folder into Xcode NOT finder as follows: 
 
 
Run your application again and you’re done. 
 
 
 
 
 
Media API 
 
window.onload = function() { 
document.addEventListener("deviceready" , ready , false); 

var myMedia = null; 
function ready() { 
  navigator.splashscreen.hide(); 
  playAudio('/android_asset/www/audio.mp3') 

function playAudio(source) { 
  myMedia = new Media(source); 
  var timeDur = setInterval(function() { 
    var dur = myMedia.getDuration(); 
    if(dur > 0) { 
      clearInterval(timeDur); 
      document.getElementById('d').innerHTML = (Math.floor(dur)) + " sec"; 
    } 
  },100); 
  var mediaTimer = setInterval(function() { 
    myMedia.getCurrentPosition( 
      function(position) { 
        if(position > ‐1) { 
          document.getElementById('cp').innerHTML = 
(Math.floor(position)) + " sec"; 
        } 
      }, 
      function(e) { alert("Error getting position: " + e); } 
    ); 
  },1000); 

function play() { myMedia.play(); } 
function pause() { myMedia.pause(); } 
function stop() { myMedia.stop(); } 
function seekTo(num) { myMedia.seekTo(num); } 
function release() { myMedia.release(); } 
 
The DOM 
<!doctype html> 
<html> 
<head><meta charset="utf‐8"> 
<title>Cartoonsmart Phonegap course part 2</title> 
<script src="cordova‐1.7.0.js" type="text/javascript"></script> 
<script src="myapp.js" type="text/javascript"></script> 
</head> 
<body> 
<a href="#" onClick="play();"><h1>Play</h1></a> 
<a href="#" onClick="pause();"><h1>Pause</h1></a> 
<a href="#" onClick="stop();"><h1>Stop</h1></a> 
<a href="#" onClick="seekTo(60000);"><h1>SeekTo</h1></a> 
<a href="#" onClick="release();"><h1>Release</h1></a> 
<p id="d"></p><p id="cp"></p> 
</body> 
</html> 
iOS 
A.
For iOS all I needed to do was change the URI from 
/android_asset/www/audio.mp3' to 
'audio.mp3'
 
B.
Also we no longer need:
 
 
navigator.splashscreen.hide(); 
That was just for the Android splash screen. 
 
 
Capture API 
window.onload = function() { 
  document.addEventListener("deviceready" , ready , false); 

function ready() { 
  navigator.splashscreen.hide(); 

function captureNow() { 
  navigator.device.capture.captureAudio(captured,capturedError,{ limit: 3 }); 

function captured(myRecords) { 
  var i, len; 
  for(i = 0, len = myRecords.length; i < len; i += 1) { 
    uploadAudio(myRecords[i]); 
  } 

function uploadAudio(singlefile) { 
  var name = singlefile.name; 
  var fp = singlefile.fullPath; 
  var type = singlefile.type; 
  var ldm = new Date(singlefile.lastModifiedDate); 
  var size = singlefile.size; 
  singlefile.getFormatData( 
    function(mfd) { 
      document.getElementById('mediaInfo').innerHTML += mfd.codecs + "<br/>" 
+ mfd.bitrate + "<br/>" + mfd.height + "<br/>" + mfd.width + "<br/>" + mfd.duration + 
"<br/><p></p>"; 
  }, 
    function() { alert("Error"); } 
  ); 
  document.getElementById('mediaInfo').innerHTML += name + "<br/>" + fp + "<br/>" + type 
+ "<br/>" + ldm + "<br/>" + size + "<br/><p></p>"; 

function capturedError() { 
  alert("Error"); 

 
Don’t forget that you can also use the captureVideo and also captureImage methods all the have to 
do is change the method and the script will do the rest. 
 
Storage API 
window.onload = function() { 
  document.addEventListener("deviceready" , ready , false); 

var db; 
function ready() { 
  navigator.splashscreen.hide(); 
  db = window.openDatabase("Database","1.0","PhonegapDB",20000); 
  db.transaction(populateDB,errorDB,successDB); 

function populateDB(pdb) { 
  pdb.executeSql('DROP TABLE IF EXISTS DEMO'); 
  pdb.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)'); 
  pdb.executeSql('INSERT INTO DEMO (id, data) VALUES (1,"First record")'); 
  pdb.executeSql('INSERT INTO DEMO (id, data) VALUES (2,"Second record")'); 

function errorDB(err) { 
  alert("There was an error. Error code: " + err.code + " Error Message: " + err.message); 

function successDB() { db.transaction(queryDB, errorDB); } 
function queryDB(qdb) { 
  qdb.executeSql('SELECT * FROM DEMO', [], querySuccess, errorDB); 

function querySuccess(qdb, results) { 
  var info = document.getElementById('info'); 
  var len = results.rows.length; 
  for (var i = 0; i<len; i++) { 
    info.innerHTML += "ID = " + results.rows.item(i).id + " Data = " + 
results.rows.item(i).data + "<br/>"; 
  } 

 
 
 
 
 
File API 
Uploading a file using the file transfer object: 
 
window.onload = function() { 
  document.addEventListener("deviceready" , ready , false); 

function ready() { 
  navigator.splashscreen.hide(); 

function captureVideo() { 
  navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 2}); 

function captureSuccess(mediaFiles) { 
     var i, len; 
     for (i = 0, len = mediaFiles.length; i < len; i += 1) { 
       uploadFile(mediaFiles[i]); 
    }        

function captureError(error) { 
   var msg = 'An error occurred during capture: ' + error.code; 
   navigator.notification.alert(msg, null, 'Uh oh!'); 

function uploadFile(mediaFile) { 
  var ft = new FileTransfer(); 
  var path =  mediaFile.fullPath; 
  var name = mediaFile.name; 
  var type = mediaFile.type; 
  var options = new FileUploadOptions(); 
  options.fileKey = "file"; 
  options.fileName = name; 
  options.mimeType = type; 
  options.chunkedMode = false; 
  var parameters = new Object(); 
  parameters.value1 = "test"; 
  parameters.value2 = "param"; 
  options.params = parameters; 
  ft.upload(path,"http://www.elite‐wd.com/upload.php",uploadSuccess,uploadError,options); 

function uploadSuccess(result) { 
  alert("Code = " + result.responseCode + "/n" + 
   "Response = " + result.response + "/n" + 
   "Bytes Sent = " + result.bytesSent + "/n" );  

function uploadError(err) { 
  alert("Error code: " + err.code + "/n" + 
   "Source: " + err.source + "/n" + 
   "Target: " + err.target + "/n" ); 

 
 
 
 
 
 
PHP file: 
<?php 
  function randomFileName() 
    { 
       $length = 5; 
       $characters = 'abcdefghijklmnopqrstuvwxyz'; 
       $string = ''; 
       for ($p = 0; $p < $length; $p++) { 
          $string .= $characters[mt_rand(0, strlen($characters))]; 
       } 
       return $string . '.3gp'; 
    } 
  print_r($_FILES); 
  $rename = randomFileName(); 
  move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/".$rename); 
?> 
 
Getting a file or if the file doesn’t exist create the file then we can get some information from the 
file: 
window.onload = function() { 
  document.addEventListener("deviceready" , ready , false); 

function ready() { 
  navigator.splashscreen.hide(); 
  window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,gotFS,fail); 

function gotFS(fileSystem) { 
  fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, success, fail); 

 
function success(fileEntry) { 
  fileEntry.file(fileSuccess, fail); 

function fileSuccess(file) { 
  alert("File name: " + file.name + "\n" + 
 "Full path: " + file.fullPath + "\n" + 
 "Type: " + file.type + "\n" + 
 "Last Modified date: " + new Date(file.lastModifiedDate) + "\n" + 
 "Size: " + file.size); 

function fail(error) { 
  alert("Error " + error.code); 

Writing to a file ( Snippet ): 
function FileWriter(writer) { 
  writer.write("cartoonsmart is cool"); 
  writer.onwriteend = function() { 
    alert("File now has content"); 
  }; 

READER: 
function readFile() { 
  window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,gotFiletoRead,fail); 

function gotFiletoRead(fileSystem) { 
  fileSystem.root.getFile("readme.txt", {create: false, exclusive: false}, successReader, fail); 

function successReader(fileEntry) { 
  fileEntry.file(fileReader, fail); 

function fileReader(file) { 
  var reader = new FileReader(); 
  reader.readAsText(file); 
  reader.onloadend = function(FR) { 
          alert(FR.target.result); 
    }; 

Truncate: 
function success(fileEntry) { 
  fileEntry.createWriter(FileWriter, fail); 

 
function FileWriter(writer) { 
  writer.truncate(12); 
  writer.onwriteend = function() { 
    alert("truncated"); 
  }; 

SEEK & WRITE: 
function FileWriter(writer) { 
  writer.write("cartoonsmart is cool"); 
  writer.onwriteend = function() { 
    writer.seek(13); 
    alert(writer.position); 
    writer.write("earn more learn more"); 
    writer.onwriteend = function() { 
        alert(writer.length); 
    } 
  }; 

Final Example: 
function FileWriter(writer) { 
  writer.seek(writer.length); 
  writer.write(" you can learn more and earn more!"); 
  writer.onwrite = function() {  
            alert(writer.position);  
            writer.truncate(12); 
            writer.onwrite = function() { alert("Truncated 
Successful. Length of file: " + writer.length); } 
          }; 
  writer.onerror = function() { alert("Error"); };