GWT - Créer une application

Comme la puissance de GWT réside dans Write in Java, Run in JavaScript, nous utiliserons Java IDE Eclipse pour illustrer nos exemples.

Commençons par une simple application HelloWorld -

Étape 1 - Créer un projet

La première étape consiste à créer un projet d'application Web simple à l'aide de l'EDI Eclipse. Lancer l'assistant de projet à l'aide de l'optionGoogle Icon > New Web Application Project.... Maintenant, nommez votre projet HelloWorld en utilisant la fenêtre de l'assistant comme suit -

Désélectionner Use Google App Engine car nous ne l'utilisons pas dans ce projet et laissons d'autres valeurs par défaut (gardez Generate Sample project code option cochée) en tant que tel et cliquez sur le bouton Terminer.

Une fois votre projet créé avec succès, vous aurez le contenu suivant dans votre explorateur de projet -

Voici une brève description de tous les dossiers importants

N ° Sr.	Dossier et emplacement
1	src Fichiers de code source (classes java). Dossier client contenant les classes Java spécifiques côté client responsables de l'affichage de l'interface utilisateur client. Dossier serveur contenant les classes Java côté serveur responsables du traitement côté serveur. Dossier partagé contenant la classe de modèle java pour transférer les données du serveur au client et vice versa. HelloWorld.gwt.xml, un fichier descripteur de module requis pour le compilateur GWT pour compiler le projet HelloWorld.
2	test Fichiers source de code de test (classes java). Dossier client contenant les classes java chargées de tester le code côté client gwt.
3	war C'est la partie la plus importante, elle représente l'application Web déployable réelle. WEB-INF contenant des classes compilées, des bibliothèques gwt, des bibliothèques de servlets. HelloWorld.css, feuille de style du projet. HelloWorld.html, hots HTML qui invoquera l'application GWT UI.

Étape 2 - Modifier le descripteur de module: HelloWorld.gwt.xml

Le plugin GWT créera un fichier de descripteur de module par défaut src / com.tutorialspoint / HelloWorld.gwt.xml qui est donné ci-dessous. Pour cet exemple, nous ne le modifions pas, mais vous pouvez le modifier en fonction de vos besoins.

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

Étape 3 - Modifier la feuille de style: HelloWorld.css

Le plugin GWT créera un fichier de feuille de style par défaut war / HelloWorld.css . Modifions ce fichier pour garder notre exemple au niveau de compréhension le plus simple -

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

Étape 4 - Modifier le fichier hôte: HelloWorld.html

Le plugin GWT créera un fichier hôte HTML par défaut war / HelloWorld.html . Modifions ce fichier pour garder notre exemple au niveau de compréhension le plus simple -

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

Vous pouvez créer plus de fichiers statiques comme HTML, CSS ou images dans le même répertoire source ou vous pouvez créer d'autres sous-répertoires et déplacer des fichiers dans ces sous-répertoires et configurer ces sous-répertoires dans le descripteur de module de l'application.

Étape 5 - Modifier le point d'entrée: HelloWorld.java

Le plugin GWT créera un fichier Java par défaut src / com.tutorialspoint / HelloWorld.java , qui conserve un point d'entrée pour l'application.

Modifions ce fichier pour afficher "Hello, World!"

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

Vous pouvez créer plus de fichiers Java dans le même répertoire source pour définir des points d'entrée ou pour définir des routines d'assistance.

Étape 6 - Compiler l'application

Une fois que vous êtes prêt avec tous les changements effectués, il est temps de compiler le projet. Utilisez l'optionGoogle Icon > GWT Compile Project... pour lancer la boîte de dialogue GWT Compile comme indiqué ci-dessous -

Conservez les valeurs par défaut intactes et cliquez sur le bouton Compiler. Si tout se passe bien, vous verrez la sortie suivante dans la console Eclipse

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

Étape 7 - Exécutez l'application

Cliquez maintenant sur le menu Exécuter l'application et sélectionnezHelloWorld application pour exécuter l'application.

Si tout va bien, vous devez voir le mode de développement GWT actif dans Eclipse contenant une URL comme indiqué ci-dessous. Double-cliquez sur l'URL pour ouvrir l'application GWT.

Parce que vous exécutez votre application en mode développement, vous devrez donc installer le plugin GWT pour votre navigateur. Suivez simplement les instructions à l'écran pour installer le plugin.

Si vous avez déjà configuré le plugin GWT pour votre navigateur, vous devriez pouvoir voir la sortie suivante

Toutes nos félicitations! vous avez implémenté votre première application à l'aide de Google Web Toolkit (GWT).

↰ Previous page Next page ↱