Nicolas Richeton

(This tutorial is also available in English : ESIGate Tutorial – Part 1)

Dans cette série, je vais présenter les différents usages du framework ESIGate (ex Web Assemble Tool – WAT).

Dans la partie 1, nous allons intégrer une application très simple à une template distante, uniquement via http. Le cas d’utilisation typique correspond à un intranet d’entreprise : de multiples applications différentes (gestion de contenus, gestion RH, saisie des temps, etc…) peuvent utiliser le même thème en se basant sur une application maître.

Grâce à ce fonctionnement, on obtient les avantages suivants :

• La charge de montage html est extrêmement réduite sur applications esclaves.
• Lorsque le thème change dans l’application maître, les modifications sont immédiatement répercutées sur toutes les applications esclaves, sans redémarrage
• On peut remplacer l’application maitre, sans impact si le thème est compatible
• En cas de modification incompatible de l’application maitre, on peut ‘casser’ la synchronisation en faisant pointer les applications esclaves sur un fichier html statique

Nous allons partir de l’archetype maven-archetype-webapp. Dans eclipse, créez un nouveau projet Maven, et sélectionnez l’archetype maven-archetype-webapp. Vous pouvez également utiliser directement la ligne de commande.

On attaque :

Configuration de Jetty :

Pour permettre de tester facilement l’application, ajoutons Jetty dans le fichier pom.xml : dans la section build, ajouter jetty-maven-plugin.

(...)
<build>
<finalName>esigate-tutorial</finalName>
<plugins>
<plugin>
<groupId>org.mortbay.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>7.2.0.RC0</version>
</plugin>
</plugins>
</build>
(...)

Jetty peut maintenant être lancé par :
mvn jetty:run

En pointant votre navigateur sur http://localhost:8080/ vous devez obtenir :

Amélioration rapide de l’archetype
On modifie le fichier index.jsp pour avoir un peu plus de texte :

Etape 1 : Ajout d’ESIGate
Dans le fichier pom.xml ajoutez la dépendance sur ESIGate
<dependency>
<groupId>net.sourceforge.webassembletool</groupId>
<artifactId>webassembletool-taglib</artifactId>
<version>2.17</version>
</dependency>

Et le repository maven qui va bien :
<repositories>
<repository>
<id>webassembletool-repository</id>
<name>Website Assembling Toolkit repository</name>
<url>http://webassembletool.sourceforge.net/maven/repository</url>
</repository>
</repositories>

Maintenant, nous allons utiliser la template de démonstration d’ESIGate (code source, lien).

Etape 2 : Intégration de la template d’exemple ESIGate :
Ajoutez le fichier driver.properties dans le package net.webassembletool :

remoteUrlBase=http://www.esigate.org/examples/

Cette configuration précise que tous les fichiers demandés par ESIGate seront situés dans le dossier examples du site esigate.org.

Puis, modifiez le fichier index.jsp de la façon suivante :

Dans l’ordre, on vient :

• de déclarer la taglib
• Désigné la template à utiliser : http://www.esigate.org/examples + /templates/sparkle/index.html
• Désigné 2 blocs : title et colTwo

A savoir :

• Tout code qui n’est pas inclus dans un bloc est ignoré. Ainsi, les balises html, head, body vont disparaître au profit du code de la template utilisée
• La template de démo défini 8 blocs : title, head, header, menu, colOne, colTwo, colThree et footer

Rafraichissez la page et voilà !
Votre application est intégrée dans la template d’exemple.

Etape 3 : remplacement du menu
Nous allons remplacer le menu par défaut par le notre.

Le résultat :

Etape 4 : intégation d’un bloc de contenu.
ESIGate permet également d’intégrer un bloc de contenu distant au sein d’une page. Pour cet exemple, nous allons intégrer le bloc ‘block1′ des contenus d’exemple.

Résultat :

Conclusion
En quelques lignes, nous avons synchronisé le thème de notre application avec celui de la template de démo d’ESIGate. Toute modification sera appliquée sans redémarrage de l’application (éventuellement après quelques minutes, cache oblige).

A bientôt pour la suite des tutoriaux.