GWT - Kurzanleitung

Was ist GWT?

Google Web Toolkit (GWT) ist ein zu erstellendes Entwicklungs-Toolkit RICH Internet Applications (RIA). Hier sind einige seiner bemerkenswerten Merkmale -

• GWT bietet Entwicklern die Möglichkeit, clientseitige Anwendungen in JAVA zu schreiben.

• GWT kompiliert den in JAVA geschriebenen Code in JavaScript-Code.

• In GWT geschriebene Anwendungen sind browserübergreifend kompatibel. GWT generiert automatisch Javascript-Code, der für jeden Browser geeignet ist.

• GWT ist Open Source, völlig kostenlos und wird von Tausenden von Entwicklern auf der ganzen Welt verwendet. Es ist unter der Apache License Version 2.0 lizenziert.

Insgesamt ist GWT a framework Erstellen von groß angelegten und leistungsstarken Webanwendungen, während diese so einfach wie möglich zu warten sind.

Warum GWT verwenden?

Auf Java-Basis können Sie JAVA-IDEs wie Eclipse verwenden, um eine GWT-Anwendung zu entwickeln.

Entwickler können Code-Vervollständigung / Refactoring / Navigation / Projektmanagement und alle Funktionen von IDEs.GWT verwenden, die vollständige Debugging-Funktionen bieten. Entwickler können die clientseitige Anwendung genauso wie eine Java-Anwendung debuggen.

• GWT bietet eine einfache Integration mit Junit und Maven.

• GWT basiert wieder auf Java und hat eine geringe Lernkurve für Java-Entwickler.

• GWT generiert optimierten Javascript-Code und erstellt den spezifischen Javascript-Code des Browsers selbst.

• GWT bietet Widgets-Bibliothek bietet die meisten Aufgaben, die in einer Anwendung erforderlich sind.

• GWT ist erweiterbar und es kann ein benutzerdefiniertes Widget erstellt werden, um den Anwendungsanforderungen gerecht zu werden.

Darüber hinaus können GWT-Anwendungen auf allen gängigen Browsern und Smartphones ausgeführt werden, einschließlich Android- und iOS-basierten Telefonen / Tablets.

Nachteile von GWT

Obwohl GWT viele Vorteile bietet, weist es die folgenden Nachteile auf:

• Not Indexable - Von GWT generierte Webseiten werden von Suchmaschinen nicht indiziert, da diese Anwendungen dynamisch generiert werden.

• Not Degradable - Wenn Ihr Anwendungsbenutzer Javascript deaktiviert, sieht der Benutzer nur die Basisseite und nichts weiter.

• Not Designer's Friendly - GWT ist nicht für Webdesigner geeignet, die es vorziehen, einfaches HTML mit Platzhaltern zum Einfügen dynamischer Inhalte zu einem späteren Zeitpunkt zu verwenden.

Die GWT-Komponenten

Das GWT-Framework kann in die folgenden drei Hauptteile unterteilt werden:

• GWT Java to JavaScript compiler- Dies ist der wichtigste Teil von GWT, der es zu einem leistungsstarken Werkzeug für die Erstellung von RIAs macht. Der GWT-Compiler wird verwendet, um den gesamten in Java geschriebenen Anwendungscode in JavaScript zu übersetzen.

• JRE Emulation library- Das Google Web Toolkit enthält eine Bibliothek, die eine Teilmenge der Java-Laufzeitbibliothek emuliert. Die Liste enthält java.lang, java.lang.annotation, java.math, java.io, java.sql, java.util und java.util.logging

• GWT UI building library - Dieser Teil von GWT besteht aus vielen Unterteilen, einschließlich der eigentlichen UI-Komponenten, RPC-Unterstützung, Verlaufsverwaltung und vielem mehr.

GWT bietet auch einen von GWT gehosteten Webbrowser, mit dem Sie Ihre GWT-Anwendungen im gehosteten Modus ausführen und ausführen können, wobei Ihr Code in der Java Virtual Machine als Java ausgeführt wird, ohne zu JavaScript kompiliert zu werden.

Dieses Tutorial zeigt Ihnen, wie Sie eine Entwicklungsumgebung vorbereiten, um Ihre Arbeit mit GWT Framework zu beginnen. In diesem Tutorial erfahren Sie auch, wie Sie JDK, Tomcat und Eclipse auf Ihrem Computer einrichten, bevor Sie GWT Framework einrichten.

System Anforderungen

GWT erfordert JDK 1.6 oder höher. Die allererste Anforderung besteht darin, JDK auf Ihrem Computer zu installieren.

JDK	1.6 oder höher.
Erinnerung	Keine Mindestanforderung.
Festplattenplatz	Keine Mindestanforderung.
Betriebssystem	Keine Mindestanforderung.

Befolgen Sie die angegebenen Schritte, um Ihre Umgebung so einzurichten, dass mit der Entwicklung von GWT-Anwendungen begonnen wird.

Schritt 1 - Überprüfen Sie die Java-Installation auf Ihrem Computer

Öffnen Sie nun die Konsole und führen Sie den folgenden Java-Befehl aus.

Betriebssystem	Aufgabe	Befehl
Windows	Öffnen Sie die Befehlskonsole	c: \> Java-Version
Linux	Öffnen Sie das Befehlsterminal	$ java -version
Mac	Terminal öffnen	Maschine: ~ Joseph $ Java-Version

Lassen Sie uns die Ausgabe für alle Betriebssysteme überprüfen

Sr.Nr.	Betriebssystem und generierte Ausgabe
1	Windows Java-Version "1.6.0_21" Java (TM) SE-Laufzeitumgebung (Build 1.6.0_21-b07) Java HotSpot (TM) Client VM (Build 17.0-b17, gemischter Modus, Freigabe)
2	Linux Java-Version "1.6.0_21" Java (TM) SE-Laufzeitumgebung (Build 1.6.0_21-b07) ava HotSpot (TM) Client-VM (Build 17.0-b17, gemischter Modus, Freigabe)
3	Mac Java-Version "1.6.0_21" Java (TM) SE-Laufzeitumgebung (Build 1.6.0_21-b07) 64-Bit-Server-VM von Java HotSpot (TM) (Build 17.0-b17, gemischter Modus, Freigabe)

Schritt 2 - Java Development Kit (JDK) einrichten

Wenn Sie Java nicht installiert haben, können Sie das Java Software Development Kit (SDK) von der Java-Site von Oracle installieren: Java SE Downloads . Anweisungen zum Installieren von JDK finden Sie in heruntergeladenen Dateien. Befolgen Sie die Anweisungen zum Installieren und Konfigurieren des Setups. Stellen Sie schließlich die Umgebungsvariablen PATH und JAVA_HOME so ein, dass sie auf das Verzeichnis verweisen, das Java und Javac enthält, normalerweise java_install_dir / bin bzw. java_install_dir.

Stellen Sie die JAVA_HOMEUmgebungsvariable, die auf den Speicherort des Basisverzeichnisses verweist, in dem Java auf Ihrem Computer installiert ist. Zum Beispiel

Sr.Nr.	Betriebssystem & Ausgabe
1	Windows Setzen Sie die Umgebungsvariable JAVA_HOME auf C: \ Programme \ Java \ jdk1.6.0_21
2	Linux export JAVA_HOME = / usr / local / java-current
3	Mac export JAVA_HOME = / Library / Java / Home

Hängen Sie den Java-Compiler-Speicherort an den Systempfad an.

Sr.Nr.	Betriebssystem & Ausgabe
1	Windows Hängen Sie die Zeichenfolge% JAVA_HOME% \ bin an das Ende der Systemvariablen Path an.
2	Linux export PATH =$PATH:$JAVA_HOME / bin /
3	Mac nicht benötigt

Wenn Sie alternativ eine integrierte Entwicklungsumgebung (IDE) wie Borland JBuilder, Eclipse, IntelliJ IDEA oder Sun ONE Studio verwenden, kompilieren Sie ein einfaches Programm und führen Sie es aus, um zu bestätigen, dass die IDE weiß, wo Sie Java installiert haben. Andernfalls führen Sie die ordnungsgemäße Einrichtung gemäß dem angegebenen Dokument durch der IDE.

Schritt 3 - Eclipse IDE einrichten

Alle Beispiele in diesem Tutorial wurden mit Eclipse IDE geschrieben. Daher würde ich vorschlagen, dass Sie die neueste Version von Eclipse basierend auf Ihrem Betriebssystem auf Ihrem Computer installiert haben.

Laden Sie zum Installieren der Eclipse-IDE die neuesten Eclipse-Binärdateien von herunter https://www.eclipse.org. Nachdem Sie die Installation heruntergeladen haben, entpacken Sie die Binärdistribution an einem geeigneten Ort. Zum Beispiel in C: \ eclipse unter Windows oder / usr / local / eclipse unter Linux / Unix und setzen Sie schließlich die Variable PATH entsprechend.

Eclipse kann durch Ausführen der folgenden Befehle auf einem Windows-Computer gestartet werden, oder Sie können einfach auf eclipse.exe doppelklicken

%C:\eclipse\eclipse.exe

Eclipse kann durch Ausführen der folgenden Befehle auf einem Unix-Computer (Solaris, Linux usw.) gestartet werden:

$/usr/local/eclipse/eclipse

Wenn nach einem erfolgreichen Start alles in Ordnung ist, sollte das folgende Ergebnis angezeigt werden:

Schritt 4 - Installieren Sie das GWT SDK & Plugin für Eclipse

Befolgen Sie die Anweisungen unter dem Link Plugin für Eclipse (inkl. SDKs) , um das auf Ihrem Computer installierte GWT SDK & Plugin für Eclipse zu installieren.

Wenn nach einer erfolgreichen Einrichtung für das GWT-Plugin alles in Ordnung ist, sollte der folgende Bildschirm mit angezeigt werden Google icon markiert mit rotem Rechteck wie unten gezeigt -

Schritt 5: Richten Sie Apache Tomcat ein

Sie können die neueste Version von Tomcat von herunterladen https://tomcat.apache.org/. Nachdem Sie die Installation heruntergeladen haben, entpacken Sie die Binärdistribution an einem geeigneten Ort. Zum Beispiel in C: \ apache-tomcat-6.0.33 unter Windows oder /usr/local/apache-tomcat-6.0.33 unter Linux / Unix und setzen Sie die Umgebungsvariable CATALINA_HOME, die auf die Installationsorte verweist.

Tomcat kann durch Ausführen der folgenden Befehle auf einem Windows-Computer gestartet werden, oder Sie doppelklicken einfach auf startup.bat

%CATALINA_HOME%\bin\startup.bat
or 
/usr/local/apache-tomcat-6.0.33/bin/startup.sh

Nach einem erfolgreichen Start sind die in Tomcat enthaltenen Standard-Webanwendungen unter verfügbar http://localhost:8080/. Wenn alles in Ordnung ist, sollte folgendes Ergebnis angezeigt werden:

Weitere Informationen zum Konfigurieren und Ausführen von Tomcat finden Sie in der hier enthaltenen Dokumentation sowie auf der Tomcat-Website. https://tomcat.apache.org/

Tomcat kann gestoppt werden, indem die folgenden Befehle auf einem Windows-Computer ausgeführt werden:

%CATALINA_HOME%\bin\shutdown
or
C:\apache-tomcat-5.5.29\bin\shutdown

Tomcat kann gestoppt werden, indem die folgenden Befehle auf einem Unix-Computer (Solaris, Linux usw.) ausgeführt werden:

$CATALINA_HOME/bin/shutdown.sh
or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh

Bevor wir mit der Erstellung der eigentlichen "HelloWorld" -Anwendung mit GWT beginnen, lassen Sie uns sehen, was die eigentlichen Teile einer GWT-Anwendung sind -

Eine GWT-Anwendung besteht aus den folgenden vier wichtigen Teilen, von denen der letzte Teil optional ist, die ersten drei Teile jedoch obligatorisch sind.

• Modulbeschreibungen
• Öffentliche Mittel
• Clientseitiger Code
• Serverseitiger Code

Beispielpositionen verschiedener Teile einer typischen GWT-Anwendung HelloWord wird wie unten gezeigt sein -

Name	Ort
Projektstamm	Hallo Welt/
Modulbeschreibung	src / com / tutorialspoint / HelloWorld.gwt.xml
Öffentliche Mittel	src / com / tutorialspoint / war /
Clientseitiger Code	src / com / tutorialspoint / client /
Serverseitiger Code	src / com / tutorialspoint / server /

Modulbeschreibungen

Ein Moduldeskriptor ist die Konfigurationsdatei in Form von XML, mit der eine GWT-Anwendung konfiguriert wird.

Eine Moduldeskriptor-Dateierweiterung ist * .gwt.xml, wobei * der Name der Anwendung ist und sich diese Datei im Stammverzeichnis des Projekts befinden sollte.

Es folgt ein Standardmodul-Deskriptor HelloWorld.gwt.xml für eine HelloWorld-Anwendung -

<?xml version = "1.0" encoding = "utf-8"?>
<module rename-to = 'helloworld'>
   <!-- inherit the core web toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.user'/>

   <!-- inherit the default gwt style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- specify the paths for translatable code                    -->
   <source path = '...'/>
   <source path = '...'/>

   <!-- specify the paths for static files like html, css etc.     -->
   <public path = '...'/>
   <public path = '...'/>

   <!-- specify the paths for external javascript files            -->
   <script src = "js-url" />
   <script src = "js-url" />

   <!-- specify the paths for external style sheet files            -->
   <stylesheet  src = "css-url" />
   <stylesheet  src = "css-url" />
</module>

Im Folgenden finden Sie eine kurze Beschreibung der verschiedenen Teile, die im Moduldeskriptor verwendet werden.

Sr.Nr.	Knoten & Beschreibung
1	<module rename-to = "helloworld"> Dies gibt den Namen der Anwendung an.
2	<inherits name = "logical-module-name" /> Dies fügt der Anwendung ein anderes GWT-Modul hinzu, genau wie der Import in Java-Anwendungen. Auf diese Weise können beliebig viele Module vererbt werden.
3	<entry-point class = "classname" /> Dies gibt den Namen der Klasse an, die mit dem Laden der GWT-Anwendung beginnt. Es können beliebig viele Einstiegspunktklassen hinzugefügt werden, die nacheinander in der Reihenfolge aufgerufen werden, in der sie in der Moduldatei erscheinen. Wenn also onModuleLoad () Ihres ersten Einstiegspunkts beendet ist, wird der nächste Einstiegspunkt sofort aufgerufen.
4	<source path = "path" /> Dies gibt die Namen der Quellordner an, nach denen der GWT-Compiler nach der Quellkompilierung sucht.
5	<public path = "path" /> Der öffentliche Pfad ist der Ort in Ihrem Projekt, an dem statische Ressourcen, auf die Ihr GWT-Modul verweist, wie z. B. CSS oder Bilder, gespeichert werden. Der standardmäßige öffentliche Pfad ist das öffentliche Unterverzeichnis, unter dem die Modul-XML-Datei gespeichert ist.
6	<script src="js-url" /> Fügt automatisch die externe JavaScript-Datei ein, die sich an dem von src angegebenen Speicherort befindet.
7	<stylesheet src="css-url" /> Fügt automatisch die externe CSS-Datei ein, die sich an dem von src angegebenen Speicherort befindet.

Öffentliche Ressourcen

Dies sind alle Dateien, auf die Ihr GWT-Modul verweist, z. B. Host-HTML-Seite, CSS oder Bilder.

Der Speicherort dieser Ressourcen kann mit dem Element <public path = "path" /> in der Modulkonfigurationsdatei konfiguriert werden. Standardmäßig ist es das öffentliche Unterverzeichnis, unter dem die Modul-XML-Datei gespeichert ist.

Wenn Sie Ihre Anwendung in JavaScript kompilieren, werden alle Dateien, die sich auf Ihrem öffentlichen Pfad befinden, in das Ausgabeverzeichnis des Moduls kopiert.

