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

Daten löschen - Datenmüll (Symbolbild)
Temp-Ordner

Die Datenträgerbereinigung von Windows 7/8/10 entfernt nicht allen Datenmüll. So können Sie die Dateien im Temp-Ordner selbst löschen.
Whatsapp auf PC
Mit oder ohne Download

Mit Whatsapp Web oder der Whatsapp Desktop-App nutzen Sie den Messenger bequem am PC. Wir erklären Download, Installation und Einrichtung.
Outlook
Outlook funktioniert nich mehr

Outlook startet nicht oder stürzt immer wieder ab? Das können Sie reparieren! Diese 7 Tipps helfen, wenn Outlook nicht funktioniert.
shutterstock/ ra2studio
Microsoft Office

Wir zeigen, wie Sie Daten in Excel-Tabellen visualisieren. Damit steigern Sie die Übersicht und Lesbarkeit in Ihren Kalkulationen.
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.