TOC

Einführung in GWT

Einführung in GWT

1. Einführung

GWT oderGoogle Web Toolkit is a framework for building high-performance web applications in Java.

In diesem Tutorial werden wir uns auf einige der wichtigsten Funktionen konzentrieren und diese behandeln.

2. GWT SDK

Das SDK enthält die Java-API-Bibliotheken, einen Compiler und einen Entwicklungsserver.

2.1. Java API

Die GWT-API verfügt über Klassen zum Erstellen von Benutzeroberflächen, zum Tätigen von Serveraufrufen, zur Internationalisierung und zum Durchführen von Komponententests. Weitere Informationen finden Sie in der Java-Dokumentationhere.

2.2. Compiler

Simply put, GWT compiler is a source translator from Java code into the Javascript. Das Ergebnis der Zusammenstellung ist eine Javascript-Anwendung.

Die Logik seiner Arbeit beinhaltet das Kürzen nicht verwendeter Klassen, Methoden, Felder aus dem Code und das Kürzen von Javascript-Namen.

Aufgrund dieses Vorteils müssen wir Ajax-Bibliotheken nicht mehr in unser Javascript-Projekt aufnehmen. Natürlich ist es auch möglich, beim Kompilieren des Codes Hinweise zu setzen.

Hier einige nützlicheGWTCompiler Parameter:

  • -logLevel - um eine der Protokollierungsstufen vonERROR, WARN, INFO, TRACE, DEBUG, SPAM, ALLfestzulegen

  • -workdir - Arbeitsverzeichnis des Compilers

  • -gen - das Verzeichnis zum Schreiben der generierten Dateien

  • -out - das Ausgabedateiverzeichnis

  • -optimize - Legt die Compiler-Optimierungsstufe von 0 auf 9 fest

  • -style - Der SkriptausgabestilOBF, PRETTY oderDETAILED

  • -module[s] - Der Name der zu kompilierenden Module

3. Konfiguration

Das neueste SDK ist auf der Seite vondownloadverfügbar. Der Rest des Setups ist auf der Seite vongetting startedverfügbar.

3.1. Maven

Um das Projekt mit Maven einzurichten, müssen wirpom.xml die folgenden Abhängigkeiten hinzufügen: 


    com.google.gwt
    gwt-servlet
    runtime


    com.google.gwt
    gwt-user
    provided


    com.google.gwt
    gwt-dev
    provided

The gwt-servlet library supports the server-side components for invoking a GWT-RPC endpoint. gwt-user contains the Java API which we’ll use to build our web application. gwt-dev enthält den Code für den Compiler, die Bereitstellung oder das Hosting der Anwendung.

Um sicherzustellen, dass alle Abhängigkeiten dieselbe Version verwenden, müssen Sie die übergeordnete GWT-Abhängigkeit einschließen: 


    com.google.gwt
    gwt
    2.8.2
    pom
    import

Alle Artefakte stehen unterMaven Central zum Download zur Verfügung.

4. Anwendung

Erstellen wir eine einfache Webanwendung. Es wird eine Nachricht an den Server gesendet und die Antwort angezeigt.

In general, a GWT application consists of the server and the client parts. Die Clientseite sendet eine HTTP-Anforderung, um eine Verbindung mit dem Server herzustellen. Um dies zu ermöglichen, verwendet GWT den Remote Procedure Call oder einfach den RPC-Mechanismus.

5. GWT und RPC

Lassen Sie uns zu unserer Anwendung zurückkehren und sehen, wie die RPC-Kommunikation erfolgt. Zu diesem Zweck erstellen wir einen Dienst zum Empfangen einer Nachricht vom Server.

Erstellen wir zunächst eine Schnittstelle: 

@RemoteServiceRelativePath("greet")
public interface MessageService extends RemoteService {
    String sendMessage(String message) throws IllegalArgumentException;
}

The @RemoteServiceRelativePath annotation maps the service to the module’s /message relative URL. MessageService should extend from RemoteService marker interface to perform RPC communication.

Die Implementierung vonMessageService erfolgt serverseitig: 

public class MessageServiceImpl extends RemoteServiceServlet
  implements MessageService {

    public String sendMessage(String message)
      throws IllegalArgumentException {
        if (message == null) {
            throw new IllegalArgumentException("message is null");
        }

        return "Hello, " + message + "!

 Time received: "
          + LocalDateTime.now();
    }
}

