Codarea unei interfețe grafice simple pentru utilizatori Java

O interfață grafică de utilizator (GUI) construită folosind funcția Platforma Java NetBeans este format din mai multe straturi de recipiente. Primul strat este fereastra folosită pentru a muta aplicația pe ecranul computerului. Acesta este cunoscut sub numele de container de nivel superior, iar misiunea sa este de a oferi tuturor celorlalte containere și componente grafice un loc în care să lucreze. De obicei pentru o aplicație desktop, acest container de nivel superior va fi realizat folosind

clasă.

Puteți adăuga orice număr de straturi la designul dvs. GUI, în funcție de complexitatea acestuia. Puteți plasa componente grafice (de exemplu, casete text, etichete, butoane) direct în butonul

sau le puteți grupa în alte containere.

Straturile GUI sunt cunoscute sub numele de ierarhia de conținere și pot fi gândite ca un arbore genealogic. Dacă

bunicul este așezat în partea de sus, apoi următorul recipient poate fi gândit ca tatăl și componentele pe care le ține ca copii.

Pentru acest exemplu, vom construi o GUI cu o

instagram viewer

care conține două

și a

. Primul

va ține un

și

. Al doilea

va ține un

și a

. Unul singur

(și, prin urmare, componentele grafice pe care le conține) vor fi vizibile la un moment dat. Butonul va fi folosit pentru a schimba vizibilitatea celor doi

Există două moduri de a construi această GUI folosind NetBeans. Primul este să introduceți manual codul Java care reprezintă GUI, despre care este discutat acest articol. Al doilea este să folosiți instrumentul NetBeans GUI Builder pentru crearea interfațelor grafice grafice.

Pentru informații despre utilizarea JavaFX în loc de Swing pentru a crea o GUI, consultați Ce este JavaFX?

Notă: Codul complet pentru acest proiect este la Exemplu Cod Java pentru crearea unei aplicații grafice simple.

Configurarea proiectului NetBeans

Creaza un nou Java Proiect de aplicație în NetBeans cu o clasă principală Vom numi proiectul

Punct de control: În fereastra Proiecte a NetBeans ar trebui să existe un folder GuiApp1 de nivel superior (dacă numele nu este cu caractere aldine, faceți clic dreapta pe folder și alegeți

). Sub

folderul ar trebui să fie un folder de pachete sursă cu

numit GuiApp1. Acest folder conține clasa principală numită

.java.

Înainte de a adăuga orice cod Java, adăugați următoarele importuri în partea de sus a

clasa, între

linia și

Aceste importuri înseamnă că toate clasele de care avem nevoie pentru a face această aplicație GUI vor fi disponibile pentru a le utiliza.

În cadrul metodei principale, adăugați această linie de cod:

Acest lucru înseamnă că primul lucru de făcut este să creăm un nou

obiect. Este o scurtă scurtă de exemplu pentru programe, deoarece avem nevoie de o singură clasă. Pentru ca acesta să funcționeze, avem nevoie de un constructor pentru

clasă, deci adăugați o nouă metodă:

În această metodă, vom pune tot codul Java necesar pentru a crea GUI, ceea ce înseamnă că fiecare linie de acum înainte va fi în interiorul

metodă.

Notă de proiectare: Este posibil să fi văzut codul Java publicat care arată clasa (adică,

) extins de la a

. Această clasă este apoi utilizată ca fereastră GUI principală pentru o aplicație. Chiar nu este nevoie să faceți acest lucru pentru o aplicație GUI normală. Singura dată când doriți să extindeți

clasa este dacă trebuie să faceți un tip mai specific de

(aruncăm o privire la

pentru mai multe informații despre crearea unei subclase).

Așa cum am menționat anterior, primul strat al GUI este o fereastră de aplicație făcută din

. Pentru a crea un

obiect, sunați la

constructor:

În continuare, vom seta comportamentul ferestrei noastre de aplicație GUI, folosind acești patru pași:

1. Asigurați-vă că aplicația se închide atunci când utilizatorul închide fereastra, astfel încât să nu continue să ruleze necunoscut în fundal:

2. Setați un titlu pentru fereastră, astfel încât fereastra să nu aibă o bară de titlu goală. Adăugați această linie:

3. Setați dimensiunea ferestrei, astfel încât fereastra să fie dimensionată pentru a se încadra în componentele grafice pe care le introduceți.

Notă de proiectare: O opțiune alternativă pentru setarea dimensiunii ferestrei este să apelați la

metoda

clasă. Această metodă calculează dimensiunea ferestrei pe baza componentelor grafice pe care le conține. Deoarece această aplicație de eșantion nu trebuie să își schimbe dimensiunea ferestrei, vom folosi doar funcția

metodă.

