Professional Open Source: porting di webapp GWT in portlet Liferay

II parte: Concludiamo il porting in Liferaydi

Dopo aver introdotto il mese scorso il nostro progetto di porting di una webapp GWT in una portlet Liferay, ci eravamo fermati alla fine della creazione della webapp. Con questo articolo concludiamo la trattazione, realizzando la portlet di Liferay ed effettuando praticamente il porting.

Nel numero precedente eravamo arrivati alla creazione della webapp GWT. In questa seconda e ultima parte, ci occuperemo in particolar modo di Liferay.

Creazione di una portlet vuota

Per creare la portlet che poi conterrà l'applicazione GWT è necessario creare un Dynamic Web Project di Eclipse nel quale verrà aggiunta la portlet tramite il wizard del PortalPack plugin. Vedremo quindi nello specifico le operazioni che dovranno essere effettuate a mano la prima volta all'atto del porting.

Creazione del progetto DWP per la Portlet

Dal menù file possiamo creare un nuovo Dynamic Web Project (DWP) al quale aggiungeremo il supporto per lo sviluppo delle portlet (Portlet 2.0 Support).

 

 

Figura 1 - Creazione di un nuovo DWP con supporto Portlet 2.0

Nota: in alternativa è possibile utilizzare lo SDK Liferay per creare un progetto Eclipse di sviluppo portlet. Tramite riga di comando dalla cartella del SDK infatti si può creare una cartella che potrà essere importata in Eclipse come progetto e che disporrà già di tutti i file specifici per il deploy su Liferay (come liferay-portlet.xml). Per approfondimenti su questa variante si veda [SDK].

Durante il wizard "New Web Project" si dovrà specificare come Content Directory la cartella "war" al posto di quella di default WebContent e come output directory /war/WEB-INF/classes. Questo deve essere fatto per essere compatibili poi con la configurazione GWT del progetto.

Integrazione con plugin per GWT Web App

Ora possiamo aggiungere il supporto GWT dalle proprietà del progetto: Google -> Web Toolkit -> Use Google Web Toolkit. In questo modo verranno automaticamente importate le librerie GWT, verrà aggiunto gwt-servlet.jar nelle web lib e attivato il supporto per i moduli GWT e quindi la gestione automatica delle interfacce asincrone dei servizi.

Creazione della portlet

Creiamo una la portlet di tipo JSP su cui effettueremo il porting dell'aplicazione GWT vera e propria. Cliccando sul progetto appena creato (TestGWTPortlet) possiamo accedere al wizard di creazione portlet dalla voce New -> Other -> JavaPortlet.

 

 

Figura 2 - Wizard di creazione di una nuova portlet Java

Lasciando attivo il flag "Create JSP" verranno create le pagine JSP per ogni modalità selezionata della portlet (View, Edit e Help). Nel package test.liferay.gwt verrà creata la classe che gestisce la portlet GwtPortlet.java.

Prima di copiare i package dal progetto GWT è necessario aggiungere al build path del progetto della portlet anche le librerie LIFERAY_LIBRARY.

Nota: non è stato necessario prima e non lo è neanche in questo progetto includere i JAR di liferay all'interno di WEB-INF/lib poiche' le librerie sono già disponibili a livello di Application Server Tomcat nella cartella $TOMCAT_HOME/lib/ext. Questo perche' stiamo usando sempre il Tomcat bundled con Liferay. Alternativamente dovremmo provvedere anche a queste librerie.

Porting della Web App GWT e integrazione con la portlet

Ora possiamo copiare i package dell'applicazione GWT nel progetto DWP della portlet TestGWTPortlet. I package interessati sono:

  • org.imola.gwt.articoloMoka
  • org.imola.gwt.articoloMoka.client
  • org.imola.gwt.articoloMoka.client.dto
  • org.imola.gwt.articoloMoka.server

Dovremo copiare anche il CSS ArticoloMoka.css dal progetto GWT ArticoloMoka nella cartella /docroot/css

È consigliabile anche copiare ArticoloMoka.html e ArticoloMoka.css dal progetto ArticoloMoka/war a TestPortletGWT/war. Questa operazione non è indispensabile al fine del deployment come portlet ma serve a scopo di debug dell'applicazione come semplice GWT Web App con gli strumenti del plugin GWT.

