Untergeordnete Seiten
  • 0 - GWT Projekt einrichten
Zum Ende der Metadaten springen
Zum Anfang der Metadaten

Im ersten Tutorial setzen wir ein einfaches GWT-Projekt auf und richten unsere Entwicklungsumgebung ein. Zum Schluss starten wir unser GWT-Modul und können unsere erste statische Host-Page im Browser öffnen.

In den folgenden Tutorials wollen wir dann die JWT-Bibliotheken einbinden, Dokumente laden und anzeigen, mit Dokumenten interagieren und viele weitere nützliche Tipps zur Entwicklung von JWT-Anwendungen kennenlernen.

Icon
Wir empfehlen den Code bereits vor Durchführung des Tutorials hier herunterzuladen.

Projektstruktur

Wir orientieren uns bei der Organisation unseres Projekts grundsätzlich an der Standardstruktur von Maven und den im GWT-Projekt beschriebenen Best-Practice-Vorgaben. Unsere Verzeichnisstruktur sieht so aus:

Verzeichnisstruktur

Details zu den Implementierungen folgen weiter unten.

Vorbereiten der Entwicklungsumgebung

Für Eclipse und IntelliJ IDEA gibt es jeweils nützliche GWT-Plugins, die bei der Entwicklung von GWT-Projekten sehr hilfreich sind. Wir zeigen hier die initiale Einrichtung in beiden Umgebungen.

Eclipse

 Für die Einrichtung in Eclipse hier erweitern...

Installation des GWT-Plugins

Die einfachste Möglichkeit das GWT-Eclipse-Plugin zu installieren ist über den Eclipse-Marketplace. Hier suchen wir nach GWT und wählen in der Ergebnisliste den Eintrag "GWT Eclipse Plugin" aus.

Icon
Eine ausführliche Installationsanleitung des GWT-Eclipse-Plugins befindet sich hier.

Download des aktuellen GWT-SDK

Unter http://www.gwtproject.org/download.html müssen wir noch das aktuelle GWT-SDK herunterladen und lokal ablegen. Das SDK benötigen wir im nächsten Schritt zur Projektkonfiguration.

Konfiguration des Projekts

In den Properties des Projekts aktivieren wir GWT indem wir unter GWT > General Settings den Haken bei Use GWT setzen. Außerdem konfigurieren wir unter Configure SDKs die aktuelle GWT-SDK, die wir im letzten Schritt heruntergeladen haben.

 

Unter GWT > Web Application konfigurieren wir noch als WAR-Verzeichnis unser webapp-Verzeichnis.

IntelliJ IDEA

 Für die Einrichtung in IntelliJ hier erweitern...

Installation des GWT-Plugins

Initiale Installation von IntelliJ IDEA

Das GWT-Plugin kann unter anderem beim allerersten Start von IntelliJ IDEA konfiguriert werden. Hier kann GWT als eines der Java Frameworks im Customize IntelliJ IDEA Dialog ausgewählt werden:

Nachträgliche Installation des Plugins

Die zweite Möglichkeit ist die Konfiguration im Menü über File > Settings. Unter Plugins muss hier GWT Support selektiert werden.

Icon
Eine ausführliche Installationsanleitung des GWT-Plugins für IntelliJ IDEA findet sich hier.

Download des aktuellen GWT-SDK

Außerdem müssen wir unter http://www.gwtproject.org/download.html das aktuelle GWT-SDK herunterladen und lokal ablegen. Das SDK benötigen wir weiter unten für die Konfiguration der GWT-Module.

Konfiguration des Projekts

In der Regel erkennt IntelliJ IDEA automatisch, dass es sich bei dem Projekt um ein GWT-Projekt handelt und zeigt den Dialog Frameworks Detected. Über Configure können die Projekte dann initial konfiguriert werden:

 

Die so erkannten GWT-Module müssen wir in den Project Settings überprüfen. Dazu öffnen wir File > Project Structure und wählen Modules:

Folgendes muss sichergestellt werden:

  • Path to GWT installation directory
    Hier muss das lokale GWT-Installationsverzeichnis konfiguriert sein.
  • Target Web Facet
    Als Target-Web-Facet muss das bereits vorkonfigurierte Web-Facet ausgewählt sein.
Icon
Hat die automatische Erkennung nicht funktioniert, müssen dem Modul beide Facets manuell über Add hinzugefügt werden.

Maven

Die für unser Beispiel-Projekt benötigten GWT-Bibliotheken werden über folgende Dependencies eingebunden:

pom.xml - dependencies

 

Da GWT Java 8 voraussetzt müssen wir noch den Compiler entsprechend konfigurieren

pom.xml - compiler-properties

 

Damit beim Bau unseres Moduls alle benötigten GWT-dependencies im WAR landen, müssen wir das gwt-maven-plugin konfigurieren:

pom.xml - gwt-maven-plugin

 

Beim Aufruf von Maven clean soll generierter Code und temporäre GWT-Dateien korrekt aufgeräumt werden. Dazu konfigurieren wir das Maven-Clean-Plugin. Hier müssen wir auch darauf achten, dass die index.html und die web.xml davon ausgenommen werden. Im Laufe der Entwicklung ist es wahrscheinlich, dass wir diese Liste ergänzen müssen:

pom.xml - maven-clean-plugin

 

Unsere vollständige pom.xml enthält natürlich noch weitere Informationen, wie z. B. die Artefakt-Beschreibung:

pom.xml - vollständig

Modulkonfiguration (gwt.xml)

Damit der GWT-Compiler weiß, welcher Code nach JavaScript übersetzt werden soll, benötigen wir eine Modulkonfiguration. Wir legen dazu eine Konfigurationsdatei mit der Endung gwt.xml in das Package unserer Wahl. In unserem Beispiel nennen wir die Konfiguration Application.gwt.xml und nutzen das Package org.jwt:

