Koding av et enkelt Java-grafisk brukergrensesnitt

Et grafisk brukergrensesnitt (GUI) bygget ved hjelp av Java NetBeans plattform består av flere lag med containere. Det første laget er vinduet som brukes til å flytte applikasjonen rundt på datamaskinens skjerm. Dette er kjent som toppnivåcontaineren, og jobben er å gi alle andre containere og grafiske komponenter et sted å jobbe i. Vanligvis for en stasjonær applikasjon, vil denne beholderen på toppnivå lages ved hjelp av

klasse.

Du kan legge til et hvilket som helst antall lag i GUI-designen, avhengig av kompleksiteten. Du kan plassere grafiske komponenter (f.eks. Tekstbokser, etiketter, knapper) direkte i

, eller du kan gruppere dem i andre containere.

Lagene i GUI er kjent som inneslutningshierarkiet og kan sees på som et slektstre. Hvis

sitter bestefaren på toppen, så kan den neste beholderen tenkes på som faren og komponentene den har som barna.

For dette eksemplet bygger vi en GUI med en

som inneholder to

. Den første

vil holde en

. Den andre

vil holde en

. Bare en

(og derav de grafiske komponentene den inneholder) vil være synlige om gangen. Knappen brukes til å endre synligheten til de to

instagram viewer

Det er to måter å bygge denne GUI ved hjelp av NetBeans. Den første er å skrive inn Java-koden som representerer GUI manuelt, som er omtalt i denne artikkelen. Det andre er å bruke NetBeans GUI Builder-verktøyet for å bygge Swing GUIer.

For informasjon om hvordan du bruker JavaFX snarere enn Swing for å opprette en GUI, se Hva er JavaFX?

Merk: Den komplette koden for dette prosjektet er kl Eksempel på Java-kode for å bygge et enkelt GUI-program.

Sette opp NetBeans-prosjektet

Lage en ny Java Søknadsprosjekt i NetBeans med en hovedklasse Vi kaller prosjektet

Sjekk punkt: I Prosjekter-vinduet til NetBeans skal være en toppnivå GuiApp1-mappe (hvis navnet ikke er i fet skrift, høyreklikker du på mappen og velger

). Under

mappen skal være en kildepakke mappe med

kalt GuiApp1. Denne mappen inneholder hovedklassen som heter

.java.

Før vi legger til noen Java-kode, legger du følgende import til toppen av

klasse, mellom

linje og

Denne importen betyr at alle klassene vi trenger for å lage denne GUI-applikasjonen vil være tilgjengelige for oss å bruke.

Legg til denne kodelinjen innenfor hovedmetoden:

Dette betyr at det første du må gjøre er å lage en ny

gjenstand. Det er en fin snarvei for eksempel programmer, da vi bare trenger en klasse. For at dette skal fungere, trenger vi en konstruktør for

klasse, så legg til en ny metode:

I denne metoden legger vi all Java-koden som er nødvendig for å lage GUI, noe som betyr at hver linje fra nå av vil være inne i

metode.

Design Merk: Du har kanskje sett Java-kode publisert som viser klassen (dvs.

) utvidet fra a

. Denne klassen blir deretter brukt som det viktigste GUI-vinduet for et program. Det er virkelig ikke noe behov for å gjøre dette for en vanlig GUI-applikasjon. Den eneste gangen du ønsker å utvide

klasse er hvis du trenger å lage en mer spesifikk type

(se på

for mer informasjon om hvordan du lager en underklasse).

Som nevnt tidligere, er det første laget av GUI er et applikasjonsvindu laget av en

. Å lage en

objekt, ring

konstruktør:

Deretter setter vi oppførselen til GUI-applikasjonsvinduet ved å bruke disse fire trinnene:

1. Forsikre deg om at applikasjonen lukkes når brukeren lukker vinduet slik at det ikke fortsetter å kjøre ukjent i bakgrunnen:

2. Angi en tittel for vinduet slik at vinduet ikke har en tom tittellinje. Legg til denne linjen:

3. Angi vindusstørrelse, slik at vinduet er størrelse slik at det passer til de grafiske komponentene du plasserer i det.

Design Merk: Et alternativt alternativ for å stille inn størrelsen på vinduet er å ringe til

metode for

klasse. Denne metoden beregner størrelsen på vinduet basert på de grafiske komponentene det inneholder. Fordi dette eksemplet ikke trenger å endre vindusstørrelsen, bruker vi bare

