Chargement de plusieurs modules au sein d'un même projet GWT

Par défaut lorsqu'on crée un projet GWT, il y a un module (point d'entrée) qui est automatiquement créé et qui porte le même nom que le projet. Comme nous allons le voir par la suite, il est tout à fait possible de définir d'autres modules et de les charger au sein du même projet.

1) Création d'un projet par défaut

Créons dans un premier temps un projet gwt nommé MultiModules.

2) Modification du module créé

Le module qui a été créé par défaut se nomme multimodules, nous allons le renommer en premiermodule

Pour cela il faut ouvrir le fichier MultiModules.gwt.xml, remplacez la balise <module rename-to="multimodules"> par <module rename-to="premiermodule">, nous allons également renommer ce fichier en PremierModule.gwt.xml. On voit dans la balise <entry-point class='com.multi.modules.client.MultiModules'/> que le point d'entrée de l'application correspond à la classe java MultiModules. Renommez cette classe en PremierModule.java et changez la balise entry-point par <entry-point class='com.multi.modules.client.PremierModule/>

Dans le point d'entrée PremierModule.java, effacez tous le code qui a été créé, construisez un widget à votre guise comme dans l'exemple suivant, c'est juste pour voir quelque chose apparaître sur notre navigateur !

Dans le dossier war, on remarque la présence de ces deux fichiers MultiModules.html et MultiModules.css. Renommez-les en PremierModule.html et PremierModule.css.

Sur la page PremierModule.html on va charger le module gwt PremierModule, pour cela il faut modifier le code suivant :

3) Ajout d'un second module

On va maintenant créer le descripteur du module, à savoir le fichier SecondModule.gwt.xml au même endroit que celui du premier module.
Le nom du module sera secondmodule et le point d'entrée sera la classe com.multi.modules.client.SecondModule comme indiqué sur l'image suivante :

Il faut maintenant créer le fichier SecondModule.java dans le package com.multi.modules.client qui se contentera d'afficher un simple label.

Il ne nous reste plus qu'à créer un fichier SecondModule.html dans le dossier war afin de charger le module que l'on vient de créer.

 

Vous pouvez également modifier la balise <welcome-file> du fichier web.xml afin d'y mettre la page PremierModule.html par exemple. 

4) Compilation et lancement du projet

 Pour compiler votre projet, rien de plus simple, il vous suffit de faire comme à votre habitude un GWT Compile Project... et de sélectionner le module que vous souhaitez compiler.

Après compilation des deux modules, on observe bien leur présence au sein du dossier war. Il ne vous reste plus qu'à démarer votre serveur et afin de déployer le projet dessus.

Rendez vous aux deux adresses suivantes (http://localhost:8080/MultiModules/PremierModule.html et http://localhost:8080/MultiModules/SecondModule.html) pour bien vous rendre compte que vos deux modules ont été chargés.

Le fait d'avoir plusieurs modules peut vous permettre de développer séparément deux fonctionnalités bien différentes au sein d'un même projet.

Petite intégration de l'api Google Map au sein d'un projet GWT

Nous allons voir comment afficher une simple carte dans un projet GWT grâce à l'api Google Map.

1) Ajout de la librairie Google Map au projet

Dans un premier temps, il faut inclure le code suivant au sein de la page HTML qui affichera la carte :

 <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

2) Création d'une classe java pour initialiser la carte

Dans un second temps nous allons initialiser notre carte au d'une méthode JSNI (JavaScript Native Interface). JSNI permet d'écrire des fonctions en javascript à l'intérieur d'une classe Java. En gros ça nous permet de coder en javascript au sein de notre projet GWT, et ça ben c'est bien pratique.

Rappel : Pour déclarer une méthode JSNI, il faut déclarer la méthode avec le mot clé native, et elle doit commencer par /*-{ et finir par }-*/;

Premièrement je crée une classe Gmap dans laquelle je vais écrire ma méthode JSNI permettant d'initialiser notre carte.

Je ne vais pas rentrer dans les détails de ce code, sachez juste qu'il sert à initialiser une carte ayant les coordonnées (48.94, 2.49). Si vous observez bien la dernière instruction on remarque que la carte sera ajouté sur la page html a l'élément ayant pour id : map. Pour l'instant nous n'avons aucun composant ayant pour id map au sein de notre page html. Il va donc falloir le créer.

3) Ajout de la carte sur la page html

Nous allons tout d'abord créer une div ayant pour id "map" au sein de notre page html. On comprend donc que la carte sera ajoutée à cette div lorsque nous appellerons la méthode initMap de la classe Gmap.

Pour initialiser la carte il vous suffit d'appeler l'instruction suivante Gmap.initMap() dans votre module GWT.

Compilez et déployez votre projet, vous obtiendrez le résultat suivant :

Une alternative consiste à créer l'élément html d'id "map" au sein de notre module GWT et non pas dans la page HTML. Pour cela supprimer la ligne suivante dans votre page html <div id="map" style="width: 300px;height: 300px;"></div>
Nous allons créer un panneau HTML d'id "map" et ensuite initialiser notre carte :

L

Au final on obtient exactement le même résultat. Libre choix au développeur de d'opter pour la meilleure formule !!

Créer et déployer son projet GWT sous Tomcat via Eclipse

Le but de ce post est de déployer un projet GWT sous un serveur J2EE via Eclipse. Ici nous utiliserons le bon vieux serveur Tomcat, mais on pourrait en faire autant avec JBoss ou Glassfish.
  
  1) Dans un premier temps nous allons créer un bête projet GWT 

   
