GWT, ou Google Web Toolkit, est un framework permettant de créer des applications webs AJAX. Sa particularité est que le développeur écrit le code AJAX en Java et non en Javascript. Le développeur bénéficie ainsi d’un langage objet typé et d’outils performants : moins de risque de se tromper dans le nom des variables, méthodes et de découvrir une erreur Javascript indébuguable à l’exécution.

Le principe de fonctionnement est simple : le développeur fonctionnel crée son IHM en Java en utilisant des widgets GWT ou d’une tierce partie. Ces widgets sont fournis sous la forme de classes Java et le développeur les manipule comme un Widget SWT ou Swing. Les widgets lancent des évènements lorsqu’ils sont manipulés, que le développeur peut traiter en mettant en place des listeners.

Une fois le code Java développé, le compilateur GWT se charge de transformer le Java en Javascript.

Pour installer GWT, rendez-vous sur le site http://code.google.com/webtoolkit/, rubrique “Download”. Téléchargez le zip et décompressez le sur votre disque dur. C’est fini !

• Pour créer le projet Eclipse, utilisez la commande “projectCreator -eclipse <projectName>”.
• Pour créer l’application, utilisez la commande “applicationCreator -eclipse <projectName> <className>” où <className> est le nom complet de l’application à créer, par exemple “fr.improve.test.gwt.client.Application”.

Avec GWT, le code est réparti en modules. Une application est un module particulier, au sens où elle dispose d’un point d’entrée. Un module peut bien sûr utiliser d’autre modules. Un module permet donc de définir une application, ou un ensemble de composants / fonctionnalités réutilisables : GWT dispose par exemple d’un module i18n pour l’internationnalisation. La déclaration d’un module se fait via un fichier <NomModule>.gwt.xml.

Le script applicationCreator de l’étape précédente génère un fichier nommé Application.gwt.xml avec le contenu suivant, dans le package fr.improve.test.gwt.

<module>
	<!-- Inherit the core Web Toolkit stuff. -->
	<inherits name="com.google.gwt.user.User"/>
 
	<!-- Specify the app entry point class. -->
	<entry-point class="fr.improve.test.client.Application"/>
  
</module>

Nous voyons que notre application peut utiliser les composants du module “User” de GWT, et que le “main” de notre application est représenté par la classe fr.improve.test.client.Application, que le script a également créé.

La classe “fr.improve.test.client.Application”, dont le code source suit, implémente la méthode “onModuleLoad” appelée par GWT lorsque l’utilisateur ouvre l’application avec son navigateur.

package fr.improve.test.client;
 
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
 
/**
 * Entry point classes define onModuleLoad()
 */
public class Application implements EntryPoint {
 
  /**
   * This is the entry point method.
   */
  public void onModuleLoad() {
    final Button button = new Button("Click me");
    final Label label = new Label();
 
    button.addClickListener(new ClickListener() {
      public void onClick(Widget sender) {
        if (label.getText().equals(""))
          label.setText("Hello World!");
        else
          label.setText("");
      }
    });
 
    // Assume that the host HTML has elements defined whose
    // IDs are "slot1", "slot2".  In a real app, you probably would not want
    // to hard-code IDs.  Instead, you could, for example, search for all 
    // elements with a particular CSS class and replace them with widgets.
    //
    RootPanel.get("slot1").add(button);
    RootPanel.get("slot2").add(label);
  }
}
 

La classe générée par le script GWT crée 2 composants : un bouton et un libellé. Un clic sur le bouton modifie le libellé. Comme on peut le voir, le code source est entièrement en Java

Lorsque l’utilisateur se connecte à l’application, GWT exécute le point d’entrée Java défini dans le module. Ce point d’entrée ne suffit cependant pas à GWT : un fichier HTML contenant le squelette de la mise en page, et un appel au Javascript GWT est obligatoire. Un fichier par défaut a été généré par le script de création. Il se trouve dans le package “fr.improve.test.public” et se nomme “Application.html”. Voici son contenu :

<html>
	<head>
	
		<!--                                           -->
		<!-- Any title is fine                         -->
		<!--                                           -->
		<title>Wrapper HTML for Application</title>
 
		<!--                                           -->
		<!-- Use normal html, such as style            -->
		<!--                                           -->
		<style>
			body,td,a,div,.p{font-family:arial,sans-serif}
			div,td{color:#000000}
			a:link,.w,.w a:link{color:#0000cc}
			a:visited{color:#551a8b}
			a:active{color:#ff0000}
		</style>
 
		<!--                                           -->
		<!-- The module reference below is the link    -->
		<!-- between html and your Web Toolkit module  -->		
		<!--                                           -->
		<meta name='gwt:module' content='fr.improve.test.Application'>
		
	</head>
 
	<!--                                           -->
	<!-- The body can have arbitrary html, or      -->
	<!-- you can leave the body empty if you want  -->
	<!-- to create a completely dynamic ui         -->
	<!--                                           -->
	<body>
 
		<!--                                            -->
		<!-- This script is required bootstrap stuff.   -->
		<!-- You can put it in the HEAD, but startup    -->
		<!-- is slightly faster if you include it here. -->
		<!--                                            -->
		<script language="javascript" src="gwt.js"></script>
 
		<!-- OPTIONAL: include this if you want history support -->
		<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
 
		<h1>Application</h1>
 
		<p>
			This is an example of a host page for the Application application. 
			You can attach a Web Toolkit module to any HTML page you like, 
			making it easy to add bits of AJAX functionality to existing pages 
			without starting from scratch.
		</p>
 
		<table align=center>
			<tr>
				<td id="slot1"></td><td id="slot2"></td>
			</tr>
		</table>
	</body>
</html>
 

Pour tester le code, lancer le script “*-shell.cmd” où “*” est le nom du module. GWT démarre alors un shell de développement permettant de tester le code Java.

Les fenêtres suivantes doivent alors s’afficher :

Si vous cliquez sur le bouton, la page doit changer comme suit :

Pour déployer le code, il faut le transformer en Javascript. Pour cela, vous devez utiliser le script “*-compile.cmd”. Celui-ci génère le code HTML et Javascript de l’application dans le répertoire www, qu’il suffit de placer ensuite sur un serveur.

La structure d’une application standard GWT se compose ainsi :

• <package_racine>
  • <Application>.gwt.xml
  • public
    • *.html
    • *.gif
    • *.css
  • client
    • <Application>.java
    • *.java

Le répertoire public dans le package racine contient toutes les ressources “statiques” : html, images, css, javascript etc. Le répertoire client dans le package racine contient le code Java “client” de l’application. Ce code sera transformé en Javascript par GWT. Il est possible de mofidier cette structure en configurant de façon spécifique GWT.

GWT est un framework audacieux : il fait table rase des technologies JSP/JSF/Javascript/etc. et propose une solution innovante dans laquelle le développeur code la couche Ajax de son application entièrement en Java. GWT ouvre la voie à des applications webs offrant une partie cliente plus réactive, plus complexe tout en étant plus facile à réaliser.

Il reste toutefois à GWT à s’améliorer au niveau outil : des plugins Maven et Eclipse sont en cours de développement, et au niveau Widget : sur ce point certaines bibliothèques sont en train d’être porté sous GWT, comme Timeline ou Rialto.

Vous pouvez lire notre article sur l'intégration de Rialto et de GWT présentant un premier exemple de mise en oeuvre de la bibliothèque de composants Rialto/GWT en cours d’intégration dans la plateforme de développement Improve-Foundations.

Vous pouvez aussi consulter l’actualité autour de GWT sur le site onGWT