Kodning af en enkel Java grafisk brugergrænseflade

En grafisk brugergrænseflade (GUI) bygget ved hjælp af Java NetBeans platform består af flere lag containere. Det første lag er det vindue, der bruges til at flytte applikationen rundt på computerskærmen. Dette er kendt som topniveaucontaineren, og dets opgave er at give alle andre containere og grafiske komponenter et sted at arbejde i. Til en desktop-applikation laves denne beholder på topniveau typisk ved hjælp af

klasse.

Du kan føje et vilkårligt antal lag til dit GUI-design, afhængigt af dets kompleksitet. Du kan placere grafiske komponenter (f.eks. Tekstbokse, etiketter, knapper) direkte i

, eller du kan gruppere dem i andre containere.

Lagene i GUI er kendt som indeslutningshierarkiet og kan betragtes som et slægtstræ. Hvis

sidder bedstefaren øverst, så kan den næste beholder tænkes som faren og de komponenter, den har som børnene.

I dette eksempel bygger vi en GUI med en

der indeholder to

og a

. Den første

vil holde en

. Sekundet

vil holde en

og a

. Kun en

(og dermed de grafiske komponenter, den indeholder) vil være synlige ad gangen. Knappen bruges til at skifte synlighed mellem de to

instagram viewer

Der er to måder at opbygge denne GUI ved hjælp af NetBeans. Den første er manuelt at indtaste den Java-kode, der repræsenterer GUI, som diskuteres i denne artikel. Det andet er at bruge NetBeans GUI Builder-værktøjet til at opbygge Swing-GUI'er.

For information om brug af JavaFX snarere end Swing til at oprette en GUI, se Hvad er JavaFX?

Bemærk: Den komplette kode til dette projekt er kl Eksempel på Java-kode til opbygning af et simpelt GUI-program.

Opsætning af NetBeans-projektet

Opret en ny Java Ansøgningsprojekt i NetBeans med en hovedklasse Vi kalder projektet

Check Point: I vinduet Projekter i NetBeans skal det være en GuiApp1-mappe på øverste niveau (hvis navnet ikke er med fed skrift, skal du højreklikke på mappen og vælge

). Under

mappen skal være en kildepakke mappe med

kaldet GuiApp1. Denne mappe indeholder den kaldte hovedklasse

.java.

Før vi tilføjer nogen Java-kode, tilføj følgende import øverst på

klasse mellem

linje og

Denne import betyder, at alle de klasser, vi har brug for at lave denne GUI-applikation, vil være tilgængelige for os at bruge.

Tilføj denne kodelinje inden for hovedmetoden:

Det betyder, at den første ting, man skal gøre, er at oprette en ny

objekt. Det er en dejlig genvej til for eksempel programmer, da vi kun har brug for en klasse. For at dette kan fungere, har vi brug for en konstruktør til

klasse, så tilføj en ny metode:

I denne metode lægger vi al den Java-kode, der er nødvendig for at oprette GUI, hvilket betyder, at hver linje fra nu af vil være inde i

metode.

Design Note: Du har måske set Java-kode offentliggjort, der viser klassen (dvs.

) forlænget fra a

. Denne klasse bruges derefter som det vigtigste GUI-vindue til en applikation. Der er virkelig ikke noget behov for at gøre dette for en normal GUI-applikation. Den eneste gang du ønsker at udvide

klasse er, hvis du har brug for at lave en mere specifik type

(se på

for mere information om oprettelse af en underklasse).

Som nævnt tidligere er det første lag af GUI er et applikationsvindue lavet af en

. Sådan opretter du en

objekt, kalde

konstruktør:

Dernæst indstiller vi adfærden i vores GUI-applikationsvindue ved hjælp af disse fire trin:

1. Sørg for, at applikationen lukker, når brugeren lukker vinduet, så det ikke fortsætter med at køre ukendt i baggrunden:

2. Indstil en titel til vinduet, så vinduet ikke har en tom titellinje. Tilføj denne linje:

3. Indstil vinduesstørrelsen, så vinduet er i størrelse, så det passer til de grafiske komponenter, du placerer i det.

Design Note: En alternativ mulighed for at indstille størrelsen på vinduet er at ringe til

metode til

klasse. Denne metode beregner størrelsen på vinduet baseret på de grafiske komponenter, det indeholder. Da dette eksempelprogram ikke behøver at ændre vinduesstørrelsen, bruger vi bare

metode.

4. Center vinduet for at vises midt på computerskærmen, så det ikke vises i øverste venstre hjørne af skærmen:

