Codering van een eenvoudige Java grafische gebruikersinterface

Een grafische gebruikersinterface (GUI) gebouwd met behulp van de Java NetBeans-platform is opgebouwd uit meerdere lagen containers. De eerste laag is het venster dat wordt gebruikt om de applicatie over het scherm van uw computer te verplaatsen. Dit staat bekend als de container op het hoogste niveau en het is zijn taak om alle andere containers en grafische componenten een werkplek te geven. Typisch voor een desktop-applicatie zal deze container op het hoogste niveau worden gemaakt met de

klasse.

U kunt een willekeurig aantal lagen toevoegen aan uw GUI-ontwerp, afhankelijk van de complexiteit. U kunt grafische componenten (bijv. Tekstvakken, labels, knoppen) rechtstreeks in de

, of u kunt ze in andere containers groeperen.

De lagen van de GUI staan bekend als de insluitingshiërarchie en kunnen worden beschouwd als een stamboom. Als de

zit de grootvader bovenaan, dan kan de volgende container worden gezien als de vader en de componenten die het bevat als de kinderen.

Voor dit voorbeeld bouwen we een GUI met een

instagram viewer

met twee

en een

. De eerste

zal een

. De seconde

zal een

en een

. Maar een

(en dus de grafische componenten die het bevat) zullen tegelijkertijd zichtbaar zijn. De knop wordt gebruikt om de zichtbaarheid van de twee te veranderen

Er zijn twee manieren om deze GUI te bouwen met NetBeans. De eerste is om handmatig de Java-code in te voeren die de GUI vertegenwoordigt, die in dit artikel wordt besproken. De tweede is om de NetBeans GUI Builder-tool te gebruiken voor het bouwen van Swing GUI's.

Voor informatie over het gebruik van JavaFX in plaats van Swing om een GUI te maken, zie Wat is JavaFX?

Notitie: De volledige code voor dit project is op Voorbeeld Java-code voor het bouwen van een eenvoudige GUI-toepassing.

Het opzetten van het NetBeans-project

Maak een nieuwe Java Applicatieproject in NetBeans met een hoofdklasse We noemen het project

Controlepunt: In het Projecten-venster van NetBeans moet een GuiApp1-map op het hoogste niveau staan (als de naam niet vetgedrukt is, klik dan met de rechtermuisknop op de map en kies

). Onder de

map moet een map met bronpakketten zijn

genaamd GuiApp1. Deze map bevat de hoofdklasse genaamd

.Java.

Voordat we Java-code toevoegen, voegt u de volgende import toe aan de bovenkant van de

klasse, tussen de

lijn en de

Deze invoer betekent dat alle klassen die we nodig hebben om deze GUI-applicatie te maken, voor ons beschikbaar zullen zijn.

Voeg binnen de hoofdmethode deze regel code toe:

Dit betekent dat het eerste wat u moet doen een nieuwe is

voorwerp. Het is een leuke snelkoppeling voor bijvoorbeeld programma's, omdat we maar één klas nodig hebben. Om dit te laten werken, hebben we een constructeur nodig voor de

klasse, dus voeg een nieuwe methode toe:

In deze methode plaatsen we alle Java-code die nodig is om de GUI te maken, wat betekent dat elke regel vanaf nu binnen de

methode.

Ontwerp Opmerking: Mogelijk hebt u Java-code gezien die de klasse laat zien (d.w.z.

) verlengd van een

. Deze klasse wordt vervolgens gebruikt als het belangrijkste GUI-venster voor een applicatie. Dit is echt niet nodig voor een normale GUI-applicatie. De enige keer dat u de

klasse is als u een specifieker type moet maken

(kijk eens naar

voor meer informatie over het maken van een subklasse).

Zoals eerder vermeld, de eerste laag van de GUI is een toepassingsvenster gemaakt van een

. Om een

object, bel de

constructeur:

Vervolgens stellen we het gedrag van ons GUI-toepassingsvenster in met behulp van deze vier stappen:

1. Zorg ervoor dat de applicatie sluit wanneer de gebruiker het venster sluit, zodat het niet op de achtergrond onbekend blijft draaien:

2. Stel een titel in voor het venster zodat het venster geen lege titelbalk heeft. Voeg deze regel toe:

3. Stel de venstergrootte in, zodat het venster de afmetingen heeft die passen bij de grafische componenten die u erin plaatst.

Ontwerp Opmerking: Een alternatieve optie om de grootte van het venster in te stellen, is door de te bellen

methode van de

klasse. Deze methode berekent de grootte van het venster op basis van de grafische componenten die het bevat. Omdat deze voorbeeldtoepassing de venstergrootte niet hoeft te wijzigen, gebruiken we gewoon de

methode.

4. Centreer het venster zodat het in het midden van het computerscherm verschijnt, zodat het niet in de linkerbovenhoek van het scherm verschijnt:

