jeudi 18 avril 2013

Introduction au Super Dev Mode avec GWT 2.5

L'article ci-présent correspond à l'élaboration d'un tutoriel sur le super dev mode de GWT.

Le Super Dev Mode a été introduit dans la version 2.5 de GWT. Il est une alternative au bien connu Dev Mode qui permettait de voir les modifications apportées à une application GWT sans avoir besoin de la recompiler. Le point faible étant que le Dev Mode classique est relativement lent, le temps de chargement des pages est considérablement alourdi.  Il nécessite également l'installation d'un plug-in additionnel sur son navigateur, le Super Dev Mode lui n'en a aucunement besoin.

Le Super Dev Mode a donc été créé pour palier ces lacunes, il est aujourd'hui sous le statut experimental et ne doit pas être utilisé en production. Cependant il peut nous être bien utile lors de notre phase de développement. Je vais expliquer par la suite comment l'utiliser avec l'IDE eclipse. Je ne présenterai pas le fonctionnement en détail du Super Dev Mode, si vous souhaitez en connaître d'avantage, je vous invite à lire cette page écrite par google.

Pour la suite, je pars du principe que vous avez un eclipse qui fonctionne avec le plugin gwt et qui utilise la version 2.5 du SDK.

Etape 1 : Création d'un projet lambda

La première étape consiste bien sûr à créer son projet sous eclipse. Pour cela, on va procéder de façon classique : File -> New -> Web Application Project, j’appellerai mon projet TestSuperDevMode. J'obtiens l'arborescence suivante
Pour le moment j'ajoute juste un label à ma page principale au niveau de mon point d'entrée :
A présent il suffit de compiler et de lancer l'application sur le serveur Jetty (où sur un autre serveur si en utilisez un autre).
Petit rappel : clic droit sur votre projet -> Run As -> Web Application ensuite tapez l'url suivante http://127.0.0.1:8888/TestSuperDevMode.html dans votre navigateur préféré.

Le label créé dans le point d'entrée devrait apparaître :
 Etape 2 : Modification du descripteur de module

Ajoutez les deux lignes suivante dans votre fichier .gwt.xml (pour ma part il s'agit du fichier TestSuperDevMode.gwt.xml) et recompilez votre projet.
  <add-linker name="xsiframe"/>
  <set-configuration-property name="devModeRedirectEnabled" value="true"/>


Etape 3 : Création de la configuration d’exécution et lancement du serveur

Pour lancer le super dev mode, nous allons devoir créer un nouvelle configuration d’exécution de notre application. Pour cela, clic droit sur votre projet -> Run as -> Run Configurations...


Sélectionnez maintenant Java Application, faites un clic droit -> New

Dans l'onglet Main :
        - Choisissez un nom qui vous convient, pour ma part je l'appelle TestSDM
        - Pour le projet, sélectionnez celui que vous avez créé, de mon côté il s'agit de TestSuperDevMode
        - Pour la Main class il faut saisir celle-la : com.google.gwt.dev.codeserver.CodeServer

Dans l'onglet Argument :
Il faut saisir le répertoire de vos sources dans le projet, ainsi que le chemin complet de votre descripteur de module (le fichier .gwt.xml). De mon côté j'ai les arguments suivants -src src/ com.sdm.TestSuperDevMode :



Dans l'onglet Classpath :
Il faut rajouter le jar gwt-codeserver.jar au classpath. Il se trouve dans le répertoire de votre SDK. Si vous avez téléchargé le sdk de gwt à partir d'eclipse (lors de l'installation du plugin) alors le jar se trouve dans le répertoire contenant votre eclipse (une petite recherche windows dans le répertoire de'eclipse vous permettra de retrouver facilement le jar)

Sélectionnez User Entries -> Add External JARS... et ajoutez gwt-codeserver.jar



Il vous suffit maintenant de cliquer sur Apply puis Run.
La console devrait afficher le message suivant à la fin


Etape 4 : Lancement au sein du navigateur

Dans un premier temps, tapez l'url suivant dans votre navigateur http://localhost:9876/
Mettez les liens Dev Mode On et Dev Mode Off en marque page pour pouvoir y accéder rapidement

Maintenant c'est presque terminé, il vous suffit de vous rendre sur la page de votre application http://127.0.0.1:8888/TestSuperDevMode.html puis de cliquer sur votre marque page Dev Mode On.

Cliquez sur Compile et votre projet est réactualisé.

Ajoutez maintenant un bouton sur votre application après votre label :

Retournez sur votre navigateur, cliquez sur dev mode on puis compile et les modifications apparaissent :


Aucun commentaire:

Enregistrer un commentaire