samedi 5 janvier 2013

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

Aucun commentaire:

Enregistrer un commentaire