Wie GWT mit seinen Spielkameraden redet

GWT meets Ajax und PHP

Frank Wisniewski
GWT-Komponente über einen JavaScript-Callback einbinden

Interessant ist auch die Art und Weise, wie das CodePrettifyWidget über einen Trigger-Mechanismus in die Webseite integriert wurde. Dieser Mechanismus bettet eine GWT-Komponente über JavaScript ein. Dazu muss a priori sichergestellt werden, dass das GWT-Skript vor seiner Verwendung vollständig vom Client geladen wurde. Dazu habe ich folgendes Callback-Konstrukt entworfen:

private static void jsCallback() {
  try {
    nativeJsCallback();
  } catch (JavaScriptException ex) {}
}
private static native void nativeJsCallback() /*-{
  $wnd.gwtCallback();
}-*/;

Die Kapselung der nativen Funktion in eine GWT-Methode inklusive Exception Handling gewährleistet, dass Webseiten ohne Callback-Implementierung fehlerfrei gerendert werden. Die Funktion, die von JavaScript aufgerufen werden soll, heißt attachCodePrettifier(Object obj) und erwartet eine Liste von Knotenobjekten, welche im Attribut value den Pfad zum jeweiligen Quelltext angeben. Dieser wird geladen und dem Knoten als CodePrettifyWidget hinzugefügt. Zum Exportieren muss die folgende Methode in GWT aufgerufen werden:

public static native void exportAttach() /*-{
  $wnd.createCodePrettifier =
$entry(@de.codekoffer.gwt.examples.client.ArtikelPrototyp::attachCodePrettifier(Ljava/lang/Object;));
}-*/;

Hierdurch wird im window-Objekt eine Funktion createCodePrettifier registriert, wobei die Signatur analog zum JNI definiert werden muss. Ist dies erledigt, kann für die Webseite bspw. ein Skript geschrieben werden, das alle Elemente mit dem Attribut name=’source_code‘ an die GWT-Implementierung zur Erzeugung von Quellcode-Widgets übergibt:

function gwtCallback () {
    window.createCodePrettifier(document.getElementsByName('source_code'));
}
Design und Layout

Bevor wir uns einem alternativen Backend zuwenden, wollen wir die Benutzeroberfläche für das kommende Beispiel über den UiBinder entwerfen. Dies ist eine weitere Möglichkeit neben den bereits genannten, das Design und Layout mit GWT zu gestalten. Es funktioniert über den GWT-Designer äußerst komfortabel, dem Anwender wird durch dieses Plug-in eine vollständige WYSIWYG-Suite zur Verfügung gestellt, wie unter [8] und in Abbildung 4 gezeigt.

Abb. 4: Gestalten des UI über den GWT-Designer

Der Designer erzeugt ein XML-Derivat, das auch von Hand editiert werden kann. Ebenso können externe Skripte analog zum ClientBundle aus Listing 3 eingebunden und vom Anwender erstellte Widgets benutzt werden (Listing 4). Insgesamt ergibt sich mit dieser XML-Deklaration das GUI aus Abbildung 5.

Listing 4

Abb. 5: Die Beispielwebsite für das PHP-Backend

Java Magazin

Der Artikel „GWT meets Ajax und PHP“ von Frank Wisniewski ist erstmalig erschienen im

Java Magazin 10.2012

Alternatives Backend

Auf Grund seiner speziellen Architektur als Java-to-JavaScript-Compiler liegt der Schwerpunkt von GWT in der Entwicklung eines Webclients. Nichtsdestotrotz bietet er von Hause aus nützliche Werkzeuge wie Remote Procedure Calls (RPCs) zur Kommunikation mit einem Server. Das Protokoll beruht auf XML, ist aber nicht öffentlich zugänglich. Um Interoperabilität mit anderweitigen Webservices zu gewährleisten, steht der RequestBuilder zur Verfügung, der die Erstellung von HTTP-Anfragen kapselt. Zur Verarbeitung der Serverrückmeldungen stehen APIs sowohl für XML als auch für JSON zur Verfügung. Diese drei Module gehören nicht zum Kern des GWT und müssen eigens über die gwt.xml in das Projekt eingebunden werden.

Betrachten wir als Anwendungsfall das allseits bekannte Torwandschießen. Dazu wurden zwei analoge Eingabemasken, wie in Abbildung 4 bzw. 5 dargestellt, entworfen, die sich lediglich durch die Logik hinter den Buttons unterscheiden. Die Eingabefelder entsprechen den Spalten der Ranking-Tabelle: Spielername, Treffer oben links und Treffer unten rechts.

Ebendiese Tabelle liegt auch in einer MySQL-Instanz auf dem Server, wo ein kleines PHP-Skript die HTTP-Anfragen der Beispielanwendung beantwortet. Wird dieses Skript via POST angesprochen, schreibt es den übermittelten Datensatz in die Datenbank. Die GET-Methode sendet den Tabelleninhalt als Array im JSON-Format zurück. Hier können Filter für die einzelnen Felder gesetzt werden, die in der WHERE-Klausel des SQL-Statements implementiert sind.

Fazit

Abschließend lässt sich feststellen, dass das GWT sich vielseitiger gibt als es auf den ersten Blick den Anschein hat. Man muss sich allerdings in die Architektur des Frameworks einarbeiten und einige Workarounds entwerfen.

Frank Wisniewski arbeitet als Softwareentwickler beim ISC Münster und unterstützt dort derzeit die AOK Systems bei der Migration von ISKV nach oscare® für die BKK Mobil Oil. Neben dem GWT beschäftigen ihn neuartige Technologien wie Dart und HTML5, aber auch der Umgang mit „klassischen“ Sprachen wie C++ und Java.
Geschrieben von
Frank Wisniewski
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.