Unsere Serverklasse erstreckt sich von der RemoteServiceServletBasis-Servlet-Klasse.It will automatically deserialize incoming requests from the client and serialize outgoing responses from the server.

Nun wollen wir sehen, wie wir es von der Client-Seite aus verwenden. The MessageService is only a definitive version of our service.

Um auf der Client-Seite zu arbeiten, müssen wir die asynchrone Version unseres Service erstellen: 

public interface MessageServiceAsync {
    void sendMessage(String input, AsyncCallback callback)
      throws IllegalArgumentException;
}

Hier sehen wir ein zusätzliches Argument in der Methode vongetMessage(). We need async to notify the UI when the asynchronous call is complete. Auf diese Weise verhindern wir, dass der funktionierende UI-Thread blockiert wird.

6. Komponenten und ihr Lebenszyklus

Das SDK bietet einige Elemente und Layouts der Benutzeroberfläche zum Entwerfen der grafischen Benutzeroberflächen.

Im Allgemeinen erstrecken sich alle UI-Komponenten von der KlasseWidget. Visuell haben wir die Element-Widgets, die wir sehen, klicken oder auf dem Bildschirm bewegen können:

  • component widgets -TextBox,TextArea,Button,RadioButton,CheckBox usw.

und es gibt Layout- oder Panel-Widgets, die den Bildschirm zusammenstellen und organisieren:

  • panel widgets -HorizontalPanel,VerticalPanel,PopupPanel,TabPanel usw.

Every time we add a widget or any other component to the code, GWT works hard to link the view element with the browser’s DOM.

Der Konstruktor initialisiert immer das Root-DOM-Element. When we attach a child widget to a parent component, it also causes binding at the DOM level. Die Einstiegspunktklasse enthält die Ladefunktion, die zuerst aufgerufen wird. Hier definieren wir unsere Widgets.

7. Einstiegspunkt

Schauen wir uns den Haupteinstiegspunkt der Anwendung genauer an: 

public class Google_web_toolkit implements EntryPoint {

    private MessageServiceAsync messageServiceAsync = GWT.create(MessageService.class);

    public void onModuleLoad() {
        Button sendButton = new Button("Submit");
        TextBox nameField = new TextBox();
        nameField.setText("Hi there");

        sendButton.addStyleName("sendButton");

        RootPanel.get("nameFieldContainer").add(nameField);
        RootPanel.get("sendButtonContainer").add(sendButton);
    }
}

Every UI class implements the com.google.gwt.core.client.EntryPoint interface to mark it as a main entry for the module. Es wird eine Verbindung zum entsprechenden HTML-Dokument hergestellt, in dem der Java-Code ausgeführt wird.

Wir können GWT-UI-Komponenten definieren und dann HTML-Tags mit derselben angegebenen ID zuweisen. Entry point class overrides the entry point onModuleLoad() method, which is called automatically when loading the module.

Hier erstellen wir die UI-Komponenten, registrieren Event-Handler und modifizieren das Browser-DOM.

Lassen Sie uns nun sehen, wie wir unsere Remote-Server-Instanz erstellen. Zu diesem Zweck verwenden wir die statische Methode vonGWT.create(MessageService.class).

Es bestimmt den angeforderten Typ zur Kompilierungszeit. Bei dieser MethodeGWT compiler generates many versions of code at compile time, only one of which needs to be loaded by a particular client during bootstrapping at runtime. Diese Funktion wird häufig in RPC-Aufrufen verwendet.

Hier definieren wir auch die WidgetsButton undTextBox. To add attach them into the DOM tree we use the RootPanel class. Es ist das Hauptfenster und gibt einen Singleton-Wert zurück, um die Widget-Elemente zu binden: 

RootPanel.get("sendButtonContainer").add(sendButton);

Zunächst wird der Stammcontainer mit der IDsendButtonContainermarkiert. Nachdem wirsendButton an den Behälter angehängt haben.

8. HTML

Im Ordner/webappbefindet sich die DateiGoogle_web_toolkit.html.

We can mark the tag elements with the specific ids so the framework can bind them into Java objects: 


    
Sample GWT Application

    

        

            Please enter your message:

Die Tags<td> mit den IDsnameFieldContainer undsendButtonContainer werden den KomponentenButton undTextBox zugeordnet.

9. Hauptmodul-Deskriptor

