Codifica di una semplice interfaccia utente grafica Java

Un'interfaccia utente grafica (GUI) creata utilizzando Piattaforma Java NetBeans è composto da più strati di contenitori. Il primo livello è la finestra utilizzata per spostare l'applicazione sullo schermo del computer. Questo è noto come contenitore di livello superiore e il suo compito è quello di dare a tutti gli altri contenitori e componenti grafici un posto dove lavorare. In genere per un'applicazione desktop, questo contenitore di livello superiore verrà creato utilizzando

classe.

È possibile aggiungere un numero qualsiasi di livelli alla progettazione della GUI, a seconda della sua complessità. È possibile posizionare componenti grafici (ad es. Caselle di testo, etichette, pulsanti) direttamente nel

oppure puoi raggrupparli in altri contenitori.

I livelli della GUI sono noti come gerarchia di contenimento e possono essere pensati come un albero genealogico. Se la

è il nonno seduto in alto, quindi il prossimo contenitore può essere pensato come il padre e i componenti che contiene come i bambini.

instagram viewer

Per questo esempio, creeremo una GUI con a

contenente due

e a

. Il primo

conterrà a

. Il secondo

conterrà a

e a

. Solo uno

(e quindi i componenti grafici che contiene) saranno visibili alla volta. Il pulsante verrà utilizzato per cambiare la visibilità dei due

Esistono due modi per creare questa GUI utilizzando NetBeans. Il primo è digitare manualmente il codice Java che rappresenta la GUI, che viene discussa in questo articolo. Il secondo è utilizzare lo strumento GUI Builder di NetBeans per creare GUI Swing.

Per informazioni sull'uso di JavaFX anziché di Swing per creare una GUI, consultare Che cos'è JavaFX?

Nota: Il codice completo per questo progetto è disponibile all'indirizzo Esempio di codice Java per la creazione di un'applicazione GUI semplice.

Impostazione del progetto NetBeans

Creane uno nuovo Giava Progetto applicativo in NetBeans con una classe principale Chiameremo il progetto

Check Point: Nella finestra Progetti di NetBeans dovrebbe essere presente una cartella GuiApp1 di livello superiore (se il nome non è in grassetto, fai clic con il pulsante destro del mouse sulla cartella e scegli

). Sotto il

la cartella dovrebbe essere una cartella Pacchetti sorgente con

chiamato GuiApp1. Questa cartella contiene la classe principale chiamata

.Giava.

Prima di aggiungere qualsiasi codice Java, aggiungere le seguenti importazioni nella parte superiore di

classe, tra il

linea e il

Queste importazioni indicano che tutte le classi di cui abbiamo bisogno per rendere questa applicazione GUI saranno disponibili per noi.

Nel metodo principale, aggiungi questa riga di codice:

Ciò significa che la prima cosa da fare è creare un nuovo

oggetto. È una scorciatoia per i programmi di esempio, poiché abbiamo solo bisogno di una classe. Perché questo funzioni, abbiamo bisogno di un costruttore per

classe, quindi aggiungi un nuovo metodo:

In questo metodo, inseriremo tutto il codice Java necessario per creare la GUI, il che significa che ogni riga da ora in poi sarà all'interno di

metodo.

Nota di progettazione: Potresti aver visto il codice Java pubblicato che mostra la classe (ad es.

) esteso da a

. Questa classe viene quindi utilizzata come finestra principale della GUI per un'applicazione. Non c'è davvero bisogno di farlo per una normale applicazione GUI. L'unica volta che vorresti estendere il

classe è se è necessario creare un tipo più specifico di

(dare un'occhiata a

per ulteriori informazioni su come creare una sottoclasse).

Come accennato in precedenza, il primo strato di GUI è una finestra dell'applicazione creata da a

. Per creare un

oggetto, chiama il

costruttore:

Successivamente, imposteremo il comportamento della nostra finestra dell'applicazione GUI, usando questi quattro passaggi:

1. Assicurarsi che l'applicazione si chiuda quando l'utente chiude la finestra in modo che non continui a essere eseguita in background sconosciuta:

2. Imposta un titolo per la finestra in modo che la finestra non abbia una barra del titolo vuota. Aggiungi questa riga:

3. Imposta la dimensione della finestra, in modo che la finestra sia dimensionata per adattarsi ai componenti grafici che inserisci.

Nota di progettazione: Un'opzione alternativa per impostare la dimensione della finestra è chiamare il

metodo del

classe. Questo metodo calcola la dimensione della finestra in base ai componenti grafici che contiene. Poiché questa applicazione di esempio non ha bisogno di cambiare le dimensioni della finestra, utilizzeremo semplicemente

metodo.

