iOS : développer une Web App avec Phonegap / Cordova Comment manipuler les API Phonegap / Cordova

L'exemple de code suivant, copié dans le fichier index.html de notre projet, est extrait de la documentation de Phonegap. Nous vous recommandons fortement de la consulter car elle comporte de nombreux exemples très instructifs et indique les limitations rencontrées par l'API pour chaque OS mobile. Par exemple, certains formats ne sont pas supportés par la version iOS alors qu'ils le sont par la version Android. Une autre remarque, il arrive fréquemment d'avoir des régressions en changeant de version de Phonegap (le projet a changé de nom ou le framework a été modifié...), nous vous conseillons donc de faire bien attention aux fichiers qui sont pris en compte dans le projet (cordovaXXX.js et Cordova.framework) et de regarder les limitations indiquées dans la documentation de la nouvelle version.

Il est toujours possible de retoucher le code natif

Le fichier JavaScript contenant les API Phonegap doit être importé au début du fichier index.html. Ensuite, la première instruction d'un projet Phonegap est l'écoute de l'événement deviceready. Lorsque cet événement est reçu, cela signifie que Phonegap est actif et nous pouvons ensuite accéder aux fonctions de ses API. Le style de programmation de Phonegap suit les principes des fonctions callback consistant à passer les fonctions de traitement en paramètres des fonctions appelantes.

Par exemple, si le système de fichiers est accessible, nous exécutons la fonction gotFS en lui passant le paramètre filesystem, sinon nous exécutons la fonction fail en lui passant le paramètre error. La fonction getFile demande la création d'un nouveau fichier readme.txt et la fonction gotFileWriter écrit avec la fonction write du texte dans ce fichier. L'événement onwriteend est déclenché à la fin de la fonction write et des fonctions anonymes sont associées à cet événement, ce qui permet de modifier deux fois le texte en cours d'écriture avec les fonctions truncate et seek.

 <!DOCTYPE html>
<html>
  <head>
    <title>FileWriter Example</title>

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

         // Wait for Cordova to load
         //
         document.addEventListener("deviceready",
onDeviceReady, false);

         // Cordova is ready
         //
         function onDeviceReady() {

 window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
gotFS, fail);
          }

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

          function gotFileEntry(fileEntry) {
               fileEntry.createWriter(gotFileWriter, fail);
          }


          function gotFileWriter(writer) {
               writer.onwriteend = function(evt) {
          console.log("contents of file now 'some sample text'");
                    writer.truncate(11);
                    writer.onwriteend = function(evt) {
                console.log("contents of file now 'some sample'");
                         writer.seek(4);
                         writer.write(" different text");
                         writer.onwriteend = function(evt){
  console.log("contents of file now 'some different text'");
                         }
                    };
               };
               writer.write("some sample text");
          }


          function fail(error) {
               console.log(error.code);
          }
          </script>
     </head>
     <body>
       <h1>Example</h1>
       <p>Write File</p>
     </body>
</html>

Sortie du programme
contents of file now 'some sample text'
contents of file now 'some sample'
contents of file now 'some different text'
Si le comportement des fonctions de Phonegap ne nous convient pas, il est toujours possible de retoucher le code natif, puis de le recompiler. Une autre possibilité est de créer son propre plugin pour remplacer ou ajouter des fonctions à Phonegap.
Précédent
Suivant