TOC

Introduction à GWT

Introduction à GWT

1. introduction

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

Dans ce didacticiel, nous allons nous concentrer et couvrir certaines de ses principales capacités et fonctionnalités.

2. SDK GWT

Le SDK contient les bibliothèques de l'API Java, un compilateur et un serveur de développement.

2.1. API Java

L'API GWT propose des classes pour la création d'interfaces utilisateur, les appels de serveur, l'internationalisation et la réalisation de tests unitaires. Pour en savoir plus, consultez la documentation javahere.

2.2. Compilateur

Simply put, GWT compiler is a source translator from Java code into the Javascript. Le résultat de la compilation est une application Javascript.

La logique de son travail consiste à supprimer les classes, méthodes et champs inutilisés du code et à raccourcir les noms Javascript.

En raison de cet avantage, nous n’avons plus besoin d’inclure les bibliothèques Ajax dans notre projet Javascript. Bien entendu, il est également possible de définir des indices lors de la compilation du code.

Voici quelques paramètres utiles deGWTCompiler:

  • -logLevel - pour définir l'un des niveaux de journalisationERROR, WARN, INFO, TRACE, DEBUG, SPAM, ALL

  • -workdir - répertoire de travail du compilateur

  • -gen - le répertoire pour écrire les fichiers générés

  • -out - le répertoire des fichiers de sortie

  • -optimize - Définit le niveau d'optimisation du compilateur de 0 à 9

  • -style - le style de sortie du scriptOBF, PRETTY ouDETAILED

  • -module[s] - le nom des modules à compiler

3. Installer

Le dernier SDK est disponible sur la pagedownload. Le reste de la configuration est disponible sur la pagegetting started.

3.1. Maven

Pour configurer le projet avec Maven, nous devons ajouter les dépendances suivantes àpom.xml: 


    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 a le code pour le compilateur, le déploiement ou l'hébergement de l'application.

Pour vous assurer que toutes les dépendances utilisent la même version, nous devons inclure la dépendance GWT parent: 


    com.google.gwt
    gwt
    2.8.2
    pom
    import

Tous les artefacts sont disponibles pour le téléchargement surMaven Central.

4. Application

Créons une application Web simple. Il enverra un message au serveur et affichera la réponse.

In general, a GWT application consists of the server and the client parts. Le côté client fait une requête HTTP pour se connecter au serveur. Pour rendre cela possible, GWT utilise l'appel de procédure distante ou simplement le mécanisme RPC.

5. GWT et RPC

Revenons à notre application, voyons comment se fait la communication RPC. À cette fin, nous créons un service pour recevoir un message du serveur.

Commençons par créer une interface: 

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

L'implémentation deMessageService se fait côté serveur: 

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();
    }
}

Notre classe de serveur s'étend de la classe de servlet de base RemoteServiceServlet.It will automatically deserialize incoming requests from the client and serialize outgoing responses from the server.

Voyons maintenant comment nous l’utilisons du côté client. The MessageService is only a definitive version of our service.

Pour fonctionner côté client, nous devons créer la version asynchrone de notre service: 

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

Ici, nous pouvons voir un argument supplémentaire dans la méthodegetMessage(). We need async to notify the UI when the asynchronous call is complete. De cette façon, nous évitons de bloquer le fil de travail de l'interface utilisateur.

6. Composants et leur cycle de vie

Le SDK propose des éléments d'interface utilisateur et des dispositions pour la conception des interfaces graphiques.

En général, tous les composants de l'interface utilisateur sont issus de la classeWidget. Visuellement, nous avons les widgets d'élément que nous pouvons voir, cliquer ou déplacer sur l'écran:

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

et il existe des widgets de présentation ou de panneau qui composent et organisent l'écran:

  • panel widgets -HorizontalPanel,VerticalPanel,PopupPanel,TabPanel, etc…

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.

Le constructeur initialise toujours l'élément DOM racine. When we attach a child widget to a parent component, it also causes binding at the DOM level. La classe de points d’entrée contient la fonction de chargement qui sera appelée en premier. C'est ici que nous définissons nos widgets.

7. Point d'accès

Examinons de près le point d’entrée principal de l’application: 

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. Il se connecte au document HTML correspondant, où le code java est exécuté.

