GWT e Liferay - MokaByte n. 150

In questa miniserie di due articoli vedremo come effettuare il porting di una GWT Web App esistente in una portlet Liferay e come di fatto sia possibile continuare lo sviluppo come portlet. Il tutto sarà effettuato da Eclipse utilizzando i plugin GWT per Eclipse e Portal Pack per le portlet

Google Web Toolkit (GWT) è un framework per lo sviluppo di applicazioni web complesse in Java, che viene poi compilato in JavaScript ottimizzato. Liferay è invece un portal framework enterprise che permette di aggregare diverse portlet in un unico portale. L'integrazione tra queste due tecnologie richiede alcuni accorgimenti che vedremo in dettaglio.

In questo primo articolo creeremo una semplice applicazione GWT che interagisce con le API di Liferay, mentre nel prossimo numero vedremo come trasformarla in una vera portlet integrata nel portale.

Implementazione del Service

Ecco un estratto del codice del service che gestisce l'interazione con Liferay:

} catch (PortalException e) {
logger.error("Errore nella getUserByScreenName("
+companyId+", "+ screenName+")");
e.printStackTrace();
} catch (SystemException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return createLiferayUserDTOFromUser(user);
}

...
}

NOTA: createLiferayUserDTOFromUser() è un metodo private del service che semplicemente crea un nuovo LiferayUserDTO a partire dalle info contenute in uno User di Liferay.

Infine sarà necessario aggiornare il file /war/WEB-INF/web.xml con la definizione del servlet relativo al RemoteService:

<web-app>

...

<!-- Servlets -->
<servlet>
<servlet-name>liferayServlet</servlet-name>
<servlet-class>
org.imola.gwt.articoloMoka.server.LiferayGWTServiceImpl
</servlet-class>
</servlet>

<servlet-mapping>
<servlet-name>liferayServlet</servlet-name>
<url-pattern>/articolomoka/liferay-gwt-service</url-pattern>
</servlet-mapping>

...

</web-app>

A questo punto la struttura del progetto dovrebbe risultare come mostrato in figura 4.:

Figura SEQ Figura \* ARABIC 4 - Struttura finale del progetto GWT Articolo Moka

La classe del modulo ArticoloMoka.java infine definirà una semplice interfaccia per inserire lo screenName dell'utente ricercato e un DialogBox che presenterà una semplice scheda sull'utente trovato contenente foto e link alla pagina pubblica su Liferay. Di seguito riportiamo un estratto del codice della classe ArticoloMoka.java che implementa Entry Point:

public class ArticoloMoka implements EntryPoint {
private final LiferayGWTServiceAsync liferayGWTService
= GWT.create(LiferayGWTService.class);

public void onModuleLoad() {
final Label label
= new Label("Applicazione di esempio per porting ... ");
final Label searchLabel
= new Label("Ricerca utente Liferay per Screen Name");
final TextBox searchBox = new TextBox();
final Button submitButton = new Button("Cerca...");
final VerticalPanel vpanel = new VerticalPanel();
final HorizontalPanel opanel = new HorizontalPanel();

...

// ==== DialogBox ===
final DialogBox dialogBox = new DialogBox();
final Anchor userLink = new Anchor();
final Label resultLabel
= new Label("Nessun utente trovato con screen name ");
final Button closeButton = new Button("Close");
final Image userImage = new Image();
final VerticalPanel dialogBoxVpanel = new VerticalPanel();
final HorizontalPanel dialogBoxHpanel = new HorizontalPanel();

//...settaggio dei vari widget

dialogBoxVpanel.add(resultLabel);
dialogBoxHpanel.add(userImage);
dialogBoxHpanel.add(userLink);
dialogBoxVpanel.add(dialogBoxHpanel);
dialogBoxVpanel.add(closeButton);

closeButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
dialogBox.hide();
}
});
dialogBox.setWidget(dialogBoxVpanel);
// ==== Fine DialogBox ===

// ==== MainPanel ===
submitButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
liferayGWTService.getUser_ByScreenName(searchBox.getText(),
new AsyncCallback<LiferayUserDTO>() {
@Override
public void onFailure(Throwable caught) {
resultLabel.setText(
"Si e' verificato un errore sul server: "
+caught.getMessage());
dialogBox.show();
}
@Override
public void onSuccess(LiferayUserDTO result) {
if (result!=null) {
GWT.log(
"Trovato l'utente liferay con screen name "
+ searchBox.getText());
GWT.log(
"  - Url dell'immagine utente: "
+ result.getImage_url());
GWT.log(
"  - Url della pagina pubblica: "
+ result.getPubblic_page());

resultLabel.setText(
"Trovato un utente liferay con screen name "
+searchBox.getText()+": ");
userImage.setUrlAndVisibleRect(
result.getImage_url(),
0, 0, 100, 100);
userImage.setVisible(true);
userLink.setHref(
result.getPubblic_page());
userLink.setText(
"Pagina pubblica di "
+result.getScreen_name());
userLink.setTitle(
result.getPubblic_page());
}
else {
resultLabel.setText(
"Nessun utente trovato con screen name "
+searchBox.getText());
userLink.setVisible(false);
}
dialogBox.show();
}
});
}
});
vpanel.add(label);
opanel.add(searchLabel);
opanel.add(searchBox);
vpanel.add(opanel);
vpanel.add(submitButton);
// === Fine MainPanel ===

RootPanel.get("mainPanel").add(vpanel);
}

}

Non ci dilungheremo oltre sull'entry point in quanto esula dallo scopo degli articoli che invece sono incentrati sulla trasformazione di questa applicazione in una portlet.

A questo punto potremo compilare il progetto tramite il comando "GWT Compile Project" che di fatto crea nella cartella "war" una sottocartella "articolomoka" con tutti i JavaScript generati dalla parte client. Zippando poi la cartella war e cambiando l'estensione da "ArticoloMoka.zip" ad "ArticoloMoka.war" avremo il file pronto per essere deployato sotto Tomcat come una normalissima WebApp. Il risultato è mostrato in figura 5.

Figura SEQ Figura \* ARABIC 5 - Screeshot dell'applicazione GWT deployata direttamente sotto Tomcat.

Ora non resta che trasformare questa simpatica applicazione GWT in una portlet da incastonare nel portale Liferay... senza barare però! "Barare" sarebbe possibile e anche molto facile in questo caso. Basterebbe infatti usare una portlet di IFrame e configurarla per puntare alla pagina di questa web app... ma questo ovviamente non vorrebbe dire integrare GWT in una portlet.

Conclusioni

Per questo mese ci fermiamo qui, senza barare... Abbiamo introdotto la questione e abbiamo creato una webapp GWT, indicando i vari passi da seguire. Resta da fare la seconda parte, ossia il vero e proprio porting della webapp dentro una portlet Liferay. Nel prossimo numero, partendo da una dalla creazione di una portlet vuota, vedremo come farlo e concluderemo questa trattazione con alcune riflessioni.

Riferimenti

[LIFERAY] Sito ufficiale di Liferay

http://www.liferay.com/

[LIFT] Liferay Bundled con Tomacat 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

http://www2.mokabyte.it/cms/article.run?articleId=J3E-HC5-3JC-XGL7f00000118359738_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