Intégration de GWT

Le lecteur devra avoir une connaissance de Java J2EE et du framework struts. Cet article est d'un niveau intermédiaire.

L'objectif de cet article est tout d'abord à but d'autoformation. Le but était d'intégrer GWT dans une appli déjà existante et de l'éprouver face à des méthodes de développement industriel. Le travail réalisé lors de cet apprentissage peut permettre à d'autres personnes dans des situations similaires de ne pas recommencer à partir de zéro. Il s'agit d'une base de travail, mais en aucun cas d'une référence absolue puisque cet article s'est construit à tâtons et que les solutions décrites ne sont pas obligatoirement les meilleures. Le framework GWT est récent puisqu'il apparaît en 2006. Sa communauté est encore jeune et la documentation autour du produit reste limitée à celle du site officiel, il s'agissait d'enrichir cette communauté.

Pour définir GWT je citerai un article de ce même site. Les grandes lignes y sont décrites et je prendrai comme hypothèse dans la suite de l'article que les principes généraux sont connus.

Le framework GWT s'il peut paraître très prometteur a de quoi laisser perplexe les développeurs J2EE. En effet celui-ci n'est pas un simple framework Java vers JavaScript, c'est aussi une autre façon de concevoir un site web. La méthode de développement est proche d'une appli swing avec son modèle évènementiel.

Partant du constat que l'approche est très différente, il semble d'un premier abord que l'utilisation de GWT est réservée aux nouveaux développements, aux sites web partant de zéro. Cependant ce n'est pas exact, en effet nous allons justement nous pencher sur le fonctionnement de GWT pour approfondir la façon dont il peut s'interfacer avec d'autres frameworks, non sans mal malheureusement. Je vous encourage cependant vivement à lire l'article suivant avant celui-ci : mon premier projet GWT.

Pour démarrer, nous allons partir d'un projet testGWTStep1 entièrement basé sur struts et tiles. Les sources sont fournis en annexe. Voici tout d'abord l'organisation générale du projet :

Ses caractéristiques principales sont d'afficher une liste de contacts et de permettre de filtrer l'affichage des résultats par un petit formulaire. Le projet est construit avec maven2 et on peut visualiser le résultat aisément grâce au plugin cargo.

Le projet n'est ici qu'une illustration ayant pour but de coller à l'application décrite dans le tutoriel mon premier projet GWT. Tout est regroupé dans le même projet, mais les packages font ressortir une organisation classique :

• un package regroupant les modèles de l'application ;
• un package regroupant les services ;
• un package regroupant les actions.

Dans le paramétrage struts on retrouve l'utilisation de tiles et notamment l'utilisation d'un layout dont le contenu est alimenté par l'action, les headers et footers étant génériques pour tout le site.

Une contrainte évidente est de continuer à utiliser maven 2 pour le build. Il était hors de question d'intégrer GWT dans une appli sans avoir un processus automatique de build. GWT est fourni avec un shell permettant de produire un script de compilation assez basique et non industriel, mais heureusement il existe déjà plusieurs plugins maven actuellement disponibles sur Internet qui m'éviteront la tâche d'en réaliser un :

• plugin Googleplugin google ;
• Plugin gwtforgePlugin gwtforge ;
• Plugin codehausPlugin codehaus.

Je n'ai testé que les deux premiers, si une personne désire tester le troisième qui n'est pour l'instant que dans le sandbox des plugins codehaus ce sera un enrichissement intéressant de cet article.

Le test du plugin Google s'est révélé peu concluant, la documentation est laconique et les erreurs signalées ne m'ont pas permis de poursuivre. Sa configuration est complexe en regard du plugin gwtforge. Un élément intéressant cependant est que la doc indique l'existence d'un repository mavenrepository maven. On y retrouvera notamment les jars GWT et GWTx.