Die wichtigste öffentliche Ressource ist die Hostseite, auf der die eigentliche GWT-Anwendung aufgerufen wird. Eine typische HTML-Hostseite für eine Anwendung enthält möglicherweise überhaupt keinen sichtbaren HTML-Textinhalt. Es wird jedoch immer erwartet, dass die GWT-Anwendung wie folgt über ein <script ... /> -Tag eingeschlossen wird

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   
   <body>
      <h1>Hello World</h1>
      <p>Welcome to first GWT application</p>
   </body>
</html>

Im Folgenden finden Sie das Beispiel-Stylesheet, das wir auf unserer Host-Seite aufgenommen haben.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Clientseitiger Code

Dies ist der eigentliche Java-Code, der zur Implementierung der Geschäftslogik der Anwendung geschrieben wurde und den der GWT-Compiler in JavaScript übersetzt, das schließlich im Browser ausgeführt wird. Der Speicherort dieser Ressourcen kann mithilfe des Elements <source path = "path" /> in der Modulkonfigurationsdatei konfiguriert werden.

Zum Beispiel Entry Point Code wird als clientseitiger Code verwendet und sein Speicherort wird mit <source path = "path" /> angegeben.

Ein Modul entry-point ist jede Klasse, die zugewiesen werden kann EntryPointund das kann ohne Parameter konstruiert werden. Wenn ein Modul geladen wird, wird jede Einstiegspunktklasse instanziiert und ihreEntryPoint.onModuleLoad()Methode wird aufgerufen. Eine Beispielklasse für den HelloWorld-Einstiegspunkt lautet wie folgt:

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

Serverseitiger Code

Dies ist der serverseitige Teil Ihrer Anwendung und sehr optional. Wenn Sie in Ihrer Anwendung keine Backend-Verarbeitung durchführen, benötigen Sie diesen Teil nicht. Wenn jedoch im Backend eine Verarbeitung erforderlich ist und Ihre clientseitige Anwendung mit dem Server interagiert, müssen Sie diese Komponenten entwickeln.

Im nächsten Kapitel werden alle oben genannten Konzepte verwendet, um eine HelloWorld-Anwendung mit Eclipse IDE zu erstellen.

Da liegt die Kraft von GWT in Write in Java, Run in JavaScriptWir werden Java IDE Eclipse verwenden, um unsere Beispiele zu demonstrieren.

Beginnen wir mit einer einfachen HelloWorld- Anwendung -

Schritt 1 - Projekt erstellen

Der erste Schritt besteht darin, ein einfaches Webanwendungsprojekt mit Eclipse IDE zu erstellen. Starten Sie den Projektassistenten mit der OptionGoogle Icon

> New Web Application Project.... Benennen Sie Ihr Projekt nun im Assistentenfenster wie folgt als HelloWorld :

Auswahl aufheben Use Google App Engine weil wir es in diesem Projekt nicht verwenden und andere Standardwerte belassen (behalten Generate Sample project code Option aktiviert) und klicken Sie auf Fertig stellen.

Sobald Ihr Projekt erfolgreich erstellt wurde, haben Sie folgenden Inhalt in Ihrem Projektexplorer:

Hier finden Sie eine kurze Beschreibung aller wichtigen Ordner

Sr.Nr.	Ordner & Ort
1	src Quellcode-Dateien (Java-Klassen). Client-Ordner mit den clientseitigen Java-Klassen, die für die Anzeige der Client-Benutzeroberfläche verantwortlich sind. Serverordner mit den serverseitigen Java-Klassen, die für die serverseitige Verarbeitung verantwortlich sind. Freigegebener Ordner mit der Java-Modellklasse zum Übertragen von Daten vom Server zum Client und umgekehrt. HelloWorld.gwt.xml, eine Modulbeschreibungsdatei, die der GWT-Compiler zum Kompilieren des HelloWorld-Projekts benötigt.
2	test Quelldateien des Testcodes (Java-Klassen). Client-Ordner mit den Java-Klassen, die für das Testen des clientseitigen GWT-Codes verantwortlich sind.
3	war Dies ist der wichtigste Teil, er repräsentiert die tatsächlich bereitstellbare Webanwendung. WEB-INF mit kompilierten Klassen, GWT-Bibliotheken und Servlet-Bibliotheken. HelloWorld.css, Projekt-Stylesheet. HelloWorld.html, heißes HTML, das die GWT-UI-Anwendung aufruft.

Schritt 2 - Moduldeskriptor ändern: HelloWorld.gwt.xml

Das GWT-Plugin erstellt eine Standardmodul-Deskriptordatei src / com.tutorialspoint / HelloWorld.gwt.xml, die unten angegeben ist. In diesem Beispiel ändern wir es nicht, aber Sie können es entsprechend Ihren Anforderungen ändern.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.  You can change       -->
   <!-- the theme of your GWT application by uncommenting          -->
   <!-- any one of the following lines.                            -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <!-- <inherits name = 'com.google.gwt.user.theme.chrome.Chrome'/> -->
   <!-- <inherits name = 'com.google.gwt.user.theme.dark.Dark'/>     -->

   <!-- Other module inherits                                      -->

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Schritt 3 - Stylesheet ändern: HelloWorld.css

Das GWT-Plugin erstellt eine Standard-Stylesheet-Datei war / HelloWorld.css . Lassen Sie uns diese Datei ändern, um unser Beispiel auf dem einfachsten Verständnisniveau zu halten -

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Schritt 4 - Ändern der Hostdatei: HelloWorld.html

Das GWT-Plugin erstellt eine Standard-HTML-Hostdatei war / HelloWorld.html . Lassen Sie uns diese Datei ändern, um unser Beispiel auf dem einfachsten Verständnisniveau zu halten -

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Hello World</h1>
      <p>Welcome to first GWT application</p>
   </body>
</html>

Sie können statischere Dateien wie HTML, CSS oder Bilder im selben Quellverzeichnis erstellen oder weitere Unterverzeichnisse erstellen und Dateien in diesen Unterverzeichnissen verschieben und diese Unterverzeichnisse im Moduldeskriptor der Anwendung konfigurieren.

Schritt 5 - Ändern Sie den Einstiegspunkt: HelloWorld.java

Das GWT-Plugin erstellt eine Standard-Java-Datei src / com.tutorialspoint / HelloWorld.java , die einen Einstiegspunkt für die Anwendung enthält.

Lassen Sie uns diese Datei so ändern, dass "Hallo Welt!"

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

Sie können weitere Java-Dateien im selben Quellverzeichnis erstellen, um entweder Einstiegspunkte oder Hilfsroutinen zu definieren.

Schritt 6 - Anwendung kompilieren

Sobald Sie mit allen vorgenommenen Änderungen fertig sind, können Sie das Projekt kompilieren. Verwenden Sie die OptionGoogle Icon

> GWT Compile Project... um das Dialogfeld GWT-Kompilierung wie unten gezeigt zu starten -

Behalten Sie die Standardwerte bei und klicken Sie auf die Schaltfläche Kompilieren. Wenn alles gut geht, wird die folgende Ausgabe in der Eclipse-Konsole angezeigt

Compiling module com.tutorialspoint.HelloWorld
   Compiling 6 permutations
      Compiling permutation 0...
      Compiling permutation 1...
      Compiling permutation 2...
      Compiling permutation 3...
      Compiling permutation 4...
      Compiling permutation 5...
   Compile of permutations succeeded
Linking into C:\workspace\HelloWorld\war\helloworld
   Link succeeded
   Compilation succeeded -- 33.029s

Schritt 7 - Führen Sie die Anwendung aus

Klicken Sie nun auf

Anwendungsmenü ausführen und wählen SieHelloWorld Anwendung, um die Anwendung auszuführen.

Wenn alles in Ordnung ist, muss der GWT-Entwicklungsmodus in Eclipse aktiv sein und eine URL enthalten, wie unten gezeigt. Doppelklicken Sie auf die URL, um die GWT-Anwendung zu öffnen.

Da Sie Ihre Anwendung im Entwicklungsmodus ausführen, müssen Sie das GWT-Plugin für Ihren Browser installieren. Folgen Sie einfach den Anweisungen auf dem Bildschirm, um das Plugin zu installieren.

Wenn Sie bereits ein GWT-Plugin für Ihren Browser eingerichtet haben, sollte die folgende Ausgabe angezeigt werden

Herzliche Glückwünsche! Sie haben Ihre erste Anwendung mit Google Web Toolkit (GWT) implementiert.

In diesem Tutorial erfahren Sie, wie Sie eine Anwendung erstellen "war" Datei und wie man das in Apache Tomcat Websever root bereitstellt.

Wenn Sie dieses einfache Beispiel verstanden haben, können Sie auch eine komplexe GWT-Anwendung nach denselben Schritten bereitstellen.

Lassen Sie uns die Eclipse-IDE zusammen mit dem GWT-Plug-In installieren und befolgen Sie die folgenden Schritte, um eine GWT-Anwendung zu erstellen:

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um sicherzustellen, dass die Geschäftslogik den Anforderungen entspricht.
4	Zum Schluss komprimieren Sie den Inhalt des War-Ordners der Anwendung in Form einer War-Datei und stellen Sie ihn in Apache Tomcat Webserver bereit.
5	Starten Sie Ihre Webanwendung unter Verwendung der entsprechenden URL, wie im letzten Schritt unten erläutert.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Hello World</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Ich habe HTML gegenüber dem vorherigen Beispiel ein wenig geändert. Hier habe ich einen Platzhalter <div> ... </ div> erstellt, in den wir mithilfe unserer Einstiegspunkt-Java-Klasse einige Inhalte einfügen. Lassen Sie uns also den folgenden Inhalt der Java-Datei habensrc/com.tutorialspoint/HelloWorld.java.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      HTML html = new HTML("<p>Welcome to GWT application</p>");
      
      RootPanel.get("gwtContainer").add(html);
   }
}

Hier haben wir das breiteste HTML erstellt und es in das div-Tag mit id = "gwtContainer" eingefügt. In den kommenden Kapiteln werden wir verschiedene GWT-Widgets untersuchen.

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

WAR-Datei erstellen

Jetzt funktioniert unsere Anwendung einwandfrei und wir sind bereit, sie als Kriegsdatei zu exportieren.

Befolgen Sie die folgenden Schritte -

• Gehen Sie in Ihr Projekt war Verzeichnis C:\workspace\HelloWorld\war

• Wählen Sie alle Dateien und Ordner aus, die im Kriegsverzeichnis verfügbar sind.

• Komprimieren Sie alle ausgewählten Dateien und Ordner in einer Datei namens HelloWorld.zip .

• Benennen Sie HelloWorld.zip in HelloWorld.war um .

Bereitstellen der WAR-Datei

• Stoppen Sie den Tomcat-Server.

• Kopieren Sie die Datei HelloWorld.war nachtomcat installation directory > webapps folder.

• Starten Sie den Tomcat-Server.

• Schauen Sie in das Webapps-Verzeichnis, es sollte einen Ordner geben helloworld wurde erstellt.

• Jetzt wird HelloWorld.war erfolgreich im Tomcat Webserver-Stammverzeichnis bereitgestellt.

Führen Sie die Anwendung aus

Geben Sie eine URL im Webbrowser ein: http://localhost:8080/HelloWorld um die Anwendung zu starten

Servername (localhost) und Port (8080) können je nach Tomcat-Konfiguration variieren.

GWT-Widgets basieren auf Cascading Style Sheets (CSS) für das visuelle Styling. Standardmäßig lautet der Klassenname für jede Komponentegwt-<classname>.

Das Button-Widget hat beispielsweise den Standardstil " gwt-Button" und ähnlich wie die TextBox-Widgest den Standardstil " gwt-TextBox" .

Um allen Schaltflächen und Textfeldern eine größere Schriftart zu geben, können Sie die folgende Regel in die CSS-Datei Ihrer Anwendung einfügen

.gwt-Button  { font-size: 150%; }

.gwt-TextBox { font-size: 150%; }

Standardmäßig erstellen weder der Browser noch GWT einen Standard idAttribute für Widgets. Sie müssen explizit eine eindeutige ID für die Elemente erstellen, die Sie in CSS verwenden können. Um eine bestimmte Schaltfläche mit ID zu gebenmy-button-id Bei einer größeren Schriftart können Sie die folgende Regel in die CSS-Datei Ihrer Anwendung einfügen:

#my-button-id { font-size: 150%; }

Um die ID für ein GWT-Widget festzulegen, rufen Sie dessen DOM-Element ab und legen Sie das ID-Attribut wie folgt fest:

Button b = new Button();
DOM.setElementAttribute(b.getElement(), "id", "my-button-id")

CSS-Styling-APIs

Es stehen viele APIs zum Aufhängen der CSS-Einstellungen für jedes GWT-Widget zur Verfügung. Im Folgenden finden Sie einige wichtige APIs, die Sie bei Ihrer täglichen Webprogrammierung mit GWT unterstützen.

Sr.Nr.	API & Beschreibung
1	public void setStyleName(java.lang.String style) Diese Methode löscht alle vorhandenen Stile und setzt den Widget-Stil auf die neue CSS-Klasse, die mit style bereitgestellt wird .
2	public void addStyleName(java.lang.String style) Diese Methode fügt dem Widget einen sekundären oder abhängigen Stilnamen hinzu. Ein sekundärer Stilname ist ein zusätzlicher Stilname. Wenn also frühere Stilnamen angewendet wurden, werden diese beibehalten.
3	public void removeStyleName(java.lang.String style) Diese Methode entfernt den angegebenen Stil aus dem Widget und lässt alle anderen mit dem Widget verknüpften.
4	public java.lang.String getStyleName() Diese Methode ruft alle Stilnamen des Objekts als durch Leerzeichen getrennte Liste ab.
5	public void setStylePrimaryName(java.lang.String style) Diese Methode legt den primären Stilnamen des Objekts fest und aktualisiert alle abhängigen Stilnamen.

Definieren wir zum Beispiel zwei neue Stile, die wir auf einen Text anwenden werden -

.gwt-Big-Text { 
   font-size:150%;
}

.gwt-Small-Text { 
   font-size:75%;
}

.gwt-Red-Text { 
   color:red;
}

Jetzt können Sie setStyleName (Style) verwenden , um die Standardeinstellung in eine neue Einstellung zu ändern. Nach Anwendung der folgenden Regel wird die Schriftart eines Textes groß

txtWidget.setStyleName("gwt-Big-Text");

Wir können eine sekundäre CSS-Regel auf dasselbe Widget anwenden, um die Farbe wie folgt zu ändern:

txtWidget.addStyleName("gwt-Red-Text");

Mit der obigen Methode können Sie so viele Stile hinzufügen, wie Sie auf ein Widget anwenden möchten. Wenn Sie den ersten Stil aus dem Schaltflächen-Widget entfernen, bleibt der zweite Stil im Text.

txtWidget.removeStyleName("gwt-Big-Text");

Primäre und sekundäre Stile

Standardmäßig ist der primäre Stilname eines Widgets der Standardstilname für seine Widget-Klasse, z. B. gwt-Button für Button-Widgets. Wenn wir Stilnamen mit der AddStyleName () -Methode hinzufügen und entfernen, werden diese Stile als sekundäre Stile bezeichnet.

Das endgültige Erscheinungsbild eines Widgets wird durch die Summe aller hinzugefügten sekundären Stile sowie seines primären Stils bestimmt. Sie legen den primären Stil eines Widgets mit der Methode setStylePrimaryName (String) fest . Nehmen wir zur Veranschaulichung an, wir haben ein Label-Widget. In unserer CSS-Datei sind folgende Regeln definiert:

.MyText {
   color: blue;
}

.BigText {
   font-size: large;
}

.LoudText {
   font-weight:  bold;
}

Nehmen wir an, wir möchten, dass ein bestimmtes Beschriftungs-Widget immer blauen Text anzeigt, und verwenden in einigen Fällen eine größere, fett gedruckte Schrift, um die Betonung zu erhöhen.

Wir könnten so etwas tun -

// set up our primary style
Label someText = new Label();
someText.setStylePrimaryName("MyText");
...