4. Centra la finestra in modo che appaia al centro dello schermo del computer in modo che non appaia nell'angolo in alto a sinistra dello schermo:

Aggiunta dei due JPanel

Le due linee qui creano valori per il

oggetti che creeremo a breve, usando due

array. Ciò semplifica la compilazione di alcune voci di esempio per tali componenti:

Crea il primo oggetto JPanel

Ora creiamo il primo

oggetto. Conterrà a

e a

. Tutti e tre sono creati tramite i loro metodi di costruzione:

Note sulle tre righe precedenti:

Il
```
JPanel
```
la variabile è dichiarata finale. Ciò significa che la variabile può contenere solo il
```
JPanel
```
che è stato creato in questa linea. Il risultato è che possiamo usare la variabile in una classe interna. Risulterà evidente il motivo per cui vogliamo più avanti nel codice.
Il
```
JLabel
```
e
```
JComboBox
```
hanno valori passati a loro per impostare le loro proprietà grafiche. L'etichetta apparirà come "Frutti:" e la casella combinata ora avrà i valori contenuti all'interno di
```
fruitOptions
```
matrice dichiarata in precedenza.
Il
```
Inserisci()
```
metodo del
```
JPanel
```
inserisce componenti grafici al suo interno. UN
```
JPanel
```
utilizza FlowLayout come predefinito gestore del layout. Questo va bene per questa applicazione poiché vogliamo che l'etichetta si trovi accanto alla casella combinata. Finché aggiungiamo il
```
JLabel
```
per prima cosa, andrà bene:

Crea il secondo oggetto JPanel

Il secondo

segue lo stesso schema. Aggiungeremo un

e a

e impostare i valori di tali componenti su "Verdure:" e il secondo

Vettore

. L'unica altra differenza è l'uso di

metodo per nascondere il

. Non dimenticare che ci sarà un

controllare la visibilità dei due

. Perché questo funzioni, bisogna essere invisibili all'inizio. Aggiungi queste righe per impostare il secondo

Una riga degna di nota nel codice sopra è l'uso di

metodo del

. Il

Il valore consente all'elenco di visualizzare gli elementi in essa contenuti in due colonne. Questo è chiamato "stile giornale" ed è un bel modo per visualizzare un elenco di elementi piuttosto che una colonna verticale più tradizionale.

Aggiunta di tocchi finali

L'ultimo componente necessario è il

per controllare la visibilità di

S. Il valore passato in

costruttore imposta l'etichetta del pulsante:

Questo è l'unico componente che avrà un listener di eventi definito. Un "evento" si verifica quando un utente interagisce con un componente grafico. Ad esempio, se un utente fa clic su un pulsante o scrive del testo in una casella di testo, si verifica un evento.

Un listener di eventi dice all'applicazione cosa fare quando si verifica l'evento.

utilizza la classe ActionListener per "ascoltare" un clic sul pulsante da parte dell'utente.

Crea il listener di eventi

Poiché questa applicazione esegue una semplice attività quando si fa clic sul pulsante, è possibile utilizzare una classe interna anonima per definire il listener di eventi:

Questo può sembrare un codice spaventoso, ma devi solo scomporlo per vedere cosa sta succedendo:

Innanzitutto, chiamiamo il
```
addActionListener
```
metodo del
```
JButton
```
. Questo metodo prevede un'istanza di
```
ActionListener
```
class, ovvero la classe che ascolta l'evento.
Successivamente, creiamo l'istanza di
```
ActionListener
```
class dichiarando un nuovo oggetto usando
```
nuovo ActionListener ()
```
e quindi fornire una classe interna anonima - che è tutto il codice all'interno delle parentesi graffe.
All'interno della classe interna anonima, aggiungi un metodo chiamato
```
azione eseguita()
```
. Questo è il metodo che viene chiamato quando si fa clic sul pulsante. Tutto ciò che serve in questo metodo è usare
```
setVisible ()
```
per modificare la visibilità di
```
JPanel
```
S.

Aggiungi i JPanel al JFrame

Infine, dobbiamo aggiungere i due

s e

. Per impostazione predefinita, a

utilizza il gestore di layout BorderLayout. Ciò significa che ci sono cinque aree (su tre file) del

che può contenere un componente grafico (NORD, {OVEST, CENTRO, ORIENTE}, SUD). Specificare quest'area usando il

metodo:

Impostare JFrame su Visibile

Infine, tutto il codice di cui sopra non sarà servito a nulla se non impostiamo il

essere visibile:

Ora siamo pronti per eseguire il progetto NetBeans per visualizzare la finestra dell'applicazione. Fare clic sul pulsante per alternare la visualizzazione della casella combinata o dell'elenco.