Suite de l’article sur Google Gears qui rentre dans le vif du sujet, c’est-à-dire le codage des éléments HTML, CSS et JS du mini-site, ainsi que l’utilisation des fonctions de cache de l’API.
HTML
A l’aide d’une bonne conception, il est possible de faire un fichier HTML avec un formulaire tout à fait classique qui poste les données vers un script PHP par exemple. Dans notre cas voici le fichier HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Sondage Online/Offline</title>
<link rel="stylesheet" href="sondage.css" type="text/css" />
<script type="text/javascript" src="gears_init.js"></script>
<script type="text/javascript">
<!--
if (!window.google || !google.gears) {
location.href="http://gears.google.com/?action=install&message=Bienvenue+sur+mon+appli" +
"&return=http://www.codingstyle.fr/works/sondage";
}
// -->
</script>
<script type="text/javascript" src="sondage.js"></script>
</head>
<body>
<h1>Sondage online/offline</h1>
<p id="message"></p>
<p><a href="#" onclick="Sondage.createStore();return false;">Charger le contenu pour le hors-ligne</a> | <a href="#" onclick="Sondage.removeStore();return false;">Nettoyer le contenu hors-ligne</a></p>
<form id="myform" method="post" action="save.php">
<div class="line">
<label>Sur quel environnement travaillez-vous ?</label>
<div class="answers">
<input type="radio" id="a11" name="profil" value="Windows" />
<label for="a11">Windows</label><br />
<input type="radio" id="a12" name="profil" value="Linux" />
<label for="a12">Linux</label><br />
<input type="radio" id="a13" name="profil" value="MacOS" />
<label for="a13">MacOS</label><br />
<input type="radio" id="a14" name="profil" value="Unix" />
<label for="a14">Unix</label><br />
</div>
</div>
<div class="line">
<label>Quelles technologies utilisez-vous régulièrement ?</label>
<div class="answers">
<input type="checkbox" id="a31" name="techno[]" value="PHP" />
<label for="a31">PHP</label><br />
<input type="checkbox" id="a32" name="techno[]" value="DotNet" />
<label for="a32">DotNet</label><br />
<input type="checkbox" id="a33" name="techno[]" value="J2EE" />
<label for="a23">J2EE</label><br />
<input type="checkbox" id="a34" name="techno[]" value="Python" />
<label for="a34">Python</label><br />
<input type="checkbox" id="a35" name="techno[]" value="Ruby" />
<label for="a35">Ruby</label><br />
</div>
</div>
<div class="line">
<label for="a41">Indiquez un commentaire additionnel ?</label>
<div class="answers">
<textarea id="a41" name="commentaire" rows="5" cols="30"></textarea>
</div>
</div>
</form>
</body>
</html>Le fichier contient un fichier gears_init.js téléchargeable sur le site de Google Gears qui contient la procédure d’initialisation de l’applicatif. Un petit test Javascript détecte sa présence, et redirige vers l’installation sur le site de Google le cas échéant. Enfin, une déclaration du fichier sondage.js permettra de mettre en place nos traitements.
Partie Javascript
Tout d’abord, il faut initialiser un objet Sondage. Nous y stockerons les variables de cache et de base de données :
var STORE_NAME = "sondage"; var MANIFEST_FILENAME = "manifest.json"; var Sondage = { localServer: null, store: null, db: null, message: null };
Sondage.setMessage = function(msg, cls) { var el = document.getElementById('message'); el.innerHTML = msg; el.className = cls; };
L’initialisation, appelé via un évènement window.onload, revient à instancier les différents objets de Google Gears qui seront nécessaire à l’application, et à afficher un message d’état afin de connaître l’état du cache :
Sondage.init = function() { if (!window.google || !google.gears) { Sondage.setMessage('Attention : Google Gears n'est pas installé.', 'alert'); } // Initialisation du serveur de cache offline if (Sondage.localServer == null) { Sondage.localServer = google.gears.factory.create("beta.localserver"); } // Initialisation de la base de données if (Sondage.db == null) { Sondage.db = google.gears.factory.create('beta.database'); } // Ouverture du cache si déjà existant Sondage.store = Sondage.localServer.openManagedStore(STORE_NAME); // Initialisation des messages de feedback var msg = ''; var cls = 'message'; if (navigator.onLine) { msg += 'Le navigateur est en ligne<br />'; } else { msg += 'Vous travaillez en mode déconnecté<br />'; cls = 'warn'; } msg += (Sondage.store != null ? 'Le cache hors ligne est chargé (Sondage v' + Sondage.store.currentVersion + ')' : 'Le cache hors ligne n'est pas chargé') + '<br />'; Sondage.setMessage(msg, cls); };
La “capture” des fichiers en ligne pour les stocker dans le cache revient à créer un objet ManagedStore, à lui indiquer le fichier de manifeste contenant les fichiers à prendre, et à déclencher une mise à jour. Un rappel à notre fonction d’initialisation permet d’ouvrir le cache et de rafrichir le message d’état :
Sondage.createStore = function() { if (Sondage.store == null) { Sondage.store = Sondage.localServer.createManagedStore(STORE_NAME); } Sondage.store.manifestUrl = MANIFEST_FILENAME; Sondage.store.checkForUpdate(); var timerId = window.setInterval(function() { if (Sondage.store !== null) { window.clearInterval(timerId); } else if (Sondage.store.updateStatus == 3) { Sondage.setMessage('Erreur de chargement de contenu', 'alert'); } Sondage.init(); }, 500); };
Le nettoyage du cache local est une simple suppression de l’objet ManagedStore, suivi d’un rappel à notre fonction init() pour rafraichir le message d’état :
Sondage.removeStore = function() { Sondage.localServer.removeManagedStore(STORE_NAME); Sondage.store = null; Sondage.init(); };
Vous pouvez tester les fonctionnalités développées en mettant en cache les données, puis en déconnectant le câble réseau ou plus pacifiquement, en mettant le navigateur en Travail hors connexion.
A suivre : sauvegarde dans la base locale et synchronisation des données 
Commentaires récents