GWT - Anwendungen

Bevor wir mit der Erstellung einer tatsächlichen "HelloWorld" -Anwendung mit GWT beginnen, lassen Sie uns sehen, was die tatsächlichen 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.