A questo punto sarà possibile compilare normalmente il progetto come applicazione GWT in modo da creare la cartella articolomoka sotto la cartella TestPortletGWT/war (oppure è possibile copiare anch'essa dal progetto ArticoloMoka).

Nota: se, in fase di compilazione, GWT dovesse dare un errore, si provi a togliere dal Build Path le librerie Apache Tomcat che vengono aggiunte automaticamente alla creazione di un DWP basato su Tomcat.

Quando la portlet verrà avviata da una pagina Liferay  verrà caricata per prima la JSP GWTPortlet_vew.jsp. Ciò significa che questa JSP sarà l'equivalente dinamico del file HTML statico ArticoloMoka.html usato nel progetto GWT che nel nostro caso definisce solamente il div di nome "mainPanel" e importa CSS e JavaScript generati dal compilatore GWT.

Per replicare la parte di layout (tabella o elementi div con gli id riferiti nella classe entry point ArticoloMoka.java) basterà quindi copiare il contenuto del tagdel file HTML nel file GWTPortlet_vew.jsp. Di seguito riportiamo il contenuto finale del file JSP:

<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%-- Uncomment below lines to add portlet taglibs to jsp
<%@ page import="javax.portlet.*"%>
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>

--%>
<!—- COMMENTATO
*********************
CSS E JAVSASCRIPT per GWT vanno
specificate nel file  #liferay-portlet.xml#
*********************
href="<%=request.getContextPath()%>/ArticoloMoka.css">


-->

 

GWTApp: Ricerca Utenti Liferay

 

 

Il file liferay-portlet.xml

È importante notare che link ai CSS e l'importazione dei JavaScript generati (/articolomoka/articolomoka.nocache.js) non devono essere specificati nel file JSP (come avviene invece in ArticoloMoka.html nell'elemento head) ma nell'apposito deployment descriptor per le portlet di Liferay: liferay-portlet.xml. In questo file XML, infatti, è possibile specificare eventuali JavaScript che la portlet deve includere oltre a quelli di default di liferay e i fogli di stile CSS da linakare. Sarà quindi sufficiente creare (se non esiste già) il file /war/WEB-INF/liferay-portlet.xml e specificare queste informazioni come segue:

    
        GwtPortlet
        /docroot/images/gwt.png
        
        
        /docroot/css/ArticoloMoka.css
        
                /articolomoka/articolomoka.nocache.js
        
    
    
        administrator
        Administrator
    
    
        guest
        Guest
    
    
        power-user
        Power User
    
    
        user
        User

Prima di poter effettuare il deploy della portlet, resta da integrare il file web.xml con la definizione del servlet liferayServlet derivante dall'applicazione GWT. Per far questo basterà copiare la parte di configurazione relativa dal file web.xml del progetto ArticoloMoka. Di seguito riportiamo il contenuto del file TestGWTPortlet/war/WEB-INF/web.xml:

         xmlns="http://java.sun.com/xml/ns/javaee"
         xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                            http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
         id="WebApp_ID" version="2.5">
    TestGWTPortlet
    
    
    
        liferayServlet
        
            org.imola.gwt.articoloMoka.server.LiferayGWTServiceImpl
        
    
    
    
        liferayServlet
        /articolomoka/liferay-gwt-service
    
    
    
        index.html
        index.htm
        index.jsp
        default.html
        default.htm
        default.jsp

La struttura finale del progetto risulterà quindi quella illustrata in figura 3.

 

 

Figura 3 - Struttura del progetto TestGWTPortlet dopo aver effettuato il porting da GWT.

 

Deploy della portlet GWT su Liferay e test

Finalmente possiamo fare l'export del WAR del progetto per poi effettuarne il deploy nella cartella di pre-deploy di Liferay che di default nella distribuzione bundled con Tomcat è situata in $TOMCAT_HOME/../deploy. Di seguito, in figura 4, riportiamo per chiarezza la struttura del WAR che verrà esportato dalla procedura di export di eclipse.

Figura 4 - Struttura interna del war esportato e da deployare su Liferay

Per fare il deploy del WAR generato tramite Export -> War, basterà quindi copiarlo nella cartella $TOMCAT_HOME/../deploy.

Deployer di Liferay e deployer di Tomcat

