Creare interfacce grafiche Java con Google WindowBuilder Pro

Creare interfacce grafiche Java con Google WindowBuilder Pro

In questo post vedremo come creare delle interfacce grafiche per i nostri programmi Java utilizzando un plugin di Eclipse denominato WindowBuilder Pro. Una delle lacune di Eclipse se confrontato alla sua controparte NetBeans, è la mancanza di un editor visuale che consenta di costruire delle interfacce grafiche senza il bisogno di scriverne a mano il codice. NetBeans ha infatti una sua componente built-in che si occupa della progettazione di interfacce denominata Matisse (http://netbeans.org/features/java/swing.html). Con il plugin che vedremo in questo articolo questo gap viene finalmente colmato. WindowBuilder Pro era un software proprietario dell'azienda Instantiations, la quale è stata poi acquisita da Google, dopo poco tempo Google ha deciso di renderne Open Source il codice sorgente e di donarlo alla Eclipse Foundation. Esso viene elencato come la seconda novità più importante all'interno del rilascio della versione Indigo di Eclipse (http://eclipsesource.com/blogs/2011/06/21/window-builder-top-indigo-feature-2/). Il plugin è disponibile sia per Eclipse che per tutte le sue reincarnazioni disponibili (RAD, RSA, MyEclipse, JBuilder, etc...).

Disegnare diagrammi UML in Eclipse
Integrare Apache Tomcat in Eclipse
Sviluppare applicazioni SWT in Eclipse

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:

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

PAGES

1 2

COMMENTS

WORDPRESS: 8
  • comment-avatar
    Andrea 7 anni ago

    come si fa questo ” poi aggiungiamo la cartella al nostro Build Path” ?

    • comment-avatar

      Ciao,
      dobbiamo clickare col tasto destro sul progetto poiscegliere -> Build Path -> Configure Build Path.
      Nella schermata che si presenta, clickiamo sul tab Libraries e poi su Add External Jars e qui scegliamo il path dove si trovano le librerie da aggiungere

      🙂

  • comment-avatar
    Ivan 6 anni ago

    come mai mi da questo errore??
    Grazie in anticipo..

    org.jdesktop.beansbinding.PropertyResolutionException: Exception invoking method public void Utente.setNome(java.lang.String) on Utente@260d8d
    at org.jdesktop.beansbinding.BeanProperty.invokeMethod(BeanProperty.java:791)
    at org.jdesktop.beansbinding.BeanProperty.write(BeanProperty.java:891)
    at org.jdesktop.beansbinding.BeanProperty.setProperty(BeanProperty.java:909)
    at org.jdesktop.beansbinding.BeanProperty.setValue(BeanProperty.java:580)
    at org.jdesktop.beansbinding.Binding.saveUnmanaged(Binding.java:1275)
    at org.jdesktop.beansbinding.Binding.save(Binding.java:1254)
    at org.jdesktop.beansbinding.AutoBinding.tryRefreshThenSave(AutoBinding.java:166)
    at org.jdesktop.beansbinding.AutoBinding.bindImpl(AutoBinding.java:199)
    at org.jdesktop.beansbinding.Binding.bindUnmanaged(Binding.java:959)
    at org.jdesktop.beansbinding.Binding.bind(Binding.java:944)
    at ApplicationWindow.initDataBindings(ApplicationWindow.java:94)
    at ApplicationWindow.initialize(ApplicationWindow.java:87)
    at ApplicationWindow.(ApplicationWindow.java:48)
    at ApplicationWindow$1.run(ApplicationWindow.java:35)
    at java.awt.event.InvocationEvent.dispatch(InvocationEvent.java:251)
    at java.awt.EventQueue.dispatchEventImpl(EventQueue.java:721)
    at java.awt.EventQueue.access$200(EventQueue.java:103)
    at java.awt.EventQueue$3.run(EventQueue.java:682)
    at java.awt.EventQueue$3.run(EventQueue.java:680)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.security.ProtectionDomain$1.doIntersectionPrivilege(ProtectionDomain.java:76)
    at java.awt.EventQueue.dispatchEvent(EventQueue.java:691)
    at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:242)
    at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:161)
    at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:150)
    at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:146)
    at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:138)
    at java.awt.EventDispatchThread.run(EventDispatchThread.java:91)
    Caused by: java.lang.IllegalAccessException: Class org.jdesktop.beansbinding.BeanProperty can not access a member of class Utente with modifiers “public”
    at sun.reflect.Reflection.ensureMemberAccess(Reflection.java:95)
    at java.lang.reflect.AccessibleObject.slowCheckMemberAccess(AccessibleObject.java:261)
    at java.lang.reflect.AccessibleObject.checkAccess(AccessibleObject.java:253)
    at java.lang.reflect.Method.invoke(Method.java:594)
    at org.jdesktop.beansbinding.BeanProperty.invokeMethod(BeanProperty.java:782)
    … 27 more

  • comment-avatar

    Hey there your web page url: http://www.appuntisoftware.
    it/crear-interfacce-grafiche-java-con-google-windowbuilder-pro/ appears to be redirecting to a completely different site when
    I click the homepage link. You might want to have this looked at.

  • comment-avatar

    Grazie, mi è tornata molto utile questa guida, non si smette mai di imparare 🙂

  • comment-avatar

    But it has been found that in lots of women the
    breast lacks proper size and shape disrupting her personality and beauty.

    Keeping the body in a great shape is very important when you want to have a great sex life.

    I did feel a slight momentary boost in overall sex drive,
    but not enough to match the advertised results or the cost in comparison to some other supplements I tried.

  • comment-avatar

    Woah! I’m really digging the template/theme of this site.
    It’s simple, yet effective. A lot of times it’s hard to get that “perfect balance” between usability
    and visual appeal. I must say you have done a awesome job with this.
    Also, the blog loads very quick for me on Firefox.
    Exceptional Blog!

    Also visit my page :: Watch Out Of The Furnace Online

  • comment-avatar

    Topical Male Enhancement Cream…

    Creare interfacce grafiche Java con Google WindowBuilder Pro | AppuntiSoftware.it…

  • DISQUS: 0