GWT Designer: un Gui Designer per Google Web Toolkit

GWT Designer è uno strumento per la costruzione di interfacce per il framework GWT, il quale permette con pochi click di creare form e altri componenti grafici, utilizzando esclusivamente una palette grafica lasciando allo strumento la generazione del codice Java. GWT Designer è stato sviluppato come plugin di Eclipse e delle sue varianti (MyEclipse, RAD,…) ed utilizza il GEF frameworf di Eclipse per la visualizzazione e la gestione della visualizzazione grafica. Questo strumento è stato sviluppato da Instantiations acquisita da Google ad agosto 2010 e rilasciato come free software insieme ad altri prodotti Java della stessa software house.

L’installazione è alquanto semplice basta andare in Help-> Install New Software e specificare il repository da dove scaricare il plugin (cliccando su Add…), il repository cambia a seconda della versione di Eclipse installata:

Eclipse 3.6 (Helios)

http://dl.google.com/eclipse/inst/d2gwt/latest/3.6

Eclipse 3.5 (Galileo)

http://dl.google.com/eclipse/inst/d2gwt/latest/3.5

Eclipse 3.4 (Ganymede)

http://dl.google.com/eclipse/inst/d2gwt/latest/3.4

Aggiungiamo il repository da dove scaricare il plugin

Una volta scaricato e installato il tutto, riavviamo Eclipse.

Creiamo un nuovo progetto di tipo GWT Java Project, cliccando col tasto destro sul Package Explorer e poi su New e, se non è in elenco, clicchiamo su Other e cerchiamo la categoria WindowBuilder-> GWT Designer -> Model. Infine clicchiamo su GWT Java Project:

Cerchiamo la categoria WindowBuilder-> GWT Designer -> Model

Inseriamo il nome del progetto e clicchiamo Next:

Inseriamo il nome del progetto

Spuntiamo Create GWT Module (se non lo facciamo verrà creato un progetto completamente vuoto!), specifichiamo il nome e il path del package, infine specifichiamo di voler usare solo le librerie GWT:

Creiamo un nuovo modulo, ne specifichiamo il nome e path del package

Otteniamo il seguente progetto ed una classe che sarà l’ Entry Point dell’applicazione (il nostro main):

Il progetto generato

Switchiamo alla vista Design tramite il pulsante in basso a sinistra e vediamo l’editor come è composto:

L'editor grafico

Costruiamo ora, utilizzando l’editor grafico, una semplice form di Login, utilizzeremo un componente di tipo Composite (una sorta di aggregatore di componenti grafici), in modo da poter sviluppare la nostra Login Form in un file separato e poi poterlo importare nella nostra Entry Point (file main), clicchiamo col tasto destro sul package client:

Creiamo un Composite Panel

Indichiamo il nome del nostro componente e lasciamo il resto come da default:

Verrà creato nuovo file java di nome LoginForm; selezioniamo Design e clicchiamo sulla palette Panels il componente Flex Table, la freccia diventerà di colore verde, a questo punto clicchiamo sul pannello vuoto per inserire il componente:

Inseriamo delle Label ed una TextBox per lo username ed una Label ed una PasswordTextBox per la password, prendendole dal Panel Widgets, modifichiamo le Label andando ad agire sul Panel Properties e modificando la voce Text, modifichiamo invece per i campi TextBox il valore dell’attributo Variable, inserendo rispettivamente textBoxUsername e textBoxPassword:

Inseriamo i Widgets della Flex Table

Inseriamo infine una checkbox ed un pulsante per il Login:

La nostra form completa

Restringiamo inoltre la Flex Table cliccando sull’angolo in basso a destra della stessa e la portiamo ad una dimensione di 300 x 200. Otteniamo il seguente risultato finale:

Convertiamo i nostri campi di input da Local (cioè visibile solo nel costruttore) a Field (cioè divengono campi della classe e quindi visibile in ogni metodo di essa):

Clicchiamo sul tasto Convert local to Field

Aggiungiamo un evento onClick al pulsante Login:

Definiamo l'evento onClicK

Una volta aggiunto l’evento verremo riportati nella schermata Source dove dovremo implementare il metodo onClick, scriveremo il seguente codice:

Button button = new Button("New button");
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
   if (textBoxUsername.getText().length() == 0
       || textBoxPassword.getText().length() == 0) {
        Window.alert("La Username o la password sono vuote!!!");
   }
}
});

Possiamo modificare il CSS del nostro componente cliccando sul tasto in alto Editor for rules in available CSS file:

Modifichiamo le proprietà CSS

Clicchiamo sul tasto Add… nella finestra che apparirà, e scriviamo come nuova proprietà il nome .gwt-CheckboxRemember:

Creiamo una nuova regola CSS

Editiamo la nuova regola aggiungendo gli attributi color e font-size:

Editiamo la regola appena definita

Clicchiamo su ok per salvare. Inseriamo ora la nostra Form nella Entry Point della nostra applicazione, aprendo LoginApp nell’editor e cliccando su choose Component:

Apriamo il file LoginApp nell'editor e clicchiamo su choose Component

Digitiamo LoginForm nel pannello che si è aperto, e selezioniamo l’item LoginForm:

Selezioniamo il componente LoginForm

Ritroveremo il nostro componente sotto la voce Custom:

La nostra Form nel Panello Custom

Clicchiamo su di esso e lo inseriamo nella nostra applicazione, verrà generato il seguente codice:

package it.appuntisoftware.client
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class LoginApp implements EntryPoint {
   public void onModuleLoad() {
      RootPanel rootPanel = RootPanel.get();
      LoginForm loginForm = new LoginForm();
      rootPanel.add(loginForm);
   }
}

A questo punto possiamo testare la nostra applicazione cliccando sul nostro progetto col tasto destro e selezionando Run as -> Web Application:

Avviamo la nostra applicazione