// later on, to really grab the user's attention
someText.addStyleName("BigText");
someText.addStyleName("LoudText");
...

// after the crisis is over
someText.removeStyleName("BigText");
someText.removeStyleName("LoudText");

Zuordnen von CSS-Dateien

Es gibt mehrere Ansätze zum Zuordnen von CSS-Dateien zu Ihrem Modul. Moderne GWT-Anwendungen verwenden normalerweise eine Kombination aus CssResource und UiBinder. In unseren Beispielen verwenden wir nur den ersten Ansatz.

• Verwenden eines <link> -Tags in der Host-HTML-Seite.

• Verwenden des Elements <stylesheet> in der XML-Datei des Moduls.

• Verwendung einer CssResource enthalten in a ClientBundle.

• Verwenden eines Inline-Elements <ui: style> in a UiBinder Vorlage.

GWT CSS Beispiel

In diesem Beispiel werden Sie durch einfache Schritte geführt, um verschiedene CSS-Regeln auf Ihr GWT-Widgest anzuwenden. Lassen Sie uns die Eclipse-IDE zusammen mit dem GWT-Plug-In installieren und befolgen Sie die folgenden Schritte, um eine GWT-Anwendung zu erstellen:

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

.gwt-Button { 
   font-size: 150%; 
   font-weight: bold;
   width:100px;
   height:100px;
}

.gwt-Big-Text { 
   font-size:150%;
}

.gwt-Small-Text { 
   font-size:75%;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html zwei Tasten aufnehmen.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <div id = "mytext"><h1>Hello, World!</h1></div>
      <div id = "gwtGreenButton"></div>
      <div id = "gwtRedButton"></div>
   </body>
</html>

Lassen Sie uns folgenden Inhalt der Java-Datei haben src/com.tutorialspoint/HelloWorld.java Dadurch werden zwei Schaltflächen in HTML hinzugefügt und ein benutzerdefinierter CSS-Stil angewendet.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
     
   // add button to change font to big when clicked.
   Button Btn1 = new Button("Big Text");
   Btn1.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
         RootPanel.get("mytext").setStyleName("gwt-Big-Text");
      }
   });

   // add button to change font to small when clicked.
   Button Btn2 = new Button("Small Text");
   Btn2.addClickHandler(new ClickHandler() {
      public void onClick(ClickEvent event) {
         RootPanel.get("mytext").setStyleName("gwt-Small-Text");
      }
   });

   RootPanel.get("gwtGreenButton").add(Btn1);
   RootPanel.get("gwtRedButton").add(Btn2);
   }
}

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

Klicken Sie nun auf die beiden angezeigten Schaltflächen und beobachten Sie "Hallo Welt!" Text, dessen Schriftart beim Klicken auf die beiden Schaltflächen ständig geändert wird.

Jede Benutzeroberfläche berücksichtigt die folgenden drei Hauptaspekte:

• UI elements- Dies sind die visuellen Kernelemente, die der Benutzer schließlich sieht und mit denen er interagiert. GWT bietet eine große Liste weit verbreiteter und allgemeiner Elemente, die von einfach bis komplex reichen und die wir in diesem Tutorial behandeln werden.

• Layouts- Sie definieren, wie UI-Elemente auf dem Bildschirm organisiert werden sollen, und geben der GUI (Graphical User Interface) ein endgültiges Erscheinungsbild. Dieser Teil wird im Kapitel Layout behandelt.

• Behavior- Dies sind Ereignisse, die auftreten, wenn der Benutzer mit UI-Elementen interagiert. Dieser Teil wird im Kapitel Ereignisbehandlung behandelt.

GWT-UI-Elemente

Die GWT-Bibliothek bietet Klassen in einer genau definierten Klassenhierarchie, um komplexe webbasierte Benutzeroberflächen zu erstellen. Alle Klassen in dieser Komponentenhierarchie wurden von der abgeleitetUIObject Basisklasse wie unten gezeigt -

Jedes Basic UI-Widget erbt Eigenschaften von der Widget-Klasse, die wiederum Eigenschaften von UIObject erbt. Baum und Menü werden in einem Tutorial zu komplexen Widgets behandelt.

Sr.Nr.	Widget & Beschreibung
1	GWT UIObject-Klasse Dieses Widget enthält Text, der nicht mit einem <div> -Element als HTML interpretiert wird, sodass er mit Blocklayout angezeigt wird.
2	GWT-Widget-Klasse Dieses Widget kann HTML-Text enthalten und zeigt den HTML-Inhalt mithilfe eines <div> -Elements an, sodass er mit Blocklayout angezeigt wird.

Grundlegende Widgets

Im Folgenden finden Sie einige wichtige grundlegende Widgets :

Sr.Nr.	Widget & Beschreibung
1	Etikette Dieses Widget enthält Text, der nicht mit einem <div> -Element als HTML interpretiert wird, sodass er mit Blocklayout angezeigt wird.
2	HTML Dieses Widget kann HTML-Text enthalten und zeigt den HTML-Inhalt mithilfe eines <div> -Elements an, sodass er mit Blocklayout angezeigt wird.
3	Bild Dieses Widget zeigt ein Bild unter einer bestimmten URL an.
4	Anker Dieses Widget repräsentiert ein einfaches <a> -Element.

Mit Formular-Widgets können Benutzer Daten eingeben und können mit der Anwendung interagieren. Jedes Formular-Widget erbt Eigenschaften von der Widget-Klasse, die wiederum Eigenschaften von UIObject- und Wigdet-Klassen erbt.

Sr.Nr.	Widget & Beschreibung
1	GWT UIObject-Klasse Dieses Widget enthält Text, der nicht mit einem <div> -Element als HTML interpretiert wird, sodass er mit Blocklayout angezeigt wird.
2	GWT-Widget-Klasse Dieses Widget kann HTML-Text enthalten und zeigt den HTML-Inhalt mithilfe eines <div> -Elements an, sodass er mit Blocklayout angezeigt wird.

Formular-Widgets

Im Folgenden finden Sie einige wichtige Formular-Widgets :

Sr.Nr.	Widget & Beschreibung
1	Taste Dieses Widget repräsentiert einen Standard-Druckknopf.
2	Druckknopf Dieses Widget repräsentiert einen normalen Druckknopf mit benutzerdefiniertem Design.
3	Umschaltknopf Dieses Widget stellt eine stilvolle Stateful-Schaltfläche dar, mit der der Benutzer zwischen Up- und Down-Status wechseln kann.
4	CheckBox Dieses Widget ist ein Standard-Kontrollkästchen-Widget. Diese Klasse dient auch als Basisklasse für RadioButton.
5	Radio knopf Dieses Widget stellt ein sich gegenseitig ausschließendes Auswahl-Optionsfeld-Widget dar.
6	ListBox Dieses Widget stellt dem Benutzer eine Liste mit Auswahlmöglichkeiten dar, entweder als Listenfeld oder als Dropdown-Liste.
7	SuggestBox Dieses Widget stellt ein Textfeld oder einen Textbereich dar, in dem eine vorkonfigurierte Auswahl angezeigt wird, die den Benutzereingaben entspricht. Jede SuggestBox ist einem einzelnen SuggestOracle zugeordnet. Der SuggestOracle wird verwendet, um eine Reihe von Auswahlen für eine bestimmte Abfragezeichenfolge bereitzustellen.
8	Textfeld Dieses Widget repräsentiert ein einzeiliges Textfeld.
9	PasswordTextBox Dieses Widget stellt ein Textfeld dar, das seine Eingabe visuell maskiert, um ein Abhören zu verhindern.
10	TextArea Dieses Widget stellt ein Textfeld dar, in das mehrere Textzeilen eingegeben werden können.
11	RichTextArea Dieses Widget stellt einen Rich-Text-Editor dar, der komplexe Stile und Formatierungen ermöglicht.
12	Datei-Upload Dieses Widget umschließt das HTML-Element <input type = 'file'>.
13	Versteckt Dieses Widget stellt ein verstecktes Feld in einem HTML-Formular wieder her.

Mit "Komplexen Widgets" können Benutzer die Interaktionsmöglichkeiten mit der Anwendung erweitern. Jedes komplexe Widget erbt Eigenschaften von der Widget-Klasse, die wiederum Eigenschaften von UIObject erbt.

Sr.Nr.	Widget & Beschreibung
1	GWT UIObject-Klasse Dieses Widget enthält Text, der nicht mit einem <div> -Element als HTML interpretiert wird, sodass er mit Blocklayout angezeigt wird.
2	GWT-Widget-Klasse Dieses Widget kann HTML-Text enthalten und zeigt den HTML-Inhalt mithilfe eines <div> -Elements an, sodass er mit Blocklayout angezeigt wird.

Komplexe Widgets

Im Folgenden sind einige wichtige komplexe Widgets aufgeführt:

Sr.Nr.	Widget & Beschreibung
1	Baum Dieses Widget repräsentiert ein standardmäßiges hierarchisches Baum-Widget. Der Baum enthält eine Hierarchie von TreeItems, die der Benutzer öffnen, schließen und auswählen kann.
2	Menüleiste Dieses Widget repräsentiert ein Standard-Menüleisten-Widget. Eine Menüleiste kann eine beliebige Anzahl von Menüelementen enthalten, von denen jedes entweder einen Befehl auslösen oder eine kaskadierte Menüleiste öffnen kann.
3	Datumsauswahl Dieses Widget repräsentiert eine Standard-GWT-Datumsauswahl.
4	CellTree Dieses Widget repräsentiert eine Ansicht eines Baumes. Dieses Widget funktioniert nur im Standardmodus. Daher muss die HTML-Seite, auf der es ausgeführt wird, über eine explizite <! DOCTYPE> -Deklaration verfügen.
5	CellList Dieses Widget repräsentiert eine einspaltige Liste von Zellen.
6	CellTable Dieses Widget stellt eine tabellarische Ansicht dar, die Paging und Spalten unterstützt.
7	CellBrowser Dieses Widget repräsentiert a browsableAnsicht eines Baums, in dem jeweils nur ein Knoten pro Ebene geöffnet sein darf. Dieses Widget funktioniert nur im Standardmodus. Daher muss die HTML-Seite, auf der es ausgeführt wird, über eine explizite <! DOCTYPE> -Deklaration verfügen.

Layoutfenster können andere Widgets enthalten. Diese Bedienfelder steuern die Art und Weise, wie Widgets auf der Benutzeroberfläche angezeigt werden. Jedes Panel-Widget erbt Eigenschaften von der Panel-Klasse, die wiederum Eigenschaften von der Widget-Klasse erbt und die wiederum Eigenschaften von der UIObject-Klasse erbt.

Sr.Nr.	Widget & Beschreibung
1	GWT UIObject-Klasse Dieses Widget enthält Text, der nicht mit einem <div> -Element als HTML interpretiert wird, sodass er mit Blocklayout angezeigt wird.
2	GWT-Widget-Klasse Dieses Widget kann HTML-Text enthalten und zeigt den HTML-Inhalt mithilfe eines <div> -Elements an, sodass er mit Blocklayout angezeigt wird.
3	GWT-Panel-Klasse Dies ist die abstrakte Basisklasse für alle Bedienfelder, bei denen es sich um Widgets handelt, die andere Widgets enthalten können.

Layoutfelder

Im Folgenden finden Sie einige wichtige Layoutfelder -

Sr.Nr.	Widget & Beschreibung
1	FlowPanel Dieses Widget stellt ein Bedienfeld dar, das seine untergeordneten Widgets unter Verwendung des Standardverhaltens des HTML-Layouts formatiert.
2	HorizontalPanel Dieses Widget stellt ein Bedienfeld dar, in dem alle Widgets in einer einzigen horizontalen Spalte angeordnet sind.
3	VerticalPanel Dieses Widget stellt ein Bedienfeld dar, in dem alle Widgets in einer einzigen vertikalen Spalte angeordnet sind.
4	HorizontalSplitPanel Dieses Widget stellt ein Bedienfeld dar, das zwei Widgets in einer einzigen horizontalen Reihe anordnet und es dem Benutzer ermöglicht, den Anteil der Breite, der jedem der beiden Widgets zugeordnet ist, interaktiv zu ändern. In einem HorizontalSplitPanel enthaltene Widgets werden bei Bedarf automatisch mit Bildlaufleisten dekoriert.
5	VerticalSplitPanel Dieses Widget stellt ein A-Bedienfeld dar, das zwei Widgets in einer einzigen vertikalen Spalte anordnet und es dem Benutzer ermöglicht, den Anteil der Höhe, der jedem der beiden Widgets zugeordnet ist, interaktiv zu ändern. In einem VertialSplitPanel enthaltene Widgets werden bei Bedarf automatisch mit Bildlaufleisten dekoriert.
6	FlexTable Dieses Widget stellt eine flexible Tabelle dar, die bei Bedarf Zellen erstellt. Es kann gezackt sein (dh jede Zeile kann eine andere Anzahl von Zellen enthalten) und einzelne Zellen können so eingestellt werden, dass sie mehrere Zeilen oder Spalten umfassen.
7	Gitter Dieses Widget stellt ein rechteckiges Raster dar, das Text, HTML oder ein untergeordnetes Widget in seinen Zellen enthalten kann. Die Größe muss explizit auf die gewünschte Anzahl von Zeilen und Spalten angepasst werden.
8	DeckPanel Bedienfeld, in dem alle untergeordneten Widgets in einem Deck angezeigt werden, in dem jeweils nur eines sichtbar ist. Es wird von TabPanel verwendet.
9	DockPanel Dieses Widget stellt ein Bedienfeld dar, in dem die untergeordneten Widgets an den Außenkanten "angedockt" angeordnet sind und das letzte Widget den verbleibenden Platz in der Mitte einnimmt.
10	HTMLPanel Dieses Widget stellt ein Fenster dar, das HTML enthält und untergeordnete Widgets an identifizierte Elemente in diesem HTML anhängen kann.
11	TabPanel Dieses Widget stellt ein Bedienfeld dar, das eine Reihe von Seiten mit Registerkarten darstellt, von denen jede ein anderes Widget enthält. Die untergeordneten Widgets werden angezeigt, wenn der Benutzer die verschiedenen ihnen zugeordneten Registerkarten auswählt. Die Registerkarten können beliebigen HTML-Code enthalten.
12	Verbund Dieses Widget stellt eine Art Widget dar, das ein anderes Widget umschließen kann und die Methoden des umschlossenen Widgets verbirgt. Beim Hinzufügen zu einem Bedienfeld verhält sich ein Verbund genau so, als ob das Widget, das es umschließt, hinzugefügt worden wäre.
13	SimplePanel Dieses Widget stellt eine Basisklasse für Bedienfelder dar, die nur ein Widget enthalten.
14	ScrollPanel Dieses Widget stellt ein einfaches Bedienfeld dar, das seinen Inhalt in einen scrollbaren Bereich einschließt
15	FocusPanel Dieses Widget stellt ein einfaches Bedienfeld dar, das den Inhalt fokussierbar macht und die Möglichkeit bietet, Maus- und Tastaturereignisse abzufangen.
16	FormPanel Dieses Widget stellt ein Bedienfeld dar, das seinen Inhalt in ein HTML-Element <FORM> einschließt.
17	PopupPanel Dieses Widget stellt ein Panel dar, das dies kann pop upüber andere Widgets. Es überlagert den Clientbereich des Browsers (und alle zuvor erstellten Popups).
18	Dialogbox Dieses Widget stellt eine Form von Popup dar, das oben einen Beschriftungsbereich hat und vom Benutzer gezogen werden kann. Im Gegensatz zu einem PopupPanel legen Aufrufe von PopupPanel.setWidth (String) und PopupPanel.setHeight (String) die Breite und Höhe des Dialogfelds selbst fest, auch wenn noch kein Widget hinzugefügt wurde.

GWT bietet ein Event-Handler-Modell, das Java AWT- oder SWING-Benutzeroberflächen-Frameworks ähnelt.

