Creare interfacce grafiche Java con Google WindowBuilder Pro

Per poter utilizzare questa feature dobbiamo però scaricare un file .jar denominato beansbinding-1.2.1.jar che è possibile reperire a questo indirizzo:

http://download.java.net/maven/2/org/jdesktop/beansbinding/1.2.1/

creiamo una cartella col nome lib all’interno del nostro progetto Java e vi copiamo la libreria, poi aggiungiamo la cartella al nostro Build Path. Automaticamente riaprendo il file della nostra Gui comparià nell’angolo in basso a sinistra il tab Bindings col simbolo di una graffetta.

Creiamo ora un Bean che rappresenta i dati dell’utente, ad esempio:

package it.appuntisoftware;

public class Utente {

private String nome;
private String cognome;
private int età;
public Utente(){
this.nome="Inserisci nome";
this.cognome="Inserisci cognome";
this.età=18;
}
public String getNome() {
return nome;
}
public void setNome(String nome) {
this.nome = nome;
}
public String getCognome() {
return cognome;
}
public void setCognome(String cognome) {
this.cognome = cognome;
}
public int getEtà() {
return età;
}
public void setEtà(int età) {
this.età = età;
}
}

nel Bean abbiamo definito tre proprietà con i relativi metodi setter e getter ed un costruttore di default che inizializza il Bea, lo abbiamo definito perchè così possiamo meglio capire una proprietà del Data Bindings.

Torniamo alla nostra Gui, e nella Palette alla voce System clicchiamo su Choose component, nel pannello che si aprirà digitiamo il nome Utente:

Cerchiamo il nostro Bean Utente

clicchiamo su di esso e lo posizioniamo nella nostra finestra (possiamo inserirlo in qualsiasi posizione anche al di fuori del pannello) e automaticamente sarà associato alla nostra applicazione grafica. Verrà generato questo codice nella Gui:

/**
 * @wbp.nonvisual location=39,349
 */
 private final Utente utente = new Utente();

Ora possiamo cliccare sul tab Bindings tramite cui assoceremo il componente visuale (ad esempio il JTextField associato alla label Nome) alla proprietà del Bean (ad esempio il nome dell’utente):

Associamo la proprietà text del componente visuale alla proprietà corrispondente del bean

clicchiamo poi sul pulsante Create Data Binding:

Il pulsante è poco visibile, lo abbiamo cerchiato in rosso

nel pannello che si aprirà sdobbiamo scegliere l’update strategy: di default ci viene proposta READ (legge il Bean e la visualizza nel TexField) noi la cambiamo in READ_WRITE (oltre che visualizzarla vogliamo che venga sovrascritta quando l’utente scrive il suo nome), clicchiamo su Ok:

Cliccando su Ok la regola verrà aggiunta alle Bound Properties

ripetiamo questa operazione per gli altri due campi. Ora non ci resta che aggiungere un evento al pulsante, ad esempio quando viene cliccato, lo facciamo cliccando col destro sul pulsante (sempre tramite l’editor visuale) e poi su Add Event Handler -> action -> action performed:

Aggiungiamo un evento al pulsante

l’associazione verrà codificata così:

btnNewButton.addActionListener(new ActionListener() {
 public void actionPerformed(ActionEvent e) {
 }
 });

nel metodo actionPerformed aggiungiamo del codice per testare se il Data Bindings funziona:

btnNewButton.addActionListener(new ActionListener() {
 public void actionPerformed(ActionEvent e) {
 System.out.println(utente.getNome());
 System.out.println(utente.getCognome());
 System.out.println(utente.getEtà());
 }
 });

adesso possiamo lanciare la Gui e verificarne il funzionamento:

Lanciamo la nostra Gui, essa visualizzerà dei dati pre-caricati

i dati pre-caricati sono quelli generati tramite il costruttore del Bean Utente. Proviamo a cambiare questi valori e poi a cliccare su Invia:

Clicchiamo su Invia i parametri verranno stampati sulla consolle

cliccando su Invia verrà richiamato il metodo ActionPerformed ed i dati saranno stampati dalle istruzioni System.out.println, l’esempio funziona perchè abbiamo definito la output Strategy come READ_WRITE, se fosse stata solo READ allora i parametri non sarebbero stati cambiati rispetto a quelli impostati dal costruttore del Bean.

Possiamo scaricare il progetto Eclipse dell’applicazione sviluppata in questo tutorial al seguente indirizzo:

https://www.appuntisoftware.it/codeexamples/eclipseproject/TestGUI.zip