2) Transformation du projet GWT en projet web
Effectivement pour l'instant on remarque bien qu'on ne peut pas déposer le projet directement sous Tomcat.
Clique droit sur Tomcat -> Add and Remove

 

On voit clairement qu'on ne peut pas ajouter le projet que l'on vient de créer sur le serveur, quel dommage !!
Pour remédier à cela, on va changer quelque peu les caractéristiques de notre projet. Faites un clique droit sur le projet puis properties. Enfin cliquez sur le libellé Project Facets, vous devriez arriver sur la vue suivante :

Ici il faut cliquer sur la ligne Dynamic Web Module, comme je l'ai fait sur l'écran précédent, c'est cette action qui va permettre de transformer le projet gwt en projet web. Cliquez sur Apply puis Ok !

  3) Remise en place du projet
 Notre projet prend ainsi l'arborescence suivante :

Que remarque-t-on ? Un répertoire WebContent a été ajouté au projet. Et oui, le war de notre projet sera créé à partir des éléments contenus dans ce dossier. En gros, c'est dans ce dossier que sera stockée notre application, comme dans un projet J2EE classique.
Pour l'instant le problème c'est que notre application web est représentée dans le dossier war, il faut donc copier tous les éléments de ce dossier (WEB-INF, favicon.ico, GwtDeployment.html, GwtDeployment.css) vers le dossier WebContent. Une fois cette opération effectuée, tentez de supprimer le dossier war car il ne nous sert plus à rien, vous devriez ainsi obtenir l'arborescence suivante : 

On obtient une belle erreur et pour cause, le projet GWT a été configuré de telle façon qu'il soit compilé dans le dossier war, or on a enlevé tous les éléments du dossier, le module GWT ne sait donc plus quoi faire : il est perdu !! 
Pour l'aider, on va lui indiquer qu'il doit compiler au sein du dossier WebContent. Faites un clique droit sur le projet -> properties. Dirigez-vous vers l'onglet Google -> WebApplication. Le War directory doit pointer vers le dossier WebContent comme indiqué sur l'écran suivant :

Le projet ne comporte désormais plus d'erreur, vous pouvez supprimer de nouveau le dossier war, on obtient l'arborescence suivante :

  4) Compilation et déploiement

Faites maintenant un GWT compile du projet, vous verrez le module "gwtdeployment" apparaître dans le dossier WebContent.

 Il reste plus qu'à ajouter le projet sur le serveur, pour cela cliquez droit sur le serveur -> Add and Remove, vous voyez le projet GwtDeployment apparaître dans la liste, ajoutez-le puis démarrez votre serveur !

Il ne vous reste plus qu'à lancer un bon vieux firefox et d'aller à l'adresse suivante : http://localhost:8080/GwtDeployment/ pour accéder à votre application.

  

Le petit plus du mode hosted

Dans notre cas ici présent on peut tout à fait lancer notre projet en mode hosted afin de ne pas recompiler le module GWT à chaque modification. Il suffit de faire un clique droit sur le projet puis Run as -> Web Application, et d'aller ensuite à l'adresse suivante : http://127.0.0.1:8888/GwtDeployment.html?gwt.codesvr=127.0.0.1:9997
Vous obtiendrez la même application que sur l'écran précédent, cependant vous pouvez maintenant modifier le code du module GWT et observer cette modification sans avoir besoin de recompiler le projet.

Par exemple, modifiez le label du bouton "Send" par "Envoyer" dans le fichier GwtDeployment.java, rechargez l'application sur votre navigateur, vous verrez alors apparaître la modification !

  
Pour fonctionner, le mode hosted utilise le petit serveur d'application Jetty, il n'y a donc plus de relation avec notre serveur Tomcat créé initialement. Imaginons maintenant que notre projet contienne des servlets (où des EJBs sur JBoss par exemple) externes au module GWT et que ces dernières soient utilisées au sein du projet GWT. Le mode hosted ne pourrait plus fonctionner car ces servlets ne seraient pas chargées sur le serveur Jetty. La solution pour continuer à utiliser le mode hosted est de faire en sorte que le code côté serveur soit gérer par le serveur Tomcat et que celui côté client soit gérer par le serveur Jetty. Pour cela il suffit juste de saisir l'url suivante dans notre navigateur : http://localhost:8080/GwtDeployment/?gwt.codesvr=127.0.0.1:9997 (bien sûr il faut que votre serveur Tomcat soit démaré et que le projet soit déployé dessus).

Pour se rendre compte de la modification, il suffit de cliquer sur le bouton Envoyer et d'observer le message obtenu dans le popup

  - Pour la première url (http://127.0.0.1:8888/GwtDeployment.html?gwt.codesvr=127.0.0.1:9997), le message est : blablabla I running jetty-6.1.x blablabla. Cela confirme que l'on utilise bien le serveur Jetty intégré à GWT.

   - Pour la seconde url (http://localhost:8080/GwtDeployment/?gwt.codesvr=127.0.0.1:9997), on obtient le message blablabla I am running Apache Tomcat blablabla. Cela confirme donc que l'on utilise bien notre serveur Tomcat, ainsi tous les éléments présents sur le serveur pourront être utilisés. 

 
Au final, si vous modifiez du code GWT côté client, vous avez juste à recharger l'application pour voir le changement apparaître. En revanche si vous modifiez du code côté serveur que ce soit au sein du module GWT ou en dehors, vous devez faire un publish sur le serveur Tomcat puis recharger l'application dans votre navigateur pour que la modification soit prise en compte !!