In diesem Dokument werden die Konzepte und Aufgaben beschrieben, die für den Entwicklungsprozess von Gadgets grundlegend sind. Eine Einführung in das Google Gadgets-API finden Sie unter Erste Schritte.
Beim Entwickeln eines Gadgets müssen Sie zunächst entscheiden, welchen Content-Typ Sie verwenden möchten. Beispiel:
<Content type="html">
Der Content-Typ bestimmt Folgendes:
In der folgenden Tabelle sind die verfügbaren Content-Typen und deren Einsatzmöglichkeiten beschrieben:
| Content-Typ | Beschreibung | Einsatzmöglichkeit |
|---|---|---|
| html | Beim Content-Typ html befindet sich der gesamte Content in der Gadget-Spezifikation. Ein Gadget mit type="html" enthält HTML-Code und möglicherweise eingebettetes JavaScript, Flash, ActiveX, oder andere Browser-Objekte. Dies ist der Standardtyp. |
Der Content-Typ html bietet die größte Flexibilität und Vielseitigkeit. Wenn Sie unsicher sind, wählen Sie den Content-Typ html. |
| html-inline | Beim Content-Typ html-inline wird der HTML-Code des Gadgets als Teil der übergeordneten Seite statt in einem iframe dargestellt. Dadurch erhält das Gadget die Möglichkeit, die übergeordnete Seite zu modifizieren und beispielsweise die Schriftfarbe zu ändern. |
Verwenden Sie den Content-Typ html-inline, falls das Gadget die übergeordnete Seite modifizieren muss. Andernfalls sollten Sie diesen Content-Typ nicht verwenden, da er Ihnen Beschränkungen auferlegt. Sie können ihn nicht mit anderen Google-Websites verwenden und Gadgets vom Typ html-inline können nicht in das Content-Verzeichnis aufgenommen werden. |
| url | Beim Content-Typ url befindet sich der Gadget-Content auf einer Remote-Webseite, die von einer URL in der Gadget-Spezifikation referenziert wird. Auf der Remote-Webseite befindet sich der gesamte HTML-Markup- und JavaScript-Code. Sie können keinen HTML-Markup- oder JavaScript-Code direkt in die Gadget-Spezifikation integrieren. |
Es sind einige Beschränkungen bei der Verwendung von JavaScript-Bibliotheken von Google Gadgets in einem type="url"-Gadget zu beachten. Eine Beschränkung besteht darin, dass Sie die _IG_Fetch …-Funktionen nicht in einem Gadget vom Typ type="url" verwenden können. Der Content-Typ url bietet sich an, wenn Sie eine vorhandene Anwendung oder Webseite in ein Gadget umwandeln möchten. Außerdem eignet er sich für Gadgets, für die ein Login erforderlich ist, am besten. Der Content-Typ url ist für erfahrene Nutzer geeignet, die eine andere Skriptsprache als JavaScript verwenden möchten. |
Beim Content-Typ html befindet sich der gesamte Code in der Gadget-Spezifikation. Dazu gehört der Gadget-XML-Code sowie HTML-Markup- und JavaScript-Code. Nahezu in allen Beispielen des vorliegenden Leitfadens für Entwickler wird der Content-Typ html verwendet. Dieser Content-Typ bietet die größte Flexibilität und Vielseitigkeit und sollte nur dann nicht verwendet werden, wenn Sie ein Gadget mit bestimmten Anforderungen erstellen.
Das folgende Beispiel zeigt eine Implementierung des Gadgets ROT13. ROT13 verschlüsselt Text, indem jeder Buchstabe mit dem Buchstaben, der 13 Stellen weiter rechts im Alphabet steht, ersetzt wird. Wenn Sie das Gadget ROT13 erneut anwenden, wird jeder Buchstabe wieder ausgetauscht und der Originaltext wieder hergestellt.
Dies ist das laufende Gadget. Machen Sie den Test! Fügen Sie nach dem Kodieren Ihrer Nachricht die kodierte Nachricht in das Textfeld ein und klicken Sie erneut auf "Transform". Ihre ursprüngliche Nachricht wird wieder hergestellt.
Und dies ist die Gadget-Spezifikation:
<?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>
Die Regeln für ein Gadget vom Typ type="html" lauten wie folgt:
<Content type="html">
<![CDATA[ HTML here … ]]>
CDATA-Abschnitte werden zum Maskieren von Textblöcken mit Zeichen, die andernfalls als Markup betrachtet würden, verwendet. Das einzige Begrenzungszeichen, das in CDATA-Abschnitten erkannt wird, ist die Zeichenfolge "]]>", die den CDATA-Abschnitt beendet.
Ein Gadget mit dem Content-Typ html kann auch eine externe JavaScript-Datei referenzieren:
<Module>
<ModulePrefs … />
<Content type="html"><![CDATA[
<script src="http://www.example.com/gadgets/clock/clock.js" type="text/javascript"></script>
]]></Content>
</Module>
Verwenden Sie den Content-Typ html-inline für ein Gadget, das die übergeordnete Seite modifiziert. Diese Gadgets werden als "Inline-Gadgets" bezeichnet.
Mit diesem einfachen Gadget vom Typ html-inline wird beispielsweise der Hintergrund der iGoogle-Seite in rosa geändert:
<?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>
Standardmäßig ist der Gadget-Content in einem iframe eingeschlossen. Ein iframe ist eine Seite, die innerhalb der übergeordneten Seite ausgeführt wird. Er hat keinen Bezug zur übergeordneten Seite und keine Möglichkeit, mit ihr zu interagieren. So werden Nutzer vor böswilligen Gadgets geschützt, die beispielsweise versuchen, Cookies zu stehlen oder zu modifizieren. iframes bedeuten allerdings einige Einschränkungen. Sie lassen es nicht zu, dass Gadgets miteinander und mit anderen Komponenten auf der Seite interagieren.
Um diese Einschränkungen zu umgehen, verwenden Sie Inlining. Hierbei wird das Gadget zu einem Teil des HTML-Codes der iGoogle-Seite. Um zu sehen, wie dies funktioniert, fügen Sie ein Inline-Gadget (wie das Entwickler-Gadget) zu Ihrer iGoogle-Seite hinzu und zeigen den HTML-Quellcode an. Sie können die gesamte Gadget-Spezifikation im HTML-Code anzeigen. Vergleichen Sie diese mit den iframe-Gadgets auf derselben Seite. Diese Gadgets werden über die URLs ihrer Gadget-Spezifikation im HTML-Quellcode referenziert.
Der Vorteil von Inlining besteht darin, dass Sie den DOM der iGoogle-Seite ändern können. Ein Beispiel finden Sie in der Datei googlelogo.xml. Inlining hat jedoch auch erhebliche Nachteile:
Die folgenden Schritte sind zum Inlining eines Gadgets erforderlich:
Das Keyword __MODULE_ID__ stellt einen Platzhalter für eine eindeutige Gadget-ID dar. Zur Laufzeit werden alle __MODULE_ID__-Zeichenfolgen im Gadget-Content durch die eindeutige ID für dieses Gadget ersetzt. Jedes Gadget auf einer bestimmten Seite verfügt über eine andere ID. So können mehrere Inline-Gadget auf derselben Seite ausgeführt werden.
Es empfiehlt sich, Ihr Gadget zunächst zu sichern oder zu kopieren.
Inline-Gadgets müssen ihre eigene Darstellung zurückhalten, bis die Seite geladen ist. Dieser Schritt ist wichtig, da das Inline-Gadget sich andernfalls unerwartet verhalten kann. Für iframe-Gadgets sind keine Onload-Handler erforderlich, da der JavaScript-Code automatisch ausgeführt wird.
Testen Sie das Gadget mit anderen Gadgets und durch Platzieren einer zweiten Instanz des Inline-Gadgets auf der Seite.
Wenn ein Gadget über den Content-Typ type="url" verfügt, gibt das Attribut href= eine URL an und jeder weitere Content der Gadget-Spezifikation wird ignoriert. Bei einem Content-Typ url wird von der Annahme ausgegangen, dass sich die gesamten Informationen, die sich auf die Benutzerschnittstelle des Gadgets und die Programmierlogik beziehen, in der von der URL referenzierten Datei befinden. HTML-Markup- oder JavaScript-Code wird nicht direkt in das Gadget integriert. Beispiel:
<Module> <ModulePrefs … /> <Content type="url" href="http://www/cgi-bin/example/gadgets/mystats.cgi" /> </Module>
Eine Beschreibung der Schritte, die erfoderlich sind, um die JavaScript-Bibliotheken von Google Gadgets in einen type="url" Gadget zu verwenden, erhalten Sie unter Verwenden von JavaScript-Bibliotheken mit type="url" Gadgets.
Achten Sie darauf, Sonderzeichen in der URL eines Gadgets vom Typ type="url" wie unter Maskieren von Sonderzeichen beschrieben zu maskieren.
Die _IG_Fetch …-Funktionen können nicht in einem Gadget vom Typ type="url" verwendet werden.
Standardmäßig werden Gadgets in iframes angezeigt. Iframes beinhalten einen durchsichtigen Rand, falls Sie keinen Code integrieren, um etwas anderes festzulegen. Gadgets mit dem Content-Typ html werden automatisch mit dem entsprechenden Code zum Entfernen der Ränder erstellt. Wenn der Content-Typ allerdings type="url" lautet, sind Sie selbst für die Darstellung des Gadgets verantwortlich. Nehmen Sie zum Entfernen von Rändern den folgenden Text in die HTML-Datei auf, die von Ihrem Gadget referenziert wird:
<style type="text/css"> body {margin: 0;} </style>
Dieses Beispiel veranschaulicht, wie Sie die in der URL übergebenen Schlüssel-/Wertpaare für den Parameter eines type="url"-Gadgets extrahieren und in Ihrem Zielskript oder Ihrer Zielseite verwenden.
Wird die Gadget-URL von einer iGoogle-Seite angefordert, werden Parameter an die Anforderung angefügt (GET-Methode). Dies gilt nur, wenn als Content-Typ url gewählt wurde. Diese Parameter können mittels JavaScript von einem Gadget oder von einer serverseitigen Webanwendung gelesen werden.
Die übergebenen Parameter sind unter Referenz aufgeführt:
Das Gadget in diesem Beispiel enthält eine Referenz zu einem PHP-Zielskript 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>
Die Zielseite verwendet JavaScript zur Verarbeitung der Parameter, die das Gadget in der URL an sie übergibt.
Das folgende Beispiel zeigt ein laufendes Gadget mit einem geöffneten Bearbeitungsfeld für die Benutzereinstellungen. Nutzer haben die Möglichkeit, die an die HTML-Zielseite übergebenen Parameter aufzulisten. Wenn das Kontrollkästchen "List Params" nicht aktiviert wird, wird stattdessen ein persönlicher Gruß angezeigt.
Das Gadget übergibt seine Parameter als Schlüssel-/Wertpaare in einer GET-Anforderung. Benutzereinstellungen werden als Parameter im Format &up_userpref=value übergeben. Dieses Beispiel-Gadget verfügt über die Benutzereinstellung mycolor. Wenn die Einstellung beispielsweise "Rosa" lautet, wird sie in der URL als &up_mycolor=Pink übergeben. Die für dieses Gadget übergebene URL sieht beispielsweise wie folgt aus:
http://www.example.com/~rowan/gadgets/index.html?up_mychoice=1&up_myname=Foster&up_mycolor=Pink&.lang=en&.country=us
Hierbei handelt es sich um die Datei params.php, die in der Gadget-Spezifikation referenziert wird. Der PHP-Code entfernt die Bibliotheken aus der dem Gadget übergebenen URL und fügt sie zum Gadget hinzu. Dieser Vorgang wird unter Verwenden von JavaScript-Bibliotheken mit type="url"-Gadgets beschrieben. Der JavaScript-Code verwendet die _args()-Funktion zum Abrufen der URL-Parameter als assoziatives Array.
Der JavaScript-Code auf der HTML-Zielseite platziert die Parameter in ein Array und ändert die Gadget-Einstellungen entsprechend den vom Nutzer angegebenen Einstellungen.
<!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>
Im Google Gadgets-API werden zwei Arten von JavaScript-Bibliotheken verwendet: die Basis-Bibliothek und die funktionsspezifischen Bibliotheken, die Funktionen wie Registerkarten, dynamische Höhe und "Setprefs" beinhalten. Die Basisbibliothek enthält allgemeine Funktionen. Die funktionsspezifischen Bibliotheken bieten Funktionen für bestimmte Features.
Die folgende Tabelle enthält eine Zusammenfassung der Erfordernisse für Gadget-Typen zur Verwendung von JavaScript-Bibliotheken für Gadgets:
| Content-Typ | Einschränkungen für JavaScript-Bibliotheken | Schritte zum Verwenden der JavaScript-Basisbibliothek | Schritte zum Verwenden der funktionsspezifischen JavaScript-Bibliotheken |
|---|---|---|---|
| html | Keine. | Die Verwendung der Basisbibliothekfunktionen ist ohne besondere Erfordernisse möglich. | Die Gadget-Spezifikation muss eine <Require feature="[feature]"/>-Anweisung zum Einbeziehen der entsprechenden Bibliothek enthalten. |
| html-inline | Keine. | Die Verwendung der Basisbibliothekfunktionen ist ohne besondere Erfordernisse möglich. | Die Gadget-Spezifikation muss eine <Require feature="[feature]"/>-Anweisung zum Einbeziehen der entsprechenden Bibliothek enthalten. |
| Url | Das Gadget href muss auf ein serverseitiges Skript verweisen (wie beispielsweise ein PHP-, Python-, Java-, oder CGI-Skript). Das href kann nicht auf eine Datei in Plain HTML oder eine JavaScript-Datei verweisen. |
Die Basis-Bibliothek wird immer in der URL für type="url"-Gadgets übergeben. Das Gadget muss die URL zum Extrahieren der Bibliothek analysieren und eine <script src= …</script>-Anweisung erstellen, damit die Bibiothek in den ausgebenen HTML-Code aufgenommen wird. Durch diese Anweisung erhält das Gadget den Befehl, die Bibliothek zu laden. |
Die Gadget-Spezifikationen müssen eine eine<Require feature="[feature]"/>-Anweisung enthalten, die entsprechende Bibiothek zu laden. Das Gadget muss zum Extrahieren der Bibliothek die URL analysieren und eine <script src= …</script>-Anweisung erstellen, damit die Bibliothek in den ausgegebenen HTML-Code aufgenommen wird. Durch diese Anweisung erhält das Gadget den Befehl, die Bibliothek zu laden. |
Gehen Sie wie folgt vor, wenn Sie Google Gadgets JavaScript API in einem type="url"-Gadget verwenden möchten:
http:// …&libs=2dhyBXfcpQ8/lib/libcore.js …
aus der URL extrahiert und zum Erstellen der folgenden Anweisung verwendet, die in den ausgegebenen HTML-Code aufgenommen wird. Die Anweisung lautet: "JavaScript-Bibliotheken von Google Gadgets laden".
<script src='http://www.google.com/ig/f/2dhyBXfcpQ8/lib/libcore.js'></script>
Sehen Sie sich weiter unten das Beispiel setprefs.php für den PHP-Code an, der verwendet wurde, um diese Anweisung zu erstellen. Die Zeichenfolge "2dhyBXfcpQ8" ist ein "Fingerabdruck" des Inhalts der .js-Datei, die den Browser zwingt, die richtige Version der Datei zu verwenden.
Das folgende Beispiel ist ein HTML-type Setprefs Example Gadget, das in ein type="url"-Gadget konvertiert wurde. Und dies ist die Gadget-Spezifikation:
<?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>
Hier die setprefs.php-Datei, auf die in den Gadget-Spezifikationen verwiesen wird:
<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>
Gehen Sie wie folgt vor, um eine vorhandene Webseite oder Anwendung in ein Gadget umzuwandeln:
Innerhalb der Gadget-Spezifikationen entspricht jede Benutzereinstellung einem Datentyp. Der datatype ist ein optionaler Eintrag, der den Datentyp des Attributs angibt. Mögliche Werte für datatype sind string, bool, enum, hidden (eine Zeichenfolge, die unsichtbar und vom nicht Nutzer bearbeitet werden kann), list und location (für Gadgets, die auf Google Maps basieren). Der Standard-Datentyp ist string.
Weitere Informationen zu Datentypen und Funktionen der Benutzereinstellungen finden Sie in der Referenz.
Im folgenden Abschnitt werden zwei spezielle Datentypen beschrieben: list und location. Beispiele zur Verwendung anderer Datentypen finden Sie in der gesamten Dokumentation (beispielsweise enum, hidden und bool).
Eine Benutzereinstellung vom Datentyp list ist eine Vielzahl von Werten, die von den Nutzern dynamisch zur Laufzeit verwendet werden. Die Werte werden der Liste hinzugefügt, wenn die Nutzer diese in das Bearbeitungsfeld der Benutzereinstellungen eingeben. Auf diese Liste kann das Gadget in Laufzeit programmatisch zugreifen, wie jede andere Benutzereinstellung. Sie können den Datentyp list immer dann verwenden, wenn Sie Nutzern die dynamische Eingabe einer Liste von beliebigen Werten ermöglichen möchten. Bei einem Gadget für die Wettervorhersage können Nutzer ggf. eine Liste mit Postleitzahlen angeben.
Betrachten Sie das folgende Beispiel-Gadget: Es werden Links für den Feed "Google News Sci/Tech" angezeigt. Benutzer haben die Möglichkeit, in das Bearbeitungsfeld der Benutzereinstellungen über das Textfeld Add Search Terms Wörter einzugeben. Das Gadget sucht dann nach diesen Suchbegriffen in den Überschriften der Feed-Einträge. Findet es einen Treffer, ändert sich die Farbe des Links zu diesem Eintrag auf rot. In unserem Beispiel enthält die Liste drei Wörter: "abc", "Google" und "MACWORLD". Links, die diese Wörter enthalten, werden rot markiert. Nutzer können Listeneinträge löschen, indem sie jeweils auf das zugehörige X-Symbol klicken.
Sie deklarieren eine Benutzereinstellung als Datentyp list indem Sie datatype="list" verwenden. Beispiel:
<UserPref name="mylist" display_name="Add Search Terms" datatype="list" required="true"/>
Das Gadget greift auf die Werte in der Liste mit der Funktion _IG_Prefs zugetArray():
var search_terms = prefs.getArray("mylist");
Innerhalb des Arrays, werden die Elemente in einer Liste gespeichert, in der sie durch einen senkrechten Balken ( | ) getrennt sind. Sie können die Funktion _IG_Prefs verwendengetString(), um diese Liste als Zeichenfolge auszugeben, in der die Werte durch einen senkrechten Balken ( | ) getrennt sind, zum Beispiel:
// For the sample gadget shown above, returns the string "abc|Google|MACWORLD"
prefs.getString("mylist");
Sie können eine durch Balken getrennte Zeichenfolge verwenden, um die Standardwerte für den Typ list zu verwenden:
<UserPref name="mylist" display_name="Add Search Terms" datatype="list" default_value="zdnet|pc|Apple Insider"/>
Mit der _IG_Prefs-Funktion setArray(name, val) können Sie der Liste programmatisch Werte hinzufügen. Damit Sie diese Funktion verwenden können, muss das Gadget unter <ModulePrefs> <Require feature="setprefs"/> enthalten. Beispielsweise fügt der folgende Ausschnitt die Werte "Nokia" und "CNET" in die Liste ein:
… <ModulePrefs title="Feed Searcher" scrolling="true"> <Require feature="setprefs" />
</ModulePrefs> … prefs.setArray("mylist", ["Nokia","CNET"]);
Im Folgenden sehen Sie den Code für das Beispiel-Gadget. Weitere Informationen über das Schreiben von Gadgets, die Feeds anzeigen, finden Sie unter Arbeiten mit Feeds.
<?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>
Auf Google Maps basierte Gadgets, können den Datentyp location verwenden. Das folgende Beispiel-Gadget veranschaulicht die Anwendungsmöglichkeiten des Datentyps location. Bei Gadgets muss der Wert für den Datentyp location eine Großstadt oder die Postleitzahl in den Vereinigten Staten, Kanada oder Großbritannien und Nordirland sein. Sie stellen möglicherweise fest, dass die Verwendung von Postleitzahlen ein besseres Ergebnis generiert.
Wenn Sie den Datentyp location verwenden, können Sie mit getString() den Längen- und Breitengrad des benutzerdefinierten Standorts abrufen.
<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>
Beim Lesen der location-Einstellung "x":
Mit früheren Versionen des Google Gadgets-APIs war es nicht möglich, default_value als Standorttyp festzulegen. Dies ist jetzt nicht mehr der Fall.
In der Regel können Nutzer Ihre Benutzereinstellungen über das Bearbeitungsfeld explizit einstellen. Es kann in bestimmten Fällen jedoch erforderlich sein, die Benutzereinstellungen programmatisch festzulegen. Der Nutzer ist in diesem Fall nicht direkt beteiligt. Dies kann beispielsweise für ein Spiele-Gadget der Fall sein, wenn Sie die höchste Punktzahl des Nutzers dauerhaft speichern möchten. Sie können dies durch das programmatische Einstellen des Wertes der Benutzereinstellung "high_score" festlegen.
Um die Funktion setprefs zu verwenden, muss Ihr Gadget Folgendes enthalten:
hidden. Bitte beachten Sie, dass die Größe der Einstellung durch URL-Einschränkungen eingeschränkt ist. Diese liegt bei 2K.
Das folgende Beispiel-Gadget besteht aus zwei Feldern: eines protokolliert die Werte eines Zählers und das andere setzt den Zähler auf 0 zurück. In diesem Beispiel ist "counter" eine Benutzereinstellung. Es verfügt über den Datentyp hidden. Dies bedeutet, dass der Nutzer diesen Wert nicht ändern kann.
Und dies ist die Gadget-Spezifikation:
<?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>
Hinweis: Falls Sie mehrere Werte speichern möchten, empfehlen wir, diese in einer JSON-Zeichenfolge zu speichern. Ein Beispiel dazu finden Sie unter todo.xml. Es gibt auch ein Open Source JSON-Skript unter http://www.json.org/json.js, das Methoden enthält, mit denen JavaScript-Objekte in und aus JSON-Zeichenfolgen konvertiert werden können.
In den XML-Attributen einer Gadget-Spezifikation müssen bestimmte Zeichen "maskiert" werden. Achten Sie darauf, dass für Gadget-Spezifikationen ASCII-Zeichen verwendet werden müssen. Die Verwendung von ISO 8859-1-Zeichen ist beispielsweise nicht möglich. Nachfolgend eine Liste der unterstützten Sonderzeichen:
| Zeichen | Escape-Code |
|---|---|
| & | & |
| < | < |
| > | > |
| " | " |
| ' | ' |
Beispiel:
Beachten Sie, dass die Maskierung im CDATA-Block nicht notwendig ist. Es ist jedoch üblich, sie auch hier anzuwenden.
Innerhalb Ihres JavaScript-Codes können Sie die Funktion _hesc(str) verwenden, um die HTML-Zeichenfolge str mit folgenden maskierten Zeichen zurückzugeben: <>&'".
Entsprechend den Datenschutzbestimmungen von Microsoft Internet Explorer und Apple Safari ist es Drittanbietern nicht erlaubt, Cookies zu hinterlegen. Aus diesem Grund funktionieren einige Gadgets möglicherweise nicht korrekt. Dies gilt insbesondere für Websites, die Cookies für die Anmeldung verwenden. Möglicherweise funktionieren sie nicht innerhalb des iframe einer iGoogle-Seite. Im Folgenden finden Sie mögliche Lösungen:
<?php header("P3P: CP=\"CAO PSA OUR\""); ?>Dieses muss aufgerufen werden, bevor etwas auf der Seite angezeigt werden kann.
BITTE PRÜFEN SIE IHRE DATENSCHUTZBESTIMMUNGEN GENAU, UM ZU ERFAHREN, WELCHE KOPFZEILEN AUF IHRER WEBSITE ZULÄSSIG SIND. WIR EMPFEHLEN IHNEN, SICH AN IHREN RECHTSANWALT ZU WENDEN.
Ihr Browser ist in seiner aktuellen Konfiguration mit dieser Website nicht kompatibel. Falls Sie Internet Explorer verwenden, können Sie Ihre Sicherheitseinstellungen ändern. Gehen Sie dafür zu Extras > Internetoptionen. Öffnen Sie die Registerkarte Sicherheit, klicken Sie auf Erweitert und aktivieren Sie dann die Option Automatische Cookiebehandlung aufheben. Klicken Sie unter Cookies von Drittanbietern auf Akzeptieren. Alternativ können Sie einen anderen Browser verwenden, wie beispielsweise Firefox.
©2009 Google – Datenschutzbestimmungen – Allgemeine Geschäftsbedingungen – Über Google
Aktualisiert am: