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

NetBeans 6.01 vs Eclipse 3.3.1.1
Integrare Apache Tomcat in Eclipse
Sviluppare applicazioni SWT in Eclipse

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:

Installiamo il plugin utilizzando la funzione Installa Nuovo Software

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

Inseriamo il link adatto per la nostra versione di Eclipse

a questo punto clicchiamo su Add…:

Assegniamo un nome al nostro repository

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

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.

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:

Accettiamo la licenza

una volta scaricato ed installato il tutto bisogna riavviare Eclipse:

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:

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:

Inseriamo i dati della nostra classe

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

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

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:

Inseriamo altri componenti e definiamo le label

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

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.

PAGES

1 2

COMMENTS

WORDPRESS: 5
  • comment-avatar
    Andrea 11 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

    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

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

  • comment-avatar

    Topical Male Enhancement Cream…

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