AJAX, aber einfach!

DWR und GWT: AJAX Toolkits für Java
Kommentare

Während AJAX mit Sicherheit dem Nutzer einer gut entworfenen AJAX-Webapplikation zugute kommt, bedeutet es für den Webentwickler meist eine Herausforderung mehr… Oft dreht es sich dabei um die manuelle Erstellung von JavaScript-Code, der serverseitige Funktionen aufruft. Wir stellen hier die Lösungsansätze zweier AJAX-Toolkits für Java vor, deren Bedeutung in Zukunft weiter steigen wird: Direct Web Remoting (DWR) und Google Web Toolkit (GWT).

In der Praxis hat ein AJAX-Entwickler leider mit reichlich unterschiedlichen JavaScript-, CSS- und HTML-Implementierungen zu kämpfen, die das eigentlich recht einfache Prinzip sehr komplex und fehleranfällig werden lassen – also die Nutzung von JavaScript, um asynchrone Anfragen an den Server zu stellen, und die Aktualisierung der bestehende HTML-Seite, sobald diese Anfragen beantwortet worden sind.

Das Mindeste, was man tun kann, ist eine AJAX-Library wie beispielsweise Dojo einzusetzen, welche durch neue JavaScript-Klassen die unterschiedlichen JavaScript-Implementierungen abstrahiert. Aber auch dann bleibt ein Faktor noch ungelöst: der Zugriff auf die Daten, die uns über den Webserver zur Verfügung gestellt werden. Also werden munter diverse Servlets geschrieben, die uns die passenden Daten im passenden Format zur Verfügung stellen. Da dies meistens eigene Implementierungen ohne allgemein bekannte Vorgehensweisen und Regeln sind, ist abzusehen, dass spätestens beim ersten Bugfix der Applikation oder beim Wechsel des verantwortlichen Entwicklers großes Grübeln angesagt ist.

Was hier hilft, sind neben guten Libraries konsistente Regeln und Vorgehensweisen, um vom Client auf den Server asynchron zuzugreifen. Am Java-Horizont haben sich dazu in den letzten Monaten einige Toolkits aufgetan, von denen hier zwei namhafte Lösungen beschrieben werden. Dies ist zum einem das Open-Source-Projekt Direct Web Remoting – kurz DWR – und zum anderen das Google Web Toolkit (GWT).

Direct Web Remoting

Die Tagline von DWR – „Easy Ajax for Java“ – macht bereits auf der Website deutlich, um was es hier vordergründig geht: den Zugriff von Browsern auf serverseitige Java-Objekte mittels JavaScript. Das aktuell vorliegende und stabile Release von DWR ist dabei Version 1.1.3. Ein interessantes und auf jeden Fall zu beobachtendes Feature im kommenden 2.0-Release ist dabei „Reverse Ajax“, d.h. Kommunikation vom Server zum Client. DWR wird in Form eines zusätzlichen .jar-Files in bestehende Java-Webapplikationen integriert und steht damit auf allen von Java unterstützten Plattformen zur Verfügung.

Im Unterschied zum GWT eignet sich DWR besonders gut dazu, nachträglich AJAX-Features in bestehende Webapplikationen zu integrieren. Der Lösungsansatz von DWR besteht darin, in einer XML-Datei bestehende JavaBeans zu referenzieren, deren Methoden dann ganz oder teilweiser per JavaScript von der Clientseite her zugänglich gemacht werden. Dabei wird der nötige Zugriffscode in JavaScript von DWR automatisch generiert und muss nur noch per <script>-Tag in die HTML-Seite eingebaut werden. Alle Requests und die JavaBeans auf dem Server werden dann von einem DWR Servlet abgefangen, die entsprechenden Methoden der JavaBeans aufgerufen und die Antworten generiert. Daneben bietet DWR noch eine Utility-Bibliothek an, mit der beispielsweise der Inhalt eines per ID referenzierten Elements per JavaScript ausgetauscht werden kann.

In den folgenden Abschnitten führen wir Sie Schritt für Schritt durch die Integration von DWR mit einer bestehenden Webapplikation, die Ihnen dann als Testumgebung für eigene Versuche dienen kann. Wenn Sie DWR einfach nur mal schnell in Aktion sehen wollen, können Sie ein fertiges .war-File auch direkt von der Website von DWR beziehen und beispielsweise im Tomcat deployen.