Ce sera finalement le plugin gwtforge qui sera mon choix puisque j'ai réussi à l'utiliser pour builder un artefact. Lui aussi est couplé avec un repository mavenrepository maven. Ci-dessous un exemple de configuration avec ce plugin :

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">


    <groupId>com.developpez.gwt</groupId>
    <version>1.0.0</version>
    <modelVersion>4.0.0</modelVersion>
    <artifactId>testGWTStep1</artifactId>
    <name>testGWTStep1</name>
    <description>testGWTStep1</description>
    <packaging>war</packaging>

    <properties>
        <tomcat.containerId>tomcat5x</tomcat.containerId>
        <tomcat.downloadUrl>http://www.apache.org/dist/tomcat/tomcat-5/v5.5.26/bin/apache-tomcat-5.5.26.zip</tomcat.downloadUrl>
        <tomcat.port>8082</tomcat.port>
        <tomcat.installDir>${java.io.tmpdir}/cargoapache/installs</tomcat.installDir>
        <java.awt.headless>true</java.awt.headless>
        <cargo.wait>true</cargo.wait>
    </properties>
    <repositories>
        <repository>
            <id>gwtforge</id>
            <url>http://gwtforge.com/maven-repository/trunk/</url>
        </repository>
        <repository>
            <id>gwt-maven</id>
            <url>http://gwt-maven.googlecode.com/svn/trunk/mavenrepo/</url>
        </repository>
    </repositories>
    <pluginRepositories>
        <pluginRepository>
            <id>gwt-maven</id>
            <url>http://gwt-maven.googlecode.com/svn/trunk/mavenrepo/</url>
        </pluginRepository>
        <pluginRepository>
            <id>internal</id>
            <url>http://build-1.rack.sourcelabs.com/repos/internal/</url>
        </pluginRepository>
        <pluginRepository>
            <id>gwtforge</id>
            <url>http://gwtforge.com/maven-repository/trunk/</url>
        </pluginRepository>
    </pluginRepositories>
    <build>
        <plugins>
            <plugin>
                <groupId>org.codehaus.cargo</groupId>
                <artifactId>cargo-maven2-plugin</artifactId>
                <version>0.3.1</version>
                <configuration>
                    <wait>${cargo.wait}</wait>
                    <container>
                        <containerId>${tomcat.containerId}</containerId>
                        <log>${project.build.directory}/${tomcat.containerId}/cargo.log</log>
                        <zipUrlInstaller>
                            <url>${tomcat.downloadUrl}</url>
                            <installDir>${tomcat.installDir}</installDir>
                        </zipUrlInstaller>
                    </container>
                    <configuration>
                        <home>${project.build.directory}/${tomcat.containerId}/container</home>
                        <properties>
                            <cargo.servlet.port>${tomcat.port}</cargo.servlet.port>
                            <cargo.logging>high</cargo.logging>
                        </properties>
                    </configuration>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.codehaus.cargo</groupId>
                <artifactId>cargo-maven2-plugin</artifactId>
                <executions>
                    <execution>
                        <id>start-container</id>
                        <phase>pre-integration-test</phase>
                        <goals>
                            <goal>start</goal>
                        </goals>
                    </execution>
                    <execution>
                        <id>stop-container</id>
                        <phase>post-integration-test</phase>
                        <goals>
                            <goal>stop</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.5</source>
                    <target>1.5</target>
                </configuration>
            </plugin>
            <plugin>
                <groupId>gwtforge.gwtplugin</groupId>
                <artifactId>gwtforge.gwtplugin</artifactId>
                <version>1.4.61</version>

                <!--Associate the plugin to the maven compile phase-->

                <executions>
                    <execution>
                        <phase>compile</phase>
                        <goals>
                            <goal>compile</goal>
                        </goals>
                    </execution>
                </executions>

                <configuration>
                    <!-- The plugin will discover the modules by itself -->
                    <out>gwt</out>
                    <loglevel>INFO</loglevel>
                </configuration>

            </plugin>
        </plugins>
    </build>
    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.4</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>struts</groupId>
            <artifactId>struts</artifactId>
            <version>1.2.9</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.1.2</version>
        </dependency>
        <dependency>
            <groupId>com.google.gwt</groupId>
            <artifactId>gwt-servlet</artifactId>
            <version>1.4.61</version>
        </dependency>
        <dependency>
            <groupId>com.google.gwt</groupId>
            <artifactId>gwt-user</artifactId>
            <version>1.4.60</version>
            <scope>compile</scope>
        </dependency>
    </dependencies>
