Des applications web riches avec GWT

de | 14 décembre 2010

Depuis plusieurs années, Google vous propose de créer des applications web très riches grâce à framework relativement facile à mettre en oeuvre (du moins au premier abord). L’objectif de cet article n’est pas de faire de vous un pro du GWT dans l’heure qui suit, mais plutôt de faire un état des lieux de la technologie, voire ce qu’il est possible de faire, et ce qui ne l’est pas …

Le principe

GWT part d’un constat simple : développer des application internet riches est un vrai casse-tête pour le développeur : il doit souvent associer plusieurs technologies différentes afin d’obtenir un résultat satisfaisant, comme par exemple du Java pour la partie serveur avec du Javascript etc …. pour la partie client. On se retrouve donc avec des applications qui sont difficilement maintenables car faisant cohabiter des technologies différentes et donc nécessitant des compétences différentes.

GWT met donc tout le monde d’accord en vous permettant de développer votre application intégralement en Java, la partie du client (exécutée par le navigateur) étant par la suite compilée en Javascript afin de pouvoir fonctionner sur n’importe quel type de navigateur.

Découpage de votre application

Votre application GWT sera donc découpée en deux parties qui se trouveront dans deux packages différents :

  • Un package server qui contiendra des servlet qui permettront à votre application de communiquer avec le restant du monde
  • Un package client qui contient la partie présentation de votre application (exécutée dans le navigateur) codée en Java mais qui sera intégralement transformée  en Javascript et Html.
  • La communication entre l’interface graphique et la partie serveur se fait par le biais de méthodes asynchrones

Point important : Etant donné que cette partie de l’application sera compilée en Javascript, vous n’avez le droit d’utiliser QUE des objets qui sont compilables en Javascript. De plus, ces objets doivent nécessairement se trouver dans un package client GWT afin d’être utilisés. Si votre application utilise un datamodel composé de classes, ces dernières devront nécessairement se trouver dans un package client d’un projet GWT.

Mise en oeuvre

Environnement de développement

La mise en oeuvre de GWT est relativement simple, grâce aux outils proposés par Google et à l’environnement de développement Eclipse qui fournit tout le cadre au développement. Pour faire vos premier pas, procédez comme suit pour installer votre environnement de développement:

Installez Eclipse, si ce n’est pas déjà fait, rendez-vous ici et récupérez la dernière version pour développeur JEE.

Installez le plugin GWT pour eclipse : Vous trouverez ici un lien pour connaitre l’Url du plugin GWT pour votre version d’Eclipse.

  1. Dans eclipse ouvrez le menu help
  2. Cliquez sur Install new software
  3. Rajoutez le repository dont l’Url est celle que vous avez trouvé sur le dernier site (http://dl.google.com/eclipse/plugin/3.6 pour Helios)
  4. Sélectionnez le repository, sélectionnez tous les items et installez-les.
  5. Redémarrez votre Eclipse quand on vous le demandera
  6. Le plugin est installé !!

Créez votre projet

  • Créer un projet GWT est extrêmement simple : File >> New >> Web application project
  • Donnez lui un nom
  • Spécifiez un nom de package
  • Décochez l’option « Use Google App Engine »
  • Validez votre création en cliquant sur finish

Vous devriez obtenir une structure projet similaire à celle-ci

Comme vous pouvez le voire, le projet contient deux packages essentiels à son bon fonctionnement :

  • le package client ( IHM, qui sera transformé en JavaScript ). Etant donné que ce package sera compilé en Javascript, il ne devra contenir QUE des objets compilables en Javascript.
  • le package server

Le package shared n’est pas nécessaire au bon fonctionnement du projet.

On remarque également la présence d’un fichier MonProjet.gwt xml. Ce fichier xml permet de définir

  • Les package qui seront compilés en JavaScript
  • La classe qui sera le point d’entrée de l’application (cette classe est reconnaissable implémente l’interface EntryPoint, il s’agit ici de la classe MonProjet)
  • Des liens vers les packages externes (également compilables en Javascript)

Le package client contient trois classes :

  1. La classe GreetingService : Cette interface est l’interface permettant de faire le lient entre les méthodes asynchrones et les méthodes qui seront appelées par le client. Cette interface est implémentée par la servlet coté serveur.
  2. La classe GreetingServiceAsync : Cette interface contient toutes les méthodes asynchrones qui seront appelées coté client pour executer des méthodes coté serveur.
  3. La classe MonProjet qui est le point d’entrée de l’application

Hosted mode

La notion de hosted mode est relativement importante dans GWT. Ce mode de développement permet de lancer votre application sans la compiler en Javascript (la compilation en Javascript est un procédé relativement long) et donc de tester le code que vous écrivez « à chaud ». L’affichage de votre travail non compilé se fait à présent dans votre navigateur préféré (le navigateur se prêtant le mieux à cet exercice rester Firefox), après l’installation d’un plugin dans celui-ci. Lorsque vous lancerez votre application pour la première fois, une fenêtre s’ouvrira dans éclipse vous permettant de contrôler le serveur Jetty embarqué. Une url apparaitra dans cette fenêtre, qui correspond à l’url de l’application que vous développez. Copiez-collez cette URL dans votre navigateur pour exécuter l’application. Si besoin est, le navigateur vous demandera de télécharger le plugin GWT pour exécuter l’application sans l’avoir compilée en Javascript.

Pour lancer le hosted mode, il vous suffit d’executer votre application comme une Application Web (une run conf GWT sera automatiquement crée)

Debug

Debugger un application GWT est un jeu d’enfant : si votre application est lancée en mode Debug, vous pouvez placer des points d’arrêt et débugger votre code Java alors que celui-ci est appelé à être compilé en Javascript.

Conclusion

Développer des application Web interactives et complexes en Javascript n’est pas chose aisée, la technologie se prêtant mal aux applications complexes et au Debug malgré des Framework efficaces comme JQuery. Google apporte donc une solution robuste quoique parfois contraignante car le package client ne permet d’utiliser que des éléments compilables en Javascripts, ce qui réduit certaines possibilités, comme par exemple utiliser un Stringtokenizer coté client qui n’est pas un objet compilable en Javascript.

Une réflexion au sujet de « Des applications web riches avec GWT »

  1. Ping : Tutorial : mettre en place le Desktop de GXT pour développer des applications multi module | Sylvain Yenoussa - Consultant IT et NTIC

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Time limit is exhausted. Please reload the CAPTCHA.