Teil 2: Widgets selbst programmieren

Mit der Yahoo-Widget-Engine ist es ziemlich einfach, beliebige Webseiten aus dem Internet zu laden und daraus die gewünschten Daten zu extrahieren. Als Beispiel für uns dient das Online-Wörterbuch von Leo.org.

Das Widget soll ein Eingabefeld für den gesuchten englischen Begriff haben. Den Suchbegriff baut das Widget in die URL für die Suchanfrage an Leo.org ein und holt sich die Webseite mit den gefundenen Übersetzungen ins Deutsche. Dann extrahiert das Widget nur die Übersetzungen aus dem HTMLDokument und zeigt sie in einem weiteren Textfeld an. So hat man schnell die Übersetzung parat, ohne ein Browserfenster öffnen zu müssen. Weil im Ausgabefeld nicht alle Details zur Übersetzung Platz finden, soll das Widget auch einen Button haben, der den Browser startet und direkt die Webseite mit den Suchergebnissen anzeigt.

Das klingt nach einem umfangreichen Programm, es reichen aber 166 Zeilen ordentlich formatierter Code aus. Ein Widget besteht ähnlich einer Webseite aus mehreren Dateien. Das zentrale Skript basiert aufXMLund enthält die Beschreibung der Widget-Oberfläche sowie JavaScript-Befehle. Die externen Dateien sind zum Beispiel Bilder (Logos, Buttons).

Da es sich um eine reine Textdatei handelt, kann man sie mit einem einfachen Editor bearbeiten. Die Widget-Datei darf einen beliebigen Namen mit der Erweiterung .kon haben. Unser Beispiel: Leo.kon.

Damit das Widget später problemlos funktioniert, müssen Sie die beteiligten Dateien mit einer fest vorgegebenen Verzeichnisstruktur speichern:

Die Verzeichnisse müssen dem Namen des Widgets entsprechen. Für externe Dateien wie Bilder gibt es das Unterverzeichnis Resources. Die XML-Grundstruktur für ein Widget sieht so aus:

Innerhalb von <widget> legen Sie die verschiedenen Elemente an, aus denen ein Widget besteht. Das wichtigste ist der Ausgabebereich, den das Widget nutzen soll. In diesem Ausgabebereich platzieren Sie dann später die Elemente wie Eingabefelder etc. Sie definieren den Bereich so:

Die Parameter für den Ausgabebereich geben Sie über weitere XML-Tags an. Die meisten wie height und width sprechen für sich. name legt einen Namen fest, über den Sie später mit JavaScript auf dieses Element zugreifen.

Eine Referenz aller Eigenschaften von window finden Sie in der Dokumentation, die es auf der Yahoo-Widgets-Website als PDF zum Download gibt.

Dieses minimale Widget-Skript können Sie bereits mit einem Doppelklick im Explorer starten. Obwohl im Kontextmenü des Yahoo-Taskleistensymbols das Widget namens Leo aufgelistet ist, sehen Sie nichts. Das ist so richtig, denn der Ausgabebereich ist transparent und enthält noch keine Elemente.