</project>

• Le scope compile des jars liés à GWT, ceux-ci ne servent plus une fois les pages compilées (sauf si vous utilisez GWT RPC).
• Le rattachement du goal compile du plugin gwtforge à la phase de compilation de maven.

À noter que cette étape n'est cependant pas à la hauteur de l'intégration voulue, je n'ai pas réussi à séparer correctement les ressources GWT du code Java comme nous le verrons par la suite. J'avais en effet pris l'habitude de séparer le code dans src/main/java, les ressources dans src/main/resources et les ressources web dans src/main/webapp. Ici je vais toujours conserver mon fichier de description de module xml, mes fichiers html et css dans src/main/java contre toute logique.

Premier temps de notre intégration, nous allons simplement intégrer les fichiers du tutoriel mon premier projet GWT après quelques légères modifications. Nous rajouterons juste une seconde entrée dans le menu supérieur pour accéder directement à cette page.

Première constatation, après l'ajout du fichier MonApplication.gwt.xml l'intégration avec maven 2 semble fonctionner correctement d'après le log :

[INFO] + Discovering gwt modules at E:\workspaceEuropa\testGWTStep1\src\main\java
[INFO]     - Module found at E:\workspaceEuropa\testGWTStep1\src\main\java\com\developpez\gwt\MonApplication.gwt.xml
[INFO] + Adding Modules to compilation target
[INFO]     - Add Module com.developpez.gwt.MonApplication
[INFO] Target compilation directory [E:\workspaceEuropa\testGWTStep1\target\testGWTStep2-1.0.0\gwt]
[INFO] + Lauching GwtCompiler .... Module : com.developpez.gwt.MonApplication
[INFO]     - Output will be written into E:\workspaceEuropa\testGWTStep1\target\testGWTStep2-1.0.0\gwt\com.developpez.gwt.MonApplication
[INFO]     - Copying all files found on public path
[INFO]     - Compilation succeeded
[INFO] GwtCompiler .... Module : com.developpez.gwt.MonApplication Build Success !

Voici les points importants à noter lors de cette première étape :

• trois nouveaux packages apparaissent : client, public et server et on y notera des doublons par rapport au package model et service déjà existants ;
• l'intégration des ressources GWT directement dans src/main/java ;
• l'ajout d'une servlet dans le web.xml afin de pointer vers le service des contacts ;
• la page générée n'est pas liée au reste du site

Les prochaines étapes vont donc porter sur :

• la normalisation des packages et une tentative de conserver notre modèle d'avant ;
• la normalisation de l'utilisation des ressources dans une arborescence maven2 ;
• l'utilisation de notre action struts pour remplacer la servlet GWT ;
• l'intégration de la page générée dans une tille du site original.

III-C-1. Package client▲

        <dependency>
            <groupId>com.googlecode.gwtx</groupId>
            <artifactId>GWTx</artifactId>
            <version>20070605</version>
            <scope>compile</scope>
        </dependency>

[ERROR] BUILD ERROR
[INFO] ------------------------------------------------------------------------
[INFO] Gwt Compiler Errors :    [ERROR] Errors in 'E:\workspaceEuropa\testGWTStep1\src\main\java\com\developpez\gwt\client\ContactService.java'
      [ERROR] Line 3:  The import com.developpez.gwt.model cannot be resolved
      [ERROR] Line 8:  Contact cannot be resolved to a type
   [ERROR] Errors in 'E:\workspaceEuropa\testGWTStep1\src\main\java\com\developpez\gwt\client\panel\ContactsPanel.java'
      [ERROR] Line 5:  The import com.developpez.gwt.model cannot be resolved

Adds packages to the source path by combining the package in which the module XML is found with the specified path to a subpackage. 
Any Java source file appearing in this subpackage or any of its subpackages is assumed to be translatable.

    <source path='model'/>
    <source path='client'/>

[INFO] + Lauching GwtCompiler .... Module : com.developpez.gwt.MonApplication
[INFO]     - Computing all possible rebind results for 'com.developpez.gwt.client.ContactService'
[INFO]     -    Rebinding com.developpez.gwt.client.ContactService
[INFO]     -       Invoking <generate-with class='com.google.gwt.user.rebind.rpc.ServiceInterfaceProxyGenerator'/>
[INFO]     -          Generating client proxy for remote service interface 'com.developpez.gwt.client.ContactService'
[INFO]     -             Analyzing 'com.developpez.gwt.client.ContactService' for serializable types
[INFO]     -                Analyzing methods:
[INFO]     -                   public abstract com.developpez.gwt.model.Contact[] getAllContact()
[INFO]     -                      Return type: com.developpez.gwt.model.Contact[]
[INFO]     -                         com.developpez.gwt.model.Contact[]
[INFO]     -                            Analyzing component type:
[INFO] ------------------------------------------------------------------------
[ERROR] BUILD ERROR
[INFO] ------------------------------------------------------------------------
[INFO] Gwt Compiler Errors :                               [ERROR] Type 'com.developpez.gwt.model.Contact' was not serializable and has no concrete se
rializable subtypes
[ERROR] Errors in 'E:\workspaceEuropa\testGWTStep1\src\main\java\com\developpez\gwt\client\panel\ContactsPanel.java'
   [ERROR] Line 89:  Failed to resolve 'com.developpez.gwt.client.ContactService' via deferred binding
[ERROR] Cannot proceed due to previous errors
[ERROR] Build failed

III-C-2. package serveur▲

    private void getAllContacts(){
        contacts = new Contact[0];
        // define the service you want to call
        ContactServiceAsync svc = (ContactServiceAsync) GWT.create(ContactService.class);
        ServiceDefTarget endpoint = (ServiceDefTarget) svc;
        String moduleRelativeURL =  getContextUrl () + "/contactService";
        
        endpoint.setServiceEntryPoint(moduleRelativeURL);
        
        AsyncCallback callback = new AsyncCallback() 
        {
          public void onSuccess (Object result)
          {
              contacts = (Contact[]) result;
              filtre();
          }

          public void onFailure (Throwable ex)
          {
              contacts = new Contact[0];
              filtre();
          }
        };
        
        // execute the service
        svc.getAllContact(callback);

      }

public void onClick(Widget sender) {
        String URL = "http://host/context/url.gp3?param1=valeur1&param2=valeur2";
        boolean good = HTTPRequest.asyncPost(URL, "données envoyées depuis le client", new ResponseTextHandler(){
 
            public void onCompletion(String responseText) {
                // ici on devrait parser la réponse 
            
                Window.alert(responseText);
            }
        });
    }

    public List getAllContact() {
        
        return com.developpez.gwt.service.ContactServiceImpl.getAllContact(null, null);
    }

[INFO] + Lauching GwtCompiler .... Module : com.developpez.gwt.MonApplication
[INFO]     - Computing all possible rebind results for 'com.developpez.gwt.client.ContactService'
[INFO]     -    Rebinding com.developpez.gwt.client.ContactService
[INFO]     -       Invoking <generate-with class='com.google.gwt.user.rebind.rpc.ServiceInterfaceProxyGenerator'/>
[INFO]     -          Generating client proxy for remote service interface 'com.developpez.gwt.client.ContactService'
[INFO]     -             Analyzing 'com.developpez.gwt.client.ContactService' for serializable types
[INFO]     -                Analyzing methods:
[INFO]     -                   public abstract java.util.List getAllContact()
[INFO]     -                      Return type: java.util.List
[INFO]     -                         [WARN] Type 'java.util.List' should be parameterized to help the compiler produce the smallest code size possible
 for your module. Since the gwt.typeArgs javadoc annotation is missing, all subtypes of Object will be analyzed for serializability even if they are n
ot directly or indirectly used
[INFO]     -                            [WARN] Checking all subtypes of Object which qualify for serialization
[INFO]     - Output will be written into E:\workspaceEuropa\testGWTStep1\target\testGWTStep3-1.0.0\gwt\com.developpez.gwt.MonApplication
[INFO]     - Compilation succeeded

    /**
     * @gwt.typeArgs <java.lang.String>
     */
    public List getAllContact();

        <logic:iterate id="list" name="ContactList">
            // création de vos items json
            // ....
        </logic:iterate>

            public void onCompletion(String responseText) {
                // ici on devrait parser la réponse  responseText
                
                Window.alert(responseText);
            }

Dans ce chapitre nous allons voir comment faire disparaître les fichiers ressources et de façon plus générale comment intégrer nos widgets GWT dans une jsp. Pour cela, revenons sur les fichiers de ressources utilisés par GWT :

• MonApplication.css ;
• MonApplication.html ;
• MonApplication.gwt.xml.

Le fichier MonApplication.css est inclus dans le fichier descripteur du module MonApplication.gwt.xml. Ce fichier peut tout simplement être déplacé dans le répertoire src/main/webapp/css ou même fusionné avec notre css déjà existante.

Le fichier MonApplication.html s'il est présent est copié dans gwt/com.developpez.gwt.MonApplication de la webapp. Cependant si l'on regarde la structure de ce fichier :

<html>
<head>
<!--                                           -->
<!-- Any title is fine                         -->
<!--                                           -->
<title>MonApplication GWT</title>

<!--                                           -->
<!-- The module reference below is the link    -->
<!-- between html and your Web Toolkit module  -->
<!--                                           -->
<meta name='gwt:module'
    content='com.developpez.gwt.MonApplication'>
</head>

<body>
<!--                                            -->
<!-- This script is required bootstrap stuff.   -->
<!-- You can put it in the HEAD, but startup    -->
<!-- is slightly faster if you include it here. -->
<!--                                            -->
<script language="javascript" src="gwt.js"></script>

<!-- OPTIONAL: include this if you want history support -->
<iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>

<div id="contentGWT"></div>
</body>
</html>

Seuls l'inclusion du jsp et le meta placés dans le header semblent importants. Nous allons donc tout de suite passer à l'intégration du widget dans une jsp pour se passer de ce fichier.

Première étape, ajouter la définition de ma feuille de style dans le layout.jsp, nous allons profiter par la même occasion pour rajouter une tille qui contiendra les metas. Les metas pouvant changer en fonction de la page et donc du widget utilisé :

<%@ include file="includeTLD.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html:html xhtml="true">
<head>

<tiles:insert attribute="metas" flush="true" />

<link rel="stylesheet" href="css/standard.css" type="text/css"/>
<link rel="stylesheet" href="css/MonApplication.css" type="text/css"/>



<title>Test GWT (etape1)</title>
</head>

Nous rajoutons la définition du tiles metas dans le fichier tiles-def.xml et nous en profitons pour définir une nouvelle page qui va l'utiliser.

    <definition name=".layout" path="/jsp/layout/layout.jsp">
        <put name="metas" value="/jsp/layout/metas.jsp" />
        <put name="header" value="/jsp/layout/header.jsp" />
        <put name="footer" value="/jsp/layout/footer.jsp" />
    </definition>
    <definition name="listContact" extends=".layout">
        <put name="body" value="/jsp/gestion/ContactList.jsp" />
    </definition>
    <definition name="listContactGwt" extends=".layout">
        <put name="metas" value="/jsp/gestion/metasGwt.jsp" />
        <put name="body" value="/jsp/gestion/ContactListGwt.jsp" />
    </definition>