Nous pouvons définir des composants d'interface utilisateur GWT et attribuer ensuite des balises HTML avec le même ID donné. Entry point class overrides the entry point onModuleLoad() method, which is called automatically when loading the module.

Ici, nous créons les composants de l'interface utilisateur, enregistrons les gestionnaires d'événements, modifions le DOM du navigateur.

Voyons maintenant comment nous créons notre instance de serveur distant. Pour cela, nous utilisons la méthode statique deGWT.create(MessageService.class).

Il détermine le type demandé au moment de la compilation. Voyant cette méthode,GWT 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. Cette fonctionnalité est largement utilisée dans les appels RPC.

Ici, nous définissons également les widgetsButton etTextBox. To add attach them into the DOM tree we use the RootPanel class. C'est le panneau racine et renvoie une valeur singleton pour lier les éléments du widget: 

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

Tout d'abord, il obtient le conteneur racine marqué avec l'idsendButtonContainer. Après avoir attaché lesendButton au conteneur.

8. HTML

À l'intérieur du dossier/webapp, nous avons le fichierGoogle_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:

Les balises<td> avec les identifiantsnameFieldContainer etsendButtonContainer seront mappées aux composantsButton etTextBox.

9. Descripteur du module principal

Jetons un œil à la configuration typique du fichier descripteur du module principal deGoogle_web_toolkit.gwt.xml:

We make core GWT stuff accessible by including the com.google.gwt.user.User interface. Nous pouvons également choisir une feuille de style par défaut pour notre application. Dans ce cas, il s'agit de*.clean.Clean.

Les autres options de style disponibles sont*.dark.Dark,*.standard.Standard,*.chrome.Chrome. Lecom.example.client.Google_web_toolkit  est également marqué ici avec la balise<entry-point />.

10. Ajout de gestionnaires d'événements

Pour gérer les événements de frappe de la souris ou du clavier, GWT utilisera des gestionnaires. They all extend from EventHandler interface and have a method with the event type argument.

Dans notre exemple, nous enregistrons le gestionnaire d'événements de clic de souris.

Cela déclenchera la méthodeonClick() chaque fois que le bouton  est enfoncé: 

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

Ici, nous pouvons modifier l'état et le comportement du widget. Dans notre exemple, nous masquons lesvPanel et activons lessendButton.

L'autre façon consiste à définir une classe interne et à implémenter les interfaces nécessaires: 

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
        }
    }
}

En plus deClickHandler, nous incluons également ici l'interfaceKeyUpHandler pour capturer les événements de pression de touche. Ici,inside of onKeyUp() method we can use the KeyUpEvent to check if the user pressed the Enter key.

Et voici comment nous utilisons la classeMyHandler pour enregistrer les deux gestionnaires d'événements: 

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

11. Appeler le serveur

Nous sommes maintenant prêts à envoyer le message au serveur. Nous allons effectuer un appel de procédure à distance avec la méthode asynchronesendMessage().

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);
    }
});

Comme nous pouvons le voir, lesreceiver implementsonSuccess(String result)and onFailure(Throwable)method for each response type.

En fonction du résultat de la réponse, nous définissons un message d'erreur «Une erreur de serveur s'est produite» ou affichons la valeur du résultat dans le conteneur.

12. Style CSS

Lors de la création du projet avec le plugin eclipse, il générera automatiquement le fichierGoogle_web_toolkit.css sous le répertoire/webapp et le liera au fichier HTML principal.

Bien sûr, nous pouvons définir par programme des styles personnalisés pour les composants spécifiques de l'interface utilisateur: 

sendButton.addStyleName("sendButton");

Ici, nous attribuons un style CSS avec le nom de classesendButton à notre composantsendButton: 

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

13. Résultat

En conséquence, nous avons cette application web simple:

image

Nous soumettons ici un message «Bonjour à tous» au serveur et affichons la réponse «Bonjour à tous!» À l'écran.

14. Conclusion

In this quick article, we learned about the basics of GWT Framework. Nous avons ensuite abordé l'architecture, le cycle de vie, les capacités et les différents composants de son SDK.

En conséquence, nous avons appris à créer une application Web simple.

Et, comme toujours, le code source complet du tutoriel est disponibleover on GitHub.

Related