Tilføjelse af de to JPanels

De to linjer her skaber værdier til

genstande, vi opretter inden for kort tid ved hjælp af to

arrays. Dette gør det lettere at udfylde nogle eksempler på posterne for disse komponenter:

Opret det første JPanel-objekt

Lad os nu oprette det første

objekt. Det vil indeholde en

og a

. Alle tre oprettes via deres konstruktormetoder:

Bemærkninger til ovenstående tre linjer:

Det
```
JPanel
```
variabel er deklareret endelige. Dette betyder, at variablen kun kan indeholde
```
JPanel
```
der er oprettet på denne linje. Resultatet er, at vi kan bruge variablen i en indre klasse. Det vil fremgå, hvorfor vi senere vil koden.
Det
```
JLabel
```
og
```
JComboBox
```
har værdier sendt til dem for at indstille deres grafiske egenskaber. Etiketten vises som "Frugt:", og comboboxen vil nu have værdierne indeholdt i
```
fruitOptions
```
array erklæret tidligere.
Det
```
tilføje()
```
metode til
```
JPanel
```
placerer grafiske komponenter i det. EN
```
JPanel
```
bruger FlowLayout som standard layout manager. Dette er fint til denne applikation, da vi ønsker, at etiketten sidder ved siden af combobox. Så længe vi tilføjer
```
JLabel
```
først ser det fint ud:

Opret det andet JPanel-objekt

Sekundet

følger det samme mønster. Vi tilføjer en

og a

og indstil værdierne for disse komponenter til at være "Grøntsager:" og den anden

matrix

. Den eneste anden forskel er brugen af

metode til at skjule

. Glem ikke, at der vil være en

kontrol af synligheden af de to

. For at dette skal fungere, skal man være usynlig i starten. Tilføj disse linjer for at konfigurere det andet

En linje, der er værd at bemærke i ovenstående kode, er brugen af

metode til

. Det

værdi får listen til at vise de poster, den indeholder i to kolonner. Dette kaldes en "avisstil" og er en dejlig måde at få vist en liste over varer snarere end en mere traditionel lodret kolonne.

Tilføjelse af efterbehandling

Den sidste nødvendige komponent er

for at kontrollere synligheden af

s. Værdien passeret i

konstruktør sætter etiketten på knappen:

Dette er den eneste komponent, der har en begivenhedslytter defineret. En "begivenhed" opstår, når en bruger interagerer med en grafisk komponent. Hvis en bruger f.eks. Klikker på en knap eller skriver tekst i en tekstboks, sker der en begivenhed.

En begivenhedslytter fortæller applikationen, hvad de skal gøre, når begivenheden finder sted.

bruger klassen ActionListener til at "lytte" til et klikklik fra brugeren.

Opret begivenhedslytteren

Da denne applikation udfører en simpel opgave, når der klikkes på knappen, kan vi bruge en anonym indre klasse til at definere begivenhedslytteren:

Dette kan se ud som skræmmende kode, men du skal bare nedbryde den for at se, hvad der sker:

Først kalder vi
```
addActionListener
```
metode til
```
JButton
```
. Denne metode forventer en forekomst af
```
ActionListener
```
klasse, som er den klasse, der lytter til begivenheden.
Dernæst opretter vi forekomsten af
```
ActionListener
```
klasse ved at erklære et nyt objekt ved hjælp af
```
ny ActionListener ()
```
og derefter give en anonym indre klasse - som er al koden inden i de krøllede parenteser.
Inden i den anonyme indre klasse, tilføj en metode kaldet
```
actionPerformed ()
```
. Dette er den metode, der kaldes, når der klikkes på knappen. Alt, hvad der er nødvendigt i denne metode, er at bruge
```
setVisible ()
```
for at ændre synligheden af
```
JPanel
```
s.

Føj JPanels til JFrame

Endelig skal vi tilføje de to

s og

til

. Som standard a

bruger BorderLayout layout manager. Dette betyder, at der er fem områder (på tværs af tre rækker) af

der kan indeholde en grafisk komponent (NORD, {VEST, CENTER, ØST}, SYD). Specificer dette område vha

metode:

Indstil JFrame til at være synlig

Endelig vil alle ovenstående koder have været for intet, hvis vi ikke indstiller

at være synlig:

Nu er vi klar til at køre NetBeans-projektet for at få vist applikationsvinduet. Hvis du klikker på knappen, skiftes mellem at vise combobox eller liste.