• Eine Listener-Schnittstelle definiert eine oder mehrere Methoden, die das Widget aufruft, um ein Ereignis anzukündigen. GWT bietet eine Liste von Schnittstellen, die verschiedenen möglichen Ereignissen entsprechen.

• Eine Klasse, die Ereignisse eines bestimmten Typs empfangen möchte, implementiert die zugehörige Handler-Schnittstelle und übergibt dann einen Verweis auf sich selbst an das Widget, um eine Reihe von Ereignissen zu abonnieren.

Zum Beispiel die Button Klasse veröffentlicht click eventsSie müssen also eine Klasse schreiben, um ClickHandler für die Verarbeitung zu implementierenclick Veranstaltung.

Event-Handler-Schnittstellen

Alle GWT-Ereignishandler wurden über die EventHandler- Schnittstelle erweitert, und jeder Handler verfügt nur über eine einzige Methode mit einem einzigen Argument. Dieses Argument ist immer ein Objekt des zugeordneten Ereignistyps. JedereventObjekt verfügt über eine Reihe von Methoden zum Bearbeiten des übergebenen Ereignisobjekts. Zum Beispiel müssen Sie für ein Klickereignis Ihren Handler wie folgt schreiben:

/**
 * create a custom click handler which will call 
 * onClick method when button is clicked.
 */
public class MyClickHandler implements ClickHandler {
   @Override
   public void onClick(ClickEvent event) {
      Window.alert("Hello World!");
   }
}

Jetzt ruft jede Klasse an, die Klickereignisse erhalten möchte addClickHandler() um einen Event-Handler wie folgt zu registrieren:

/**
 * create button and attach click handler
 */
Button button = new Button("Click Me!");
button.addClickHandler(new MyClickHandler());

Jedes Widget, das einen Ereignistyp unterstützt, verfügt über eine Methode der Form HandlerRegistration addFooHandler (FooEreignis) wo Foo ist das eigentliche Ereignis wie Click, Error, KeyPress etc.

Im Folgenden finden Sie eine Liste wichtiger GWT-Ereignishandler und zugehöriger Ereignisse sowie Registrierungsmethoden für Handler.

Sr.Nr.	Ereignisschnittstelle	Ereignismethode & Beschreibung
1	Vor dem Auswahlhandler <I>	void on Before Selection (Before Selection Event<I> event); Wird aufgerufen, wenn BeforeSelectionEvent ausgelöst wird.
2	BlurHandler	void on Blur(Blur Event event); Wird aufgerufen, wenn das Unschärfeereignis ausgelöst wird.
3	ChangeHandler	void on Change(ChangeEvent event); Wird aufgerufen, wenn ein Änderungsereignis ausgelöst wird.
4	ClickHandler	void on Click(ClickEvent event); Wird aufgerufen, wenn ein natives Klickereignis ausgelöst wird.
5	CloseHandler <T>	void on Close(CloseEvent<T> event); Wird aufgerufen, wenn CloseEvent ausgelöst wird.
6	Kontextmenü-Handler	void on Context Menu(Context Menu Event event); Wird aufgerufen, wenn ein natives Kontextmenüereignis ausgelöst wird.
7	Doppelklicken Sie auf Handler	void on Double Click(Double Click Event event); Wird aufgerufen, wenn ein Doppelklickereignis ausgelöst wird.
8	Fehlerbehandlungsroutine	void on Error(Error Event event); Wird aufgerufen, wenn das Fehlerereignis ausgelöst wird.
9	Fokus-Handler	void on Focus(Focus Event event); Wird aufgerufen, wenn das Fokusereignis ausgelöst wird.
10	Form Panel.Submit Complete Handler	void on Submit Complete(Form Panel.Submit Complete Event event); Wird ausgelöst, wenn ein Formular erfolgreich gesendet wurde.
11	FormPanel.SubmitHandler	void on Submit(Form Panel.Submit Event event); Wird ausgelöst, wenn das Formular gesendet wird.
12	Key Down Handler	void on Key Down(Key Down Event event); Wird aufgerufen, wenn KeyDownEvent ausgelöst wird.
13	KeyPressHandler	void on KeyPress(KeyPressEvent event); Wird aufgerufen, wenn KeyPressEvent ausgelöst wird.
14	KeyUpHandler	void on KeyUp(KeyUpEvent event); Wird aufgerufen, wenn KeyUpEvent ausgelöst wird.
15	LoadHandler	void on Load(LoadEvent event); Wird aufgerufen, wenn LoadEvent ausgelöst wird.
16	MouseDownHandler	void on MouseDown(MouseDownEvent event); Wird aufgerufen, wenn MouseDown ausgelöst wird.
17	MouseMoveHandler	void on MouseMove(MouseMoveEvent event); Wird aufgerufen, wenn MouseMoveEvent ausgelöst wird.
18	MouseOutHandler	void on MouseOut(MouseOutEvent event); Wird aufgerufen, wenn MouseOutEvent ausgelöst wird.
19	MouseOverHandler	void on MouseOver(MouseOverEvent event); Wird aufgerufen, wenn MouseOverEvent ausgelöst wird.
20	MouseUpHandler	void on MouseUp(MouseUpEvent event); Wird aufgerufen, wenn MouseUpEvent ausgelöst wird.
21	MouseWheelHandler	void on MouseWheel(MouseWheelEvent event); Wird aufgerufen, wenn MouseWheelEvent ausgelöst wird.
22	ResizeHandler	void on Resize(ResizeEvent event); Wird ausgelöst, wenn die Größe des Widgets geändert wird.
23	ScrollHandler	void on Scroll(ScrollEvent event); Wird aufgerufen, wenn ScrollEvent ausgelöst wird.
24	SelectionHandler <I>	void on Selection(SelectionEvent<I> event); Wird aufgerufen, wenn SelectionEvent ausgelöst wird.
25	ValueChangeHandler <I>	void on ValueChange(ValueChangeEvent<I> event); Wird aufgerufen, wenn ValueChangeEvent ausgelöst wird.
26	Window.ClosingHandler	void on WindowClosing(Window.ClosingEvent event); Wird ausgelöst, kurz bevor das Browserfenster geschlossen wird oder zu einer anderen Site navigiert.
27	Window.ScrollHandler	void on WindowScroll(Window.ScrollEvent event); Wird ausgelöst, wenn das Browserfenster gescrollt wird.

Ereignismethoden

Wie bereits erwähnt, verfügt jeder Handler über eine einzelne Methode mit einem einzelnen Argument, das das Ereignisobjekt enthält, z. B. void onClick (ClickEvent-Ereignis) oder void onKeyDown (KeyDownEvent-Ereignis) . Die Ereignisobjekte wie ClickEvent und KeyDownEvent verfügen über einige gängige Methoden, die unten aufgeführt sind:

Sr.Nr.	Methode & Beschreibung
1	protected void dispatch(ClickHandler handler) Diese Methode sollte nur von HandlerManager aufgerufen werden
2	DomEvent.Type <FooHandler> getAssociatedType() Diese Methode gibt den zur Registrierung verwendeten Typ zurück Foo Veranstaltung.
3	static DomEvent.Type<FooHandler> getType() Diese Methode ruft den Ereignistyp ab, der zugeordnet ist Foo Veranstaltungen.
4	public java.lang.Object getSource() Diese Methode gibt die Quelle zurück, die dieses Ereignis zuletzt ausgelöst hat.
5	protected final boolean isLive() Diese Methode gibt zurück, ob das Ereignis aktiv ist.
6	protected void kill() Diese Methode beendet das Ereignis

Beispiel

Dieses Beispiel führt Sie durch einfache Schritte, um die Verwendung von a zu zeigen Click Veranstaltung und KeyDownEreignisbehandlung in GWT. Führen Sie die folgenden Schritte aus, um die GWT-Anwendung zu aktualisieren, die wir in GWT - Kapitel " Anwendung erstellen" erstellt haben.

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Event Handling Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Lassen Sie uns folgenden Inhalt der Java-Datei haben src/com.tutorialspoint/HelloWorld.java Dies wird die Verwendung der Ereignisbehandlung in GWT demonstrieren.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyDownEvent;
import com.google.gwt.event.dom.client.KeyDownHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      /**
       * create textbox and attach key down handler
       */
      TextBox textBox = new TextBox(); 
      textBox.addKeyDownHandler(new MyKeyDownHandler());

      /*
       * create button and attach click handler
       */
      Button button = new Button("Click Me!");
      button.addClickHandler(new MyClickHandler());

      VerticalPanel panel = new VerticalPanel();
      panel.setSpacing(10);
      panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
      panel.setSize("300", "100");
      panel.add(textBox);
      panel.add(button);

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(panel);
      RootPanel.get("gwtContainer").add(decoratorPanel);
   }

   /** 
    * create a custom click handler which will call 
    * onClick method when button is clicked.
    */
   private class MyClickHandler implements ClickHandler {
      @Override
      public void onClick(ClickEvent event) {
         Window.alert("Hello World!");
      }
   }

   /**
    * create a custom key down handler which will call 
    * onKeyDown method when a key is down in textbox.
    */
   private class MyKeyDownHandler implements KeyDownHandler {
      @Override
      public void onKeyDown(KeyDownEvent event) {
         if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
            Window.alert(((TextBox)event.getSource()).getValue());
         }
      }
   }
}

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

GWT bietet drei Möglichkeiten zum Erstellen benutzerdefinierter Benutzeroberflächenelemente. Es gibt drei allgemeine Strategien zu befolgen -

• Create a widget by extending Composite Class- Dies ist die häufigste und einfachste Möglichkeit, benutzerdefinierte Widgets zu erstellen. Hier können Sie vorhandene Widgets verwenden, um eine zusammengesetzte Ansicht mit benutzerdefinierten Eigenschaften zu erstellen.

• Create a widget using GWT DOM API in JAVA- Auf diese Weise werden GWT-Basis-Widgets erstellt. Trotzdem ist es eine sehr komplizierte Art, ein benutzerdefiniertes Widget zu erstellen, und sollte mit Vorsicht verwendet werden.

• Use JavaScript and wrap it in a widget using JSNI- Dies sollte in der Regel nur als letztes Mittel erfolgen. In Anbetracht der browserübergreifenden Auswirkungen der nativen Methoden wird es sehr kompliziert und auch schwieriger zu debuggen.

Erstellen Sie ein benutzerdefiniertes Widget mit einer zusammengesetzten Klasse

In diesem Beispiel werden Sie durch einfache Schritte geführt, um die Erstellung eines benutzerdefinierten Widgets in GWT zu zeigen. Führen Sie die folgenden Schritte aus, um die GWT-Anwendung zu aktualisieren, die wir im Kapitel GWT - Grundlegende Widgets erstellt haben.

Hier erstellen wir ein benutzerdefiniertes Widget, indem wir die Composite-Klasse erweitern. Dies ist der einfachste Weg, um benutzerdefinierte Widgets zu erstellen.

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Custom Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Lassen Sie uns folgenden Inhalt der Java-Datei haben src/com.tutorialspoint/HelloWorld.java Dies zeigt die Erstellung eines benutzerdefinierten Widgets.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;

public class HelloWorld implements EntryPoint {

   /**
    * A composite of a TextBox and a CheckBox that optionally enables it.
    */
   private static class OptionalTextBox extends Composite implements
   ClickHandler {

      private TextBox textBox = new TextBox();
      private CheckBox checkBox = new CheckBox();
      private boolean enabled = true;

      public boolean isEnabled() {
         return enabled;
      }

      public void setEnabled(boolean enabled) {
         this.enabled = enabled;
      }

      /**
       * Style this widget using .optionalTextWidget CSS class.<br/>
       * Style textbox using .optionalTextBox CSS class.<br/>
       * Style checkbox using .optionalCheckBox CSS class.<br/>
       * Constructs an OptionalTextBox with the given caption 
       * on the check.
       * @param caption the caption to be displayed with the check box
       */
      public OptionalTextBox(String caption) {
         // place the check above the text box using a vertical panel.
         HorizontalPanel panel = new HorizontalPanel();
         // panel.setBorderWidth(1);
         panel.setSpacing(10);
         panel.add(checkBox);
         panel.add(textBox);

         // all composites must call initWidget() in their constructors.
         initWidget(panel);
         
         //set style name for entire widget
         setStyleName("optionalTextWidget");
         
         //set style name for text box
         textBox.setStyleName("optionalTextBox");
         
         //set style name for check box
         checkBox.setStyleName("optionalCheckBox");
         textBox.setWidth("200");
         
         // Set the check box's caption, and check it by default.
         checkBox.setText(caption);
         checkBox.setValue(enabled);
         checkBox.addClickHandler(this);
         enableTextBox(enabled,checkBox.getValue());
      }

      public void onClick(ClickEvent event) {
         if (event.getSource() == checkBox) {
            // When the check box is clicked,
            //update the text box's enabled state.
            enableTextBox(enabled,checkBox.getValue());
         }
      }

      private void enableTextBox(boolean enable,boolean isChecked){
         enable = (enable && isChecked) || (!enable && !isChecked);
         textBox.setStyleDependentName("disabled", !enable);
         textBox.setEnabled(enable);	  
      }
   }

   public void onModuleLoad() {
      // Create an optional text box and add it to the root panel.
      OptionalTextBox otb = new OptionalTextBox(
         "Want to explain the solution?");
      otb.setEnabled(true);
      RootPanel.get().add(otb);
   }    
}

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

You can notice following points

• Das Erstellen eines benutzerdefinierten Widgets durch Erweitern des zusammengesetzten Widgets ist ziemlich einfach.

• Wir haben ein Widget mit den in GWT integrierten Widgets TextBox und CheckBox erstellt und dabei das Konzept der Wiederverwendbarkeit verwendet.

• TextBox wird je nach Status des Kontrollkästchens deaktiviert / aktiviert. Wir haben eine API zum Aktivieren / Deaktivieren des Steuerelements bereitgestellt.

• Wir haben interne Widgets-Stile über dokumentierte CSS-Stile verfügbar gemacht.

Einführung

Der UiBinder ist ein Framework zur Trennung von Funktionalität und Ansicht der Benutzeroberfläche.

• Mit dem UiBinder-Framework können Entwickler GWT-Anwendungen als HTML-Seiten mit GWT-Widgets erstellen.

• Das UiBinder-Framework erleichtert die Zusammenarbeit mit UI-Designern, die mit XML, HTML und CSS besser vertraut sind als Java-Quellcode

• Der UIBinder bietet eine deklarative Möglichkeit zum Definieren der Benutzeroberfläche.

• Der UIBinder trennt die Programmierlogik von der Benutzeroberfläche.

• Der UIBinder ähnelt dem, was JSP für Servlets ist.

UiBinder-Workflow

Schritt 1 - Erstellen Sie eine XML-Datei mit einer UI-Deklaration

Erstellen Sie eine XML / HTML-basierte Deklarationsdatei für die Benutzeroberfläche. Wir haben eine erstelltLogin.ui.xml Datei in unserem Beispiel.

<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder'
   xmlns:gwt = 'urn:import:com.google.gwt.user.client.ui' 
   xmlns:res = 'urn:with:com.tutorialspoint.client.LoginResources'>
   <ui:with type = "com.tutorialspoint.client.LoginResources" field = "res">
   </ui:with>
   <gwt:HTMLPanel>
   ...  
   </gwt:HTMLPanel>
</ui:UiBinder>

Schritt 2 - Verwenden Sie das Feld ui: für die spätere Bindung

Verwenden Sie das Attribut ui: field im XML / HTML-Element, um das UI-Feld in XML mit dem UI-Feld in der JAVA-Datei für die spätere Bindung zu verknüpfen.

<gwt:Label ui:field = "completionLabel1" />
<gwt:Label ui:field = "completionLabel2" />

Schritt 3 - Erstellen Sie ein Java-Gegenstück zu UI-XML

Erstellen Sie ein Java-basiertes Gegenstück zum XML-basierten Layout, indem Sie das Composite-Widget erweitern. Wir haben eine erstelltLogin.java Datei in unserem Beispiel.

package com.tutorialspoint.client;
   ...
public class Login extends Composite {
   ...
}

