Im ersten Tutorial setzen wir ein einfaches GWT-Projekt auf (basierend auf Spring Boot) und richten unsere Entwicklungsumgebung ein. Zum Schluss starten wir unser GWT-Modul per Spring Boot 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.
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, angereichert um typische Spring-Boot Ablageorte. Unsere Verzeichnisstruktur sieht so aus:
├── application.yml - Die Spring Boot Konfigurationsdatei
├── pom.xml - Die Projektbeschreibung mit Details zum Build Prozess und zur Spring Boot Konfiguration
├── src/main/assembly/ - Die Konfiguration für das Maven Assembly Plugin (MAP) befindet sich in diesem Verzeichnis
│ └── all.xml - MAP-Konfigurationsdatei. Für eine genauere Beschreibung siehe https://bit.ly/3FYB8BN
├── src/main/java/ - Hier legen wir unsere Packages und Klassen an.
│ └── org/jwt/ - Unser verwendeter package-Name.
│ ├── Application.gwt.xml - Unsere GWT-Modulkonfiguration.
│ └── client/ - Unser package, dem wir Client-spezifische Klassen hinzufügen
│ └── ApplicationEntryPoint.java - Unsere GWT-Einstiegsklasse.
│ └── server/ - Hier legen wir Klassen ab, die nur auf Server-Seite benötigt werden.
│ └── SpringBootApplication00x.java - Die Start-Klasse für den Server mit Spring Boot Konfiguration
├── src/main/resources/
└── src/main/webapp/ - Das entspricht unserem WAR-Verzeichnis.
├── index.html - index html, aus der wir ein HTML Element nutzen um den GWT-Code einzuhängen
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
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.
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
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 aktiviert werden.
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:
Das GWT-Verzeichnis müssen wir in den Project Settings hinterlegen. Dazu öffnen wir File > Project Structure und wählen Facets, dann GWT und wählen den Reiter Defaults:
Folgendes muss eingetragen werden:
- Path to GWT installation directory
Hier muss das lokale GWT-Installationsverzeichnis konfiguriert sein.
Die erkannten GWT-Module müssen wir im selben Menü überprüfen. Dazu wechseln wir zu Modules und wählen ein jwt-tutorial-Modul > GWT:
Folgendes muss sichergestellt werden:
- Target Web Facet
Als Target-Web-Facet muss das bereits vorkonfigurierte Web-Facet ausgewählt sein.
Maven
Erläuterung zum Maven Build
Die für unser Beispiel-Projekt benötigten Bibliotheken werden über Maven eingebunden. Im folgenden Kapitel werden einzelne relevante Abschnitte aus der pom.xml näher beschrieben. Am Ende listen wir die komplette Datei für einen Überblick.
Dependencies
Zunächst definieren wir einige Parameter, die in anderen Abschnitten referenziert werden. Hierunter fallen insbesondere die Versionen der zu verwendenden Komponenten:
<properties> <!-- General project settings --> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> <!-- levigo dependencies --> <jwt.version>5.10.52.2</jwt.version> <!-- GWT dependencies --> <gwt.version>2.9.0</gwt.version> </properties>
Im DependencyManagement-Block importieren wir die JWT-Starter BOM (Bill of Material). Dadurch erhalten wir die Versionen aller zugehörigen JWT Dependencies und müssen diese nicht separat pflegen.
<dependencyManagement>
<dependencies>
<!-- Let's import the Jadice Webtoolkit bill of material. JWT dependency
versions will be managed via this BOM. -->
<dependency>
<groupId>com.levigo.jadice.webtoolkit</groupId>
<artifactId>webtoolkit-spring-boot-bom</artifactId>
<version>${jwt.version}</version>
<scope>import</scope>
<type>pom</type>
</dependency>
</dependencies>
</dependencyManagement>
Anschließend definieren wir die benötigten Abhängigkeiten für das Projekt. Dabei müssen wir keine Versionen angeben, da diese aus der BOM ermittelt werden:
<dependencies> <!-- Dependency versions are managed by parent / imported BOMs --> <!-- JWT via Spring-Boot Starter --> <dependency> <groupId>com.levigo.jadice.webtoolkit</groupId> <artifactId>webtoolkit-spring-boot-starter</artifactId> </dependency> <!-- Required for SuperDev mode --> <dependency> <groupId>com.levigo.jadice.webtoolkit</groupId> <artifactId>webtoolkit-spring-boot-devmode</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> </dependency> </dependencies>
Weitere Informationen zur Verwendung der BOM finden Sie unter Maven BOM im webtoolkit.
Build-Prozess
Für den Build-Lauf, dessen Ziel die Erstellung einer ausführbaren jar-Datei ist, benötigen wir einige Plugins. Diese erläutern wir in den folgenden Absätzen.
komplette pom.xml
Die Application.yml
Die Application.yml wird von Spring verwendet, um Konfigurationsparameter zu setzen. Hier im Beispiel geben wir nur einen Parameter an, um den Port des Servers festzulegen:
server: port: 8080
Die Application.yml ist Bestandteil des Spring-Standardmechanismus zum Laden von externer Konfiguration. Neben einfachen Schlüssel-Wert-Paaren für Spring-Komponenten können darin auch eigene applikationsspezifische Einstellungen abgelegt werden.
Weitere Informationen hierzu können in der Spring-Dokumentation gefunden werden.
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:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.0//EN" "http://www.gwtproject.org/doctype/2.8.2/gwt-module.dtd">
<module rename-to="imageviewer">
<inherits name="com.google.gwt.user.User" />
<inherits name="com.google.gwt.user.theme.chrome.Chrome" />
<!-- The locale configuration. -->
<extend-property name="locale" values="de,en" />
<set-property name="locale" value="de,en" />
<set-property-fallback name="locale" value="en" />
<!-- Define all subpackages which sources are used in the client. In our case: org.jwt.client -->
<source path="client" />
<!-- The entry-point of the application -->
<entry-point class="org.jwt.client.ApplicationEntryPoint" />
</module>
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.
- com.google.gwt.user.theme.chrome.Chrome - erweitert eins der GWT Standard-Themes, welches das CSS-Syling für die GWT-Komponenten vorgibt (vgl. http://www.gwtproject.org/doc/latest/DevGuideUiCss.html)
- 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:
package org.jwt.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
/**
* This is the applications {@link EntryPoint} as defined in the
* "Application.gwt.xml".
*/
public class ApplicationEntryPoint implements EntryPoint {
@Override
public void onModuleLoad() {
Window.alert("jwt tutorial loaded");
}
}
Unsere Anwendung gibt bisher nur die Meldung "jwt tutorial loaded" als Popup-Window aus und wir greifen noch nicht auf jadice web toolkit Funktionalitäten zu. Einzig GWT und Spring Boot werden dadurch wirklich verwendet.
Erläuterung zur Spring Boot Konfiguration
Die Start-Klasse ist eine SpringBootApplication. Über die angegebenen Annotationen erfolgt die automatische Konfiguration via Spring. Die Annotation @EnableJWTSpringBootApplication() erwartet dabei als Parameter den voll qualifizierten Namen der Konfigurationsdatei des gwt Compilers. In unserem Beispiel wird dabei die Datei Application.gwt.xml im Package "org.jwt" referenziert.
package org.jwt.server;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
import com.levigo.jadice.web.server.spring.autoconfig.EnableJWTSpringBootApplication;
@SpringBootApplication
@EnableJWTSpringBootApplication("org.jwt.Application")
public class MySpringBootApplication extends SpringBootServletInitializer {
public static void main(String[] args) {
SpringApplication.run(MySpringBootApplication.class, args);
}
}
Deployment Descriptor: web.xml
Durch Spring Boot werden ServletContaine via Annotationen registriert und nicht mehr über die web.xml. Für eine Migration siehe z.B. hier: https://www.baeldung.com/spring-boot-dispatcherservlet-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.
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>tutorial 0</title> <script src="imageviewer/imageviewer.nocache.js" type="text/javascript"></script> </head> <body style="margin: 0; padding: 0"> <div id="Viewer" style="width: 100%; height: 100%; position: absolute"></div> </body> </html>
Start der Anwendung
Aus der IDE
Der Start des Servers erfolgt, indem wir die Klasse "MySpringBootApplication" ausführen - diese beinhaltet die main()-Methode und startet die Spring Boot Applikation.
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 Spring Boot Configuration hinzu:
Die neue Konfiguration müssen wir nun auf unser Projekt anpassen:
- Main class
Hier sollte nach des Auswahl des Moduls bereits unsere SpringBootApplication000 ausgewählt sein. - classpath
Wir wählen unser Modul jwt-tutorial-spring-boot-000 aus. - Working directory
Hier wählen wir unser jwt-tutorial-spring-boot-000-Verzeichnis aus.
Die Konfiguration kann nun im Menü unter Run > Run zum Starten der Applikation verwendet werden.
Via executable Jar
Hierfür führen wir einen Maven-Build auf das Projekt aus. Als Ergebnis erhalten wir im target Folder ein einziges ausführbares Jar-File. Dieses starten wir auf der Kommandozeile mittels des Befehls "java -jar <filename>.jar"
Aufruf im Browser
Zugriff per Browser erfolgt dann über den Link http://localhost:8080
Achtung: im Moment haben wir mit
mvn install das Projekt kompilieren. Sobald sich der Browser erstmalig verbindet, wird die auf diesen Browser mit dieser Sprache zugeschnittene Permutation kompiliert. Dies sieht wie folgt aus:
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.
Der Unterschied zu früheren Versionen mit reiner GWT-Konfiguration ohne Spring Boot besteht darin, dass die gesamte Anwendung inklusive des zugehörigen Application Servers in ein einziges Jar-File verpackt ist. Dieses Packaging eignet sich gut, um es in ein Docker Image zu verpacken und anschließend in einer Cloud Infrastruktur zu betreiben. Das Erstellen eines solchen Docker Images beschreiben wir in späteren Tutorials.
Das Ergebnis dieses Tutorials ist eine noch sehr statische Seite, die im Erfolgsfall einen Text ohne Fehlermeldung als Popup-Window ausgibt.