Schauen wir uns die typische Konfiguration der Hauptmodul-Deskriptordatei vonGoogle_web_toolkit.gwt.xmlan:

We make core GWT stuff accessible by including the com.google.gwt.user.User interface. Außerdem können wir ein Standard-Stylesheet für unsere Anwendung auswählen. In diesem Fall ist es*.clean.Clean.

Die anderen verfügbaren Styling-Optionen sind*.dark.Dark,*.standard.Standard,*.chrome.Chrome. Diecom.example.client.Google_web_toolkit is ist auch hier mit dem<entry-point />-Tag markiert.

10. Hinzufügen von Ereignishandlern

GWT verwendet einige Handler, um die Maus- oder Tastatureingabeereignisse zu verwalten. They all extend from EventHandler interface and have a method with the event type argument.

In unserem Beispiel registrieren wir den Ereignishandler für Mausklicks.

Dadurch wird die MethodeonClick()jedes Mal ausgelöst, wenn die Taste gedrückt wird: 

closeButton.addClickHandler(new ClickHandler() {
    public void onClick(ClickEvent event) {
        vPanel.hide();
        sendButton.setEnabled(true);
        sendButton.setFocus(true);
    }
});

Hier können wir den Widget-Status und das Verhalten ändern. In unserem Beispiel verbergen wir dievPanel und aktivieren diesendButton.

Die andere Möglichkeit besteht darin, eine innere Klasse zu definieren und die erforderlichen Schnittstellen zu implementieren: 

class MyHandler implements ClickHandler, KeyUpHandler {

    public void onClick(ClickEvent event) {
        // send message to the server
    }

    public void onKeyUp(KeyUpEvent event) {
        if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER) {
            // send message to the server
        }
    }
}

Zusätzlich zuClickHandler enthalten wir hier auch dieKeyUpHandler-Schnittstelle, um die Tastendruckereignisse abzufangen. Hierinside of onKeyUp() method we can use the KeyUpEvent to check if the user pressed the Enter key.

Und hier, wie wir dieMyHandler-Klasse verwenden, um beide Ereignishandler zu registrieren: 

MyHandler handler = new MyHandler();
sendButton.addClickHandler(handler);
nameField.addKeyUpHandler(handler);

11. Aufruf des Servers

Jetzt können wir die Nachricht an den Server senden. Wir führen einen Remoteprozeduraufruf mit der asynchronensendMessage()-Methode durch.

The second parameter of the method is AsyncCallback<String> interface, where the String is the return type of the corresponding synchronous method: 

messageServiceAsync.sendMessage(textToServer, new AsyncCallback() {
    public void onFailure(Throwable caught) {
        serverResponseLabel.addStyleName("serverResponseLabelError");
        serverResponseLabel.setHTML("server error occurred");
        closeButton.setFocus(true);
    }

    public void onSuccess(String result) {
        serverResponseLabel.setHTML(result);
        vPanel.setVisible(true);
    }
});

Wie wir sehen können, sindreceiver implementsonSuccess(String result)and onFailure(Throwable)method for each response type.

Abhängig vom Antwortergebnis setzen wir entweder eine Fehlermeldung "Serverfehler aufgetreten" oder zeigen den Ergebniswert im Container an.

12. CSS-Styling

Wenn Sie das Projekt mit dem Eclipse-Plugin erstellen, wird automatisch die DateiGoogle_web_toolkit.cssim Verzeichnis/webappgeneriert und mit der Haupt-HTML-Datei verknüpft.

Natürlich können wir benutzerdefinierte Stile für die spezifischen UI-Komponenten programmgesteuert definieren: 

sendButton.addStyleName("sendButton");

Hier weisen wir unserersendButton-Komponente einen CSS-Stil mit dem KlassennamensendButton zu: 

.sendButton {
    display: block;
    font-size: 16pt;
}

13. Ergebnis

Als Ergebnis haben wir diese einfache Webanwendung:

image

Hier senden wir eine "Hallo" -Nachricht an den Server und drucken die Antwort "Hallo" auf den Bildschirm.

14. Fazit

In this quick article, we learned about the basics of GWT Framework. Anschließend diskutierten wir die Architektur, den Lebenszyklus, die Funktionen und die verschiedenen Komponenten des SDK.

Als Ergebnis haben wir gelernt, wie man eine einfache Webanwendung erstellt.

Und wie immer ist der vollständige Quellcode des Tutorialsover on GitHub verfügbar.

Related