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.
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
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:
Inseriamo il nome del progetto e clicchiamo Next:
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:
Otteniamo il seguente progetto ed una classe che sarà l’ Entry Point dell’applicazione (il nostro main):
Switchiamo alla vista Design tramite il pulsante in basso a sinistra e vediamo l’editor come è composto:
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:
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 infine una checkbox ed un pulsante per il Login:
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):
Aggiungiamo un evento onClick al pulsante Login:
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:
Clicchiamo sul tasto Add… nella finestra che apparirà, e scriviamo come nuova proprietà il nome .gwt-CheckboxRemember:
Editiamo la nuova regola aggiungendo gli attributi color e font-size:
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:
Digitiamo LoginForm nel pannello che si è aperto, e selezioniamo l’item LoginForm:
Ritroveremo il nostro componente sotto la voce 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:
COMMENTS
[…] This post was mentioned on Twitter by Links About Google, Demóstenes Brito. Demóstenes Brito said: RT @linksgoogle: GWT Designer: un Gui Designer per Google Web Toolkit | Appunti Software: http://bit.ly/bVxmkX […]
It’s awesome to visit this web page and reading the views of all friends regarding this piece of writing, while I am also keen of getting knowledge.