Costruire un'interfaccia grafica (GUI) con NetBeans
Articolo originale: Progettare l'interfaccia grafica con netBeans
Lo sviluppo di un'applicazione Java avviene all'interno di un progetto, quindi come prima operazione bisogna creare un progetto e assegnargli un nome. Il progetto conterrà i file sorgenti dell'applicazione e altri file accessori.
Per creare un nuovo progetto dell'applicazione Rubrica:
Scegliere File > New Project
Nel pannello Categories selezionare il nodo Java e nel pannello Projects scegliere Java Application. Clic sul pulsante Next.
Nella casella Project Name scrivere Rubrica e scegliere la cartella in cui memorizzare il progetto.
Lasciare deselezionata la casella di spunta Use Dedicated Folder for Storing Libraries.
Assicurarsi che la casella di spunta Set as Main Project sia selezionata e cancellare la casella "Create Main Class".
Clic sul pulsante Finish.
Creare un contenitore JFrame
Dopo aver creato la nuova applicazione, si nota che, nel riquadro Projects la cartella Source Packages contiene un nodo vuoto <default package>. Per costruire l'interfaccia si deve creare un contenitore Java entro il quale verranno inseriti i componenti richiesti per la GUI. In questo passaggio viene creato un contenitore che usa un componente JFrame e lo si inserisce in un nuovo package.
Per aggiungere un contenitore JFrame:
Nella casella Projects fare clic con il tasto destro del mouse sul nodo Rubrica e scegliere New > JFrame Form.
In alternativa, un JFrame form si trova anche scegliendo New > Other > Swing GUI Forms > JFrame Form.Nella casella Class Name scrivere RubricaUI.
Nella casella package scrivere: my.Rubrica.
Clic sul pulsante Finish.
Viene creato il form RubricaUI e la classe RubricaUI all'interno dell'applicazione RubricaUI.java e si apre il form nell'area dell'ambiente di sviluppo. Notare che il package my.Rubrica sostituisce il package di default.
Dopo aver aggiunto il contenitore JFrame, all'interno dell'ambiemte di sviluppo (IDE) si apre una scheda con alcuni pulsanti nella barra degli strumenti e nell'area di progetto viene mostrato il form.
Le finestre per costruire l'interfaccia grafica comprendono:
Design Area. La finestra principale per la costruzione del form che rappresenta l'interfaccia grafica. Il pulsante Source sulla barra degli strumenti mostra il codice sorgente della classe, il pulsante Design consente di vedere l'aspetto grafico dei componenti che rappresentano la GUI, il pulsante History permette di accedere alla cronologia delle modifiche. Gli altri pulsanti sulla barra degli strumenti permettono di richiamare rapidamente i comandi, allineare i componenti, ridimensionare i componenti, e avere un'anteprima del form.
Navigator. Fornisce una rappresentazione ad albero di tutti i componenti presenti nell'applicazione.
Palette. Un elenco personalizzabile dei componenti disponibili nelle varie categorie JFC/Swing, AWT, e JavaBeans, oltre ai layout manager. Inoltre si possono creare, rimuovere e riposizionare le categorie mostrate nel pannello.
Properties Window. Mostra le proprietà del componente attualmente selezionato in una delle finestre.
L'ambiente di progetto del form permette di collocare i componenti nella posizione desiderata, provvedendo automaticamente a generare il codice per definire gli attributi necessari (dimensione, posizione, ecc.).
Appena si aggiunge un componente al form, vengono mostrate le linee guida per allineare il componente.
Anche se l'IDE semplifica il processo di creazione della GUI, è preferibile preparare prima uno schema su carta dell'aspetto che si desidera dare all'interfaccia prima di iniziare a realizzarlo sul form.
Il componente JFrame che è stato aggiunto rappresenta il contenitore di primo livello. Adesso si aggiungono due componenti JPanels che hanno lo scopo di raggruppare i componenti dell'interfaccia all'interno di un riquadro delineato da un bordo e con un titolo in testa.
Per aggiunegere un JPanel:
Nella finestra Palette fare clic sul componente Panel nella categoria Swing Containers.
Portare il cursore del mouse sopra il form. Appare un riquadro intorno al cursore. Posizionare questo riquadro appoggiando all'angolo superiore sinistro del form.
Nella finestra Navigator viene mostrato la relazione tra il nuovo componente e il suo contenitore.
Bisogna ridimensionare il JPanel per fare spazio ai prossimi componenti che verranno inseriti al suo interno. Si noti una caratteristica dell'ambiente di sviluppo. Bisogna deselezionare il JPanel, perchè non è stato ancora aggiunto il titolo sul bordo. il pannello scompare. Comunque passando il mouse sulla sua posizione, i bordi vengono evidenziati. Basta cliccare al'interno del componente per selezionarlo nuovamente e far riapparire le maniglie di ridimensionamento.
Per ridimensionare il JPanel
Selezionare il JPanel. Appaiono le maniglie di ridimensionamento intorno al perimetro del componente.
Cliccare e tenere premuto il pulsante del mouse sulla maniglia del lato destro e trascinarla fino a toccare l'altro estremo del form.
Rilasciare la maniglia.
Il componente JPanel è stato allargato per coprire tutta la larghezza del form.
Il pannello che è stato inserito servirà per contenere alcune informazioni. Si deve ripetere l'operazione per inserire un pannello sotto a questo. In quello superiore si inserirà il nome e in quello inferiore si inserirà l'indirizzo e-mail. Inserire il secondo pannello e ridimensionarlo per coprire l'area orizzontale del form.
Per distinguere la funzione dei due pannelli adesso si aggiunge un bordo ed un titolo a ciascuno di essi. Si deve aprire la finestra delle proprietà
Selezionare il JPanel superiore.
Nella finestra delle proprietà cliccare sul pulsante con i tre puntini (…) accanto alla proprietà Border.
Nel riquadro che si apre selezionare il nodo TitledBorder nel pannello Available Borders.
Nel pannello Proprietà inserire il testo: "Nome" per la proprietà Title.
Clic sul pulsante con i puntini (…) accanto alla proprietà Font, selezionare Bold come stile del font, e scegliere 12 come dimensione. Clic su OK per chiudere il riquadro di dialogo.
Selezionare il JPanel inferiore e ripetere i passi precedenti per assegnare il titolo "e-mail" e scegliere il font. (si può provare ad usare il tasto destro sul componente JPanel ed accedere alla finestra delle proprietà).
Aggiungere componenti.
Inserire un componente JLabel al form:
Nella finestra Palette selezionare il componente Label nella categoria Swing Controls.
Portare il cursore del mouse sul JPanel superiore. Quando appaiono le linee guida posizionare, con un clic del mouse, il componente nell'angolo superiore sinistro del pannello.
Modificare la didascalia della label: doppio clic sul componente JLabel per selezionare il suo testo. Scrivere "nome:" e premere invio.
Inserire un componente JTextField sul form:
Nella finestra Palette selezionare il componente Text Field nella categoria Swing Controls.
portare il cursore del mouse a destra della label "Nome: ". Regolandosi con le linee guida posizionare il componente facendo clic con il tasto sinistro del mouse.
Aggiungere un altro componente label (con proprietà Title=Cognome:) e un componente Text Field. Ridimensionare il Text Field per coprire la parte restante del pannello.
Adesso si aggiungeranno altre due label con didascalia: "Professione: " e "Nickname: " che precederanno due caselle di testo che si aggiungeranno dopo. Un altro modo per inserire i componenti consiste nel tenere premuto il stato "Shift" mentre si trascina il componente sul form.
Per aggiungere più JLabel al form:
nella finestra Palette selezionare il componente Label nella categoria Swing Controls con un clic del mouse.
Portare il cursore del mouse sul form, subito sotto la label "Nome: ". Con l'aiuto delle linee guida, allineare il componente e, lasciando un po' di spazio con la label superiore, fare clic per posizionare la prima label.
mentre il tasto Shift è ancora premuto, collocare una seconda label, accanto alla precedente. Rilasciare il tasto del mouse e poi il tasto shift. In caso di errore premere il tasto Esc.
Modificare la didascalia della prima label in "Professione: " e la didascalia della seconda label in "Nickname: ".
Inserire componenti tra quelli esistenti.
Nella finestra Palette selezionare il componente Text Field disponibile nella categoria Swing Controls.
portare il cursore del mouse sopra le label "Professione: " e "Nickname: ". Cliccare quando il componente viene intercalato tra le due label.
Ridimensionare la casella di testo.
Aggiungere una casella di testo accanto alla label Nickname.
Allineamento dei componenti.
L'IDE allinea automaticamente i componenti che vengono aggiunti, ma talvolta si deve specificare una diversa relazione di dipendenza tra i gruppi di componenti. Sul form sono state aggiunte quattro label.
Per allineare i componenti:
Tenere prenuto il tasto Ctrl poi, per selezionare, fare clic sulle label "Nome: " e "Professione: ".
fare Clic sul pulsante "Align Right in Column" che si trova sulla barra degli strumenti del designer. Oppure, scegliere la stessa voce dal menu contestuale, facendo clic con il tasto destro.
Ripetere le stesse operazioni per allineare a destra anche le label "Cognome: " e "Nickname: ".
Le due label sono state allineate e sono state anche raggruppate (osservare la finestra dele proprietà).
Prima di proseguire con gli allineamenti, si devono ridimensionare opportunamente le due caselle di testo che si trovano tra le label.
Per impostare il comportamento quando si ridimensiona un componente:
Selezionare entrambe le caselle di testo (Ctrl+Clic)
Con le due caselle di testo selezionate, premere il tasto destro del mouse su una di esse e, dal menu contestuale, scegliere la voce "Auto Resizing > Horizontal".
Per assegnare la stessa dimensione ad entrambe le caselle di testo:
Selezionare le quattro caselle di testo
fare clic con il tasto destro del mouse su una delle caselle di testo e, dal menu contestuale, scegliere la voce: "Set Same Size > Same Width"
Adesso si aggiunge una label, per descrivere il tipo di informazione che porta il componente che si aggiungerà tra poco.
Per allineare una label ad un componente di un gruppo:
Nella finestra Palette selezionare il componente Label nella categoria Swing.
portare il cursore del mouse sotto le llabel Nome e professione. Posizionare il componente in modo da allinearlo a queste due label.
Fare doppio clic sulla label per modificare la didascalia. Scrivere: "Formato di visualizzazione".
Adesso si aggiunge una casella combinata per scegliere il formato in cui mostrare i dati della rubrica.
Nella finestra Palette selezionare il componente Combo Box nella categoria Swing Controls.
Portare il cirsore a destra della label e quando le linee guida sono allineate, fare clic per posizionare il componente.
Ridimensionare il combo box:
Selezionare il Combo Box
Trascinare la maniglia di dimensionamento destra fino a coprire tutta la larghezza del pannello.
Le voci della casella combinata, per adesso, non verranno usate.
Aggiungere una label
nella finestra Palette selezionare il componente Label nella categoria Swing Controls.
Portare il cursore sotto al titolo del pannello e-mail. Posizionare la label a poca distanza dal margine superiore e dal lato sinistro del pannello.
Doppo clic sulla label per modificare la didascalia. Scrvere: "indirizzo e-mail e premere invio.
Aggiungere una casella di testo:
nella finestra Palette selezionare il componente Text Field nella categoria Swing Controls.
portare il cursore a destra della label "e-mail" e quando risulta allineata con questa, fare clic per posizionare la casella di testo.
Ridimensionare la casella fino a coprire tutta la larghezza del pannello.
Adesso si aggiungerà una JList che mostrerà i contatti presenti nella rubrica.
Nella finestra Palette selezionare il componente List nella categoria Swing Controls
Portare il cirsore del mouse sotto la label "indirizzo e-mail". Quando risulta allineata fare clic.
Ridimensionare la larghezza della lista, trascinando la miniglia verso destra.
A questa lista è stato aggiunto anche un componente non visibile: la barra di scorrimento. Essa apparirà quando l'elenco supera la dimensione della casella.
Inserire un gruppo di pulsanti
Nella finestra Palette selezionare il componente Button nella categoria Swing Controls.
Portare il cursore alla destra della casella di testo "indirizzo e-mail" e posizionarlo facendo Shift+clic.
Portare il cursore del mouse sotto questo pulsante, allineato con la parte superiore della Lista, e fare Shift + clic per posizionarlo.
Collocare altri due pulsanti al di sotto di quelli appena inseriti.
Modificare la didascalia dei pulsanti: Clic destro e scegliere "Edit Text". Al primo pulsante assegnare la didascalia: "Nuovo", al secondo "Modifica", al terzo "Elimina" e al quarto "Default".
Tenendo premuto il tasto Ctrl e facendo clic, selezionare i quattro pulsanti.
Con il tasto destro su uno di essi, scegliere la voce di menu: "Same Size > Same Width".
Aggiungere Radio Button
-
Inserire una label con didascalia: "Formato mail", esattamente sotto il componente JList. Allinearla sul lato desto del pannello.
Nella finestra Palette selezionre il componente Radio Button nella categoria Swing.
Posizionare, con shift+clic, il componente esattamente sotto la label inserita prima.
Con un altro Shift+clic posizionare un altro radio button a destra del precedente.
Posizionare un terzo radio button a destra del precedente.
Modificare la didascalia dei radio button (tasto destro e scegliere Edit Text. Al primo assegnare la didascalia: "HTML", al secondo "Normale", al terzo "Personalizzata".
I tre radio button devono appartenere ad un grppo, affinchè funzionino ad esclusione reciproca.
Inserire i radio button in un gruppo
Nella finestra Palette selezionare il componente Button Group nella categoria Swing Controls.
Cliccare in un punto qualsiasi dell'area di progetto per aggiungere il ButtonGroup al form. Il componente non compare sul form ma è visibile nella casella Navigator.
Selezionare i tre radio button.
Nella finestra delle proprietà scegliere buttonGroup1 dal combo box buttonGroup property.
Installare l'applicazione.
L'applicazione deve essere compilata. A seconda della versione di Java, potrebbero essere richieste alcune librerie per eseguire l'applicazione
Per ottenere l'applicazione eseguibile: Build > Build Main Project, l'IDE fornisce automaticamente una copia delle librerie nella cartella dist/lib dell'applicazione. l'IDE aggiunge anche ognuno dei file JAR che si trovano nella cartella dist all'elemento Class-Path nel file manifest.mf.
Per preparare l'applicazione da distribuire, che funzioni esternamente all'IDE, compattare la cartella dist del progetto.
Per eseguire l'applicazione fare clic con il tasto destro del mouse e selezionare Run nel menu contestuale. Nel riquadro di dialogo Run Project selezionare il nome della classe main (my.Rubrica.RubricaUI) e clic Ok.
Problemi
Progettare un'applicazione che funzioni come calcolatrice: inserire due caselle di testo nelle quali verranno scritti gli operandi, uno o più pulsanti per scegliere l'operazione, ed una label per mostrare il risultato.
Nota: il valore scritto nella casella di testo dovrà essere convertito da tipo String a tipo numerico, mediante la funzione: Double.parseDouble().