4. Centrați fereastra pentru a apărea în mijlocul ecranului computerului, astfel încât să nu apară în colțul din stânga sus al ecranului:

Adăugarea celor două JPaneluri

Cele două linii aici creează valorile pentru

și

obiecte pe care le vom crea în scurt timp, folosind două

matrice. Acest lucru face mai ușor să adăugați câteva intrări de exemplu pentru acele componente:

Creați primul obiect JPanel

Acum, hai să creăm primul

obiect. Va conține o

și a

. Toate trei sunt create prin metodele constructorului lor:

Note cu privire la cele trei rânduri de mai sus:

```
JPanel
```
variabila este declarată final. Acest lucru înseamnă că variabila poate menține doar butonul
```
JPanel
```
asta este creat în această linie. Rezultatul este că putem folosi variabila într-o clasă interioară. Va deveni evident de ce dorim mai târziu în cod.
```
JLabel
```
și
```
JComboBox
```
au valori transmise lor pentru a-și seta proprietățile grafice. Eticheta va apărea ca „Fructe:” iar comboboxul va avea acum valorile conținute în
```
fruitOptions
```
tablou declarat mai devreme.
```
adăuga()
```
metoda
```
JPanel
```
plasează componente grafice în el. A
```
JPanel
```
folosește FlowLayout ca implicit manager de aspect. Acest lucru este bine pentru această aplicație, deoarece dorim ca eticheta să stea lângă combobox. Atâta timp cât adăugăm
```
JLabel
```
în primul rând, va arăta bine:

Creați cel de-al doilea obiect JPanel

Al doilea

urmează același tipar. Vom adăuga o

și a

și setați valorile acelor componente să fie „Legume:” și a doua

mulțime

. Singura altă diferență este utilizarea

metoda de a ascunde

. Nu uitați că va exista o

controlând vizibilitatea celor doi

. Pentru ca acest lucru să funcționeze, trebuie să fie invizibil la început. Adăugați aceste linii pentru a configura a doua

O linie demn de remarcat în codul de mai sus este utilizarea de

metoda

valoarea face ca lista să afișeze elementele pe care le conține în două coloane. Acesta se numește „stil de ziar” și este o modalitate drăguță de a afișa o listă de articole decât o coloană verticală mai tradițională.

Adăugarea finalurilor

Ultima componentă necesară este

pentru a controla vizibilitatea

s. Valoarea transmisă în

constructorul stabilește eticheta butonului:

Aceasta este singura componentă care va avea un ascultător de eveniment definit. Un „eveniment” apare atunci când un utilizator interacționează cu o componentă grafică. De exemplu, dacă un utilizator face clic pe un buton sau scrie text într-o casetă de text, atunci apare un eveniment.

Un ascultător de eveniment spune aplicației ce trebuie să facă atunci când se întâmplă evenimentul.

folosește clasa ActionListener pentru a „asculta” pentru un clic pe buton de către utilizator.

Creați ascultătorul de evenimente

Deoarece această aplicație îndeplinește o sarcină simplă la apăsarea butonului, putem utiliza o clasă interioară anonimă pentru a defini ascultătorul de evenimente:

Acest lucru poate părea un cod înfricoșător, dar trebuie doar să îl descompuni pentru a vedea ce se întâmplă:

În primul rând, apelăm la
```
addActionListener
```
metoda
```
JButton
```
. Această metodă se așteaptă la o instanță a
```
ActionListener
```
clasa, care este clasa care ascultă evenimentul.
În continuare, creăm instanța
```
ActionListener
```
clasa prin declararea unui nou obiect folosind
```
nou ActionListener ()
```
și apoi furnizarea unei clase interioare anonime - care este tot codul din parantezele cret.
În interiorul clasei interioare anonime, adăugați o metodă numită
```
actiune realizata()
```
. Aceasta este metoda care se numește la apăsarea butonului. Tot ceea ce este necesar în această metodă este de a utiliza
```
setVisible ()
```
pentru a schimba vizibilitatea
```
JPanel
```
s.

Adăugați JPanelurile în JFrame

În cele din urmă, trebuie să le adăugăm pe cele două

s și

. În mod implicit, a

utilizează managerul de dispunere BorderLayout. Aceasta înseamnă că există cinci zone (pe trei rânduri) ale

care poate conține o componentă grafică (NORTH, {WEST, CENTER, EAST}, SOUTH). Specificați această zonă folosind funcția

metodă:

Setați JFrame-ul să fie vizibil

În cele din urmă, tot codul de mai sus va fi fost degeaba dacă nu setăm

a fi vizibil:

Acum suntem gata să rulăm proiectul NetBeans pentru a afișa fereastra aplicației. Făcând clic pe buton se va comuta între afișarea comboboxului sau listei.