Schritt 4 - Binden Sie Java UI-Felder mit UiField-Annotation

Verwenden Sie die Annotation @UiField in Login.java um Gegenstückklassenmitglieder zu bestimmen, die an XML-basierte Felder in gebunden werden sollen Login.ui.xml

public class Login extends Composite {
   ...
   @UiField
   Label completionLabel1;

   @UiField
   Label completionLabel2;  
   ...
}

Schritt 5 - Binden Sie die Java-Benutzeroberfläche mit der XML-Benutzeroberfläche mit der UiTemplate-Annotation

Weisen Sie GWT an, eine Java-basierte Komponente zu binden Login.java und XML-basiertes Layout Login.ui.xml Verwenden der Annotation @UiTemplate

public class Login extends Composite {

   private static LoginUiBinder uiBinder = GWT.create(LoginUiBinder.class);

   /*
    * @UiTemplate is not mandatory but allows multiple XML templates
    * to be used for the same widget. 
    * Default file loaded will be <class-name>.ui.xml
    */
   
   @UiTemplate("Login.ui.xml")
   interface LoginUiBinder extends UiBinder<Widget, Login> {
   }
   ...
}

Schritt 6 - CSS-Datei erstellen

Erstellen Sie eine externe CSS-DateiLogin.css und Java-basierte Ressource LoginResources.java Datei, die CSS-Stilen entspricht

.blackText {
   font-family: Arial, Sans-serif;
   color: #000000;
   font-size: 11px;
   text-align: left;
}
...

Schritt 7 - Java-basierte Ressourcendatei für CSS-Datei erstellen

package com.tutorialspoint.client;
...
public interface LoginResources extends ClientBundle {
   public interface MyCss extends CssResource {
      String blackText();

      ...
   }

   @Source("Login.css")
   MyCss style();
}

Schritt 8 - Fügen Sie eine CSS-Ressource in die Java UI Code-Datei ein.

Hängen Sie eine externe CSS-Datei anLogin.css Verwenden von Contructor einer Java-basierten Widget-Klasse Login.java

public Login() {
   this.res = GWT.create(LoginResources.class);
   res.style().ensureInjected();
   initWidget(uiBinder.createAndBindUi(this));
}

UIBinder Vollständiges Beispiel

Dieses Beispiel führt Sie durch einfache Schritte, um die Verwendung eines UIBinders in GWT zu zeigen. Führen Sie die folgenden Schritte aus, um die GWT-Anwendung zu aktualisieren, die wir in GWT - Kapitel " Anwendung erstellen" erstellt haben.

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <!-- Inherit the UiBinder module.                               -->
   <inherits name = "com.google.gwt.uibinder.UiBinder"/>
   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
  
   <!-- Specify the paths for translatable code                    -->
   <source path ='client'/>
   <source path = 'shared'/>

</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>UiBinder Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Erstellen Sie nun eine neue UiBinder-Vorlage und Eigentümerklasse (Datei → Neu → UiBinder).

Wählen Sie das Client-Paket für das Projekt aus und nennen Sie es Login. Belassen Sie alle anderen Standardeinstellungen. Klicken Sie auf die Schaltfläche Fertig stellen. Das Plugin erstellt eine neue UiBinder-Vorlage und Eigentümerklasse.

Erstellen Sie nun die Datei Login.css in der src/com.tutorialspoint/client Verpacken und platzieren Sie den folgenden Inhalt darin

.blackText {
   font-family: Arial, Sans-serif;
   color: #000000;
   font-size: 11px;
   text-align: left;
}

.redText {
   font-family: Arial, Sans-serif;
   color: #ff0000;
   font-size: 11px;
   text-align: left;
}

.loginButton {
   border: 1px solid #3399DD;
   color: #FFFFFF;
   background: #555555;
   font-size: 11px;
   font-weight: bold;
   margin: 0 5px 0 0;
   padding: 4px 10px 5px;
   text-shadow: 0 -1px 0 #3399DD;
}

.box {
   border: 1px solid #AACCEE;
   display: block;
   font-size: 12px;
   margin: 0 0 5px;
   padding: 3px;
   width: 203px;
}

.background {
   background-color: #999999;
   border: 1px none transparent;
   color: #000000;
   font-size: 11px;
   margin-left: -8px;
   margin-top: 5px;
   padding: 6px;
}

Erstellen Sie nun die Datei LoginResources.java in der src/com.tutorialspoint/client Verpacken und platzieren Sie den folgenden Inhalt darin

package com.tutorialspoint.client;

import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.CssResource;

public interface LoginResources extends ClientBundle {
   /**
    * Sample CssResource.
    */
   public interface MyCss extends CssResource {
      String blackText();

      String redText();

      String loginButton();

      String box();

      String background();
   }

   @Source("Login.css")
   MyCss style();
}

Ersetzen Sie den Inhalt von Login.ui.xml in src/com.tutorialspoint/client Paket mit dem folgenden

<ui:UiBinder xmlns:ui = 'urn:ui:com.google.gwt.uibinder'
   xmlns:gwt = 'urn:import:com.google.gwt.user.client.ui' 
   xmlns:res = 'urn:with:com.tutorialspoint.client.LoginResources'>
   
   <ui:with type = "com.tutorialspoint.client.LoginResources" field = "res">
   </ui:with>
   
   <gwt:HTMLPanel>
      <div align = "center">
         
         <gwt:VerticalPanel res:styleName = "style.background">
            <gwt:Label text = "Login" res:styleName = "style.blackText" />
            <gwt:TextBox ui:field="loginBox" res:styleName = "style.box" />
            <gwt:Label text = "Password" res:styleName = "style.blackText" />
            <gwt:PasswordTextBox ui:field = "passwordBox" res:styleName = "style.box" />
            
            <gwt:HorizontalPanel verticalAlignment = "middle">
               <gwt:Button ui:field = "buttonSubmit" text="Submit"
                  res:styleName = "style.loginButton" />
               <gwt:CheckBox ui:field = "myCheckBox" />
               <gwt:Label ui:field = "myLabel" text = "Remember me"
                  res:styleName = "style.blackText" />
            </gwt:HorizontalPanel>
            
            <gwt:Label ui:field = "completionLabel1" res:styleName = "style.blackText" />
            <gwt:Label ui:field = "completionLabel2" res:styleName = "style.blackText" />
         </gwt:VerticalPanel>
         
      </div>
   </gwt:HTMLPanel>
   
</ui:UiBinder>

Ersetzen Sie den Inhalt von Login.java in src/com.tutorialspoint/client Paket mit dem folgenden

package com.tutorialspoint.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.uibinder.client.UiTemplate;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.Widget;

public class Login extends Composite {

   private static LoginUiBinder uiBinder = GWT.create(LoginUiBinder.class);

   /*
    * @UiTemplate is not mandatory but allows multiple XML templates
    * to be used for the same widget. 
    * Default file loaded will be <class-name>.ui.xml
    */
   @UiTemplate("Login.ui.xml")
   interface LoginUiBinder extends UiBinder<Widget, Login> {
   }

   @UiField(provided = true)
   final LoginResources res;

   public Login() {
      this.res = GWT.create(LoginResources.class);
      res.style().ensureInjected();
      initWidget(uiBinder.createAndBindUi(this));
   }

   @UiField
   TextBox loginBox;

   @UiField
   TextBox passwordBox;

   @UiField
   Label completionLabel1;

   @UiField
   Label completionLabel2;

   private Boolean tooShort = false;

   /*
    * Method name is not relevant, the binding is done according to the class
    * of the parameter.
    */
   @UiHandler("buttonSubmit")
   void doClickSubmit(ClickEvent event) {
      if (!tooShort) {
         Window.alert("Login Successful!");
      } else {
         Window.alert("Login or Password is too short!");
      }
   }

   @UiHandler("loginBox")
   void handleLoginChange(ValueChangeEvent<String> event) {
      if (event.getValue().length() < 6) {
         completionLabel1.setText("Login too short (Size must be > 6)");
         tooShort = true;
      } else {
         tooShort = false;
         completionLabel1.setText("");
      }
   }

   @UiHandler("passwordBox")
   void handlePasswordChange(ValueChangeEvent<String> event) {
      if (event.getValue().length() < 6) {
         tooShort = true;
         completionLabel2.setText("Password too short (Size must be > 6)");
      } else {
         tooShort = false;
         completionLabel2.setText("");
      }
   }
}

Lassen Sie uns folgenden Inhalt der Java-Datei haben src/com.tutorialspoint/HelloWorld.java Dies wird die Verwendung von UiBinder demonstrieren.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      RootPanel.get().add(new Login());   
   }    
}

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

Eine GWT-basierte Anwendung besteht im Allgemeinen aus einem clientseitigen Modul und einem serverseitigen Modul. Clientseitiger Code wird im Browser und serverseitiger Code im Webserver ausgeführt. Der clientseitige Code muss eine HTTP-Anforderung über das Netzwerk senden, um auf serverseitige Daten zugreifen zu können.

RPC, Remote Procedure Call ist das von GWT verwendete Mechansim, mit dem Clientcode die serverseitigen Methoden direkt ausführen kann.

• GWT RPC basiert auf Servlets.

• GWT RPC ist asynchron und der Client wird während der Kommunikation niemals blockiert.

• Mit GWT RPC können Java-Objekte direkt zwischen dem Client und dem Server gesendet werden (die vom GWT-Framework automatisch serialisiert werden).

• Das serverseitige Servlet wird als bezeichnet service.

• Ein Remoteprozeduraufruf, der Methoden von serverseitigen Servlets aus clientseitigem Code aufruft, wird als bezeichnet invoking a service.

GWT RPC-Komponenten

Im Folgenden sind die drei Komponenten aufgeführt, die im GWT-RPC-Kommunikationsmechanismus verwendet werden

• Ein Remote-Dienst (serverseitiges Servlet), der auf dem Server ausgeführt wird.
• Client-Code zum Aufrufen dieses Dienstes.
• Java-Datenobjekte, die zwischen Client und Server übertragen werden.

GWT-Client und -Server serialisieren und deserialisieren Daten automatisch, sodass Entwickler keine Objekte serialisieren / deserialisieren müssen und Datenobjekte über HTTP übertragen werden können.

Das folgende Diagramm zeigt die RPC-Architektur.

Um RPC verwenden zu können, müssen wir die GWT-Konventionen befolgen.

RPC-Kommunikationsworkflow

Schritt 1 - Erstellen Sie eine serialisierbare Modellklasse

Definieren Sie auf der Clientseite ein Java-Modellobjekt, das serialisierbar sein soll.

public class Message implements Serializable {
   ...
   private String message;
   public Message(){};

   public void setMessage(String message) {
      this.message = message;
   }
   ...
}

Schritt 2 - Erstellen Sie eine Serviceschnittstelle

Definieren Sie eine Schnittstelle für den Dienst auf der Clientseite, die den RemoteService erweitert und alle Dienstmethoden auflistet.

Verwenden Sie die Annotation @RemoteServiceRelativePath, um den Dienst mit einem Standardpfad des Remote-Servlets relativ zur Modul-Basis-URL zuzuordnen.

@RemoteServiceRelativePath("message")
public interface MessageService extends RemoteService {
   Message getMessage(String input);
}

Schritt 3 - Erstellen Sie eine Async-Dienstschnittstelle

Definieren Sie eine asynchrone Schnittstelle zum Dienst auf der Clientseite (am selben Speicherort wie der oben erwähnte Dienst), die im GWT-Clientcode verwendet wird.

public interface MessageServiceAsync {
   void getMessage(String input, AsyncCallback<Message> callback);
}

Schritt 4 - Erstellen Sie eine Service Implementation Servlet-Klasse

Implementieren Sie die Schnittstelle auf der Serverseite, und diese Klasse sollte die RemoteServiceServlet-Klasse erweitern.

public class MessageServiceImpl extends RemoteServiceServlet
   implements MessageService{
   ...
   public Message getMessage(String input) {
      String messageString = "Hello " + input + "!";
      Message message = new Message();
      message.setMessage(messageString);
      return message;
   }
}

Schritt 5 - Aktualisieren Sie Web.xml, um die Servlet-Deklaration einzuschließen

Bearbeiten Sie den Deployment-Deskriptor für Webanwendungen (web.xml) so, dass er die MessageServiceImpl-Servlet-Deklaration enthält.

<web-app>
   ...
   <servlet>
      <servlet-name>messageServiceImpl</servlet-name>
      <servlet-class>com.tutorialspoint.server.MessageServiceImpl
      </servlet-class>
   </servlet>
   
   <servlet-mapping>
      <servlet-name>messageServiceImpl</servlet-name>
      <url-pattern>/helloworld/message</url-pattern>
   </servlet-mapping>
</web-app>

Schritt 6 - Führen Sie den Remoteprozeduraufruf im Anwendungscode durch

Erstellen Sie die Service-Proxy-Klasse.

MessageServiceAsync messageService = GWT.create(MessageService.class);

Erstellen Sie den AsyncCallback-Handler, um den RPC-Rückruf zu verarbeiten, bei dem der Server die Nachricht an den Client zurückgibt

class MessageCallBack implements AsyncCallback<Message> {

   @Override
   public void onFailure(Throwable caught) {
      Window.alert("Unable to obtain server response: "
      + caught.getMessage());	
   }

   @Override
   public void onSuccess(Message result) {
      Window.alert(result.getMessage()); 
   }	   
}

Rufen Sie den Remote-Dienst auf, wenn der Benutzer mit der Benutzeroberfläche interagiert

public class HelloWorld implements EntryPoint {
   ... 
   public void onModuleLoad() {
   ...
      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            messageService.getMessage(txtName.getValue(), 
            new MessageCallBack());
         }
      });
   ...
   }
}

Beispiel für die vollständige RPC-Kommunikation

Dieses Beispiel führt Sie durch einfache Schritte, um ein Beispiel für eine RPC-Kommunikation in GWT zu zeigen. Führen Sie die folgenden Schritte aus, um die GWT-Anwendung zu aktualisieren, die wir in GWT - Kapitel " Anwendung erstellen" erstellt haben.

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <!-- Inherit the UiBinder module.                               -->
   <inherits name = "com.google.gwt.uibinder.UiBinder"/>
   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
  
   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>RPC Communication Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Erstellen Sie nun die Datei Message.java in der src/com.tutorialspoint/client Verpacken und platzieren Sie den folgenden Inhalt darin

package com.tutorialspoint.client;

import java.io.Serializable;

public class Message implements Serializable {
 
   private static final long serialVersionUID = 1L;
   private String message;
   public Message(){};

   public void setMessage(String message) {
      this.message = message;
   }

   public String getMessage() {
      return message;
   }
}

Erstellen Sie nun die Datei MessageService.java in der src/com.tutorialspoint/client Verpacken und platzieren Sie den folgenden Inhalt darin

package com.tutorialspoint.client;

import com.google.gwt.user.client.rpc.RemoteService;
import com.google.gwt.user.client.rpc.RemoteServiceRelativePath;

@RemoteServiceRelativePath("message")
public interface MessageService extends RemoteService {
   Message getMessage(String input);
}

Erstellen Sie nun die Datei MessageServiceAsync.java in der src/com.tutorialspoint/client Verpacken und platzieren Sie den folgenden Inhalt darin

package com.tutorialspoint.client;

import com.google.gwt.user.client.rpc.AsyncCallback;

public interface MessageServiceAsync {
   void getMessage(String input, AsyncCallback<Message> callback);
}

Erstellen Sie nun die Datei MessageServiceImpl.java in der src/com.tutorialspoint/server Verpacken und platzieren Sie den folgenden Inhalt darin

package com.tutorialspoint.server;

import com.google.gwt.user.server.rpc.RemoteServiceServlet;
import com.tutorialspoint.client.Message;
import com.tutorialspoint.client.MessageService;

public class MessageServiceImpl extends RemoteServiceServlet 
   implements MessageService{

   private static final long serialVersionUID = 1L;

   public Message getMessage(String input) {
      String messageString = "Hello " + input + "!";
      Message message = new Message();
      message.setMessage(messageString);
      return message;
   }   
}