De twee JPanels toevoegen

De twee lijnen hier creëren waarden voor de

objecten die we binnenkort gaan maken, met behulp van twee

arrays. Dit maakt het gemakkelijker om enkele voorbeeldvermeldingen voor die componenten in te vullen:

Maak het eerste JPanel-object

Laten we nu de eerste maken

voorwerp. Het bevat een

en een

. Alle drie zijn gemaakt via hun constructormethoden:

Opmerkingen over de bovenstaande drie regels:

De
```
JPanel
```
variabele is gedeclareerd laatste. Dit betekent dat de variabele alleen de
```
JPanel
```
die in deze regel is gemaakt. Het resultaat is dat we de variabele kunnen gebruiken in een innerlijke klasse. Het zal duidelijk worden waarom we later in de code willen.
De
```
JLabel
```
en
```
JComboBox
```
hebben waarden doorgegeven om hun grafische eigenschappen in te stellen. Het label wordt weergegeven als 'Fruit:' en de combobox heeft nu de waarden in de
```
fruitOpties
```
array eerder gedeclareerd.
De
```
toevoegen()
```
methode van de
```
JPanel
```
plaatst er grafische componenten in. EEN
```
JPanel
```
gebruikt de FlowLayout als standaard layout manager. Dit is prima voor deze toepassing omdat we willen dat het label naast de combobox zit. Zolang we de toevoegen
```
JLabel
```
eerst ziet het er goed uit:

Maak het tweede JPanel-object

De seconde

volgt hetzelfde patroon. We voegen een

en een

en stel de waarden van die componenten in op "Groenten:" en de tweede

matrix

. Het enige andere verschil is het gebruik van de

methode om de

. Vergeet niet dat er een zal zijn

controle van de zichtbaarheid van de twee

. Om dit te laten werken, moet men in het begin onzichtbaar zijn. Voeg deze regels toe om de tweede in te stellen

Een regel die het vermelden waard is in de bovenstaande code is het gebruik van de

methode van de

. De

waarde zorgt ervoor dat de lijst de items die het bevat in twee kolommen weergeeft. Dit wordt een "krantenstijl" genoemd en is een leuke manier om een lijst met items weer te geven in plaats van een meer traditionele verticale kolom.

Afwerking toevoegen

Het laatste benodigde onderdeel is de

om de zichtbaarheid van de

s. De waarde is doorgegeven in de

constructor stelt het label van de knop in:

Dit is het enige onderdeel waarvoor een gebeurtenislistener is gedefinieerd. Een "gebeurtenis" vindt plaats wanneer een gebruiker interactie heeft met een grafische component. Als een gebruiker bijvoorbeeld op een knop klikt of tekst in een tekstvak schrijft, vindt er een gebeurtenis plaats.

Een gebeurtenisluisteraar vertelt de applicatie wat te doen wanneer de gebeurtenis plaatsvindt.

gebruikt de klasse ActionListener om te "luisteren" naar een klik van de knop door de gebruiker.

Maak de Event Listener

Omdat deze applicatie een eenvoudige taak uitvoert wanneer op de knop wordt geklikt, kunnen we een anonieme inner class gebruiken om de gebeurtenislistener te definiëren:

Dit ziet er misschien uit als enge code, maar je moet het gewoon opsplitsen om te zien wat er gebeurt:

Eerst noemen we de
```
addActionListener
```
methode van de
```
JButton
```
. Deze methode verwacht een exemplaar van de
```
ActionListener
```
class, dat is de klasse die naar het evenement luistert.
Vervolgens maken we het exemplaar van de
```
ActionListener
```
klasse door een nieuw object te declareren met
```
nieuwe ActionListener ()
```
en dan een anonieme innerlijke klasse aanbieden - dat is alle code tussen de accolades.
Voeg binnen de anonieme binnenklasse een methode toe met de naam
```
actie uitgevoerd()
```
. Dit is de methode die wordt aangeroepen wanneer op de knop wordt geklikt. Het enige dat bij deze methode nodig is, is om te gebruiken
```
setVisible ()
```
om de zichtbaarheid van de
```
JPanel
```
s.

Voeg de JPanels toe aan het JFrame

Ten slotte moeten we de twee toevoegen

s en

naar de

. Standaard een

gebruikt de BorderLayout layout manager. Dit betekent dat er vijf gebieden (verdeeld over drie rijen) van de

die een grafische component kan bevatten (NORTH, {WEST, CENTER, EAST}, SOUTH). Geef dit gebied op met de

methode:

Stel het JFrame in om zichtbaar te zijn

Ten slotte is alle bovenstaande code voor niets geweest als we de niet instellen

zichtbaar zijn:

Nu zijn we klaar om het NetBeans-project uit te voeren om het toepassingsvenster weer te geven. Als u op de knop klikt, schakelt u tussen het weergeven van de combobox of lijst.