Introduction à GWT - Partie 3 - Anatomie d'un projet GWT

Leave a Comment
Article précédent: Préparation de l'environnement de travail.
Dans ce troisième article nous verrons l'organisation d'un projet GWT puis modifierons le code du projet HelloWorld.
L'image ci-dessous donne un aperçu de la façon dont est organisé notre projet: 




Rappel: Rappelez-vous que nous avons créé notre application avec le package com.nouhoum.gwt.HelloGWT.

En vous rendant à la racine du projet vous verrez qu'il est structuré principalement en trois dossiers: src, test et war que nous allons explorer.
  • src: Ce dossier contient le code source Java de notre application ainsi que la configuration du module. Nous reviendrons, dans la suite, sur la notion de module dans la suite. Le code source de l'application est subdivisé en trois catégories:
    • com.nouhoum.gwt.client: Le code Java destiné à être transformé en Javascript et exécuté par le navigateur est placé dans ce package. Notez que dans vous ne devez utiliser dans ce package que les classes du JRE pouvant émulées par le compilateur de GWT.
    • com.nouhoum.gwt.shared: Ce package contient le code commun aux parties serveur et client de l'application.
    • com.nouhoum.gwt.server: Si l'application contient une partie serveur le code correspondant sera placé dans ce package. Le code-serveur n'est pas traduit en Javascript et peut contenir toute classe du JRE. Le chemin complet pour accéder au code-serveur à partir de la racine du projet est com/nouhoum/gwt/server.
  • test: Ici se trouvent les fichiers relatifs aux tests unitaires de notre application.
  • war: Les ressources statiques telles que les images, les fichiers de style et les pages HTML se trouvent ici. Une application GWT est constituée d'une unique page (ici HelloGWT.html - voir figure l'image ci-dessus) dont le contenu est dynamiquement effacé et dessiné. Nous reviendrons, dans le prochain article, sur le contenu de cette page.
  • war/WEB-INF: Ce dossier contient les fichiers qui font de notre application une application web Java. Il contient notamment web.xml, le fichier de configuration de l'application web Java.
  • war/WEB-INF/lib: Contient les librairies utilisées par l'application.
La structure de projet que nous venons de voir n'est point obligatoire. Vous pouvez la changer si vous le souhaitez comme nous le verrons plus tard. 

La notion de module

 La notion de module définie en GWT permet de "packager" des fonctionnalités et de les distribuer afin d'être utilisées dans d'autres projets. Le module constitue l'unité de configuration en GWT et correspond concrètement à un fichier de configuration [NomModule].gwt.xml et un ensemble de fichiers (classes Java, ressources statiques....). Pour notre application HelloGWT le fichier de configuration HelloGWT.gwt.xml est situé com/nouhoum/gwt/.  Voici son contenu:



Voyons la signification des éléments de ce fichier de configuration:
  • Renommer le module: L'option rename-to de l'élément permet .... de renommer le module.
  • Hériter d'autres modules: Le code source de GWT est un ensemble de modules dont peuvent hériter les applications GWT. Ceci est accompli grâce à l'élément . Par exemple notre application hérites des fonctionnalités de base de GWT se trouvant dans le module : com.google.gwt.user.User.
  • Le point d'entrée de l'application: L'élément permet de spécifier le point d'entrée de l'application. Il s'agit d'une classe particulière qui est instanciée lorsque le module est chargé. Toute classe peut être le point d'entrée du module à condition d'implémenter l'interface EntryPoint définie. Cette interface à une unique méthode onModuleLoad() sans argument qui s'exécute au chargement du module.
  • Les sources: L'élément permet de spécifier où se trouvent les classes à convertir en Javascript. Dans notre exemple les client et shared sont inclus.
Vous en savez suffisamment sur le fichier de configuration d'un module pour la suite de cet article.

Les modes d'exécution d'une application GWT

Le mode développement 

Ce mode est très utile lors de la phase de développement. Il permet d'exécuter l'application tout en bénéficiant de facilitations de debuggage de l'IDE (Eclipse). En effet dans ce mode c'est le bytecode Java qui s'exécute et le plugin GWT fait la liaison entre la JVM et le navigateur.

Le mode production

Ce mode permet de tester l'application dans des conditions similaires à ce qu'on peut rencontrer en production. Le code de l'application est transformé en Javascript. Il sert notamment à tester l'application (rendu, performance...) dans différents navigateurs.

Passons à l'action
  • Lancer l'application avec la tâche ant devmode : Lorsque l'application a été créée avec webAppCreator un fichier de build Ant qui sert entre autres à lancer l'application en mode développement.
    ant devmode
    
  • Lancer l'application depuis Eclipse: Faites un clic droit puis Run as > Web Application.


Cliquez sur le bouton Copy to Clipboard et coller l'URL dans votre navigateur. Vous obtenez, si vous n'avez pas déjà le plugin, une suggestion d'installation:



Installez le plugin en suivant les instructions puis lancez l'application. En attendant le prochain article vous pouvez jouer avec l'application HelloGWT.

Article suivant: Place à un peu de code

© Nouhoum TRAORE.. Fourni par Blogger.