Vista-Feeling

Teil 4: Widgets selbst programmieren

Für das Desktop-Lexikon benötigen Sie ein Eingabefeld für das englische Wort und einen Ausgabebereich für die Übersetzung. Damit dasWidget überhaupt sichtbar ist, fügen Sie aber zunächst eine Grafik als Hintergrundbild ein. Im Beispiel ist das eine einfarbige gelbe Grafik mit einem grauen Rand. Sie binden das Bild so ein:

Widgets selbst programmieren

© Archiv

<image src="Resources/back.png"><name>hintergrund</name><vOffset>0</vOffset><hOffset>0</hOffset></image>

Über das Attribut src geben Sie den Namen der Bilddatei an, die Sie im Verzeichnis Resources ablegen. Alternativ könnten Sie den Dateinamen auch wie die anderen Angaben über ein eigenes Tag einfügen:

Widgets selbst programmieren

© Archiv

Bunte Vielfalt: Schon die mit der Engine mitgelieferten Widgets zeigen, welches Leistungsspektrum die Progrämmchen entwickeln.
<src>Resources/back.png</src>

Die Tags vOffset und hOffset geben den vertikalen und horizontalen Abstand der Grafik von der linken oberen Ecke des Ausgabebereichs an. Dieses Koordinatensystem gilt für alle Positionsangaben.

Widgets selbst programmieren

© Archiv

Verschachtelte Struktur: Ein Widget-Projekt besteht aus mindestens drei Ordnern für Skripte, Bilddateien etc.

Starten Sie jetzt dasWidget erneut, so sehen Sie die Hintergrundgrafik. Jedes Widget hat automatisch ein Kontextmenü, über das Sie die Widget-Einstellungen aufrufen. Über den Schieberegler Opazität stellen Sie ein, wie durchsichtig dasWidget erscheinen soll.

Nun fügen Sie ein Eingabefeld für den Suchbegriff hinzu. Wie bei HTML heißt das Tag dafür textarea:

<textarea><name>inputSuche</name><bgColor>#eeeeee</bgColor><editable>yes</editable><columns>25</columns><lines>1</lines><data></data><vOffset>5</vOffset><hOffset>45</hOffset></textarea>

Die Tags legen eine Hintergrundfarbe (bgColor, dunkles grau) sowie die Anzahl Spalten und Zeilen (columns und lines) fest. Der Wert yes für editable sorgt dafür, dass die Benutzer etwas in das Eingabefeld eintippen dürfen. Bei data tragen Sie normalerweise den Inhalt des Feldes ein, im Beispiel bleibt das Eingabefeld leer.

Mit demselben Tag textarea definiert das Beispiel ein weiteres Eingabefeld. Es bekommt mehrere Zeilen und wird auf nicht editierbar gesetzt. Darin zeigt dasWidget die gefundene Übersetzung an. Auf identische Weise definieren Sie mit dem Tag text ein Label, das vor dem Eingabefeld den Text "Frage:"S einblendet. Damit sind die Elemente für eine erste Rohfassung vorhanden.

Widgets selbst programmieren

© Archiv

Das fertige Widget: Die Enter-Taste startet die Anfrage bei Leo.org und präsentiert das extrahierte Suchergebnis.

Die erste Aufgabe für JavaScript ist nun, den für das Leo-Wörterbuch mit dem Suchwort zu ergänzen und die Webseite abzuholen. Dazu definieren Sie zunächst eine neue Funktion namens frageleo(). Weil diese Funktion keinem speziellen Element zugeordnet ist, legen Sie einen action-Bereich an:

Widgets selbst programmieren

© Archiv

<action trigger="onLoad">
function frageleo(wort) {
leoURL = new URL;
leoURL.location = "http://dict.leo.org/ende?search=" + escape(wort);
ergebnis = leoURL.fetch();
inputErgebnis.data = wortextrahieren(ergebnis, wort); }</action>