metode.

4. Sentrer vinduet for å vises midt på dataskjermen, slik at det ikke vises øverst til venstre på skjermen:

Legger til de to JPanelene

De to linjene her skaper verdier for

gjenstander vi snart skal lage, ved å bruke to

arrays. Dette gjør det lettere å fylle noen eksempler på oppføringer for disse komponentene:

Lag det første JPanel-objektet

La oss lage det første

gjenstand. Den vil inneholde en

. Alle tre er laget via konstruktørmetodene deres:

Merknader om de tre linjene ovenfor:

De
```
JPanel
```
variabel er erklært endelig. Dette betyr at variabelen bare kan holde
```
JPanel
```
som er opprettet i denne linjen. Resultatet er at vi kan bruke variabelen i en indre klasse. Det vil fremgå hvorfor vi senere vil koden.
De
```
JLabel
```
og
```
JComboBox
```
har verdier sendt til dem for å angi grafiske egenskaper. Etiketten vil vises som "Frukt:", og combobox vil nå ha verdiene i
```
fruitOptions
```
rekke erklært tidligere.
De
```
Legg til()
```
metode for
```
JPanel
```
plasserer grafiske komponenter i den. EN
```
JPanel
```
bruker FlowLayout som standard layout manager. Dette er greit for denne applikasjonen, da vi ønsker at etiketten skal sitte ved siden av combobox. Så lenge vi legger til
```
JLabel
```
først vil det se bra ut:

Lag det andre JPanel-objektet

Den andre

følger samme mønster. Vi legger til en

og angi verdiene for disse komponentene til å være "Grønnsaker:" og den andre

matrise

. Den eneste andre forskjellen er bruken av

metode for å skjule

. Ikke glem at det vil være en

kontrollere synligheten til de to

. For at dette skal fungere, må man være usynlig i starten. Legg til disse linjene for å sette opp det andre

En linje som er verdt å merke seg i koden ovenfor, er bruken av

metode for

. De

verdi gjør at listen viser elementene den inneholder i to kolonner. Dette kalles en "avisstil" og er en fin måte å vise en liste over elementer fremfor en mer tradisjonell vertikal kolonne.

Legge til etterbehandling

Den siste komponenten som trengs er

for å kontrollere synligheten til

s. Verdien som er gitt i

konstruktør setter etikett på knappen:

Dette er den eneste komponenten som vil definere en hendelseslytter. En "hendelse" oppstår når en bruker samhandler med en grafisk komponent. Hvis en bruker for eksempel klikker på en knapp eller skriver tekst i en tekstboks, oppstår en hendelse.

En begivenhetslytter forteller applikasjonen hva de skal gjøre når hendelsen skjer.

bruker klassen ActionListener for å "lytte" for et knappeklikk av brukeren.

Lag hendelseslytteren

Fordi dette programmet utfører en enkel oppgave når du klikker på knappen, kan vi bruke en anonym indre klasse til å definere hendelseslytteren:

Dette kan se ut som skummel kode, men du må bare bryte den ned for å se hva som skjer:

Først kaller vi
```
addActionListener
```
metode for
```
JButton
```
. Denne metoden forventer en forekomst av
```
Action
```
klasse, som er klassen som lytter til arrangementet.
Deretter oppretter vi forekomsten av
```
Action
```
klasse ved å erklære et nytt objekt ved å bruke
```
ny ActionListener ()
```
og deretter gi en anonym indre klasse - som er all koden i de krøllete parentesene.
Inne i den anonyme indre klassen, legg til en metode som heter
```
actionPerformed ()
```
. Dette er metoden som kalles når du klikker på knappen. Alt som trengs i denne metoden er å bruke
```
setVisible ()
```
for å endre synligheten til
```
JPanel
```
s.

Legg til JPanels til JFrame

Til slutt må vi legge til de to

s og

til

. Som standard, a

bruker BorderLayout layout manager. Dette betyr at det er fem områder (over tre rader) av

som kan inneholde en grafisk komponent (NORD, {VEST, SENTRUM, ØST}, SØR). Spesifiser dette området ved å bruke

metode:

Still JFrame til å være synlig

Endelig vil alle ovennevnte koder ha vært for ingenting hvis vi ikke angir

å være synlig:

Nå er vi klare til å kjøre NetBeans-prosjektet for å vise applikasjonsvinduet. Ved å klikke på knappen vil du veksle mellom å vise combobox eller liste.