Cette rubrique explique les concepts et tâches essentiels au développement de gadgets. Pour une introduction à l'utilisation de l'API Google Gadgets, consultez la rubrique Mise en route.
Lors du développement d'un gadget, il faut d'abord déterminer le type de contenu qui va être utilisé. Exemple :
<Content type="html">
Le type de contenu détermine un certain nombre d'éléments :
Le tableau suivant décrit les types de contenu disponibles et les cas dans lesquels les utiliser :
| Type de contenu | Description | Utilisation |
|---|---|---|
| html | Un type de contenu html implique que tout le contenu se trouve dans les spécifications du gadget. Un gadget type="html" contient un code HTML et, éventuellement, des objets de navigation JavaScript, Flash, ActiveX, etc. Il s'agit du type de contenu par défaut. |
Le type de contenu html est le plus souple et le plus polyvalent. Si vous ne savez pas quel type de contenu utiliser, optez pour le type html. |
| html-inline | Dans le type de contenu html-inline, le gadget HTML est affiché en tant qu'élément d'une page parente et non sous forme d'un cadre iFrame. Votre gadget a alors la possibilité de modifier la page parente (la couleur de la police, par exemple). |
Servez-vous du type html-inline lorsque vous souhaitez que votre gadget puisse modifier la page parente. Ne l'utilisez dans aucun autre cas, car ce type limite beaucoup votre champ d'action. Par exemple, vous ne pouvez pas l'utiliser avec d'autres services de Google ni inclure des gadgets de type html-inline dans l'annuaire de contenu. |
| url | Lorsque vous utilisez le type de contenu url, le contenu du gadget réside sur une page Web distante, elle-même référencée par une URL dans les spécifications du gadget. La page Web distante est l'emplacement où se trouvent tous les marqueurs HTML et les éléments de code JavaScript. En effet, il est IMPOSSIBLE de placer un quelconque marqueur HTML ou code JavaScript dans les spécifications du gadget. |
Il existe quelques restrictions à l'utilisation des bibliothèques JavaScript de Google Gadgets avec les gadgets type="url". De plus, un gadget type="url" ne vous permet pas d'utiliser les fonctions _IG_Fetch.... Néanmoins, le type url peut se révéler un excellent choix si vous voulez transformer une application ou une page Web en gadget et il constitue la meilleure option pour des gadgets nécessitant un identifiant de connexion. Le type url convient très bien à des professionnels qui préfèrent utiliser un autre langage de script que JavaScript. |
Dans le cas d'un contenu de type html, tout le code se trouve dans les spécifications du gadget, notamment le code XML du gadget et tous les marqueurs HTML et éléments de code JavaScript. La plupart des exemples proposés dans ce Guide du développeur utilisent le type de contenu html. Ce type est extrêmement souple et polyvalent, et nous vous en recommandons l'utilisation, sauf si vous souhaitez développer un gadget aux caractéristiques particulières.
L'exemple suivant est une mise en œuvre du codage ROT13 pour un gadget. ROT13 crypte du texte en remplaçant chaque lettre par une consœur située 13 lettres plus loin dans l'alphabet. Lorsque vous appliquez à nouveau le codage ROT13, les lettres retrouvent leur emplacement d'origine dans l'alphabet et le texte apparaît sous sa forme initiale.
Voici le gadget obtenu : essayez-le ! Une fois que vous avez crypté le message, copiez et collez le message crypté obtenu dans la zone de texte Message et cliquez de nouveau sur "Transform". Vous obtenez votre message initial.
Vous trouverez ci-dessous les spécifications correspondant à ce gadget :
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Magic Decoder"/>
<Content type="html">
<![CDATA[
<script type="text/javascript">
// The gadget version of ROT13.
// Encodes/decodes text strings by replacing each letter with the letter
// 13 positions to the right in the alphabet.
function decodeMessage (form) {
var alpha = "abcdefghijklmnopqrstuvwxyz";
var input = form.inputbox.value;
var aChar;
var message = "";
for (var i = 0; i <input.length; i++)
{
aChar = input.charAt(i);
var index = alpha.indexOf(aChar.toLowerCase());
// if a non-alphabetic character, just append to string
if (index==-1)
{
message += aChar;
}
// if you have to wrap around the end of the alphabet
else if(index > 12) { // compensate for 0-based index
index = 25 - index; // last item in array is at [25]
index = 12 - index; // because array starts with 0
aChar = alpha.charAt(index);
message += aChar;
}
// if you don't have to wrap
else {
aChar = alpha.charAt(index+13);
message += aChar;
}
}
_gel('content_div').innerHTML = "<b>Your message: </b>" + message;
}
</script>
<FORM NAME="myform" ACTION="" METHOD="GET">Message: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Transform" onClick="decodeMessage(this.form)">
</FORM>
<div id="content_div"></div>
]]>
</Content>
</Module>
Un gadget type="html" doit respecter les points suivants :
<Content type="html">
<![CDATA[ HTML here... ]]>
Les sections CDATA servent à appliquer les caractères d'échappement appropriés à des blocs de texte contenant des caractères qui, sinon, seraient considérés comme des marqueurs. Le seul séparateur qu'une section CDATA est capable de reconnaître est la chaîne "]]>" qui termine la section CDATA.
Un gadget dont le contenu est de type html peut néanmoins référencer un fichier JavaScript externe :
<Module>
<ModulePrefs ... />
<Content type="html"><![CDATA[
<script src="http://www.example.com/gadgets/clock/clock.js" type="text/javascript"></script>
]]></Content>
</Module>
Servez-vous du type de contenu html-inline pour programmer un gadget capable de modifier la page parente. Ces gadgets sont appelés "gadgets intégrés".
Par exemple, ce gadget html-inline, très simple, colore l'arrière-plan d'une page iGoogle en rose :
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="Inline Test"/>
<Content type="html-inline">
<![CDATA[
<h4>Everything looks better in pink.</h4>
<script type="text/javascript">
_IG_RegisterOnloadHandler(function () {
// Turn the personalized homepage background pink.
document.body.style.backgroundColor="Pink";
});
</script>
]]>
</Content>
</Module>
Par défaut, le contenu d'un gadget est placé dans un cadre iFrame. Un cadre iFrame est une page exécutée dans la page parente, mais qui ignore l'existence de cette dernière et est incapable d'interagir avec elle. Ainsi, les utilisateurs sont protégés contre des gadgets malveillants qui pourraient, par exemple, récupérer ou modifier les cookies. Cependant, ces cadres impliquent un certain nombre de contraintes. Ils empêchent les gadgets d'interagir entre eux ou avec d'autres composants de la page.
Pour vous affranchir de ces contraintes, vous pouvez utiliser le système de l'intégration. Le gadget fait alors partie intégrante du code HTML de la page iGoogle. Pour mettre cela en pratique, ajoutez un gadget intégré (le gadget du développeur, par exemple) à votre page iGoogle et affichez le code HTML source. Vous pouvez y voir l'intégralité des spécifications du gadget. Comparez avec ce qui s'affiche pour les gadgets iFrame de la même page. Ces derniers sont uniquement référencés dans le code HTML source à l'aide d'URL de spécifications.
L'avantage de l'intégration est que vous pouvez modifier le contenu de votre page iGoogle grâce à l'outil DOM. Exemple : googlelogo.xml. Cependant, les gadgets intégrés présentent des inconvénients majeurs :
Pour intégrer les spécifications d'un gadget, procédez comme suit :
Le mot clé __MODULE_ID__ est un espace réservé destiné à un ID de gadget unique. Au moment de l'exécution, toutes les chaînes __MODULE_ID__ contenues dans le gadget sont remplacées par les ID uniques correspondant à ce gadget. Chaque gadget d'une page donnée est doté d'un ID différent. Il est donc possible d'exécuter plusieurs gadgets intégrés sur la même page.
Il est recommandé de copier ou de sauvegarder votre gadget au préalable.
Il est important que l'affichage des gadgets intégrés n'ait lieu qu'au moment du chargement de la page, faute de quoi, votre gadget intégré pourrait se comporter de manière inattendue. Notez que pour les gadgets iFrame, vous n'avez pas besoin de la méthode Onload (au moment du chargement) car le code JavaScript est exécuté automatiquement.
Testez vos gadgets en les comparant à d'autres gadgets et en plaçant une seconde instance de votre gadget intégré sur la page.
Lorsque le contenu d'un gadget est de type type="url", l'attribut href= fournit une URL et tout le reste du contenu des spécifications est ignoré. Un type de contenu url implique que toutes les informations relatives à l'interface utilisateur et à la logique de programmation du gadget soient placées dans le fichier référencé par l'URL. Ne placez AUCUN marqueur HTML ou code JavaScript dans les spécifications du gadget. Exemple :
<Module> <ModulePrefs ... /> <Content type="url" href="http://www/cgi-bin/example/gadgets/mystats.cgi" /> </Module>
Pour une description détaillée de l'utilisation des bibliothèques JavaScript de Google Gadgets dans un gadget type="url", reportez-vous à la rubrique Utilisation des bibliothèques JavaScript avec des gadgets type="url".
Notez que vous devez appliquer les caractères d'échappement appropriés à l'URL d'un gadget type="url", comme indiqué à la rubrique Échappement des caractères spéciaux.
De plus, un gadget type="url" ne vous permet pas d'utiliser les fonctions _IG_Fetch....
Par défaut, les gadgets s'affichent dans des cadres iFrame. Si vous n'indiquez pas le code nécessaire, ces cadres iFrames font apparaître une marge transparente. Les gadgets du type de contenu html contiennent automatiquement le code permettant de supprimer ces marges. Cependant, lorsque votre contenu est de type type="url", vous devez déterminer vous-même la façon dont votre gadget doit s'afficher. Pour supprimer les marges, ajoutez le texte suivant au fichier HTML référencé par votre gadget :
<style type="text/css"> body {margin: 0px;} </style>
Cet exemple indique comment extraire les paires de paramètre clé/valeur qui ont été transmises via l'URL d'un gadget type="url" et les utiliser dans votre script ou page cible.
Lorsqu'une requête pour obtenir l'URL du gadget est formulée depuis une page iGoogle Google, les paramètres sont ajoutés à la fin de la requête pour constituer une méthode GET. Cela est uniquement valable lorsque votre type de contenu est défini sur url. Ces paramètres peuvent être lus par un gadget utilisant JavaScript ou par une application Web côté serveur.
Les paramètres transmis sont répertoriés dans les références.
Dans cet exemple, le gadget contient une référence vers le script PHP cible params.php :
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Preferences for __UP_myname__" height="250" /> <UserPref name="mychoice" display_name="List Params?" datatype="bool"/> <UserPref name="myname" display_name="Name" required="true"/> <UserPref name="mycolor" display_name="Color" default_value="Blue" datatype="enum"> <EnumValue value="Red"/> <EnumValue value="Blue"/> <EnumValue value="Green"/> <EnumValue value="Yellow"/> <EnumValue value="Pink"/> <EnumValue value="Orange"/> <EnumValue value="White"/> </UserPref> <Content type="url" href="http://www.example.com/params.php"/> </Module>
La page cible utilise JavaScript pour traiter les paramètres que le gadget lui transmet via l'URL.
Voici un exemple de gadget dont la zone d'édition des préférences utilisateur est ouverte. Les utilisateurs peuvent choisir d'afficher les paramètres transmis à la page HTML cible. S'ils ne cochent pas la case "List Params", un message de bienvenue personnalisé s'affiche.
Le gadget transmet ses paramètres sous forme de paires clé/valeur dans une requête de type GET. Les préférences utilisateur sont, quant à elles, transmises sous forme de paramètres de type &up_userpref=value. Supposons que notre exemple de gadget dispose d'une préférence utilisateur appelée mycolor. Si ce paramètre est défini sur "Pink" (rose), il est transmis dans l'URL sous la forme &up_mycolor=Pink. L'URL transmise pour ce gadget devrait se présenter de la façon suivante :
http://www.example.com/~rowan/gadgets/index.html?up_mychoice=1&up_myname=Foster&up_mycolor=Pink&.lang=en&.country=us
Ci-après, vous trouverez le script params.php du fichier référencé dans les spécifications du gadget. Le code PHP extrait les bibliothèques de l'URL transmise au gadget et les ajoute au gadget, comme décrit à la rubrique Utilisation des bibliothèques JavaScript avec des gadgets type="url". Le code JavaScript utilise la fonction _args() pour récupérer les paramètres de l'URL sous forme de tableau associatif.
Le code JavaScript de la page HTML cible place les paramètres dans un tableau et modifie les paramètres définis pour le gadget en fonction des préférences que l'utilisateur aura indiquées.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<style type="text/css"> </style>
<TITLE> Userprefs Params Example </TITLE>
</HEAD>
<BODY>
<div id="content_div" style="font-size:12pt; padding:5px;"></div>
<?php
// Parse gadget URL and emit <script src=...</script> statements into the HTML output.
// The <script src=...</script> statements will load the libraries passed in via the URL.
$libraries = split(",", $_GET["libs"]);
foreach ($libraries as $script) {
if (preg_match('@^[a-z0-9/._-]+$@i', $script)
&& !preg_match('@([.][.])|([.]/)|(//)@', $script)) {
print "<script src='http://www.google.com/ig/f/$script'></script>";
}
}
?>
<script type="text/javascript">
// Set background color according to user choice.
var element = document.getElementById('content_div');
element.style.backgroundColor = _args()["up_mycolor"];
// Build HTML string used to display content
var html = "";
// If checkbox ("List KVPs") is not checked, display personal welcome message. // Use _args() function to access the parameter name-value pairs. if (_args()["up_mychoice"]==0) { element.style.height=200; html += "<br><br><br><br><FONT SIZE=6>Welcome, " + _args()["up_myname"] + "!!!<br> </FONT>"; } // Otherwise, if box is checked, list KVPs. else { html += "<br><B>Params Passed in URL: </B><br><br>"; // Iterate through the _args() associative array to print out all of the parameter key-value // pairs passed in the URL. for(var param in _args()) { var value = _args()[param]; html +=param +"="+ value + "<br>"; } } _gel("content_div").innerHTML = html; </script> </BODY> </HTML>
L'API Google Gadgets dispose de deux sortes de bibliothèque JavaScript : une bibliothèque principale et des bibliothèques spécifiques aux fonctions telles que les onglets, la hauteur dynamique et les Setprefs. La bibliothèque principale fournit des fonctions génériques tandis que les bibliothèques spécifiques aux fonctions fournissent des fonctionnalités bien précises selon la fonction concernée.
Le tableau suivant récapitule comment chaque type de gadget doit utiliser les bibliothèques JavaScript de Google Gadgets :
| Type de contenu | Restrictions d'utilisation des bibliothèques JavaScript | Procédure d'utilisation de la bibliothèque principale JavaScript | Procédure d'utilisation des bibliothèques spécifiques JavaScript |
|---|---|---|---|
| html | Aucune | Utilisation ne requérant aucune procédure particulière. | Les spécifications du gadget doivent contenir l'instruction <Require feature="[feature]"/> pour pouvoir inclure la bibliothèque appropriée. |
| html-inline | Aucune | Utilisation ne requérant aucune procédure particulière. | Les spécifications du gadget doivent contenir l'instruction <Require feature="[feature]"/> pour pouvoir inclure la bibliothèque appropriée. |
| url | La référence href du gadget doit pointer vers un script côté serveur (type PHP, Python, Java ou CGI), href mais ne peut pas pointer vers un simple fichier HTML/JavaScript. |
La bibliothèque principale est toujours transmise dans l'URL pour les gadgets type="url". Le gadget doit analyser l'URL pour extraire la bibliothèque et élaborer une instruction <script src=...</script> afin que cette bibliothèque soit prise en compte dans le code HTML publié. Cette instruction indique au gadget de charger la bibliothèque. |
Les spécifications du gadget doivent contenir l'instruction <Require feature="[feature]"/> pour pouvoir inclure la bibliothèque appropriée. Le gadget doit analyser l'URL pour extraire la bibliothèque et élaborer une instruction <script src=...</script> afin que cette bibliothèque soit prise en compte dans le code HTML publié. Cette instruction indique au gadget de charger la bibliothèque. |
Pour utiliser l'JavaScript API Google Gadgets dans un gadget de type type="url" suivez les instructions suivantes :
http://...&libs=2dhyBXfcpQ8/lib/libcore.js...
a été extrait de l'URL et utilisé pour élaborer l'instruction ci-après. Cette dernière sera ajoutée au code HTML publié. Cette instruction donne l'ordre suivant : "Charger la bibliothèque JavaScript principale de Google Gadgets".
<script src='http://www.google.com/ig/f/2dhyBXfcpQ8/lib/libcore.js'></script>
Reportez-vous à l'exemple setprefs.php ci-dessous pour connaître le code PHP utilisé afin d'élaborer l'instruction. La chaîne "2dhyBXfcpQ8" est une empreinte digitale constituée à partir du contenu du fichier .js qui oblige le navigateur à utiliser la version correcte du fichier.
Nous avons converti l'exemple de gadget Setprefs de type HTML en gadget type="url". Vous trouverez ci-dessous les spécifications correspondant à ce gadget :
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
title="PHP Userprefs" height="50" >
<Require feature="setprefs" />
</ModulePrefs>
<UserPref
name="counter"
default_value="0"
datatype="hidden"/>
<Content type="url" href="http://www.example.com/mygadgets/setprefs.php"/>
</Module>
Voici le fichier setprefs.php référencé dans les spécifications du gadget :
<html> <head> <?php // Parse gadget URL and emit <script src=...</script> statements into the HTML output. // The <script src=...</script> statements will load the libraries passed in via the URL. $libraries = split(",", $_GET["libs"]);
foreach ($libraries as $script) {
if (preg_match('@^[a-z0-9/._-]+$@i', $script)
&& !preg_match('@([.][.])|([.]/)|(//)@', $script)) {
print "<script src='http://www.google.com/ig/f/$script'></script>";
}
} ?> <script type="text/javascript"> // Get user preferences var prefs = new _IG_Prefs(); // Increment value of "counter" user preference function incrementCounter() { var count = prefs.getInt("counter"); alert("The count is " + count + "."); // Increment "counter" userpref prefs.set("counter", count + 1); } // Reset value of "counter" userpref to 0 function resetCounter(){ prefs.set("counter", 0); alert("Count reset to " + prefs.getInt("counter") + "."); } </script> </head> <body> <input type=button value="Count" name="count" onClick="incrementCounter()"> <input type=button value="Reset" name="reset" onClick="resetCounter()"> </body> </html>
Vous pouvez transformer une page ou une application Web existante en gadget. Pour cela, procédez comme suit :
Dans les spécifications du gadget, à chaque préférence utilisateur correspond un type de données particulier. La chaîne datatype est une chaîne facultative qui permet de spécifier le type de données de l'attribut. Les valeurs possibles pour la chaîne datatype sont les suivantes : string, bool, enum, hidden (chaîne invisible, non modifiable par l'utilisateur), list et location (pour les gadgets Google Maps). Le type de données par défaut est string.
Consultez les références de ce guide pour des informations détaillées sur les types de données et les fonctions des préférences utilisateur.
Dans cette section, deux types de données sont décrits plus particulièrement : list et location. Vous pourrez trouver des exemples d'utilisation des autres types de données dans différentes rubriques de ce guide, comme pour enum, hidden et bool, par exemple.
La préférence utilisateur dont le type de données est list correspond à un tableau de données rempli dynamiquement par les utilisateurs au moment de l'exécution des préférences. Les valeurs sont ajoutées au fur et à mesure que les utilisateurs les entrent dans la zone d'édition des préférences. Au moment de l'exécution des préférences, le gadget peut accéder à cette liste de valeur à l'aide d'un programme, de la même manière qu'il peut accéder à n'importe quelle autre préférence utilisateur. Vous pouvez utiliser le type de données list chaque fois que vous souhaitez permettre à vos utilisateurs d'entrer de façon dynamique la liste de valeurs de leur choix. Par exemple, un gadget météo doit permettre à l'utilisateur d'entrer une liste de codes postaux.
Prenons l'exemple du gadget Google qui affiche des liens correspondant aux flux des actualités scientifiques et technologiques. Dans la zone d'édition des préférences utilisateur, il est possible d'ajouter des mots à la liste via la zone de texte Add Search Terms. Le gadget recherche des instances des termes recherchés dans les titres des flux d'entrées. S'il trouve une correspondance, le lien concerné s'affiche en rouge. Dans cet exemple, la liste contient trois mots : "abc", "Google" et "MACWORLD". Les liens contenant ces mots sont affichés en rouge. Les utilisateurs peuvent ensuite supprimer un élément de la liste en cliquant sur le signe X correspondant.
Pour indiquer que le type de données d'une préférence utilisateur est list, servez-vous de l'attribut datatype="list". Exemple :
<UserPref name="mylist" display_name="Add Search Terms" datatype="list" required="true"/>
Le gadget accède aux valeurs de la liste à l'aide de la fonction getArray() de la méthode _IG_Prefs. Exemple :
var search_terms = prefs.getArray("mylist");
Dans le tableau, les éléments sont stockés sous forme de liste et séparés par des barres verticales (|). Pour renvoyer cette liste sous la forme d'une seule chaîne composée de valeurs séparées par des barres verticales, vous pouvez utiliser la fonction getString() pour la méthode _IG_Prefs. Exemple :
// For the sample gadget shown above, returns the string "abc|Google|MACWORLD"
prefs.getString("mylist");
Vous pouvez également vous servir d'une chaîne de valeurs séparées par des barres verticales pour définir les valeurs par défaut d'un type list :
<UserPref name="mylist" display_name="Add Search Terms" datatype="list" default_value="zdnet|pc|Apple Insider"/>
Vous pouvez ajouter des valeurs à la liste de manière programmée. Pour cela, utilisez la fonction setArray(name, val) pour la méthode _IG_Prefs. Toutefois, pour pouvoir utiliser cette fonction, votre gadget doit indiquer <Require feature="setprefs"/> sous <ModulePrefs>. Par exemple, dans l'extrait de code suivant, les valeurs "Nokia" et "CNET" ont été ajoutées à la liste :
... <ModulePrefs title="Feed Searcher" scrolling="true"> <Require feature="setprefs" />
</ModulePrefs> ... prefs.setArray("mylist", ["Nokia","CNET"]);
Vous trouverez ci-dessous le code correspondant à notre exemple de gadget. Pour de plus amples informations sur la programmation de gadgets affichant des flux, reportez-vous à la rubrique Utilisation de flux.
<?xml version="1.0" encoding="UTF-8" ?>
<Module> <ModulePrefs title="Feed Searcher" scrolling="true"/> <UserPref name="mylist"
display_name="Add Search Terms"
datatype="list"
required="true"/> <Content type="html"> <![CDATA[ <style type="text/css"> .special-link { color:red; background-color:#BFE4FF; } </style> <style> #content_div { font-size: 80%; margin: 5px; background-color: #80C9FF;} </style> <div id=content_div></div> <script type="text/javascript"> // Get userprefs var prefs = new _IG_Prefs(__MODULE_ID__); // Get the array of search terms entered by the user var search_terms = prefs.getArray("mylist"); // Use the _IG_FetchFeedAsJSON() function to retrieve core feed data from // the specified URL. Then combine the data with HTML markup for display in // the gadget. _IG_FetchFeedAsJSON( "http://news.google.com/?ned=us&topic=t&output=rss", function(feed) { if (feed == null){ alert("There is no data."); return; } // Start building HTML string that will be displayed in gadget. var html = ""; // Display the feed title html += "<div><b>" + feed.Title + "</b></div>"; // Access the data for a given entry if (feed.Entry) { for (var i = 0; i < feed.Entry.length; i++) { // flag used to indicate whether an entry title matches a search term var flag = 0; // Iterate through array of search terms to see if any of them matches // entry title for (var j = 0; j < search_terms.length ; j++) { // Do case-insensitive comparison var titletxt = (feed.Entry[i].Title).toLowerCase(); var term = (search_terms[j]).toLowerCase(); html += "<div>"; // Set flag to 1 if entry title matches one of search terms if ((titletxt.indexOf(term)) != -1){ flag = 1; } } // If the entry title matches one of the search terms, display the entry // link in red text. if (flag!=0){ html += "<a class='special-link' target='_blank' href='" + _hesc(feed.Entry[i].Link) + "'>"; } else { html += "<a target='_blank' href='" + _hesc(feed.Entry[i].Link) + "'>"; } html += _hesc(feed.Entry[i].Title) + "</a> "
+ "</div>"; } } _gel("content_div").innerHTML = html; }, 9); </script> ]]> </Content>
</Module>
Les gadgets Google Maps ont la possibilité d'utiliser le type de données location. L'exemple de gadget ci-après montre comment utiliser le type de données location. Dans le cas des gadgets, la valeur indiquée pour un type de données location doit être une grande ville ou un code postal connu des États-Unis, du Canada ou du Royaume-Uni. L'utilisation de codes postaux est susceptible de donner de meilleurs résultats.
Lorsque vous utilisez un type de données location, servez-vous de la fonction getString() afin d'obtenir la longitude et la latitude de l'emplacement spécifié par l'utilisateur.
<Module>
<ModulePrefs title="Map of __UP_loc__" height="300" author="Jane Smith" author_email="xxx@google.com" />
<UserPref name="loc" display_name="Location" datatype="location" required="true" />
<Content type="html">
<![CDATA[
<script src="http://maps.google.com/maps?file=js" type="text/javascript"></script>
<div id="map" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
var prefs = new _IG_Prefs(__MODULE_ID__);
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(prefs.getString("loc.long"), prefs.getString("loc.lat")), 6);
</script> ]]>
</Content> </Module>
Lors de la lecture d'une préférence de type location x :
Les versions précédentes de l'API Google Gadgets ne permettaient pas d'indiquer de default_value pour un type d'emplacement, mais ce n'est plus le cas.
Il est fréquent de laisser aux utilisateurs la possibilité d'indiquer de manière explicite leurs préférences dans une zone d'édition prévue à cet effet. Cependant, il est parfois utile de définir ces valeurs de préférences à l'aide d'un programme, sans intervention directe de la part de l'utilisateur. Par exemple, dans le cas d'un gadget de jeu, il est intéressant de pouvoir stocker de manière permanente le meilleur score de l'utilisateur. À l'aide d'un programme, il est possible de définir une préférence utilisateur sur une valeur de type "meilleur_score".
Pour utiliser la fonction setprefs, votre gadget doit contenir les éléments suivants :
hidden à cette préférence utilisateur) ; Notez que la taille d'une préférence est souvent limitée en fonction des capacités de l'URL (2 Ko).
Voici un exemple de gadget constitué de deux boutons : l'un incrémente la valeur d'un compteur et l'autre le remet à zéro. Dans cet exemple, "counter" est une préférence utilisateur. Son type de données est hidden, c'est-à-dire que les utilisateurs ne peuvent pas en modifier directement la valeur.
Vous trouverez ci-dessous les spécifications correspondant à ce gadget :
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs
title="Set Userprefs Demo">
<Require feature="setprefs" />
</ModulePrefs>
<UserPref
name="counter"
default_value="0"
datatype="hidden"/>
<Content type="html">
<![CDATA[
<script type="text/javascript">
// Get user preferences var prefs = new _IG_Prefs(__MODULE_ID__);
// Increment value of "counter" user preference function incrementCounter() {
var count = prefs.getInt("counter");
alert("The count is " + count + ".");
prefs.set("counter", count + 1);
}
// Reset value of "counter" userpref to 0 function resetCounter(){ prefs.set("counter", 0); alert("Count reset to " + prefs.getInt("counter") + "."); } </script>
<input type=button value="Count" name="count" onClick="incrementCounter()"> <input type=button value="Reset" name="reset" onClick="resetCounter()"> ]]> </Content> </Module>
Remarque : S'il vous faut stocker plusieurs valeurs, nous vous recommandons de les sauvegarder dans une chaîne JSON. Vous trouverez un exemple de procédure sur la page todo.xml. Il existe également un script JSON open source disponible à l'adresse http://www.json.org/json.js. Il contient des méthodes permettant de convertir facilement des objets JavaScript en chaînes JSON et inversement.
Dans les attributs XML des spécifications d'un gadget, vous devez appliquer des caractères d'échappement à certains caractères spéciaux. Notez que seules les entités ASCII peuvent être utilisées dans des spécifications de gadget. Par exemple, vous ne pouvez pas utiliser les entités de symbole ISO 8859-1. Voici une liste des caractères spéciaux pris en charge :
| Caractère | Code d'échappement |
|---|---|
| & | & |
| < | < |
| > | > |
| " | " |
| ' | ' |
Exemple :
Remarque : Ce type d'échappement n'est pas obligatoire dans une section CDATA, mais prenez de bonnes habitudes et utilisez-le quand même.
Dans votre code JavaScript, vous pouvez vous servir de la fonction _hesc(str) afin de renvoyer la chaîne HTML str où il est nécessaire d'appliquer des caractères d'échappement aux caractères suivants : <>&'".
Par défaut, les règles de confidentialité de Microsoft Internet Explorer et d'Apple Safari n'autorisent pas des sites tiers à définir des cookies. Certains gadgets sont donc susceptibles de ne pas fonctionner correctement. En particulier, des sites utilisant des cookies pour les connexions peuvent mal fonctionner dans un cadre iFrame de la page iGoogle. Voici cinq solutions possibles :
<?php header("P3P: CP=\"CAO PSA OUR\""); ?>Ce code doit être appelé avant tout affichage de données sur la page.
CONSULTEZ AVEC ATTENTION VOS RÈGLES DE CONFIDENTIALITÉ AFIN DE VÉRIFIER LES EN-TÊTES QUE VOUS POUVEZ EFFECTIVEMENT UTILISER SUR VOTRE SITE. NOUS VOUS CONSEILLONS VIVEMENT DE CONSULTER VOTRE CONSEILLER JURIDIQUE.
Tel qu'il est configuré, votre navigateur n'est pas compatible avec ce site. Si vous utilisez Microsoft Internet Explorer, vous pouvez modifier vos paramètres de sécurité en sélectionnant Outils > Options Internet. Cliquez sur l'onglet Confidentialité, puis sur le bouton Avancé et cochez la case Ignorer la gestion automatique des cookies. Sous Cookies tierce partie, cliquez sur Accepter. Vous avez également la possibilité d'utiliser un autre navigateur Web, tel que Mozilla Firefox par exemple.
©2009 Google - Règles de confidentialité - Conditions générales - À propos de Google
Mis à jour le