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.

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:

├── pom.xml
├── 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.	
├── src/main/resources/ 	
└── src/main/webapp/            		- Das entspricht unserem WAR-Verzeichnis. 
    ├── index.html
	└── WEB-INF/	
		└── web.xml         

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

IntelliJ IDEA

Maven

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

<dependency>
   <groupId>com.google.gwt</groupId>
   <artifactId>gwt-user</artifactId>
   <version>2.8.2</version>
   <scope>provided</scope>
</dependency>
<dependency>
   <groupId>com.google.gwt</groupId>
   <artifactId>gwt-dev</artifactId>
   <version>2.8.2</version>
   <scope>provided</scope>
</dependency>

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

<properties>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
</properties>

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

<build>
        <plugins>
 			<!-- Configure the gwt-clean-plugin to generate a deployable war -->
            <plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>gwt-maven-plugin</artifactId>
                <version>${gwt.version}</version>
                <executions>
                    <execution>
                        <goals>
                            <goal>resources</goal>
                            <goal>compile</goal>
                            <goal>test</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <failOnError>true</failOnError>
                    <inplace>true</inplace>
                </configuration>
            </plugin>
        </plugins>
</build>

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:

        <plugins>
            <!-- Configure the maven-clean-plugin to delete GWT-temp files at cleanup -->
            <plugin>
                <artifactId>maven-clean-plugin</artifactId>
                <version>3.1.0</version>
                <executions>
                    <execution>
                        <phase>clean</phase>
                        <goals>
                            <goal>clean</goal>
                        </goals>
                        <configuration>
                            <filesets>
                                <fileset>
                                    <directory>src/main</directory>
                                    <includes>
                                        <include>**</include>
                                    </includes>
                                    <excludes>
                                        <exclude>java/**</exclude>
                                        <exclude>resources/**</exclude>
                                        <exclude>**/index.html</exclude>
                                        <exclude>**/web.xml</exclude>
                                        <exclude>**/.gitignore</exclude>
                                    </excludes>
                                </fileset>
                            </filesets>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

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

<project xmlns="http://maven.apache.org/POM/4.0.0"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

	<groupId>org.jwt</groupId>
	<artifactId>jwt-tutorial-000</artifactId>
	<version>5.8.2.0</version>

	<description>Getting Started - jadice web toolkit</description>
	<url>https://levigo.de/info/x/cwGABQ</url>
	
	<modelVersion>4.0.0</modelVersion>
	<packaging>war</packaging>

	<properties>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

		<maven.compiler.source>1.8</maven.compiler.source>
		<maven.compiler.target>1.8</maven.compiler.target>

		<!-- GWT -->
		<gwt.version>2.8.2</gwt.version>
	</properties>

	<dependencies>
		<!-- General GWT dependencies -->
		<dependency>
			<groupId>com.google.gwt</groupId>
			<artifactId>gwt-user</artifactId>
			<version>${gwt.version}</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>com.google.gwt</groupId>
			<artifactId>gwt-dev</artifactId>
			<version>${gwt.version}</version>
			<scope>provided</scope>
		</dependency>
	</dependencies>


	<build>
		<plugins>

			<!-- Configure the gwt-clean-plugin to generate a deployable war -->
			<plugin>
				<groupId>org.codehaus.mojo</groupId>
				<artifactId>gwt-maven-plugin</artifactId>
				<version>${gwt.version}</version>
				<executions>
					<execution>
						<goals>
							<goal>resources</goal>
							<goal>compile</goal>
							<goal>test</goal>
						</goals>
					</execution>
				</executions>
				<configuration>
					<failOnError>true</failOnError>
					<inplace>true</inplace>
				</configuration>
			</plugin>

			<!-- Configure the maven-clean-plugin to delete GWT-temp files at cleanup -->
			<plugin>
				<artifactId>maven-clean-plugin</artifactId>
				<version>3.1.0</version>
				<executions>
					<execution>
						<phase>clean</phase>
						<goals>
							<goal>clean</goal>
						</goals>
						<configuration>
							<filesets>
								<fileset>
									<directory>src/main</directory>
									<includes>
										<include>**</include>
									</includes>
									<excludes>
										<exclude>java/**</exclude>
										<exclude>resources/**</exclude>
										<exclude>**/index.html</exclude>
										<exclude>**/web.xml</exclude>
										<exclude>**/.gitignore</exclude>
									</excludes>
								</fileset>
							</filesets>
						</configuration>
					</execution>
				</executions>
			</plugin>
		</plugins>
	</build>
</project>

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.core.client.GWT;

/**
 * This is the applications {@link EntryPoint} as defined in the "Application.gwt.xml".
 */
public class ApplicationEntryPoint implements EntryPoint {
    @Override
    public void onModuleLoad() {
        GWT.log("jwt tutorial loaded");
    }
}

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:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
		 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee" 
		 xmlns:web="http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" 
		 version="3.1" xmlns="http://xmlns.jcp.org/xml/ns/javaee">
	
	<display-name>jwt-tutorial-000</display-name>

 </web-app>

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">
   JWT Tutorial 000. GWT-Projekt erfolgreich gestartet. 
</body>
</html>

Start der Anwendung

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

Eclipse

IntelliJ IDEA

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".