Aktualisieren Sie den Inhalt des geänderten Deskriptors für die Bereitstellung von Webanwendungen war/WEB-INF/web.xml um die MessageServiceImpl-Servlet-Deklaration einzuschließen.

<?xml version = "1.0" encoding = "UTF-8"?>
<!DOCTYPE web-app
   PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
   "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>
   <!-- Default page to serve -->
   <welcome-file-list>
      <welcome-file>HelloWorld.html</welcome-file>
   </welcome-file-list>
   
   <servlet>
      <servlet-name>messageServiceImpl</servlet-name>
      <servlet-class>com.tutorialspoint.server.MessageServiceImpl
      </servlet-class>
   </servlet>

   <servlet-mapping>
      <servlet-name>messageServiceImpl</servlet-name>
      <url-pattern>/helloworld/message</url-pattern>
   </servlet-mapping>
</web-app>

Ersetzen Sie den Inhalt von HelloWorld.java in src/com.tutorialspoint/client Paket mit dem folgenden

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
	
   private MessageServiceAsync messageService = 
   GWT.create(MessageService.class);

   private class MessageCallBack implements AsyncCallback<Message> {
      @Override
      public void onFailure(Throwable caught) {
         /* server side error occured */
         Window.alert("Unable to obtain server response: " + caught.getMessage());	
      }
      @Override
      public void onSuccess(Message result) {
          /* server returned result, show user the message */
         Window.alert(result.getMessage());
      }	   
   }

   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               /* make remote call to server to get the message */
               messageService.getMessage(txtName.getValue(), 
               new MessageCallBack());
            }				
         }
      });
      Label lblName = new Label("Enter your name: ");

      Button buttonMessage = new Button("Click Me!");

      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            /* make remote call to server to get the message */
            messageService.getMessage(txtName.getValue(), 
            new MessageCallBack());
         }
      });

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);
      hPanel.setCellWidth(lblName, "130");

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);

      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }    
}

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

GWT bietet hervorragende Unterstützung für das automatisierte Testen von clientseitigem Code mithilfe des JUnit-Testframeworks. In diesem Artikel werden wir die Integration von GWT und JUNIT demonstrieren.

Laden Sie das Junit-Archiv herunter

JUnit Offizielle Seite - https://www.junit.org

Herunterladen Junit-4.10.jar

Betriebssystem	Archivname
Windows	junit4.10.jar
Linux	junit4.10.jar
Mac	junit4.10.jar

Speichern Sie die heruntergeladene JAR-Datei an einem Ort auf Ihrem Computer. Wir haben es bei gespeichertC:/ > JUNIT

Suchen Sie den GWT-Installationsordner

Betriebssystem	GWT-Installationsordner
Windows	C: \ GWT \ gwt-2.1.0
Linux	/usr/local/GWT/gwt-2.1.0
Mac	/Library/GWT/gwt-2.1.0

GWTTestCase-Klasse

GWT bietet GWTTestCaseBasisklasse, die JUnit-Integration bietet. Durch Ausführen einer kompilierten Klasse, die GWTTestCase unter JUnit erweitert, wird der HtmlUnit-Browser gestartet, der dazu dient, Ihr Anwendungsverhalten während der Testausführung zu emulieren.

GWTTestCase ist eine abgeleitete Klasse von JUnits TestCase und kann mit JUnit TestRunner ausgeführt werden.

Verwenden von webAppCreator

GWT bietet ein spezielles Befehlszeilenprogramm webAppCreator Dies kann einen Starter-Testfall für uns generieren sowie Ameisenziele und Eclipse-Startkonfigurationen zum Testen sowohl im Entwicklungsmodus als auch im Produktionsmodus.

Öffnen Sie die Eingabeaufforderung und gehen Sie zu C:\ > GWT_WORKSPACE > Hier möchten Sie ein neues Projekt mit Testunterstützung erstellen. Führen Sie den folgenden Befehl aus

C:\GWT_WORKSPACE>C:\GWT\gwt-2.1.0\webAppCreator 
   -out HelloWorld 
   -junit C:\JUNIT\junit-4.10.jar 
   com.tutorialspoint.HelloWorld

Bemerkenswerte Punkte

• Wir führen das Befehlszeilenprogramm webAppCreator aus.
• HelloWorld ist der Name des zu erstellenden Projekts
• Die Option -junit weist webAppCreator an, dem Projekt den Junit-Support hinzuzufügen
• com.tutorialspoint.HelloWorld ist der Name des Moduls

Überprüfen Sie die Ausgabe.

Created directory HelloWorld\src
Created directory HelloWorld\war
Created directory HelloWorld\war\WEB-INF
Created directory HelloWorld\war\WEB-INF\lib
Created directory HelloWorld\src\com\tutorialspoint
Created directory HelloWorld\src\com\tutorialspoint\client
Created directory HelloWorld\src\com\tutorialspoint\server
Created directory HelloWorld\src\com\tutorialspoint\shared
Created directory HelloWorld\test\com\tutorialspoint
Created directory HelloWorld\test\com\tutorialspoint\client
Created file HelloWorld\src\com\tutorialspoint\HelloWorld.gwt.xml
Created file HelloWorld\war\HelloWorld.html
Created file HelloWorld\war\HelloWorld.css
Created file HelloWorld\war\WEB-INF\web.xml
Created file HelloWorld\src\com\tutorialspoint\client\HelloWorld.java
Created file 
HelloWorld\src\com\tutorialspoint\client\GreetingService.java
Created file 
HelloWorld\src\com\tutorialspoint\client\GreetingServiceAsync.java
Created file 
HelloWorld\src\com\tutorialspoint\server\GreetingServiceImpl.java
Created file HelloWorld\src\com\tutorialspoint\shared\FieldVerifier.java
Created file HelloWorld\build.xml
Created file HelloWorld\README.txt
Created file HelloWorld\test\com\tutorialspoint\HelloWorldJUnit.gwt.xml
Created file HelloWorld\test\com\tutorialspoint\client\HelloWorldTest.java
Created file HelloWorld\.project
Created file HelloWorld\.classpath
Created file HelloWorld\HelloWorld.launch
Created file HelloWorld\HelloWorldTest-dev.launch
Created file HelloWorld\HelloWorldTest-prod.launch

Grundlegendes zur Testklasse: HelloWorldTest.java

package com.tutorialspoint.client;

import com.tutorialspoint.shared.FieldVerifier;
import com.google.gwt.core.client.GWT;
import com.google.gwt.junit.client.GWTTestCase;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;

/**
 * GWT JUnit tests must extend GWTTestCase.
 */
public class HelloWorldTest extends GWTTestCase {

   /**
    * must refer to a valid module that sources this class.
    */
   public String getModuleName() {
      return "com.tutorialspoint.HelloWorldJUnit";
   }

   /**
    * tests the FieldVerifier.
    */
   public void testFieldVerifier() {
      assertFalse(FieldVerifier.isValidName(null));
      assertFalse(FieldVerifier.isValidName(""));
      assertFalse(FieldVerifier.isValidName("a"));
      assertFalse(FieldVerifier.isValidName("ab"));
      assertFalse(FieldVerifier.isValidName("abc"));
      assertTrue(FieldVerifier.isValidName("abcd"));
   }

   /**
    * this test will send a request to the server using the greetServer
    *  method in GreetingService and verify the response.
    */
   public void testGreetingService() {
      /* create the service that we will test. */
      GreetingServiceAsync greetingService = 
      GWT.create(GreetingService.class);
      ServiceDefTarget target = (ServiceDefTarget) greetingService;
      target.setServiceEntryPoint(GWT.getModuleBaseURL() 
      + "helloworld/greet");

      /* since RPC calls are asynchronous, we will need to wait 
       for a response after this test method returns. This line 
       tells the test runner to wait up to 10 seconds 
       before timing out. */
      delayTestFinish(10000);

      /* send a request to the server. */
      greetingService.greetServer("GWT User", 
         new AsyncCallback<String>() {
         public void onFailure(Throwable caught) {
            /* The request resulted in an unexpected error. */
            fail("Request failure: " + caught.getMessage());
         }

         public void onSuccess(String result) {
            /* verify that the response is correct. */
            assertTrue(result.startsWith("Hello, GWT User!"));

            /* now that we have received a response, we need to 
             tell the test runner that the test is complete. 
             You must call finishTest() after an asynchronous test 
             finishes successfully, or the test will time out.*/
            finishTest();
         }
      });
   }
}

Bemerkenswerte Punkte

Sr.Nr.	Hinweis
1	Die HelloWorldTest-Klasse wurde im Paket com.tutorialspoint.client im Verzeichnis HelloWorld / test generiert.
2	Die HelloWorldTest-Klasse enthält Unit-Testfälle für HelloWorld.
3	Die HelloWorldTest-Klasse erweitert die GWTTestCase-Klasse im Paket com.google.gwt.junit.client.
4	Die HelloWorldTest-Klasse verfügt über eine abstrakte Methode (getModuleName), die den Namen des GWT-Moduls zurückgeben muss. Für HelloWorld ist dies com.tutorialspoint.HelloWorldJUnit.
5	Die HelloWorldTest-Klasse wird mit zwei Beispieltestfällen testFieldVerifier, testSimple, generiert. Wir haben testGreetingService hinzugefügt.
6	Diese Methoden verwenden eine der vielen assert * -Funktionen, die sie von der JUnit Assert-Klasse erben, die ein Vorfahr von GWTTestCase ist.
7	Die Funktion assertTrue (boolean) bestätigt, dass das übergebene boolesche Argument als wahr ausgewertet wird. Wenn nicht, schlägt der Test fehl, wenn er in JUnit ausgeführt wird.

Beispiel für die vollständige Integration von GWT - JUnit

Dieses Beispiel führt Sie durch einfache Schritte, um ein Beispiel für die JUnit-Integration in GWT zu zeigen.

Führen Sie die folgenden Schritte aus, um die oben erstellte GWT-Anwendung zu aktualisieren:

Schritt	Beschreibung
1	Importieren Sie das Projekt mit dem Namen HelloWorld in Eclipse mithilfe des Assistenten zum Importieren vorhandener Projekte (Datei → Importieren → Allgemein → Vorhandene Projekte in den Arbeitsbereich).
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt die Projektstruktur in Eclipse.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <!-- Inherit the UiBinder module.                               -->
   <inherits name = "com.google.gwt.uibinder.UiBinder"/>
   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
  
   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>JUnit Integration Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Ersetzen Sie den Inhalt von HelloWorld.java in src/com.tutorialspoint/client Paket mit dem folgenden

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;

import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
	
   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               Window.alert(getGreeting(txtName.getValue()));
            }				
         }
      });
      Label lblName = new Label("Enter your name: ");

      Button buttonMessage = new Button("Click Me!");

      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            Window.alert(getGreeting(txtName.getValue()));
         }
      });

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);
      hPanel.setCellWidth(lblName, "130");

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);

      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }  
   
   public String getGreeting(String name){
      return "Hello "+name+"!";
   }
}

Ersetzen Sie den Inhalt von HelloWorldTest.java in test/com.tutorialspoint/client Paket mit dem folgenden

package com.tutorialspoint.client;

import com.tutorialspoint.shared.FieldVerifier;
import com.google.gwt.core.client.GWT;
import com.google.gwt.junit.client.GWTTestCase;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;

/**
 * GWT JUnit tests must extend GWTTestCase.
 */
public class HelloWorldTest extends GWTTestCase {

   /**
    * must refer to a valid module that sources this class.
    */
   public String getModuleName() {
      return "com.tutorialspoint.HelloWorldJUnit";
   }

   /**
    * tests the FieldVerifier.
    */
   public void testFieldVerifier() {
      assertFalse(FieldVerifier.isValidName(null));
      assertFalse(FieldVerifier.isValidName(""));
      assertFalse(FieldVerifier.isValidName("a"));
      assertFalse(FieldVerifier.isValidName("ab"));
      assertFalse(FieldVerifier.isValidName("abc"));
      assertTrue(FieldVerifier.isValidName("abcd"));
   }

   /**
      * this test will send a request to the server using the greetServer
      *  method in GreetingService and verify the response.
   */
   public void testGreetingService() {
      /* create the service that we will test. */
      GreetingServiceAsync greetingService = 
      GWT.create(GreetingService.class);
      ServiceDefTarget target = (ServiceDefTarget) greetingService;
      target.setServiceEntryPoint(GWT.getModuleBaseURL() 
      + "helloworld/greet");

      /* since RPC calls are asynchronous, we will need to wait 
       for a response after this test method returns. This line 
       tells the test runner to wait up to 10 seconds 
       before timing out. */
      delayTestFinish(10000);

      /* send a request to the server. */
      greetingService.greetServer("GWT User", 
         new AsyncCallback<String>() {
         public void onFailure(Throwable caught) {
            /* The request resulted in an unexpected error. */
            fail("Request failure: " + caught.getMessage());
         }

         public void onSuccess(String result) {
            /* verify that the response is correct. */
            assertTrue(result.startsWith("Hello, GWT User!"));

            /* now that we have received a response, we need to 
             tell the test runner that the test is complete. 
             You must call finishTest() after an asynchronous test 
             finishes successfully, or the test will time out.*/
            finishTest();
         }
      });
	
      /**
         * tests the getGreeting method.
      */
      public void testGetGreeting() {
         HelloWorld helloWorld = new HelloWorld();
         String name = "Robert";
         String expectedGreeting = "Hello "+name+"!";
         assertEquals(expectedGreeting,helloWorld.getGreeting(name));
      }
   }
}

Führen Sie Testfälle in Eclipse mit generierten Startkonfigurationen aus

Wir werden Unit-Tests in Eclipse unter Verwendung der von webAppCreator generierten Startkonfigurationen sowohl für den Entwicklungsmodus als auch für den Produktionsmodus ausführen.

Führen Sie den JUnit-Test im Entwicklungsmodus aus

• Wählen Sie in der Eclipse-Menüleiste Ausführen → Konfigurationen ausführen ...
• Wählen Sie im Abschnitt JUnit die Option HelloWorldTest-dev aus
• Um die Änderungen an den Argumenten zu speichern, drücken Sie Übernehmen
• Drücken Sie Ausführen, um den Test auszuführen

Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

Führen Sie den JUnit-Test im Produktionsmodus aus

• Wählen Sie in der Eclipse-Menüleiste Ausführen → Konfigurationen ausführen ...
• Wählen Sie im Abschnitt JUnit die Option HelloWorldTest-prod aus
• Um die Änderungen an den Argumenten zu speichern, drücken Sie Übernehmen
• Drücken Sie Ausführen, um den Test auszuführen

Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

GWT bietet hervorragende Funktionen zum Debuggen von clientseitigem und serverseitigem Code.

Im Entwicklungsmodus basiert die GWT-Anwendung auf Java-Code und wird nicht in JavaScript übersetzt.

Wenn eine Anwendung im Entwicklungsmodus ausgeführt wird, führt die Java Virtual Machine (JVM) den Anwendungscode tatsächlich als kompilierten Java-Bytecode aus und verwendet die GWT-Funktion, um eine Verbindung zu einem Browserfenster herzustellen.

GWT verwendet ein browserbasiertes Plugin, um eine Verbindung zu JVM herzustellen.

Daher können Entwickler jede Java-basierte IDE verwenden, um sowohl clientseitigen GWT-Code als auch serverseitigen Code zu debuggen.

In diesem Artikel wird die Verwendung des Debuggens von GWT-Clientcode mit Eclipse demonstriert. Wir werden die folgenden Aufgaben erledigen -

• Legen Sie Haltepunkte im Code fest und sehen Sie sie im BreakPoint Explorer.
• Gehen Sie beim Debuggen zeilenweise durch den Code.
• Zeigen Sie die Werte der Variablen an.
• Überprüfen Sie die Werte aller Variablen.
• Überprüfen Sie den Wert eines Ausdrucks.
• Zeigen Sie den Stapelrahmen für hängende Threads an.

Debugging-Beispiel

