Technologies

Tutoriel : premiers pas avec GWT 2 – Partie 1

Publié le : Auteur: Mohamed SYLLA Laisser un commentaire
gwt 2

Introduction

Le but de ce tutoriel est de vous familiariser à la création d’ une application Web dynamique avec le Framework GWT2.  Dans ce tutoriel je vais  mettre en exergue les notions vues dans l’article sur GWT2. Je vous conseille de le lire si ce n’est pas encore fait.

A la fin de ce tutoriel vous serez capable de mettre en œuvre une application Web dynamique avec GWT2  et de l’exécuter en  mode développement et en mode production. Vous en apprendrez un peu plus sur certains concepts vus dans l’article, notamment la fragmentation de code et les points de rupture, l’internalisation, les tests unitaires, l’API ClientBundle, le paterne MVP.

Ce tutoriel sera subdivisé en deux parties :

  • La première partie est une prise en main de GWT2. Cette partie vous montrera comment créer un projet GWT2 avec la commande webAppCreator, l’importer  dans Eclipse, puis l’exécuter suivant les deux modes (développement et production). Elle vous permet aussi de bien configurer votre environnement pour la suite.
  • La deuxième partie nous permet d’aborder les notions vues dans l’article dans une situation de projet. Cette partie nous permet non seulement d’en savoir un peu plus sur le framework GWT 2 en utilisant les nouveaux concepts de GWT2,  mais aussi de comprendre à quel point la productivité du développeur est améliorée.

Mise en place de l’environnement

Avant de commencer, vous devez avoir :

  1.  Java SDK 1.6 ou une version supérieure. Vous pouvez le télécharger à  l’adresse suivante:  Java SE Developpement Kit (JDK).
  2. Un environnement de développement intégré (EDI). Dans ce tutoriel nous utiliserons Eclipse 3.4 qui a pour nom de code Kepler. Vous pouvez l’avoir en téléchargement à cette adresse:  Eclipse IDE for Java EE Developers.
  3. GWT SDK. A télécharger le à l’adresse suivante GWT SDK, puis à décompresser. Il contient les librairies et le compilateur dont on a besoin pour écrire des applications Web.
  4. Le plugin Google pour Eclipse.
    Ce plugin fournit un support de développement d’application web, une plateforme permettant de créer et d’exécuter des applications sur l’infrastructure de Google (App Engine) et une version allégée de GWT Designer. Vous pouvez le trouver en installation à l’adresse suivante: télécharger et installer le plugin GWT pour eclips ou Help > Eclipse MarketPlace> Recherche Google> installer la version pour Eclipse 4.3.

Création du projet

Dans le dossier gwt-2.6.0.zip que vous avez téléchargé et décompressé, vous trouverez un fichier webAppCreator.cmd. C’ est l’utilitaire de ligne de commande qui génère tous les fichiers dont vous aurez besoin pour démarrer un projet GWT. Il génère également des fichiers de configuration d’un projet Eclipse et des fichiers  pour le lancement et le débogage dans le mode développement de GWT.

Ouvrez la console DOS et vérifiez la version de JDK installée.  Vous devez avoir quelque chose ressemblant à l’image ci-dessous.

gwt_console_java

Si la commande Java n’est pas reconnue, ajoutez Java à vos variables d’environnement.

Une fois ceci fait, placez-vous dans le répertoire où se trouve le fichier webAppCreator.cmd ou ajoutez gwt-2.6.0 dans les variables d’environnement et vous placez dans le dossier où vous voulez créer le projet.  Si vous voulez que les fichiers du test unitaire soit généré, téléchargez junit.jar et placez le dans le dossier gwt-2.6.0 décompressé.

Lancer la commande suivante :

webAppCreator  -junit   junit4-4.8.1.jar -out   agenda  com.sodifrance.gwt.tuto.agenda

Le script va générer un projet basique (un Hello Word) contenant les fonctionnalités de base d’une application Web, un fichier Ant (build.xml) qui nous permet de compiler le projet et un fichier agenda.laucher pour exécuter l’application en mode développement.

L’écran ci-dessous montre la génération du projet et l’ensemble des dossiers et fichiers générés.

gwt_console_created

Importation du projet dans Eclipse

Une fois le projet créé, vous pouvez l’importer dans Eclipse sans le moindre problème, car les fichiers de configuration  pour Eclipse ont été générés avec le projet.

 gwt_projet_eclipse

Exécution de l’application

Il y adeux modes d’exécution de l’application, qui sont  le mode développement et le mode production mode.

1. Le mode développement (ou dev mode)

