Come creare un'interfaccia grafica in NetBeans

In tale guida verrà descritto come creare un'interfaccia grafica in NetBeans sfruttando un comodo editor Drag & Drop messo a disposizione dal programma. Il linguaggio che verrà utilizzato sarà java e, grazie all'utilizzo dell'editor, sarà possibile inserire con semplicità Bottoni, Etichette, Aree di testo, Menù.

• NetBeans

creare un'interfaccia grafica (GUI: Graphical User Interface) in NetBeans è semplicissimo, veloce e senza scrivere una riga di codice in quanto ci penserà stesso il programma a generarlo al posto nostro una volta trascinato gli oggetti grafici nella rispettiva area disegno, come vedremo tra poco. L'obiettivo di questo minitutorial consiste nel creare una semplice applicazione grafica costituita da una finestra in cui vi è un pulsante, il quale, una volta premuto, visualizzerà in un'etichetta un messaggio, per esempio Hello World!. Il risultato finale sarà il seguente:.

Innanzitutto creiamo un nuovo progetto vuoto di un'applicazione Java seguendo la procedura vista nell'articolo "Creare ed eseguire un'applicazione in NetBeans", togliendo, però, il segno di spunta a Create Main Class. Chiamiamo il nostro progetto, per esempio, GUI. Ora dobbiamo creare la finestra in cui verranno, poi, inseriti il pulsante e l'etichetta; quindi, clicchiamo col tasto destro sul progetto appena creato e selezioniamo dal menu a tendina Nuovo>JFrame Form....A questo punto apparirà la finestra Nuovo JFrame Form. Inseriamo nell'apposita casella Nome della Classe un nome da dare alla finestra, per esempio lasciamo quello di default NewJFrame, e clicchiamo su Termina. NetBeans a questo punto suddivide/adatta il piano di lavoro in modo da avere tutto sotto mano nella realizzazione dell'interfaccia grafica; in particolare le aree principali sono quelle evidenziate nella figura 2.

Nell'area Ispezione sono presenti tutti gli oggetti aggiunti nella nostra interfaccia grafica. Essi vengono organizzati ad albero dove un oggetto nodo può identificare un contenitore nel quale sono presenti altri oggetti; questa organizzazione consente, oltre a facilitare la selezione di un determinato oggetto, che potrebbe risultare difficile in una GUI molto più complessa, di comprendere com' è strutturata l'interfaccia grafica che stiamo realizzando. L'area Disegno è dove vengono inseriti e posizionati i nostri oggetti grafici, attraverso un drag and drop, nella finestra appena creata. La Tavolozza contiene l'insieme di tutti gli oggetti grafici che possiamo utilizzare suddivisi in categorie, basta selezionare quello che ci interessa e trascinarlo nell'area disegno. L'area Proprietà oggetto consente di visualizzare/modificare tutte le proprietà, disponibili in fase di progettazione, di un determinato oggetto selezionato e di gestire gli eventi ad esso associato. Come si può notare in quest'area sono presenti delle tabs (Proprietà, Binding, Events, Code) che suddividono le caratteristiche dell'oggetto in esame. Ora dobbiamo aggiungere alla nostra finestra gli oggetti che ci interessano, ovvero: Dalla tavolozza estendiamo la categoria Swing Controls, quindi selezioniamo e trasciniamo nell'area disegno, rispettivamente, gli oggetti Etichetta e Pulsante (figura 3).

1. Selezioniamo il pulsante o dall'area inspector o direttamente dall'area disegno.2. Andiamo nell'area delle proprietà dell'oggetto "Pulsante"; assicuriamoci che la tab Proprietà sia attiva e andiamo a modificare la proprietà text che consente di cambiare il testo del pulsante: inseriamo per esempio Saluta!. Ora selezioniamo l'etichetta e nell'area proprietà, nella tab Proprietà, modifichiamo il carattere del testo cliccando sui tre puntini accanto alla proprietà font (figura 5). Attiviamo la tab Code, sempre dell'oggetto Etichetta, e cambiamo il nome della variabile (Variable Name) da jLabel1 ad un nome a piacere, per esempio msg_lbl, il quale ci consentirà nel codice di richiamare modificare la proprietà text dell'etichetta e, quindi, di cambiarla in fase di run time. È buona norma dare un nome significativo all'oggetto in modo tale da comprendere meglio la lettura del codice.

Immaginate un'interfaccia composta da tantissimi oggetti lasciando i nomi di default e riprendere il codice dell'applicazione dopo qualche giorno: fareste una faticaccia solo per capire a quale oggetto state facendo riferimento! Per il motivo suddetto facciamo la stessa cosa anche per il pulsante, cambiando il nome della variabile da jButton1 asaluta_btn. Per vedere un'anteprima dell'aspetto grafico dell'interfaccia clicchiamo sull'apposito pulsante Preview Design (figura 7). Questa operazione, come detto, visualizza solo l'aspetto grafico e quindi ogni eventuale funzionalità dei componenti dell'interfaccia, implementate col codice, non sono eseguite (fanno eccezione le funzionalità della finestra come la chiusura e il ridimensionamento della stessa). Ora ciò che ci resta da fare è inserire il codice che visualizza il messaggio nell'etichetta una volta premuto il pulsante. Per fare questo dovremmo gestire l'evento actionPerformed del pulsante, inserendo un ascoltatore di eventi eccetera eccetera; queste scocciature vengono evitate da NetBeans, vediamo come: Selezioniamo il pulsante saluta_btn, rinominato precedentemente, andiamo nell'area delle proprietà e attiviamo la tab Events. Qui vengono elencati tutti gli eventi standard associabili al pulsante. A noi interessa l'evento actionPerformed, quindi attiviamolo selezionando, dalla lista a discesa accanto all'evento stesso, il nome del nostro pulsante. A questo punto si aprirà l'editor di testo. Cosa è successo? NetBeans ha creato automaticamente una procedura a cui è associato l'evento actionPerformed e che viene eseguita ogni volta che premiamo sul pulsante; quindi, qui dobbiamo scrivere il codice che visualizzerà il messaggio: view sourceprint?1private void saluta_btnActionPerformed (java. Awt. Event. ActionEvent evt){2 // TODO add your handling code here:3 msg_lbl. SetText ("Hello world!");4}
All'avvio del programma bisogna cancellare la scritta di default dell'etichetta (potremmo farlo anche attraverso l'area delle proprietà ma in questo modo non noteremmo l'oggetto nell'area disegno), quindi posizioniamoci nel costruttore della classa NewJFramee scriviamo la seguente linea di codice: 1msg_lbl. SetText (null); Da notare che nel costruttore vi è già un altro metodo che viene richiamato ed è initComponents (). Questo metodo viene generato automaticamente dal programma e contiene tutto il codice dell'interfaccia grafica che abbiamo costruito nell'area disegno; il codice non può essere modificato direttamente ma solo attraverso l'area delle proprietà dei singoli oggetti. A questo punto non ci resta che lanciare l'applicazione e vedere l'effetto finale.

• avere molta pazienza

• https://netbeans.org/