src/main/java/org/jwt/Application.gwt.xml

 

Die Konfiguration kurz erläutert:

  • module
    Wir geben unserer GWT-Anwendung den Namen imageviewer. Der generierte JavaScript-Code erhält diesen Namen: imageviewer/imageviewer.nocache.js
  • extend-property
    Hier konfigurieren wir unsere verfügbaren Lokalisierungs-Dateien. Die JWT-Module bieten Standard-Lokalisierungen für de (deutsch) und en (englisch). Natürlich können auch eigene Lokalisierungen ergänzt werden, vgl. http://www.gwtproject.org/doc/latest/DevGuideI18nLocale.html.
  • set-property-fallback
    Unsere Standard-Lokalisierung stellen wir auf en.
  • inherits
    Hier werden die GWT-Module angegeben, die wir erweitern wollen. com.google.gwt.user.User enthält die GWT-Basisfunktionalität.
  • source
    Unter source sind alle Subpackages definiert, die auf Client-Seite vorliegen müssen und entsprechend nach JavaScript kompiliert werden sollen. Das Package wird relativ zur gwt.xml angegeben. Der GWT-Compiler übersetzt in unserem Beispiel also alles im Package org.jwt.client. Alle Klassen die nicht unterhalb eines so definierten Source-Packages liegen, sind nicht im Client verfügbar und führen zur Laufzeit zu Fehlern.
  • entry-point
    Zuletzt teilen wir dem GWT-Compiler über den ApplicationEntryPoint mit, welche Klasse den Einstiegspunkt unserer Anwendung darstellt. Diese wird beim Client-seitigen Aufruf der Applikation, also beim Laden der JavaScript-Datei, ausgeführt. In unserem Beispiel nennen wir unsere Einstiegspunkt-Klasse, die wir im nächsten Schritt erstellen, org.jwt.client.ApplicationEntryPoint.

EntryPoint

Wir erstellen nun den in der gwt.xml konfigurierten EntryPoint:

org.jwt.client.ApplicationEntryPoint.java

Unsere Anwendung gibt bisher nur die Meldung "jwt tutorial loaded" in der Browserkonsole aus. Wir binden noch keine Benutzeroberflächen-Elemente ein.

Deployment Descriptor: web.xml

Wie für jede Webanwendung benötigen wir einen Deploymentdeskriptor, der unsere Anwendung dem zugrundeliegenden Servletcontainer bekannt macht. Dazu legen wir im WEB-INF-Verzeichnis die Datei web.xml an:

web.xml

Host-Page: index.html

Jede GWT-Anwendung wird in eine HTML-Seite, die sogenannte Host-Page, eingebettet. Unsere index.html legen wir ins webapp-Verzeichnis. Wir binden den generierten JavaScript-Code, wie jedes andere JavaScript auch, über das script-Element ein.

index.html

Start der Anwendung

Zum Anstarten unserer Applikation müssen wir für die Entwicklungsumgebungen wieder einige Besonderheiten beachten:

Eclipse

 Für den Start aus Eclipse hier erweitern...

Bevor wir die Anwendung starten, müssen wir sicherstellen, dass die Anwendung korrekt kompiliert wurde. Das können wir z.B. über Maven > Update Maven Project oder einen Maven compile erreichen.

Die Anwendung können wir nun starten indem wir auf dem Projekt Run As > GWT Development Mode with Jetty aufrufen. Beim ersten Start fragt Eclipse erneut nach dem WAR-Verzeichnis. Hier geben wir wieder unser webapp-Verzeichnis an:

Sobald das Projekt erfolgreich kompiliert wurde, wird im Tab Development Mode die URL http://127.0.0.1:8888/index.html angezeigt. Wir können diese Seite dann im Browser unserer Wahl anzeigen.

IntelliJ IDEA

 Für den Start aus IntelliJ hier erweitern...

Zum Starten der Anwendung müssen wir eine neue Run Configuration erstellen. Dazu wählen wir im Menü Run > Edit-Configuration, um die Run/Debug Configurations zu öffnen. Nun fügen wir über Add New Configuration eine neue GWT Configuration hinzu:

 

Die neue Konfiguration müssen wir nun auf unser Projekt anpassen:

  • Module
    Wir wählen unser Module GWT-Modul jwt-tutorial-000 aus.
  • VMoptions
    GWT-Applikationen benötigen in der Regel mehr Speicher als die standardmäßig ausgewählten 512MB. Wir setzen den Wert deshalb über -Xmx1024m auf 1024MB.
  • Working directory
    Hier wählen wir unser webapp-Verzeichnis aus.
  • Start page
    Hier sollte nach des Auswahl des Moduls bereits unsere index.html ausgewählt sein.


Die Konfiguration kann nun im Menü unter Run > Run zum Starten der Applikation verwendet werden. Sobald das Projekt erfolgreich kompiliert wurde, wird der konfigurierte Browser automatisch geöffnet (vgl. Run Configuration > Open in browser).

Zusammenfassung

In diesem Tutorial haben wir unser initiales GWT-Projekt erstellt. Wir haben die grundlegenden Konzepte von GWT kennengelernt, wie den EntryPoint und die gwt.xml. Außerdem haben wir unsere Entwicklungsumgebung konfiguriert, um mit dem passenden GWT-Plugin unsere Applikation starten zu können.

Das Ergebnis ist eine noch sehr statische Seite, die im Erfolgsfall einen Text ohne Fehlermeldung ausgibt. In der Browserkonsole sehen wir außerdem die Ausgabe "jwt tutorial loaded".