C’ est celui utilisé en phase de développement de l’application. Ce mode nous permet de voir le bon fonctionnement de l’application en cours de développement. Dans ce mode un conteneur de servlets embarqué (Jetty) est utilisé. Le choix s’est porté sur l’outil Jetty pour sa capacité a démarrer rapidement (le serveur est fréquemment arrêté et relancer) mais également sa prédisposition à être hébergé dans une JVM et piloté via des API.

Je ne vais pas détailler la structure du projet dans ce tutoriel. Pour en apprendre plus sur la structure d’un projet GWT2, je vous invite à consulter le site officiel de GWT.

Pour  lancer notre première application GWT. Positionnez-vous sur le fichier aganda.lauch et faire Debug As puis cliquez sur le nom du projet.  Une fenêtre apparaît.

gwt_launch_debug

Cette fenêtre est le Shell. C’est une fenêtre hiérarchique qui permet de lancer l’application en mode debug et affiche au développeur  tous les messages d’erreur en provenance de GWT.

gwt-shell

Les onglets affichés dans le Shell correspondent aux différents modules en cours d’exécution. Je ne vais pas détailler le contenu et le fonctionnement des différentes parties qui composent le shell dans ce tutoriel. Pour en savoir plus sur le mode développement en général et sur  le shell en particulier, je vous invite à consulter le site officiel de gwt.

 Cliquez sur le bouton « Lauch Default Browser » pour lancer l’application dans votre navigateur par défaut. Vous pouvez aussi copier l’URL et la saisir dans la barre d’adresse du navigateur de votre choix.

Au premier lancement, le plugin GWT n’étant pas installé, vous verrez une fenêtre vous demandant d’installer le plugin comme le montre la capture d’écran ci-dessous.

gwt_install_plugin

 Une fois ce plugin installé, vous verrez votre application s’affiché comme suit: gwt_appli_lancee

Félicitation! vous venez de créer et exécuter votre première application GWT2.

Pour découvrir un peu plus sur ce framework, vous pouvez vous amuser à faire quelques modifications et voir les résultats. Vous pouvez par exemple essayer d’afficher les libellés et les messages en français. Vous pouvez également vous amuser à lancer les tests unitaires via agendaTest-dev.launch.

2. Le mode production

Le mode développement est un mode dans lequel toute l’application est émulée via une JVM. Or une fois en production, il n’est plus question d’appeler du byte code Java: il nous faut un vrai site Web. C’est le rôle du mode production.

Ce mode est utilisé lorsque l’application GWT finale  est réellement exécutée, c’est à dire au travers d’un navigateur et avec le site entièrement traduit en JavaScript par le compilateur GWT.  Ce mode fait alors suite à une phase de compilation avant son déploiement. Contrairement au mode développement qui utilise un serveur interne (jetty), dans ce mode un conteneur web (Apache Tomcat) ou un serveur d’application (GlassFish, JBoss, JOnAS,…) externe est utilisé.

Nous allons alors compilé et déployer notre projet.

Compilation du projet

Pour la compilation, un fichier a été généré avec le projet. La compilation est généralement réalisée via une tâche Ant, Maven ou simplement en ligne de commande. Dans ce projet, une tâche Ant ( buil.xml) nous permet de réaliser la compilation.

La capture ci-dessous nous montre comment compiler notre projet.

gwt_tuto_compil

Une fois la compilation s’est correctement passée, nous pouvons déployer notre projet sur un conteneur Web externe. Ici mon choix s’est porté sur GlassFish pour sa facilité d’intégration dans Eclipse.

Déploiement du projet

  1. renommer le dossier war en WebContent
  2. ajouter au projet une facette « Dynamique Web »
  3. télécharger le serveur d’application GlassFish
  4. ajouter le plugin glassFish dans Eclipse
  5. ajouter le serveur à la perspective Servers et ajouter le projet au serveur
  6. lancer le serveur
  7. si succès, vous verrez « Loading application [agenda] at [/agenda] »
  8. saisissez dans la barre d’adresse d’un navigateur de votre choix l’URL « http://localhost:8080/agenda » .

Remarque:  Cette fois-ci le navigateur n’a pas besoin du plugin GWT. Vous verrez que le résultat est le même qu’en mode développement  mais avec une exécution plus rapide, car on a plus besoin de byte code java, c’est du pur JavaScript.

Si vous avez pu lancer votre application et obtenir un résultat avec les deux modes (mode développement et mode production), cela veut dire que votre environnement est bien configuré et que vous avez des ressources nécessaires pour démarrer la deuxième partie du tutoriel.