Integration mit bestehenden Webapplikationen

Um DWR selbst mit einer Java-Webapplikation zu integrieren, haben wir zunächst mit Maven ein Web-Skelett erstellt.

mvn archetype:create -DgroupId=de.flavor -DartifactId=dwrtest -DarchetypeArtifactId=maven-archetype-webapp 

Als Nächstes wurde diese frische Webapplikation per Maven-Plug-in für Eclipse konfiguriert, alle weiteren Anpassungen liefen dann über Eclipse: mvn eclipse:eclipse. Da das neueste Release von DWR auf iBiblio, Mavens Standard Repository, noch nicht verfügbar war, mussten wir DWR 2.0-M2 direkt von der DWR-Website herunterladen und im lokalen Maven Repository installieren. Bitte passen Sie den Pfad (-Dfile=…) entsprechend an:

mvn install:install-file -DgroupId=dwr -DartefactId=dwr -Dversion=2.0-M2 -Dpackaging=jar -Dfile=C:java_stuffdwr.jar 

Nun wird diese Abhängigkeit in der Maven-Konfigurationsdatei eingetragen, und mit dem Kommando mvn package sollte nun bereits ein fertiges .war-File im target-Ordner entstanden sein, welches die dwr.jar, die Bibliothek von DWR, im WEB-INF/lib-Ordner enthält. Die Abhängigkeit wird wie folgt in der pom.xml hinzugefügt:

     
       ...
    dwrdwr2.0-M2compile

Da das häufige Re-Deployment im Tomcat auf Dauer zu umständlich ist, haben wir noch das Jetty 6-Maven-Plug-in integriert, wodurch wir per mvn jetty6:run auf der Kommandozeile komfortabel die neue Webapplikation auf Port 8080 starten können. Jetty lädt außerdem automatisch die Webapplikation nach, sobald sich an der web.xml oder den Klassen etwas ändert. Um Jetty zu integrieren, muss lediglich ein Plug-in in der pom.xml hinzugefügt werden, also:

       ...

       org.mortbay.jettymaven-jetty6-plugin10

That’s it! Unsere Testumbegung sollte nun nach Aufruf des mvn jetty6:run-Kommandos unter http://localhost:8080/dwrtest lauschen und uns ein „Hello World“ bescheren. Da DWR natürlich nicht durch das Hinzufügen des dwr.jar-Files integriert ist, kommt nun die eigentliche Konfiguration von DWR.

DWR Servlet und Filter in der web.xml

Zunächst wird die web.xml-Datei der Webapplikation angepasst, um so DWR Requests von erzeugtem JavaScript-Code an das DWR Servlet weiterzuleiten. Im src/main/webapp-Ordner finden Sie die web.xml, die nun um das Servlet und Servlet Mapping ergänzt wird (Listing 1).

