Vista-Feeling

Teil 2: Widgets selbst programmieren

8.11.2006 von Redaktion pcmagazin und Wolfgang Nefzger

ca. 2:05 Min
Ratgeber
  1. Widgets selbst programmieren
  2. Teil 2: Widgets selbst programmieren
  3. Teil 3: Widgets selbst programmieren
  4. Teil 4: Widgets selbst programmieren
  5. Teil 5: Widgets selbst programmieren
  6. Teil 6: Widgets selbst programmieren
  7. Teil 7: 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 lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

Lizenzschlüssel / Software-Produktschlüssel (Symbolbild)

So geht's

Lizenzschlüssel auslesen und Software neu installieren

Sie wollen ein Programm neu installieren, finden aber den Lizensschlüssel nicht? Wir zeigen Ihnen wie Sie den Programmkey bequem auslesen können.

Excel: Nur jede n-te Zelle addieren

Office-Tipps für Einsteiger

Excel: Nur jede n-te Zelle addieren

Nicht selten muss man aus Spalten oder Zeilen nur jede zweite, dritte, vierte ... Zelle addieren. Mit einer Formel geht das sehr einfach.

PC schneller machen: Tuning für RAM & CPU

PC-Leistungstest

Die besten Benchmark-Tools, die Ihren PC ausreizen

Wie stark ist Ihr PC? Aufschluss geben Benchmarks. Wir zeigen Ihnen, mit welchen Tools und Downloads Sie Ihren PC einem fordernden Leistungstest…

Gimp,Tricks,Bilderbearbeitung,Tipps,Tutorial

Photoshop-Alternative

Gimp Tutorial: Erste Schritte für bessere Bilder

Das Bildbearbeitungsprogramm Gimp ist eine kostenlose, komfortabele Alternative zu Photoshop. In unserem Tutorial geben wir Tipps für Einsteiger.

Outlook-Tipps

Outlook funktioniert nicht mehr

Outlook reparieren: 7 Tipps, die typische Probleme lösen

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