iOS : développer une Web App avec Phonegap / Cordova Créer un plugin Phonegap / Cordova

Phonegap ne contient pas forcément la fonction prévue dans l'architecture de votre application, typiquement un service tournant dans un thread séparé de l'application principale. Dans ce cas, nous devons développer notre propre plugin.

Partie web

Nous commençons par créer un fichier MonPlugin.js dans le répertoire de notre projet web et nous l'importons dans notre fichier index.html à la suite de l'import de Cordova :

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


Le constructeur qui permet de créer un nouveau plugin est addConstructor. Dans ce constructeur, nous devons rajouter le composant Cordova dans la structure window de notre projet web. Nous définissons ensuite la fonction traitement qui sera appelée depuis notre code web et sera transmise à la partie iOS. La magie s'opère avec la fonction Cordova.exec de la partie JavaScript qui est associée à la méthode execute:withDict: de la partie iOS. Nous passons en argument :

 Trois fonctions callback qui seront appelées depuis le code iOS pour interagir avec le code JavaScript.

 Les options du plugin iOS.

Il ne reste plus qu'à définir les fonctions callback, en particulier traitement- Progression qui nous donne la progression du plugin iOS. Avec cette fonction, nous modifions l'élément span du fichier index.html dont l'identifiant est progression. Dans un premier temps, la fonction getElementById récupère l'élément selon son identifiant et dans un second temps son contenu (innerHTML) est changé en fonction de l'objet transmis depuis le plugin iOS. 

 cordova.addConstructor(function() {
   if (!window.Cordova) {
      window.Cordova = cordova;
   };
});

function traitementSucces(resultat) {
   console.log("traitementSucces", resultat);
}
function traitementErreur(erreur) {
   console.log("traitementErreur", erreur);
}

function traitementProgression(resultatEnCours) {
   console.log("traitementProgression dans la partie JS");
   document.getElementById("progression").innerHTML =
                     resultatEnCours["valeurProgression"];

}

var MonPlugin = {
   traitement: function (succes, erreur, progression, options) {
      return Cordova.exec("MonPlugin.execute", succes, erreur,
         progression, options);
   }
};

Dans le fichier index.html, nous appelons le module après un clic sur un lien textuel en lui passant les bons paramètres, c'est-à-dire les trois fonctions callback JavaScript à exécuter depuis le plugin iOS et les options à transmettre à ce même plugin.

 <!DOCTYPE HTML>
<html>
   <head>
      <meta http-equiv="Content-type"
            content="text/html; charset=utf-8">
      <title>PhoneGap</title>

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

   </head>
   <body onload="init();">
      <h4>Progression : <span id="progression"> &nbsp;</span></h4>
      <a href="#" onclick="MonPlugin.traitement( 'traitementSucces',
                                                  'traitementErreur',
                                             'traitementProgression',
                                             { cle : 1 });">
         Traitement du plugin iOS
      </a>
   </body>
</html>
Précédent
Suivant