In diesem Beispiel werden Sie durch einfache Schritte geführt, um das Debuggen einer GWT-Anwendung zu demonstrieren. Führen Sie die folgenden Schritte aus, um die GWT-Anwendung zu aktualisieren, die wir in GWT - Kapitel " Anwendung erstellen" erstellt haben.

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

.gwt-Label{ 
   font-size: 150%; 
   font-weight: bold;
   color:red;
   padding:5px;
   margin:5px;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html zwei Tasten aufnehmen.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>Debugging Application Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Lassen Sie uns folgenden Inhalt der Java-Datei haben src/com.tutorialspoint/HelloWorld.java mit denen wir die Debugging-Fähigkeit von GWT-Code demonstrieren werden.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
	
   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               Window.alert(getGreeting(txtName.getValue()));
            }				
         }
      });
      Label lblName = new Label("Enter your name: ");

      Button buttonMessage = new Button("Click Me!");

      buttonMessage.addClickHandler(new ClickHandler() {			
      @Override
      public void onClick(ClickEvent event) {
         Window.alert(getGreeting(txtName.getValue()));
      }});

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);
      hPanel.setCellWidth(lblName, "130");

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);

      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }  
   
   public String getGreeting(String name){
      return "Hello "+name+"!";
   }
}

Schritt 1 - Platzieren Sie BreakPoints

Platzieren Sie einen Haltepunkt in der ersten Zeile von onModuleLoad() von HelloWorld.java

Schritt 2 - Debug-Anwendung

Klicken Sie nun auf das

Menü Debug-Anwendung und wählen SieHelloWorld Anwendung zum Debuggen der Anwendung.

Wenn alles in Ordnung ist, muss der GWT-Entwicklungsmodus in Eclipse aktiv sein und eine URL enthalten, wie unten gezeigt. Doppelklicken Sie auf die URL, um die GWT-Anwendung zu öffnen.

Sobald die Anwendung gestartet wird, sehen Sie den Fokus auf den Eclipse-Haltepunkt, da wir den Haltepunkt in der ersten Zeile der Einstiegspunktmethode platziert haben.

Sie können die Stapelverfolgung für angehaltene Threads sehen.

Sie können die Werte für Ausdrücke sehen.

Sie können die Liste der platzierten Haltepunkte sehen.

Drücken Sie nun F6, bis Sie die letzte Zeile der onModuleLoad () -Methode erreicht haben. Als Referenz für Funktionstasten prüft F6 den Code Zeile für Zeile, F5 tritt weiter ein und F8 setzt die Anwendung fort. Jetzt können Sie die Werteliste aller Variablen der onModuleLoad () -Methode anzeigen.

Der GWT-Clientcode kann auf dieselbe Weise wie eine Java-Anwendung debuggt werden. Platzieren Sie Haltepunkte in einer beliebigen Zeile und spielen Sie mit den Debugging-Funktionen von GWT.

GWT bietet drei Möglichkeiten zur Internationalisierung einer GWT-Anwendung. Wir werden die Verwendung der statischen String-Internationalisierung demonstrieren, die in Projekten am häufigsten verwendet wird.

Sr.Nr.	Technik & Beschreibung
1	Static String Internationalization Diese Technik ist am weitesten verbreitet und erfordert zur Laufzeit nur sehr wenig Overhead. ist eine sehr effiziente Technik zum Übersetzen sowohl konstanter als auch parametrisierter Zeichenfolgen, die am einfachsten zu implementieren ist. Bei der statischen Internationalisierung von Zeichenfolgen werden standardmäßige Java-Eigenschaftendateien zum Speichern übersetzter Zeichenfolgen und parametrisierter Nachrichten verwendet. Zum Abrufen ihrer Werte werden stark typisierte Java-Schnittstellen erstellt.
2	Dynamic String Internationalization Diese Technik ist sehr flexibel, aber langsamer als die statische Internationalisierung von Strings. Die Host-Seite enthält die lokalisierten Zeichenfolgen. Daher müssen Anwendungen nicht neu kompiliert werden, wenn wir ein neues Gebietsschema hinzufügen. Wenn die GWT-Anwendung in ein vorhandenes serverseitiges Lokalisierungssystem integriert werden soll, ist diese Technik zu verwenden.
3	Localizable Interface Diese Technik ist die mächtigste unter den drei Techniken. Durch die Implementierung von Localizable können lokalisierte Versionen von benutzerdefinierten Typen erstellt werden. Es ist eine fortschrittliche Internationalisierungstechnik.

Workflow zur Internationalisierung einer GWT-Anwendung

Schritt 1 - Erstellen Sie Eigenschaftendateien

Erstellen Sie eine Eigenschaftendatei mit den Nachrichten, die in der Anwendung verwendet werden sollen. Wir haben eine erstelltHelloWorldMessages.properties Datei in unserem Beispiel.

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

Erstellen Sie Eigenschaftendateien mit übersetzten Werten, die für das Gebietsschema spezifisch sind. Wir haben eine erstelltHelloWorldMessages_de.propertiesDatei in unserem Beispiel. Diese Datei enthält Übersetzungen in deutscher Sprache. _de gibt das deutsche Gebietsschema an und wir werden die deutsche Sprache in unserer Anwendung unterstützen.

Wenn Sie eine Eigenschaftendatei mit Eclipse erstellen, ändern Sie die Codierung der Datei in UTF-8. Wählen Sie die Datei aus und klicken Sie mit der rechten Maustaste darauf, um das Eigenschaftenfenster zu öffnen. Wählen Sie die Codierung der Textdatei als Other UTF-8. Übernehmen und speichern Sie die Änderung.

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

Schritt 2 - Hinzufügen des i18n-Moduls zur XML-Datei des Moduldeskriptors

Moduldatei aktualisieren HelloWorld.gwt.xml Unterstützung für das deutsche Gebietsschema aufzunehmen

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   ...
   <extend-property name = "locale" values="de" />
   ...
</module>

Schritt 3 - Erstellen Sie eine Schnittstelle, die der Eigenschaftendatei entspricht

Erstellen Sie die Schnittstelle HelloWorldMessages.java, indem Sie die Nachrichtenschnittstelle von GWT um die Unterstützung für die Internalisierung erweitern. Es sollte dieselben Methodennamen wie Schlüssel in der Eigenschaftendatei enthalten. Platzhalter würde durch String-Argument ersetzt.

public interface HelloWorldMessages extends Messages {
	
   @DefaultMessage("Enter your name")
   String enterName();
 
   @DefaultMessage("Click Me")
   String clickMe();
 
   @DefaultMessage("Application Internalization Demonstration")
   String applicationTitle();

   @DefaultMessage("Hello {0}")
   String greeting(String name);
}

Schritt 4 - Verwenden Sie die Nachrichtenschnittstelle in der UI-Komponente.

Verwenden Sie das Objekt von HelloWorldMessages im HelloWorld um die Nachrichten zu bekommen.

public class HelloWorld implements EntryPoint {
   
   /* create an object of HelloWorldMessages interface 
      using GWT.create() method */
   private HelloWorldMessages messages = 
   GWT.create(HelloWorldMessages.class);
   
   public void onModuleLoad() {
   ...
      Label titleLabel = new Label(messages.applicationTitle());
      //Add title to the application
      RootPanel.get("gwtAppTitle").add(titleLabel);
   ...
   }
}

Internationalisierung - Vollständiges Beispiel

Dieses Beispiel führt Sie durch einfache Schritte, um die Internationalisierungsfähigkeit einer GWT-Anwendung zu demonstrieren.

Führen Sie die folgenden Schritte aus, um die GWT-Anwendung zu aktualisieren, die wir in GWT - Kapitel " Anwendung erstellen" erstellt haben.

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name = 'com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.                       -->
  <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
  <extend-property name = "locale" values="de" />
  <!-- Specify the paths for translatable code                    -->
  <source path = 'client'/>
  <source path = 'shared'/>

</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html.

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   <body>

      <h1 id = "gwtAppTitle"></h1>
      <div id = "gwtContainer"></div>

   </body>
</html>

Erstellen Sie nun die Datei HelloWorldMessages.properties in der src/com.tutorialspoint/client Verpacken und platzieren Sie den folgenden Inhalt darin

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

Erstellen Sie nun die Datei HelloWorldMessages_de.properties in der src/com.tutorialspoint/client Verpacken und platzieren Sie den folgenden Inhalt darin

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

Erstellen Sie nun die HelloWorldMessages.java-Klasse in der src/com.tutorialspoint/client Verpacken und platzieren Sie den folgenden Inhalt darin

package com.tutorialspoint.client;
import com.google.gwt.i18n.client.Messages;

public interface HelloWorldMessages extends Messages {	
   @DefaultMessage("Enter your name")
   String enterName();
 
   @DefaultMessage("Click Me")
   String clickMe();
 
   @DefaultMessage("Application Internationalization Demonstration")
   String applicationTitle();

   @DefaultMessage("Hello {0}")
   String greeting(String name);
}

Lassen Sie uns folgenden Inhalt der Java-Datei haben src/com.tutorialspoint/HelloWorld.java mit denen wir die Internationalisierungsfähigkeit des GWT-Codes demonstrieren werden.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;

import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   /* create an object of HelloWorldMessages interface 
      using GWT.create() method */
   private HelloWorldMessages messages = 
   GWT.create(HelloWorldMessages.class);
   
   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               Window.alert(getGreeting(txtName.getValue()));
            }				
         }
      });
      Label lblName = new Label(messages.enterName() + ": ");

      Button buttonMessage = new Button(messages.clickMe() + "!");

      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            Window.alert(getGreeting(txtName.getValue()));
         }
      });

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);      

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);
      Label titleLabel = new Label(messages.applicationTitle());
      //Add title to the application
      RootPanel.get("gwtAppTitle").add(titleLabel);
      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }  
   
   public String getGreeting(String name){
      return messages.greeting(name + "!");
   }
}

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

Aktualisieren Sie nun die URL so, dass sie die URL locale = de.Set enthält - http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997&locale=de. Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

GWT-Anwendungen sind normalerweise einseitige Anwendungen, auf denen JavaScripts ausgeführt werden, und enthalten nicht viele Seiten. Daher verfolgt der Browser die Benutzerinteraktion mit der Anwendung nicht. Um die Verlaufsfunktion des Browsers nutzen zu können, sollte die Anwendung für jede navigierbare Seite ein eindeutiges URL-Fragment generieren.

GWT bietet History Mechanism um mit dieser Situation umzugehen.

GWT verwendet einen Begriff tokenDies ist einfach eine Zeichenfolge, die die Anwendung analysieren kann, um zu einem bestimmten Status zurückzukehren. Die Anwendung speichert dieses Token im Browserverlauf als URL-Fragment.

Beispielsweise würde ein Verlaufstoken mit dem Namen "pageIndex1" wie folgt zu einer URL hinzugefügt:

http://www.tutorialspoint.com/HelloWorld.html#pageIndex0

Workflow für die Verlaufsverwaltung

Schritt 1 - Aktivieren Sie die Verlaufsunterstützung

Um die GWT-Verlaufsunterstützung nutzen zu können, müssen wir zuerst den folgenden iframe in unsere Host-HTML-Seite einbetten.

<iframe src = "javascript:''"
   id = "__gwt_historyFrame"
   style = "width:0;height:0;border:0"></iframe>

Schritt 2 - Token zum Verlauf hinzufügen

Das folgende Beispiel zeigt, wie Sie dem Browserverlauf ein Token hinzufügen

int index = 0;
History.newItem("pageIndex" + index);

Schritt 3 - Token aus dem Verlauf erneut abrufen

Wenn der Benutzer die Zurück / Vorwärts-Schaltfläche des Browsers verwendet, rufen wir das Token ab und aktualisieren unseren Anwendungsstatus entsprechend.

History.addValueChangeHandler(new ValueChangeHandler<String>() {
   @Override
   public void onValueChange(ValueChangeEvent<String> event) {
      String historyToken = event.getValue();
      /* parse the history token */
      try {
         if (historyToken.substring(0, 9).equals("pageIndex")) {
            String tabIndexToken = historyToken.substring(9, 10);
            int tabIndex = Integer.parseInt(tabIndexToken);
            /* select the specified tab panel */
            tabPanel.selectTab(tabIndex);
         } else {
            tabPanel.selectTab(0);
         }
      } catch (IndexOutOfBoundsException e) {
         tabPanel.selectTab(0);
      }
   }
});

Lassen Sie uns nun die Geschichtsklasse in Aktion sehen.

Geschichtsunterricht - Vollständiges Beispiel

In diesem Beispiel werden Sie durch einfache Schritte geführt, um die Verlaufsverwaltung einer GWT-Anwendung zu demonstrieren. Führen Sie die folgenden Schritte aus, um die GWT-Anwendung zu aktualisieren, die wir in GWT - Kapitel " Anwendung erstellen" erstellt haben.

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>  
   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   
   <body>
      <iframe src = "javascript:''"id = "__gwt_historyFrame"
         style = "width:0;height:0;border:0"></iframe>
      <h1> History Class Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Lassen Sie uns folgenden Inhalt der Java-Datei haben src/com.tutorialspoint/HelloWorld.java mit denen wir das Verlaufsmanagement im GWT-Code demonstrieren.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.logical.shared.SelectionEvent;
import com.google.gwt.event.logical.shared.SelectionHandler;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;

import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;

public class HelloWorld implements EntryPoint {

   /**
    * This is the entry point method.
    */
   public void onModuleLoad() {
      /* create a tab panel to carry multiple pages */  
      final TabPanel tabPanel = new TabPanel();

      /* create pages */
      HTML firstPage = new HTML("<h1>We are on first Page.</h1>");
      HTML secondPage = new HTML("<h1>We are on second Page.</h1>");
      HTML thirdPage = new HTML("<h1>We are on third Page.</h1>");

      String firstPageTitle = "First Page";
      String secondPageTitle = "Second Page";
      String thirdPageTitle = "Third Page";
      tabPanel.setWidth("400");
      
	  /* add pages to tabPanel*/
      tabPanel.add(firstPage, firstPageTitle);
      tabPanel.add(secondPage,secondPageTitle);
      tabPanel.add(thirdPage, thirdPageTitle);

      /* add tab selection handler */
      tabPanel.addSelectionHandler(new SelectionHandler<Integer>() {
         @Override
         public void onSelection(SelectionEvent<Integer> event) {
            /* add a token to history containing pageIndex 
             History class will change the URL of application
             by appending the token to it.
            */
            History.newItem("pageIndex" + event.getSelectedItem());
         }
      });
      
      /* add value change handler to History 
       this method will be called, when browser's 
       Back button or Forward button are clicked 
       and URL of application changes.
       */
      History.addValueChangeHandler(new ValueChangeHandler<String>() {
         @Override
         public void onValueChange(ValueChangeEvent<String> event) {
            String historyToken = event.getValue();
            /* parse the history token */
            try {
               if (historyToken.substring(0, 9).equals("pageIndex")) {
                  String tabIndexToken = historyToken.substring(9, 10);
                  int tabIndex = Integer.parseInt(tabIndexToken);
                  /* select the specified tab panel */
                  tabPanel.selectTab(tabIndex);
               } else {
                  tabPanel.selectTab(0);
               }
            } catch (IndexOutOfBoundsException e) {
               tabPanel.selectTab(0);
            }
         }
      });

      /* select the first tab by default */
      tabPanel.selectTab(0);

      /* add controls to RootPanel */
      RootPanel.get().add(tabPanel);
   }
}

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

• Klicken Sie nun auf jede Registerkarte, um verschiedene Seiten auszuwählen.

• Sie sollten beachten, dass bei Auswahl jeder Registerkarte die Anwendungs-URL geändert und #pageIndex zur URL hinzugefügt wird.

• Sie können auch sehen, dass die Vor- und Zurück-Schaltflächen des Browsers jetzt aktiviert sind.

• Wenn Sie die Vor- und Zurück-Schaltfläche des Browsers verwenden, werden die verschiedenen Registerkarten entsprechend ausgewählt.