Se Tomcat (e quindi Liferay che vi è già deployato sopra) è stato precedentemente avviato, il file copiato verrà spostato dal deployer di Liferay che sta in ascolto sulla cartella $TOMCAT_HOME/../deploy e automaticamente arricchito con i deployment descriptor di Liferay per poi essere copiato nella cartella di deploy di Tomcat $TOMCAT_HOME/webapps da cui partirà l'effettivo deploy di Tomcat.

Nota: se Tomcat è stato avviato da Eclipse, sul tab della console si potrà seguire la procedura di deploy e verificare che non vi siano eventuali errori.

Se il deploy ha avuto successo, possiamo collegarci al portale Liferay (tipicamente su http://localhost:8080) e una volta loggati come admin, sarà possibile aggiunge la nuova portlet a una pagina tramite il menù in alto a destra: Welcome Admin -> Add Application. La portlet si troverà sotto la categoria Undefined. Il risultato finale della GWTPortlet ricercando un utente (esempio Michelle o Admin) sarà quello di figura 5.

 

 

Figura 5 - Il risultato della ricerca di un utente.

 

Conclusione

Nonostante il taglio fortemente da tutorial, la miniserie mira a mettere in risalto un aspetto interessante di integrazione fra due tecnologie non concorrenti. Nello specifico abbiamo voluto illustrare come sia possibile continuare a sviluppare applicazioni GWT anche all'interno di un contesto di portale come Liferay.

Si è visto infatti che seguendo una serie di passi predefiniti (e facilmente automatizzabili con Ant per esempio) è possibile creare una porltet Liferay a partire da una applicazione GWT esistente per poi continuare l'eventuale sviluppo direttamente come portlet. Lo stesso varrebbe per una applicazione GWT che venga interamente sviluppata da dentro un progetto di una portlet.
Configurando infatti il progetto DWP della portlet anche come progetto GWT, si potranno utilizzare tutte le funzionalità messe a disposizione dal plugin Google come il debugging dell'applicazione o l'allineamento delle interfacce asincrone. Potranno quindi essere aggiunti altri GWT Remote Service, Entry Point, DTO o utilizzare librerie avanzate di widget come SmartGWT [SMGWT].

Emerge quindi una netta e chiara divisione di ruoli fra queste due tecnologie: da un lato Liferay nella la parte del contenitore Web 2.0 con applicazioni in formato portlet, e dall'altro GWT come ottima soluzione per la creazione di portlet AJAX dotate di interfacce avanzate e complesse, scritte però senza neanche "sporcarsi le mani" con una una sola riga JavaScript.

Riferimenti

[LIFERAY] Sito ufficiale di Liferay
http://www.liferay.com/

[LIFT] Liferay Bundled con Tomcat 6
http://sourceforge.net/projects/lportal/files/Liferay%20Portal/liferay-portal-tomcat-6.0-5.2.3.zip

[GWT] Google Web Toolkit
http://code.google.com/intl/it-IT/webtoolkit/

[PPAC] Portal Pack per Eclipse
https://eclipse-portalpack.dev.java.net/

[MOKA1] Giovanni Puliti , "Il programmatore e le sue API - XX parte: realizzare la GUI web con GWT", MokaByte 146, Dicembre 2009
http://www2.mokabyte.it/cms/article.run?articleId=J3E-HC5-3JC-XGL_7f000001_18359738_834bfb23

[GECLIPSE]  Google Eclipse Plugin
http://code.google.com/intl/it-IT/eclipse/

[SMGWT] Smart GWT
http://code.google.com/p/smartgwt/

[SDK] Liferay SDK Plugin
http://www.liferay.com/community/wiki/-/wiki/Main/Plugins%20SDK#section-Plugins+SDK-CreatingANewPortlet

Condividi

Pubblicato nel numero
151 maggio 2010
Nato a Imola nel 1978, ha conseguito la laurea Specialistica in informatica nel 2005 presso l‘Università di Bologna con una tesi sull‘"Estrazione di Ontologie da Framework standardizzati EDI/XML". Per tre anni ha lavorato come ricercatore presso il centro ENEA di Bologna seguendo progetti sull‘applicazione di tecnologie semantiche a framework e…
Articoli nella stessa serie
Ti potrebbe interessare anche