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 Ra...
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:
<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:
<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.
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.
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:
<action trigger="onLoad">
function frageleo(wort) {
leoURL = new URL;
leoURL.location = "https://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":
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.
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.