Der Parameter trigger legt fest, wann Java-Script-Befehle in diesem Bereich ausgeführt werden. onLoad wird gleich beim Start des Widgets aktiviert. Das betrifft allerdings nur Befehle, die außerhalb einer Funktion notiert sind. Im Beispiel gibt es keine solchen Befehle, trigger inklusive Parameter ist aber unbedingt erforderlich, sonst meldet die Widget Engine einen Fehler.

Zunächst erzeugt das Skript ein neuesObjekt vom Typ URL. Dann weist es der Eigenschaft location des URL-Objekts die Webadresse zu, die sich aus der Basisadresse und dem Suchwort ergibt. Die Funktion escape wandelt gegebenenfalls Sonderzeichen (etwa Leerzeichen) im Suchbegriff in ein URL-kompatibles Format um.

Schließlich holt die Methode fetch die gewünschte Webseite. In der Variablen ergebnis steckt am Ende das komplette HTML-Dokument. Nun muss das Skript aus dem HTMLDokument die wenigen Wörter mit der deutschen Übersetzung herausfiltern. Das übernimmt eine weitere selbst definierte Funktion, wortextrahieren(). Das Ergebnis weist das Skript schließlich der data-Eigenschaft der textarea inputErgebnis zu. Das ist das vorhin definierte mehrzeilige Eingabefeld.

Aus einer Ergebnisseite des Leo-Wörterbuchs die wenigen Wörter der deutschen Übersetzung zu destillieren, ist eine umständliche Angelegenheit. Eine große Hilfe sind verschiedene Befehle für reguläre Ausdrücke, die JavaScript bei Zeichenketten unterstützt (Guter Einstieg: de.wikipedia.org/wiki/Regulärer_ Ausdruck). Um die folgende Erklärungnachzuvollziehen, rufen Sie am besten Leo.org auf und lassen ein beliebiges englischesWort übersetzen. Dann haben Sie eine typische Ergebnisseite vor sich.

Als Parameter erhält die Funktion wortextrahieren das HTML-Dokument (webseite) und den gesuchten englischen Begriff (wort). Im ersten Schritt prüft das Skript, ob überhaupt ein Suchergebnis vorliegt. Nur in diesem Fall enthält die Webseite das Stichwort "Treffer":

Widgets selbst programmieren

© Archiv

Bündel schnüren: Mit einem üblichen Packprogramm wie WinZip verwandeln Sie das Widget-Verzeichnis in eine einzige Wigdet-Datei.
position = webseite.search(/Treffer/);

Der reguläre Ausdruck /Treffer/ sucht nach dem ersten Vorkommen von "Treffer" in der Zeichenkette (dem HTML-Dokument) und gibt die Startposition zurück. Wird nichts gefunden, ist das Ergebnis -1. Bei einem positiven Ergebnis trennt

webseite = webseite.substring(position,webseite.length-1);

alle Zeichen bis zu dieser Position ab. Falls der englische Suchbegriff im Rest der Webseite nicht mehr auftaucht, hat Leo nichts gefunden. Der Ergebnisvariablen fundliste wird der Text "Nichts gefunden!" zugewiesen.

Widgets selbst programmieren

© Archiv

Andernfalls trennt das Skript auch den ganzen Nachspann hinter den Suchergebnissen ab. Dabei berücksichtigt es nur eindeutige Treffer und lässt Redewendungen, zusammengesetzte Ausdrücke etc. unter den Tisch fallen.

Die Suchergebnisse formatiert Leo mit einer Tabelle. Eine while-Schleife extrahiert nun Tabellenzeile für Tabellenzeile die deutschen Begriffe und speichert sie durch Kommata getrennt in einer Variablen. Am Ende gibt die Funktion den Rückgabewert fundliste zurück.

Es ist klar, dass dieses Vorgehen individuell auf jede Webseite zugeschnitten werden muss. Und wenn die Betreiber von Leo.org den Aufbau ändern, müssen Sie das Skript entsprechend anpassen.

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.