Creare interfacce grafiche Java con Google WindowBuilder Pro

Google_WindowBuilder_Pro_Logo_200-5b92158e1f026768

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…).

WindowBuilder Pro è un Java GUI designer potente e facile da usare, molto facile da utilizzare per creare applicazioni Java GUI senza spendere un sacco di tempo a scrivere codice per visualizzare anche le finestre più semplici. Con WindowBuilder è possibile creare finestre complicate in pochi minuti. Si utilizza la finestra di progettazione visiva e il codice Java viene generato al volo. È possibile aggiungere facilmente i controlli usando il drag-and-drop, aggiungere gestori di eventi ai controlli, modificare le proprietà dei vari componenti visuali semplicemente  utilizzando un editor di proprietà, internazionalizzare la vostra applicazione e molto altro ancora.
Si può trovare i link per i download per la propria versione di Eclipse  a questo indirizzo:

http://www.eclipse.org/windowbuilder/download.php

sono disponibili i download per le versioni di Eclipse a partire dalla 3.4.

Ottenuto il link per la nostra versione (ad esempio per Indigo il link è http://download.eclipse.org/windowbuilder/WB/release/R201109201200/3.7/), dobbiamo aggiungerlo alla lista dei repository da cui la nostra installazione di Eclipse può effettuare il download per installare nuovi plugin, per farlo clicchiamo su Help -> Install New Software:

winbuilder 300x155 Creare interfacce grafiche Java con Google WindowBuilder Pro

Installiamo il plugin utilizzando la funzione Installa Nuovo Software

inseriamo il link nella casella adiacente l’etichetta work with:

winbuilder2 300x246 Creare interfacce grafiche Java con Google WindowBuilder Pro

Inseriamo il link adatto per la nostra versione di Eclipse

a questo punto clicchiamo su Add…:

winbuilder3 300x188 Creare interfacce grafiche Java con Google WindowBuilder Pro

Assegniamo un nome al nostro repository

verrà visualizzata la lista dei download disponibili per quel repository:

winbuilder4 300x236 Creare interfacce grafiche Java con Google WindowBuilder Pro

Selezioniamo i plugin da installare

la lista comprende:

  • la libreria core fondamentale per il funzionamento del plugin;
  • le librerie per poter disegnare gui per lo standard Swing;
  • le librerie per poter disegnare gui per lo standard SWT.

selezioniamo tutte e tre le librerie (o una delle due che preferiamo) e clicchiamo su Next.

winbuilder5 300x238 Creare interfacce grafiche Java con Google WindowBuilder Pro

Viene visualizzata la lista dei pacchetti che verranno scaricati ed installati

clicchiamo su Next ci comparirà la schermata che ci invita ad accettare la licenza d’uso:

winbuilder6 300x245 Creare interfacce grafiche Java con Google WindowBuilder Pro

Accettiamo la licenza

una volta scaricato ed installato il tutto bisogna riavviare Eclipse:

winbuilder8 300x86 Creare interfacce grafiche Java con Google WindowBuilder Pro

Riavviamo Eclipse per poter utilizzare correttamente il plugin

Se tutto è andato a buon fine il nostro plugin dovrebbe essere correttamente funzionante, per provarlo iniziamo col creare un nuovo Progetto Java (tasto destro nel Project Explorer e poi New -> Java Project), difatti il plugin non crea un nuovo progetto da sè ma ha bisogno di un progetto già esistente (richiede un source folder già esistente).

Una volta creato il progetto possiamo cliccare col tasto destro su di esso e poi su New -> Other… , si aprirà un pannello dove cercheremo la voce WindowBuilder:

winbuilder9 243x300 Creare interfacce grafiche Java con Google WindowBuilder Pro

Sotto la voce WindowBuilder andiamo nella cartella Swing

ci portiamo nella sotto-cartella Swing e scegliamo Application Window, nella scheda che verrà visualizzata indichiamo il source folder, il package e la classe che conterrà la nostra Gui:

winbuilder10 300x156 Creare interfacce grafiche Java con Google WindowBuilder Pro

Inseriamo i dati della nostra classe

verrà generato automaticamente il codice della Gui e verrà visualizzata nell’editor visuale:

winbuilder11 300x267 Creare interfacce grafiche Java con Google WindowBuilder Pro

Tramite i tab in fondo a sinistra è possibile passare dalla modalita codice a quella visuale

passiamo all’editor visuale e proviamo ad inserire qualche componente nella nostra Window; l’interfaccia del plugin è del tutto simile a quella che abbiamo visto nel precedente articolo che parlava del GWT Designer, abbiamo un’area divisa in tre zone: a partire da sinistra abbiamo la vista Structure che ci mostra la struttura ad albero che avrà la nostra GUI, la Palette che contiene tutti gli elementi grafici che possiamo aggiungere alla nostra GUi ed infine l’Editor vero e proprio dove andremo a posizionare i nostri componenti grafici.

Creiamo una semplice form che un ipotetico utente compila per poi inviarla, tipicamente  il primo componente da inserire dopo il Frame iniziale (di classe JFrame) è un layout manager, sono disponibili vari tipi, scegliamo quello di tipo Spring. Fatto ciò inseriamo dei componenti di input (di tipo JTextField per il nome ed il cognome) e delle label (di tipo JLabel):

winbuilder12 300x136 Creare interfacce grafiche Java con Google WindowBuilder Pro

Inseriamo dei componenti all

inseriamo un altro tipo di input (di tipo JSpinner per l’età) e la relativa label, ed un pulsante (di tipo JButton) che provvede all’invio della form:

winbuilder13 300x150 Creare interfacce grafiche Java con Google WindowBuilder Pro

Inseriamo altri componenti e definiamo le label

possiamo lanciare la Gui tramite il comando Run As -> Java application:

winbuilder14 300x198 Creare interfacce grafiche Java con Google WindowBuilder Pro

Verifichiamo se la Gui rispetta il notro layout

Proviamo ora ad utilizzare una caratteristica molto interessante del plugin ossia il Data Binding: tramite il data binding è possibile associare ai componenti che abbiamo definito sul pannello i campi di un Bean di modo che è possibile pre-caricare a video i suoi valori ed eventualmente poterli modificare dinamicamente sullo stesso Bean.

Pagine: 1 2

1 Stella2 Stelle3 Stelle4 Stelle5 Stelle (7 voti, media: 5,00 di 5)
Loading ... Loading ...
, Views: 11680
You can leave a response, or trackback from your own site.

7 Responses to “Creare interfacce grafiche Java con Google WindowBuilder Pro”

  1. Andrea scrive:

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

    • angeloonline scrive:

      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
      :)

  2. Ivan scrive:

    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

  3. 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.

  4. Grazie, mi è tornata molto utile questa guida, non si smette mai di imparare :)

  5. youtu.be scrive:

    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.

  6. 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

Leave a Reply

*

p5rn7vb

Social Widgets powered by AB-WebLog.com.