La présente rubrique décrit les outils qui vont vous aider ŕ programmer des gadgets.
Le gadget du développeur est un gadget type dont vous pouvez vous inspirer pour créer vos propres gadgets. Il constitue un tableau de bord qui permet d'afficher tous les gadgets de votre page iGoogle et de contrôler la mise en cache des gadgets. Par défaut, les définitions de gadget sont mises en cache. Si vous souhaitez modifier ce comportement, décochez la case Cached (En cache). Ainsi, vous pouvez afficher les résultats réels des modifications que vous avez apportées ŕ un gadget plutôt que le gadget mis en cache.
Le gadget du développeur est également un exemple de gadget ŕ part entičre.
Pour ajouter le gadget du développeur ŕ une page, sélectionnez Ajouter du contenu > Ajouter une URL (ŕ côté du bouton Recherche de contenu) et entrez "developer.xml" dans la zone de texte.
Le gadget du développeur (capture d'écran correspondante) répertorie des liens vers tous les gadgets actuellement en fonctionnement sur votre page iGoogle. Servez-vous de la zone de texte Add a gadget (Ajouter un gadget) pour entrer l'URL correspondant aux spécifications du gadget et ainsi ajouter un gadget.
Une grande partie d'un processus de développement, quel qu'il soit, est généralement consacrée ŕ découvrir les raisons pour lesquelles les éléments ne se comportent pas nécessairement comme prévu. Cette rubrique s'attache ŕ décrire certaines des techniques de base permettant d'éviter les erreurs ou de les corriger lorsqu'elles se produisent.
Ne pas brűler les étapes : telle est la rčgle d'or de la programmation. Créez un gadget de base, trčs simple et qui fonctionne, puis, petit ŕ petit, ajoutez-lui des éléments. Ŕ chaque étape du développement, testez votre gadget avant de passer ŕ l'étape suivante. Cette méthode de travail vous permettra de repérer plus facilement les modifications ŕ l'origine de dysfonctionnements.
Inspirez-vous des gadgets existants : ils constituent la meilleure source d'informations disponible. Accédez ŕ l'annuaire de contenu et examinez le code source des gadgets qui s'approchent le plus de ce que vous souhaitez mettre en śuvre.
Vous pouvez utiliser le navigateur Web Firefox pour tester vos gadgets en cours de développement sur votre page iGoogle. Si un gadget ne fonctionne pas correctement, ouvrez la console JavaScript (Tools > JavaScript Console), sélectionnez Errors et faites défiler les données ŕ l'écran pour vérifier si des erreurs ne se sont pas glissées dans la syntaxe de votre code JavaScript. Avant chaque test, pensez ŕ réactualiser la console afin de vous débarrasser des anciens messages d'erreur.
Si vous utilisez un autre type de navigateur, recherchez-y une console JavaScript ou un utilitaire de débogage intégré.
Au cours du développement, vérifiez systématiquement que vos suppositions sont exactes : vous éviterez ainsi des pertes de temps et des efforts inutiles. La valeur attribuée ŕ votre variable est-elle bien celle que vous pensez ? Votre tableau contient-il vraiment des éléments ? Est-il possible que la fonction qui ne se comporte pas "normalement" ne soit pas du tout appelée ? Testez vos suppositions en imprimant les messages d'état correspondant ŕ différentes étapes de votre programme. Par exemple, le gadget suivant dispose d'une fonction print() qui écrit des messages de débogage dans debug_div si l'indicateur debug est défini sur une valeur différente de zéro :
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Debug Example" height="200"/>
<UserPref name="myname" display_name="Name" required="true" />
<UserPref name="mycolor" display_name="Color" default_value="Pink" datatype="enum" >
<EnumValue value="Blue" />
<EnumValue value="Yellow" />
<EnumValue value="Pink" />
<EnumValue value="Gray" />
</UserPref>
<Content type="html">
<![CDATA[
<div id="content_div" style="font-size:20pt; padding:5px; text-align: center;"></div>
<div id="debug_div" style="font-size:9pt; padding:5px; color: red;"></div>
<script type="text/javascript">
// Get userprefs
var prefs = new _IG_Prefs(__MODULE_ID__); // debug flag. When its value is non-zero, debugging messages are displayed
var debug = 1; // The string containing debugging messages
var debug_html = ""; // Display date
function displayDate (){
// DEBUG: is the function getting called?
print("In displayDate function<br>");
// Create Date object
var today = new Date();
// Get current time
var time = today.getTime();
var content_html = "";
var element = document.getElementById('content_div');
element.style.backgroundColor=prefs.getString("mycolor");
element.style.height=100;
// DEBUG: print out prefs values
print("The background color is " + prefs.getString("mycolor") + "<br>");
print("The name is " + prefs.getString("myname") + "<br>");
content_html += today.toDateString();
// Write content HTML to div
_gel("content_div").innerHTML = content_html;
}
// Outputs debug messages if debug flag has a non-zero value
function print(msg) {
if (debug) {
debug_html += msg;
// Write debug HTML to div
_gel("debug_div").innerHTML = debug_html;
}
}
_IG_RegisterOnloadHandler(displayDate);
</script>
]]>
</Content>
</Module>
Remarque : Reportez-vous ŕ la section Minimessages pour obtenir une description de la bibliothčque MiniMessage de l'API. Cette bibliothčque vous permet de modifier le comportement et l'apparence des messages que vous voulez afficher dans un gadget.
Les compléments Firefox cités ci-dessous peuvent vous permettre d'affiner votre compréhension du fonctionnement de vos gadgets au cours du développement :
Servez-vous de Google Analytics pour obtenir des statistiques sur vos gadgets. Google Analytics peut, par exemple, vous permettre d'effectuer le suivi des consultations de page, c'est-ŕ-dire, du nombre de fois qu'un gadget est affiché par un internaute, ou des événements, comme le nombre de fois qu'un internaute clique sur un bouton de votre gadget.
Pour utiliser Google Analytics :
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript"> _uacct = "UA-xxxxxxx-x"; urchinTracker(); </script>
Cet extrait de code permet d'effectuer les opérations suivantes :
Habituellement, dans Google Analytics, il vous faut copier ce code dans chaque page Web pour laquelle vous souhaitez effectuer un suivi. Cependant, les gadgets constituent un cas ŕ part. Vous devez vous conformer aux instructions ci-aprčs afin que le systčme de suivi Google Analytics fonctionne pour vos gadgets.
Une fois que vous avez ouvert un compte Google Analytics, comme décrit plus haut, vous recevez un identifiant Google Analytics unique. Cet identifiant vous permet d'intégrer Analytics ŕ vos gadgets.
Pour intégrer Google Analytics ŕ vos gadgets :
<Require feature="analytics"/>
<script>
_IG_Analytics("UA-000000-0", "/mygadget");
</script>
Ce code appelle urchinTracker() et envoie les données ŕ Google Analytics.
Vous trouverez ci-aprčs un exemple de gadget intégrant Google Analytics. Dans ce gadget, un suivi des consultations et des clics sur les boutons est effectué. Une consultation de page est enregistrée dans /test_analyticslib ŕ chaque affichage du gadget, tandis que pour les clics d'un internaute sur un bouton du gadget, les consultations de page sont enregistrées dans /test_analyticslib/click. Dans cet exemple, il vous faut remplacer l'identifiant fictif UA-xxxxxx-x: par un identifiant Analytics réel.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Test Analytics Iframe"> <Require feature="analytics" /> </ModulePrefs> <Content type="html"> <![CDATA[ <script> // Track this gadget using Google Analytics. _IG_Analytics("UA-xxxxxx-x", "/test_analyticslib"); </script> <!-- You can also track JavaScript events. When users click this button, a pageview is sent back to Analytics servers. --> <input onclick="_IG_Analytics('UA-xxxxxx-x', '/test_analyticslib/click')" type=button value="Click Me"/> ]]> </Content>
</Module>
Remarque :
Ŕ l'image des bibliothčques de fonction spécifiées aux balises <Require...>, Google Analytics fonctionne avec des gadgets de type type="url". Pour plus de détails, reportez-vous ŕ la rubrique Utilisation des bibliothčques JavaScript avec des gadgets type="url".
Pour afficher les rapports associés ŕ vos gadgets, connectez-vous ŕ Google Analytics. Sélectionnez Affichage des rapports > Résumé du contenu.
Pour plus d'informations sur les possibilités offertes par Google Analytics, consultez le Centre d'aide Google Analytics.
Aux développeurs n'ayant pas accčs ŕ un serveur public, nous conseillons l'hébergement des gadgets sur Google Code : http://code.google.com/hosting. Ce service propose de nombreuses fonctionnalités aux développeurs de gadgets et est entičrement gratuit. L'un de ses principaux avantages réside dans le fait qu'un contrôle des versions y est possible, grâce ŕ Subversion, systčme de contrôle de version open source. Avec Subversion, le suivi des modifications et la conservation des différentes versions de votre gadget sont des opérations simples. L'intégralité de l'historique des révisions est disponible, ce qui vous permet de restaurer ou d'analyser des différences entre versions. Pour plus d'informations sur l'outil Subversion, reportez-vous au site Web suivant : Subversion book.
Tout d'abord, vous devez installer un programme client ("Client Subversion") vous permettant de charger et d'enregistrer des fichiers sur code.google.com ("Référentiel Subversion"). La plupart des clients Subversion sont équipés d'une interface utilisateur graphique afin d'éviter l'utilisation, moins facile, d'une interface de ligne de commande pour interagir avec l'outil. De nombreux clients, adaptés aux différents systčmes d'exploitation, sont disponibles. Veillez ŕ installer un client qui soit compatible avec votre propre systčme. Nous vous conseillons les clients suivants :
Vous trouverez la liste complčte des clients et des plug-ins compatibles en cliquant sur ce lien.
Une fois l'outil Subversion installé sur votre machine, suivez la procédure ci-dessous pour pouvoir utiliser Google Code et y héberger vos premiers projets.
Pour créer un projet :
Vous disposez désormais d'un projet sur code.google.com. Un référentiel Subversion qui utilise le nom de votre projet a été créé. Cliquez sur l'onglet Source, puis sur le lien Subversion repository.
Cette URL doit suivre le modčle suivant : http://<nom-projet>.googlecode.com/svn/. Trois liens vers des référentiels différents doivent ętre affichés : branches, tags et trunk. Lorsque vous chargez des fichiers dans votre projet, ils sont placés dans le dossier /trunk. Vous pouvez éventuellement créer un signet pour l'URLhttp://<nom-projet>.googlecode.com/svn/trunk/ afin de vous y reporter ultérieurement.
Avant tout téléchargement de fichier, vous devez vérifier le code du référentiel Subversion de votre projet. Pour cela, trois éléments d'information vous sont nécessaires : l'URL du référentiel, un nom d'utilisateur et un mot de passe. Pour retrouver ces informations, accédez ŕ l'onglet Source de votre projet (http://code.google.com/p/<nom-projet>/source). Une chaîne semblable ŕ la chaîne suivante doit s'afficher :
svn checkout https://<project-name>.googlecode.com/svn/trunk/ gadgets-test --username <username>
Entrez le mot de passe SVN généré lorsque vous y ętes invité.
Gardez cette page ouverte dans votre navigateur afin de pouvoir revenir y chercher les informations dont vous avez besoin.
Si, dans le détail, la procédure de vérification est susceptible d'ętre légčrement différente d'un client Subversion ŕ l'autre, globalement, elle est identique. Dans les instructions suivantes, le client choisi est TortoiseSVN.
Pour vérifier un projet :
Le client se connecte et vérifie la totalité de votre référentiel. Et voilŕ !
Si la vérification s'est correctement terminée, un nouveau dossier caché s'affiche : /.svn. Vous ne devez ni modifier ni supprimer ce dossier.
Une fois votre projet vérifié, vous pouvez ajouter des dossiers et des fichiers ŕ l'annuaire ŕ l'aide des commandes Subversion. Dans les instructions suivantes, le client choisi est TortoiseSVN.
Pour télécharger un fichier :
Lorsque vous y ętes invité, rédigez un commentaire (facultatif) dans le fichier journal du message et cliquez sur OK. La transmission de votre fichier au serveur peut commencer.
Une fois la transmission achevée, la validation (téléchargement) est terminée et le fichier est alors immédiatement disponible en ligne, ŕ l'adresse http://<nom-projet>.googlecode.com/svn/trunk/new-gadget.xml.
Dans le référentiel, vous pouvez créer des structures de répertoire qui se répercutent ensuite dans l'URL. Par exemple, si vous ajoutez un fichier nommé /a/b/c/new-gadget.xml et que vous le validez, ce fichier sera hébergé sous l'URL http://<nom-projet>.googlecode.com/svn/trunk/a/b/c/new-gadget.xml.
Pour plus d'informations sur l'hébergement de projets par Google Code, consultez la FAQ correspondante.
©2009 Google - Rčgles de confidentialité - Conditions générales - Ŕ propos de Google
Mis ŕ jour le