La rubrique Mise en route présente Google Gadgets et le bloc-notes, mais elle vous permet également de modifier des gadgets et d'obtenir un aperçu de vos modifications sans avoir à quitter le guide du développeur. La prochaine étape consiste à créer vos propres gadgets. Ce document vous explique comment procéder.
Cette rubrique présente les principales étapes à suivre pour créer et déployer un gadget :
Le gadget du développeur sert de "centre de contrôle" pour tous les gadgets de votre page iGoogle. Il répertorie tous les gadgets en cours d'exécution et vous permet d'ajouter, de visualiser et de gérer des gadgets. Le gadget du développeur vous apporte toutes les fonctionnalités nécessaires pour développer vous-même vos gadgets. Il vous permet, par exemple, d'ajouter des gadgets défaillants, ce qui peut s'avérer utile lorsque vous décidez de modifier un gadget.
Pour ajouter le gadget du développeur, cliquez sur le lien suivant :
Dans le gadget du développeur, vous pouvez cliquer sur les liens des gadgets pour afficher leurs spécifications XML. Ainsi, vous pouvez facilement observer le fonctionnement d'autres gadgets.
Ne vous préoccupez pas des fonctions avancées du gadget du développeur pour le moment. Vous en trouverez une explication détaillée sur cette page. Cela dit, il existe une fonction dont vous souhaiterez profiter dès à présent, à savoir la case à cocher Cached (En cache) Par défaut, les spécifications des gadgets sont mises en cache. Désactivez l'option Cached des gadgets sur lesquels vous êtes en train de travailler. Ainsi, vous verrez apparaître vos modifications plutôt que la version en cache du gadget.
Si vous n'avez pas accès à un serveur Web public, vous pouvez héberger vos gadgets à l'aide de Google Page Creator. Pour une solution d'hébergement plus complexe incluant le contrôle de version, reportez-vous à la rubrique Hébergement sur Google Code.
Pour héberger des gadgets à l'aide de Google Page Creator :
Si vous utilisez Google Page Creator pour la première fois : Les nouveaux utilisateurs de Google Page Creator doivent impérativement accepter les Conditions générales avant d'utiliser ce service. Vous êtes ensuite dirigé vers un éditeur présentant votre page d'accueil par défaut sur Google Page Creator (notez que cette page d'accueil ne correspond pas à votre page iGoogle). À partir de cette page, vous pouvez cliquer sur Back to the Page Manager (Retour au Gestionnaire de pages) pour accéder au Gestionnaire de pages.
Si vous n'êtes pas un nouvel utilisateur de Google Page Creator : Lorsque vous vous connectez à Google Page Creator, la première page qui s'affiche est celle du Gestionnaire de pages.
Par exemple, imaginez que vous ayez créé un gadget appelé "myphonebook.xml" et que vous l'ayez transféré sur Google Page Creator. Vous pouvez alors l'ajouter à votre page iGoogle en indiquant l'URL suivante :
http://<Google-username>.googlepages.com/myphonebook.xml
Sachez que les gadgets privés n'existent pas. Une fois votre gadget publié sur un site Web public, les internautes peuvent le trouver et le visualiser. N'incluez aucune information personnelle, notamment votre numéro de téléphone ou votre propre adresse e-mail.
Que faire pour ne pas rendre votre gadget public ? Google encourage les auteurs de gadgets à partager leurs spécifications. Toutefois, voici quelques conseils qui vous aideront à minimiser la visibilité de votre gadget jusqu'à ce que vous soyez prêt à le publier :
Lorsque vous avez compris le processus de modification et de publication des gadgets, vous êtes prêt à utiliser des fonctions plus complexes dans les spécifications de votre gadget. Les spécifications XML d'un gadget se divisent en 3 parties principales :
Remarque : Dans les attributs XML des spécifications de votre gadget, vous devez "échapper" (c'est-à-dire encoder correctement) certains caractères afin qu'ils puissent être interprétés de manière appropriée. Pour plus d'informations, reportez-vous à la rubrique Échappement des caractères spéciaux.
Pour programmer votre gadget, débutez par la section <Content>.
La section <Content> représente le "cerveau" du gadget. La section <Content> définit le type de contenu et peut soit recueillir elle-même le contenu, soit établir un lien vers un contenu externe. La section <Content> est celle qui articule les attributs d'un gadget et les préférences utilisateur avec la logique de programmation et les informations de mise en forme pour permettre le fonctionnement du gadget.
Le moyen le plus simple pour créer votre gadget est de placer le code HTML (JavaScript ou Flash le cas échéant) dans la section <Content>. Les développeurs expérimentés peuvent consulter la rubrique Choix du type de contenu pour connaître les autres options relatives au contrôle d'accès, à l'hébergement distant, à l'utilisation de différents langages de scripts et à d'autres sujets. Voici un exemple de gadget simple. Ce gadget affiche une photographie sur laquelle il est possible de cliquer afin d'ouvrir un album photo dans une nouvelle page HTML :
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Go to Photo Album" height="250" scaling="false" />
<Content type="html">
<![CDATA[
<div style="text-align:center"><a
id="Riggs" title="My Photo Album" target="_blank"
href="http://picasaweb.google.com/doc.examples/ShelfBoy">
<img border="0" alt="Photo" src="http://doc.examples.googlepages.com/Riggsie-OP.jpg"
title="Click Here."></a>
</div>
]]>
</Content>
</Module>
Voici le gadget obtenu :
Certains gadgets demandent à l'utilisateur de fournir des informations personnelles. Par exemple, un gadget de jeu peut permettre à l'utilisateur de choisir un niveau de difficulté. Ces préférences sont définies dans le paramètre <UserPref> du fichier XML qui décrit les champs de saisie permettant à l'utilisateur de contrôler l'interface du gadget en cours d'exécution. Les préférences utilisateur sont stockées de manière permanente.
Par exemple, ce gadget affiche un message de salutation différent selon l'heure de la journée. Il permet aux utilisateurs de spécifier les éléments suivants :
Le gadget en cours d'exécution se présente comme suit :
Voici l'apparence du gadget lorsque l'utilisateur clique sur modifier afin de définir les préférences utilisateur :
Les préférences utilisateur permettant de contrôler l'interface du gadget en cours d'exécution sont définies dans les spécifications XML comme suit :
<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Preferences for __UP_myname__" height="250" />
<UserPref name="myname" display_name="Name" required="true" />
<UserPref name="myphoto" display_name="Photo" default_value="http://doc.examples.googlepages.com/Rowan-headshot.jpg"/>
<UserPref name="mychoice" display_name="Show Photo?" datatype="bool" default_value="true"/>
<UserPref name="mycolor" display_name="Color" default_value="Yellow" datatype="enum" > <EnumValue value="Red" /> <EnumValue value="Aqua" /> <EnumValue value="Lime" /> <EnumValue value="Yellow" /> <EnumValue value="Pink" /> <EnumValue value="Orange" /> <EnumValue value="White" /> </UserPref>
Remarque :
Voici le script JavaScript permettant d'afficher le message de salutation dans le gadget :
<Content type="html">
<![CDATA[
<div id="content_div" style="font-size:12pt; padding:5px;">
<script type="text/javascript">
// Get userprefs
var prefs = new _IG_Prefs(__MODULE_ID__);
// Based on user input, display personal greeting
function displayGreeting (){
// Create Date object
var today = new Date();
// Get current time.
var time = today.getTime();
var salutation;
// Based on the time of day, display an appropriate greeting
var hour = today.getHours();
if (hour < 12)
salutation = "Morning";
else if (hour > 17)
salutation = "Evening";
else salutation = "Afternoon";
// Build HTML string to display message
var html = "";
var element = document.getElementById('content_div');
element.style.height=250;
// Set the background color according to the mycolor userpref
element.style.backgroundColor=prefs.getString("mycolor");
// Display a greeting based on the myname userpref
html += "<br><h2>Good " + salutation + ", " + prefs.getString("myname") + "!!!</h2><br>";
// If the "Show Photo?" checkbox is checked, display photo.
if (prefs.getBool("mychoice")==true)
{
html += '<img src="' + prefs.getString("myphoto") + '">';
}
_gel("content_div").innerHTML = html;
}
_IG_RegisterOnloadHandler(displayGreeting);
</script>
]]>
</Content>
Pour obtenir la liste de tous les attributs <UserPref>, consultez la rubrique Références.
Les préférences d'utilisateur sont accessibles à partir de l'API JavaScript correspondante, par exemple :
<script type="text/javascript">
// Must be constructed using the __MODULE_ID__ token. It gets replaced
// at runtime with the actual ID of your gadget.
var prefs = new _IG_Prefs(__MODULE_ID__);
var someStringPref = prefs.getString("StringPrefName");
var someIntPref = prefs.getInt("IntPrefName");
var someBoolPref = prefs.getBool("BoolPrefName");
</script>
Pour obtenir la liste de toutes les fonctions JavaScript, consultez la rubrique Références.
Vous pouvez utiliser une variable de substitution de format __UP_userpref__ dans les sections <ModulePrefs> ou <UserPref>, lorsque userpref correspond à l'attribut name d'une préférence utilisateur. Dans le gadget en fonctionnement, la valeur chaîne de la préférence utilisateur correspondante est remplacée par la variable, sans caractères d'échappement. Dans cet extrait par exemple, la valeur indiquée par l'utilisateur dans la préférence utilisateur projects lors du lancement est substituée par la variable __UP_projects__ dans la chaîne title_url :
<Module>
<ModulePrefs title="Build Monitor"
title_url="http://www.example.com/build/status.php?__UP_projects__"/>
<UserPref name="projects" display_name="project(s)"/>
<Content ... />
</Module>
Vous pouvez consulter un autre exemple de ce type de substitution à la rubrique Exemple de préférences utilisateur.
Voici les principales règles à appliquer pour utiliser des variables de substitution de préférences utilisateur :
La section <ModulePrefs> du fichier XML définit les caractéristiques d'un gadget, notamment le titre, l'auteur, les dimensions souhaitées, etc. Exemple :
<Module>
<ModulePrefs title="Today's Network Traffic" title_url="http://www/~rowan/gadgets/stats/"
height="200" author="Jane Smith" author_email="xxx@google.com"/>
<Content ...>
... content ...
</Content>
</Module>
Les utilisateurs de votre gadget ne peuvent pas modifier ces attributs.
Pour obtenir la liste complète des attributs <ModulePrefs>, consultez la rubrique Références.
Lorsque vous serez prêt à programmer des gadgets plus complexes, consultez la rubrique Développement : notions essentielles ou retournez à la page d'accueil de la documentation qui donne un aperçu des rubriques et des sujets abordés.
©2009 Google - Règles de confidentialité - Conditions générales - À propos de Google
Mis à jour le