Vista-Feeling

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.

Widgets selbst programmieren

© Archiv

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:

<Leo<Leo.widget<Contents<Leo.kon <Leo<Leo.widget<Contents<Resources<...

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:

<?xml version="1.0" encoding="ISO-8859-1"?><widget> ... </widget>

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:

<window><name>hauptfenster</name><title>Leo-Wörterbuch</title><height>202</height><width>302</width><visible>true</visible></window>

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.

Widgets selbst programmieren

© Archiv

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.

Mehr zum Thema

festplatte, hardware, pc, hdd
Gelöschte Dateien wiederherstellen

Wir zeigen Ihnen, wie Sie verloren geglaubte Daten retten können - etwa mit dem kostenlosen Tool Recuva.
Whatsapp Alternativen
Für Android, iPhone, iPad & Co.

Es gibt keine Whatsapp-Alternative? Quatsch! Diese 10 Messenger-Apps für Android, iOS und Windows Phone sind der perfekte Ersatz.
Windows Energieeinstellungen optimieren
Die besten Tipps

Die Energieeinstellungen in Windows lassen sich flexibel anpassen. Wir zeigen Ihnen, wie Sie Ihren eigenen Energiesparplan optimieren.
Any Video Recorder
Anleitung

Wir zeigen in dieser Anleitung, wie einfach Sie mit dem Tool Any Video Recorder jeden beliebigen Stream aufnehmen können
Outlook - Logo
Office-Tipp

Wir zeigen, wie Sie in Outlook die Kalenderwoche anzeigen lassen können. Unser Office-Tipps sorgt für Durchblick bei der Terminplanung.