Listing 1
-------------------------------------------------------------------------
dwr-invokerDWR Servletuk.ltd.getahead.dwr.DWRServletdebugtruedwr-invoker/dwr/*
DWR-Konfiguration und Test-Bean

Zur Vollendung des kleinen Tests fehlen nun nur noch die Erzeugung der DWR-Konfigurationsdatei dwr.xml sowie eine geeignete Test-JavaBean, deren Methode(n) per JavaScript von Clientseite her zugänglich gemacht werden. Als Test-Bean erzeugen wir die Klasse DemoBean, die anfänglich nur eine Test-Methode demoMethod() enthält. Diese Methode gibt einen String zurück, der per AJAX in unsere spätere HTML-Seite eingebunden werden soll.

public class DemoBean {
       public String demoMethod() {
              return "This is a ten minute demo! " + new Date();
       }
}

Nachdem die Bean erstellt worden ist, müssen wir DWR in der dwr.xml noch mitteilen, dass wir auf diese Bean zugreifen wollen. Dabei definieren wir auch den Scope dieser Bean. In diesem Fall reicht request natürlich aus, da wir zwischen den Requests keine vorhandenen Daten speichern.

Der Aufbau der DWR-Konfiguration ist wie folgt: Innerhalb des umschließenden <dwr>-Tags werden sämtliche Beans, die zugänglich gemacht werden sollen, mittels eines <create>-Tags referenziert. Der eigentliche Klassenname wird über ein <param>-Tag angegeben. Das Attribut javascript des <create>-Tags gibt dabei an, unter welchem Namen das Objekt später im clientseitigen JavaScript-Code gefunden werden kann. Später wird also ein JavaScript-Aufruf Demo.demoMethod() einem Aufruf unserer Demo-Methode auf der Serverseite gleichen. Da in der web.xml-Datei der debug-Parameter des DWR Servlets auf true steht, können wir nun über den Aufruf von http://localhost:8080/dwrtest/dwr die Test-Seite unsrer Beans betrachten. Ein Klick auf EXECUTE führt dabei einen Live-Methodenaufruf aus und eignet sich wunderbar zum Test. Wenn alles glatt läuft, sollten Sie den Text „This is a …“ neben dem Button erscheinen sehen. Wie sie in Abbildung 1 erkennen können, liefert uns die Test-Seite auch gleich die notwendigen Script-Elemente für die HTML-Seite mit, in die wir den Aufruf nun integrieren.

Abb. 1: DWR-Testseite der Demo-Bean

In Listing 2 sehen Sie nun die komplette HTML-Seite, die uns für diesen kurzen AJAX-Testaufruf dient. Im <head>-Bereich wurden zunächst alle notwendigen JavaScript-Bibliotheken geladen. Die Elemente wurden dabei direkt von der Test-Seite übernommen und in die HTML-Seite eingefügt. Im <body>-Bereich ist ein einfacher HTML-Button angelegt, der per onClick-Attribut die JavaScript-Methode update() aufruft. Hier passiert nun die eigentliche Magie: Die JavaScript-Klasse Demo wurde von DWR komplett erzeugt und kapselt die nötige Zugriffslogik auf die serverseitige JavaBean. Da der Aufruf asynchron erfolgt, müssen wir nur angeben, welche Funktion aufgerufen werden soll, sobald die Daten da sind. Hier geben wir die Funktion loadinfo (wichtig: ohne runde Klammern, da sonst die Funktion direkt aufgerufen würde) an, die dann über das Utility DWRUtil den Inhalt des mit der ID reply versehenen < span>-Elements überschreibt.

Listing 2
-----------------------------------------------------------------------------------------


    

Dieses kurze und triviale Beispiel zeigt, wie einfach AJAX mit DWR in bestehenden Java-Webapplikationen möglich ist. DWR verfügt freilich über viele weitere Features, die jedoch meist auf dieser Funktion aufbauen. Beispielsweise ist es recht einfach möglich, die CRUD-Operationen (Create, Read, Update, Delete) für beliebige JavaBeans in clientseitige Aufrufe zu verpacken oder Listen mittels der DWRUtils-Bibliothek rasch mit einem Array vom Server zu befüllen.

Fazit zu DWR

All diese Beispiele erleichtern zwar den Umgang mit AJAX, jedoch wird dem Entwickler immer noch reichlich Wissen über JavaScript generell und auch über die DWR-Bibliotheken abverlangt. DWR eignet sich dafür im Vergleich zu anderen Toolkits jedoch besonders gut zur nachträglichen Integration in bestehende Applikationen, und wer sich mit JavaScript gut auskennt, wird DWR zu schätzen wissen. Prinzipiell kann DWR mit jeder Java-Webapplikation integriert werden. DWR bietet jedoch auch spezielle Unterstützung für die Frameworks Spring, Struts und JSF an. Mittels der Spring-Integration kann man so auf per Spring konfigurierte Beans clientseitig zugreifen, Ähnliches gilt für Struts, denn hier werden die FormBeans für DWR zugänglich gemacht. Es existiert ebenfalls eine experimentelle Lösung für JSF, die jedoch den JSF Lifecycle komplett umgeht – man kann nun zwar auf Managed Beans zugreifen, diese Lösung steht jedoch quasi neben dem favorisierten JSF Lifecycle und ist damit nicht standardkonform und wenig empfehlenswert. Mit diesem Fazit beenden wir unseren Ausflug zu DWR und gehen nun auf das nächste spannende AJAX-Toolkit ein, das Google Web Toolkit.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -