Liferay et GWT : C’est possible !

Les projets GWT (Google WebToolkit) se multiplient depuis un petit moment dans le monde du Java. Cependant, si vous avez déjà essayé d’intégrer des Widget GWT dans votre portail, il y a de grandes chances pour que votre tête et votre mur s’en souviennent. La documentation est encore relativement rare dans ce domaine, et c’est bien dommage !

Dans cet article, je vais vous expliquer pas à pas, la recette pour transformer un widget en portlet. Pas la peine d’aller chercher dans votre grenier s’il reste des champignons magiques. Tous les ingrédients peuvent se trouver sur le net, et pour pas un sou ! En plus, du GWT oui, mais avec RPC.

Introduction

Tout d’abord, pourquoi Liferay et pas un autre portail ? Tout simplement car c’est le portail que je connais le mieux, et qu’il faut bien en choisir un pour faire du pas à pas. Et pourquoi GWT ? Parce que Liferay sans GWT, c’est trop facile, et donc c’est pas marrant.

Plus sérieusement, cet article vous permettra de coupler GWT (avec ses appels RPC) à un portail Liferay, sans faire de bidouilles avec les iFrames ou autres solutions bancales. De plus, la solution proposée est relativement simple et rapide à mettre en place. Pourquoi s’en priver ?

Attention cependant, il ne s’agit pas ici d’expliquer comment développer une portlet Liferay ou une application GWT, mais simplement de proposer un moyen d’intégrer les 2. De plus, l’intégration n’est pour le moment que graphique (pas d’utilisation de services portail).

Explication de la solution

La solution proposée ici n’est pas de développer directement une portlet en GWT, mais plutôt de “backporter” une application GWT dans une portlet. Les avantages sont les suivants :

  • Utilisation native dans l’IDE des outils GWT fournis par Google
  • Développement d’un réel projet GWT, utilisable avec n’importe quel serveur
  • Facilité pour intégrer une application ancienne en portlet
Cependant, on peut noter que le processus de transformation de l’application GWT en portlet (expliqué par la suite) est relativement long (quoi que plutôt facile) et répétitif. Dans le cadre de d’un réel développement pour un projet, il est fortement recommandé d’écrire un script ant, ou bien un module Maven pour automatiser le processus.

Préparation de l’environnement de développement

Liferay SDK

Pour l’installation, il vous faut un simple SDK Liferay (v4+), correctement configuré (fichier build.${username}.properties). Cet article ne couvre pas la configuration basique de Liferay. Créez une nouvelle portlet en suivant les étapes suivantes :

  • En ligne de commande, allez dans le répertoire “portlets” du SDK
  • Tapez la ligne suivante  : ./create.sh test-GWT “Test GWT” qui vous permettra de créer une simple portlet Liferay
  • Dans Eclipse, faites une clic droit > “Rafraichir” sur le dossier “portlets” du SDK
  • Vérifiez que votre portlet est bien présente.

Outils GWT

Premièrement, il faut installer les outils de développement google sur votre IDE (Eclipse 3.6 pour moi). Vous trouverez toutes les informations ici (nouvelle fenêtre).

Une fois les outils Google installés, créez un nouveau projet GWT : Clic droit > New > “Web Application Project”. Cette manipulation créera un projet de test, qui nous servira dans cet article. Ce projet affiche un mini formulaire vous demandant votre prénom. A la validation, une fenêtre GWT s’ouvrira avec différents messages, comme par exemple une salutation, et le user agent de votre navigateur internet.

Installation de la portlet GWT

Nous y voilà ! Vous avez donc à présent un projet GWT vierge (mis à part le code généré par Google lors de la création), et une portlet Liferay, vierge elle aussi.

Avant de rentrer dans les détails de l’installation, voyons quelques fichiers importants.

Points d’intérêts du projet GWT

Les projets GWT étant des projets Web, on y retrouve facilement les bases de Java EE. Par exemple, l’application packagée sera un WAR, avec ses dépendances et configurations spécifiques. Pour ce qui nous intéresse ici, on peut remarquer :

  • Le dossier source ‘src‘ : il contient le code source de l’application, partagée (grâce aux packages) en différentes couches (client, server, shared). Plus particulièrement, on trouvera, dans le package ‘client‘ le point d’entrée de l’application, nommé ${nom_du_projet}.java
  • Un dossier ‘war‘ : il contiendra tous les fichiers générés par la compilation de l’application, ainsi que le web.xml
  • Les dépendances :  ce sont les jar situés dans le dossier ‘war/WEB-INF/lib
  • Le fichier web.xml : il est situé dans le dossier ‘war/WEB-INF‘ et contient la définition de la ou des servlet(s) liée(s) à l’application, et permettant la communication RPC entre le client (navigateur) et le serveur.

Compilation du projet GWT

Afin de pouvoir déployer le projet GWT dans notre portlet Liferay, il faut d’abord le compiler. Les outils Google installés précédemment permettent de la faire. Pour cela, faites un clic droit sur le projet > Google > ‘GWT compile’. Une fois la compilation terminée, rafraichissez le projet. Un nouveau dossier correspondant au nom du projet est apparu dans le dossier ‘war‘. Il contient le projet généré à partir du code Java.

Configuration de la portlet Liferay

Dans la suite de cette section, nous utiliserons les variables suivantes :

Variable Description
${GWT_portlet_docroot} Chemin : ${liferay_sdk}/portlets/${portlet_name}/docroot
${GWT_project_name} Nom du projet GWT, avec des “_” à la place des espaces (ex: GWT_Project)
${GWT_project_war} Dossier war du projet GWT
${GWT_project_html} Dossier généré suite à la compilation du projet GWT (dans le dossier ${GWT_project_war})

Copie de l’application GWT dans la portlet

  1. Créer le dossier ${GWT_portlet_docroot}/html
  2. Copier  le contenu du dossier ${GWT_project_html} dans ${GWT_portlet_docroot}/html (c’est tout le fonctionnel de l’application GWT)
  3. Ouvrir le fichier ${GWT_project_war}/${GWT_project_name}.html et, copier le formulaire dans le fichier view.jsp de la portlet. Vous devriez avoir un résultat du genre :
    <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
    <portlet:defineObjects />
    <table align="center">
        <tr>
            <td colspan="2" style="font-weight: bold;">Please enter your name:</td>
        </tr>
        <tr>
            <td id="nameFieldContainer"></td>
            <td id="sendButtonContainer"></td>
        </tr>
        <tr>
            <td colspan="2" style="color: red;" id="errorLabelContainer"></td>
        </tr>
    </table>
    

Copie des dépendences GWT dans la portlet

  1. Copiez le jar ${GWT_project_war}/WEB-INF/lib/gwt-servlet.jar dans ${GWT_portlet_docroot}/WEB-INF/lib
  2. Faites un jar des sources du projet GWT (clic droit sur le projet > Exporter > Jar), et placez le dans ${GWT_portlet_docroot}/WEB-INF/lib

Configuration de la portlet Liferay

  1. Editez le fichier ${GWT_portlet_docroot}/WEB-INF/liferay-portlet.xml, et ajoutez la ligne <header-portlet-javascript>/html/${GWT_project_name}.nocache.js</header-portlet-javascript> dans la configuration de la portlet
  2. Editez le fichier ${GWT_portlet_docroot}/WEB-INF/web.xml et ajouter la configuration de la servlet :
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
    <web-app>
        <!-- Servlets -->
        <servlet>
            <servlet-name>greetServlet</servlet-name>
            <servlet-class>fr.ippon.myfirstgwtportlet.server.GreetingServiceImpl</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>greetServlet</servlet-name>
            <url-pattern>/html/greet</url-pattern>
        </servlet-mapping>
    </web-app>
    

    Bien entendu, adaptez le nom des packages à votre projet. L’URL patern /greet vient du la configuration par défaut du projet GWT. Si vous ouvrez le fichier fr.ippon.myfirstgwtportlet.server.GreetingService, vous retroueverez ce mapping dans l’annotation @RemoteServiceRelativePath(“greet”).

Voilà, votre projet est configuré. Vous devriez avoir une arborescence de la sorte :
Sources GWT portlet

Il ne vous reste plus qu’à déployer votre portlet, et la tester.

Conclusion

L’installation d’une portlet GWT peut être un peu fastidieuse au premier abord, mais elle devient plutôt facile une fois que l’on a compris le mécanisme. Pour résumer, il y a plusieurs étapes à respecter :

  • Compilation du projet GWT
  • Déplacement des fichiers compilés dans la portlet
  • Configuration de la portlet pour accéder au javascript GWT, et à la servlet d’appels RPC
  • Mise à jour des dépendances

Une fois ces étapes vérifiées, votre portlet GWT fonctionne. Pour les plus téméraires, vous pouvez par la suite étendre cette solution pour profiter d’un SSO, utiliser un LDAP etc… Aspirine ?

TwitterFacebookGoogle+LinkedIn
  • Nic Papadopoulos

    Excellent article. I have followed your instructions and it works perfectly with sample GWT greedings application.

    Just a question though. When I deploy the portlet to Liferay 6, the look n feel of the Liferay pages changes, which means that somehow the GWT portlet affects it. Do you have any idea what may cause this and how it can be resolved?

    Thank you

    Nic