GWT unterstützt die Browserverlaufsverwaltung mithilfe einer Verlaufsklasse, für die Sie auf das Kapitel GWT - Verlaufsklasse verweisen können .

GWT verwendet einen Begriff tokenDies ist einfach eine Zeichenfolge, die die Anwendung analysieren kann, um zu einem bestimmten Status zurückzukehren. Die Anwendung speichert dieses Token im Browserverlauf als URL-Fragment.

Im Kapitel GWT - Verlaufsklasse behandeln wir die Tokenerstellung und -einstellung im Verlauf durch Schreiben von Code.

In diesem Artikel werden wir einen speziellen Widget-Hyperlink diskutieren, der die Tokenerstellung und die Verlaufsverwaltung automatisch für uns übernimmt und der Anwendung die Möglichkeit gibt, Lesezeichen zu setzen.

Lesezeichenbeispiel

In diesem Beispiel werden Sie durch einfache Schritte geführt, um das Lesezeichen einer GWT-Anwendung zu demonstrieren.

Die folgenden Schritte zum Aktualisieren der GWT-Anwendung, die wir in GWT - Kapitel " Anwendung erstellen" erstellt haben -

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>  
   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   
   <body>
      <iframe src = "javascript:''"id = "__gwt_historyFrame"
         style = "width:0;height:0;border:0"></iframe>
      <h1> Bookmarking Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Lassen Sie uns folgenden Inhalt der Java-Datei haben src/com.tutorialspoint/HelloWorld.java mit denen wir Lesezeichen im GWT-Code demonstrieren.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;

import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Hyperlink;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   
   private TabPanel tabPanel;

   private void selectTab(String historyToken){
      /*  parse the history token */
      try {
         if (historyToken.substring(0, 9).equals("pageIndex")) {
            String tabIndexToken = historyToken.substring(9, 10);
            int tabIndex = Integer.parseInt(tabIndexToken);
            /* Select the specified tab panel */
            tabPanel.selectTab(tabIndex);
         } else {
            tabPanel.selectTab(0);
         }
      } catch (IndexOutOfBoundsException e) {
         tabPanel.selectTab(0);
      }
   }

   /**
    * This is the entry point method.
    */
   public void onModuleLoad() {
      /* create a tab panel to carry multiple pages */  
      tabPanel = new TabPanel();

      /* create pages */
      HTML firstPage = new HTML("<h1>We are on first Page.</h1>");
      HTML secondPage = new HTML("<h1>We are on second Page.</h1>");
      HTML thirdPage = new HTML("<h1>We are on third Page.</h1>");

      String firstPageTitle = "First Page";
      String secondPageTitle = "Second Page";
      String thirdPageTitle = "Third Page";

      Hyperlink firstPageLink = new Hyperlink("1", "pageIndex0");
      Hyperlink secondPageLink = new Hyperlink("2", "pageIndex1");
      Hyperlink thirdPageLink = new Hyperlink("3", "pageIndex2");

      HorizontalPanel linksHPanel = new HorizontalPanel();
      linksHPanel.setSpacing(10);
      linksHPanel.add(firstPageLink);
      linksHPanel.add(secondPageLink);
      linksHPanel.add(thirdPageLink);		

      /* If the application starts with no history token, 
         redirect to a pageIndex0 */
      String initToken = History.getToken();

      if (initToken.length() == 0) {
         History.newItem("pageIndex0");
         initToken = "pageIndex0";
      }		

      tabPanel.setWidth("400");
      /* add pages to tabPanel*/
      tabPanel.add(firstPage, firstPageTitle);
      tabPanel.add(secondPage,secondPageTitle);
      tabPanel.add(thirdPage, thirdPageTitle);

      /* add value change handler to History 
       * this method will be called, when browser's Back button 
       * or Forward button are clicked.
       * and URL of application changes.
       * */
      History.addValueChangeHandler(new ValueChangeHandler<String>() {
         @Override
         public void onValueChange(ValueChangeEvent<String> event) {
            selectTab(event.getValue());				
         }
      });

      selectTab(initToken);

      VerticalPanel vPanel = new VerticalPanel();

      vPanel.setSpacing(10);
      vPanel.add(tabPanel);
      vPanel.add(linksHPanel);

      /* add controls to RootPanel */
      RootPanel.get().add(vPanel);
   }
}

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

• Klicken Sie nun auf 1, 2 oder 3. Sie können feststellen, dass sich die Registerkarte mit den Indizes ändert.

• Wenn Sie auf 1,2 oder 3 klicken, wird die Anwendungs-URL geändert und #pageIndex zur URL hinzugefügt

• Sie können auch sehen, dass die Vor- und Zurück-Schaltflächen des Browsers jetzt aktiviert sind.

• Wenn Sie die Vor- und Zurück-Schaltfläche des Browsers verwenden, werden die verschiedenen Registerkarten entsprechend ausgewählt.

• Klicken Sie mit der rechten Maustaste auf 1, 2 oder 3. Sie können Optionen wie Öffnen, In neuem Fenster öffnen, In neuem Tab öffnen, Favoriten hinzufügen usw. anzeigen.

• Klicken Sie mit der rechten Maustaste auf 3. Wählen Sie Zu Favoriten hinzufügen. Speichern Sie das Lesezeichen als Seite 3.

• Öffnen Sie die Favoriten und wählen Sie Seite 3. Sie sehen die dritte ausgewählte Registerkarte.

Das Protokollierungsframework emuliert java.util.logging, verwendet also dieselbe Syntax und dasselbe Verhalten wie serverseitiger Protokollierungscode

Die GWT-Protokollierung wird mithilfe von .gwt.xml-Dateien konfiguriert.

Wir können die Protokollierung so konfigurieren, dass sie aktiviert / deaktiviert ist. Wir können bestimmte Handler aktivieren / deaktivieren und die Standardprotokollierungsstufe ändern.

Arten von Loggern

Logger sind in einer Baumstruktur organisiert, wobei sich der Root-Logger an der Wurzel des Baums befindet.

Der Name des Loggers bestimmt die Eltern / Kind-Beziehungen mit . Abschnitte des Namens zu trennen.

Wenn wir beispielsweise zwei Logger haben, Hospital.room1 und Hospital.room2, dann sind sie Geschwister, deren Eltern der Logger namens Hospital sind. Der Krankenhaus-Logger (und jeder Logger mit einem Namen, der keinen Punkt "." Enthält) hat den Root-Logger als übergeordnetes Element.

private static Logger room1Logger = Logger.getLogger("Hospital.room1");
private static Logger room2Logger = Logger.getLogger("Hospital.room2");
private static Logger hospitalLogger = Logger.getLogger("Hospital");
private static Logger rootLogger = Logger.getLogger("");

Protokollhandler

GWT bietet Standardhandler, die die mit Loggern vorgenommenen Protokolleinträge anzeigen.

Handler	Meldet sich an	Beschreibung
SystemLogHandler	stdout	Diese Meldungen werden nur im Entwicklungsmodus im DevMode-Fenster angezeigt.
DevelopmentModeLogHandler	DevMode-Fenster	Protokolle durch Aufrufen der Methode GWT.log. Diese Meldungen werden nur im Entwicklungsmodus im DevMode-Fenster angezeigt.
ConsoleLogHandler	Javascript-Konsole	Protokolliert sich bei der Javascript-Konsole, die von Firebug Lite (für IE), Safari und Chrome verwendet wird.
FirebugLogHandler	Firebug	Protokolliert sich bei der Firebug-Konsole.
PopupLogHandler	aufpoppen	Protokolliert sich bei dem Popup, das sich in der oberen linken Ecke der Anwendung befindet, wenn dieser Handler aktiviert ist.
SimpleRemoteLogHandler	Server	Dieser Handler sendet Protokollnachrichten an den Server, wo sie mithilfe des serverseitigen Protokollierungsmechanismus protokolliert werden.

Konfigurieren Sie die Protokollierung in der GWT-Anwendung

Die Datei HelloWorld.gwt.xml muss so konfiguriert werden, dass die GWT-Protokollierung wie folgt aktiviert wird:

# add logging module
   <inherits name = "com.google.gwt.logging.Logging"/>                
# To change the default logLevel 
   <set-property name = "gwt.logging.logLevel" value = "SEVERE"/>  
# To enable logging   
   <set-property name = "gwt.logging.enabled" value = "TRUE"/>       
# To disable a popup Handler   
   <set-property name = "gwt.logging.popupHandler" value = "DISABLED" />

Verwenden Sie den Logger, um Benutzeraktionen zu protokollieren

/* Create Root Logger */
private static Logger rootLogger = Logger.getLogger("");
...
rootLogger.log(Level.SEVERE, "pageIndex selected: " + event.getValue());
...

Beispiel für ein Protokollierungsframework

In diesem Beispiel werden Sie durch einfache Schritte geführt, um die Protokollierungsfähigkeit einer GWT-Anwendung zu demonstrieren. Führen Sie die folgenden Schritte aus, um die GWT-Anwendung zu aktualisieren, die wir in GWT - Kapitel " Anwendung erstellen" erstellt haben.

Schritt	Beschreibung
1	Erstellen Sie ein Projekt mit dem Namen HelloWorld unter einem Paket com.tutorialspoint, wie im Kapitel GWT - Anwendung erstellen erläutert .
2	Ändern Sie HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html und HelloWorld.java wie unten erläutert. Halten Sie den Rest der Dateien unverändert.
3	Kompilieren Sie die Anwendung und führen Sie sie aus, um das Ergebnis der implementierten Logik zu überprüfen.

Es folgt der Inhalt des modifizierten Moduldeskriptors src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <inherits name = "com.google.gwt.logging.Logging"/>
   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>  
   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>
   <set-property name = "gwt.logging.logLevel" value="SEVERE"/>          
   <set-property name = "gwt.logging.enabled" value = "TRUE"/>            
   <set-property name = "gwt.logging.popupHandler" value=  "DISABLED" />
</module>

Im Folgenden finden Sie den Inhalt der geänderten Stylesheet-Datei war/HelloWorld.css.

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

Es folgt der Inhalt der geänderten HTML-Hostdatei war/HelloWorld.html

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   
   <body>
      <iframe src = "javascript:''"id = "__gwt_historyFrame"
         style = "width:0;height:0;border:0"></iframe>
      <h1> Logging Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

Lassen Sie uns folgenden Inhalt der Java-Datei haben src/com.tutorialspoint/HelloWorld.java mit denen wir Lesezeichen im GWT-Code demonstrieren.

package com.tutorialspoint.client;

import java.util.logging.Level;
import java.util.logging.Logger;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;

import com.google.gwt.logging.client.HasWidgetsLogHandler;

import com.google.gwt.user.client.History;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Hyperlink;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TabPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {
   
   private TabPanel tabPanel;
   /* Create Root Logger */
   private static Logger rootLogger = Logger.getLogger("");
   private VerticalPanel customLogArea;

   private void selectTab(String historyToken){
      /*  parse the history token */
      try {
         if (historyToken.substring(0, 9).equals("pageIndex")) {
            String tabIndexToken = historyToken.substring(9, 10);
            int tabIndex = Integer.parseInt(tabIndexToken);
            /* Select the specified tab panel */
            tabPanel.selectTab(tabIndex);
         } else {
            tabPanel.selectTab(0);
         }
      } catch (IndexOutOfBoundsException e) {
         tabPanel.selectTab(0);
      }
   }

   /**
    * This is the entry point method.
    */
   public void onModuleLoad() {
      /* create a tab panel to carry multiple pages */  
      tabPanel = new TabPanel();

      /* create pages */
      HTML firstPage = new HTML("<h1>We are on first Page.</h1>");
      HTML secondPage = new HTML("<h1>We are on second Page.</h1>");
      HTML thirdPage = new HTML("<h1>We are on third Page.</h1>");

      String firstPageTitle = "First Page";
      String secondPageTitle = "Second Page";
      String thirdPageTitle = "Third Page";

      Hyperlink firstPageLink = new Hyperlink("1", "pageIndex0");
      Hyperlink secondPageLink = new Hyperlink("2", "pageIndex1");
      Hyperlink thirdPageLink = new Hyperlink("3", "pageIndex2");

      HorizontalPanel linksHPanel = new HorizontalPanel();
      linksHPanel.setSpacing(10);
      linksHPanel.add(firstPageLink);
      linksHPanel.add(secondPageLink);
      linksHPanel.add(thirdPageLink);		

      /* If the application starts with no history token, 
         redirect to a pageIndex0 */
      String initToken = History.getToken();

      if (initToken.length() == 0) {
         History.newItem("pageIndex0");
         initToken = "pageIndex0";
      }		

      tabPanel.setWidth("400");
      /* add pages to tabPanel*/
      tabPanel.add(firstPage, firstPageTitle);
      tabPanel.add(secondPage,secondPageTitle);
      tabPanel.add(thirdPage, thirdPageTitle);

      /* add value change handler to History 
       * this method will be called, when browser's Back button 
       * or Forward button are clicked.
       * and URL of application changes.
       * */
      History.addValueChangeHandler(new ValueChangeHandler<String>() {
         @Override
         public void onValueChange(ValueChangeEvent<String> event) {
            selectTab(event.getValue());	
            rootLogger.log(Level.SEVERE, "pageIndex selected: " 
            + event.getValue());			
         }
      });

      selectTab(initToken);

      VerticalPanel vPanel = new VerticalPanel();

      vPanel.setSpacing(10);
      vPanel.add(tabPanel);
      vPanel.add(linksHPanel);
	  
      customLogArea = new VerticalPanel();	   
      vPanel.add(customLogArea);

      /* an example of using own custom logging area. */
      rootLogger.addHandler(new HasWidgetsLogHandler(customLogArea));

      /* add controls to RootPanel */
      RootPanel.get().add(vPanel);
   }
}

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, lassen Sie uns die Anwendung im Entwicklungsmodus kompilieren und ausführen, wie wir es im Kapitel GWT - Anwendung erstellen getan haben . Wenn mit Ihrer Anwendung alles in Ordnung ist, führt dies zu folgendem Ergebnis:

Klicken Sie nun auf 1, 2 oder 3. Wenn Sie auf 1,2 oder 3 klicken, sehen Sie, dass das Protokoll mit dem pageIndex gedruckt wird. Überprüfen Sie die Konsolenausgabe in Eclipse. Sie können sehen, dass das Protokoll auch in der Eclipse-Konsole gedruckt wird.

Fri Aug 31 11:42:35 IST 2012 
SEVERE: pageIndex selected: pageIndex0
Fri Aug 31 11:42:37 IST 2012 
SEVERE: pageIndex selected: pageIndex1
Fri Aug 31 11:42:38 IST 2012 
SEVERE: pageIndex selected: pageIndex2
Fri Aug 31 11:42:40 IST 2012 
SEVERE: pageIndex selected: pageIndex0
Fri Aug 31 11:42:41 IST 2012 
SEVERE: pageIndex selected: pageIndex1
Fri Aug 31 11:42:41 IST 2012 
SEVERE: pageIndex selected: pageIndex2

Aktualisieren Sie nun den Moduldeskriptor src/com.tutorialspoint/HelloWorld.gwt.xml um popupHandler zu aktivieren.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <inherits name = "com.google.gwt.logging.Logging"/>
   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>  
   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>
   <set-property name = "gwt.logging.logLevel" value = "SEVERE"/>          
   <set-property name = "gwt.logging.enabled" value = "TRUE"/>            
   <set-property name="gwt.logging.popupHandler" value = "ENABLED" />
</module>

Wenn Sie mit allen vorgenommenen Änderungen fertig sind, laden Sie die Anwendung neu, indem Sie das Browserfenster aktualisieren (drücken Sie die Taste F5 / Reload des Browsers). Beachten Sie, dass jetzt in der oberen linken Ecke der Anwendung ein Popup-Fenster angezeigt wird.

Klicken Sie nun auf 1, 2 oder 3. Wenn Sie auf 1,2 oder 3 klicken, sehen Sie, dass das Protokoll gedruckt wird und der pageIndex im Popup-Fenster angezeigt wird.