Quelques éléments pour le TP GWT

by Olivier Barais     teaching   istic   m2   french  

Posted 2014.09.29 — Rennes, France

Hello très chers étudiants,

Pour ce premier TP de GLI, nous allons étudier GWT. Pour la mise en place de l'environnement, la compilation, le lancement du serveur ..., nous utiliserons maven.

Etape 0: Création du projet

Pour démarrer, nous pouvons utiliser l'archetype maven gwt.

mvn archetype:generate \
   -DarchetypeGroupId=org.codehaus.mojo \
   -DarchetypeArtifactId=gwt-maven-plugin \
   -DarchetypeVersion=2.6.1

Renseignez alors, le groupeId, l'artefactId, la version, le package par défaut, et le nom du module gwt que vous souhaitez créer.

Testez la compilation

mvn gwt:generateAsync gwt:i18n compile gwt:compile package

Attention, à chaque fois que vous touchez aux interfaces de services ou aux messages, vous devrez regénérer le code Java des interfaces Async ou des messages en tapant.

mvn gwt:generateAsync gwt:i18n

Etape 1: Installation eclipse

Dans eclipse, il existe un certains nombre de plugins que vous pouvez installer, ils ne sont pas nécessairement requis. Entres autres, le designer peut intéresser certains d'entres vous.

Etape 2: Import du projet

Dans eclipse, importez votre projet maven:

File -> Import -> maven -> Existing maven project.

Séléctionnez le répertoire de votre projet. Il expliquera qu'il ne sait pas gérer la tâche gwt:.., séléctionner ignore add to pom.

Etape 3: Premier démarrage du projet à l'aide du super dev mode

Dans la description de votre projet, (fichier gwt.xml dans le répertoire ressources), ajoutez les lignes suivantes avant la clôture de la balise module.

<add-linker name="xsiframe"/>
<set-configuration-property name="devModeRedirectEnabled" value="true"/>

Puis vous pouvez lancer

mvn gwt:run-codeserver

et dans un autre onglet

mvn gwt:run

Allez à l'adresse : http://localhost:9876/

Mettez dev mode on et dev mode off comme des bookmarks de votre navigateur.

Puis allez à l'adresse : http://127.0.0.1:8888/MODULE.html en remplaçant module par le nom de votre module. Cliquez sur le bookmark devmodeon que vous venez de créer, vous devriez pouvoir recompiler votre code à la volée. Si vous touchez au code côté serveur, vous pouvez rechargez jetty depuis le deuxième onglet de la fenètre qui est apparue au lancement de mvn gwt:run.

Pour activer le lien entre les sources Java et le debug javascript

Ajoutez la ligne suivante à votre fichier gwt.xml

<set-property name="compiler.useSourceMaps" value="true" />
  1. Open chrome dev tools
  2. Open Settings (gear in bottom right of dev tools)
  3. In "Source" section, enable source maps If you notice you can navigate and step through both the Java code and jsni methods (something that was never available before). Also, recompiling the module is as easy as clicking "Dev Mode On" again and compiling the new module. Compilations are much quicker than full GWT compiles. The incremental builds save a lot of time.

Even if the Eclipse/IntelliJ plugin paired with chrome’s plugin are good enough for you, source maps still have some advantages. Source maps appear to be a new techonology that will be used more and more, so getting familiar with using it now should benefit you in the future.

Etape 4: Développez votre projet

Créer une interface web pour le projet DoodleBlablaCar (Sujet de Taa)

J'ai mis un exemple GWT qui attaque des services Restful (Json + Jersey). sur github

J'ai aussi mis un exemple GWT + SmartGWT + superdev mode ici github

Have fun ;)