GWT - Anwendung 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
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 mehrere 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
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.029sSchritt 7 - Führen Sie die Anwendung aus
Klicken Sie nun auf
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.