Et nous créons maintenant les deux nouvelles jsp qui nous intéressent : metasGwt.jsp et ContactListGwt.jsp

<meta name='gwt:module'
    content='com.developpez.gwt.MonApplication'>

<%@ include file="/jsp/layout/includeTLD.jsp"%>
<div id="contentGWT"/>
<script language="javascript" 
src="${pageContext.request.contextPath}/gwt/com.developpez.gwt.MonApplication/gwt.js"></script>

Il ne manque plus que la définition de l'action dans le fichier struts-config.xml

        <action path="/gwt/com.developpez.gwt.MonApplication/listContactGwt"
            type="com.developpez.gwt.control.contact.ContactAction" 
            scope="request" 
            validate="false" 
            parameter="doList">
            <forward name="SUCCESS" path="listContactGwt" />
        </action>

On notera l'URL un peu incongrue de notre action, qui est malheureusement due à GWT. GWT va rechercher tous ces fichiers html, js, fichiers de cache, etc. à l'URL où il est appelé. Ce qui nécessite ce type d'URL « alien » dans notre fichier struts.

Mais voilà, nous avons terminé, nous n'avons donc plus ce répertoire public dans nos sources et le widget gwt est désormais intégré à une tille.

Il me paraissait intéressant de trouver un plugin Eclipse dans le cas d'un développement plus poussé avec GWT. J'apprécie quand les tâches fastidieuses sont faites pour moi alors pourquoi s'en priver. J'en suis arrivé à la maigre liste suivante :

• CypalCypal ;
• GwtDesigner.

Voici mes prérequis lors de la recherche de plugin Eclipse :

• 1. Gratuit puisque j'évaluais le produit pour moi-même ;
• 2. Me permettant de designer une page en WYSIWYG ;
• 3. Détectant automatiquement les futures erreurs de compilation dans la partie cliente (qui ne peut utiliser toutes les bibliothèques Java) ;
• 4. Pouvant démarrer le mode hosted de GWT ;
• 5. Capable de gérer les fichiers module ;
• 6. Capable de gérer les services GWT RPC ;
• 7. Être capable d'ajouter la nature GWT sur un projet existant.

Finalement le point 3 n'est couvert par aucun plugin. Le point 1 a malheureusement écarté le plugin gwtdesigner, celui-ci n'aurait certainement pas été écarté dans un contexte entreprise, mais ici je faisais une évaluation personnelle. Le but de cet article étant d'intégrer GWT à un projet existant, le point 7 a écarté le plugin cypal. En effet on ne peut ajouter la nature « dynamic web project » à un projet déjà existant. Mais il paraissait de toute façon assez pauvre, ne couvrant que les points 1, 5, et 6. En conclusion, la décision a été de se passer de plugin spécifique, une bonne connaissance d'Eclipse suffira pour la suite.

D'autres articles sur GWT provenant de développez.com :

• mon premier projet GWThttp://moritan.developpez.com/tutoriels/java/gwt/premier/projet/
• Présentation générale de GWThttp://moritan.developpez.com/tutoriels/java/gwt/presentation/

Les plugins mavens 2 :

• plugin googleplugin google
• Plugin gwtforgePlugin gwtforge
• Plugin codehausPlugin codehaus

Les plugins Eclipse

• CypalCypal
• GwtDesigner

La doc officielle et les plugins/extensions GWT :

• site officielhttp://code.google.com/webtoolkit/
• Extension extjs pour GWThttp://code.google.com/p/gwt-ext/
• GWT étendu pour le support d'autres classes côté clienthttp://code.google.com/p/gwtx/
• Librairie de log pour GWThttp://code.google.com/p/gwt-log/

Les sources utilisés pour ce projet dans trois étapes intermédiaires (pour les lancer, il suffit de taper mvn install) :

• testGWTStep1_1.zip
• testGWTStep1_2.zip
• testGWTStep1_3.zip