Kodning av ett enkelt Java-grafiskt användargränssnitt

Ett grafiskt användargränssnitt (GUI) byggt med Java NetBeans-plattform består av flera lager av containrar. Det första lagret är fönstret som används för att flytta applikationen runt datorns skärm. Detta kallas toppnivåcontainern, och dess uppgift är att ge alla andra containrar och grafiska komponenter en plats att arbeta i. Vanligtvis för en stationär applikation kommer denna toppnivåbehållare att göras med hjälp av

klass.

Du kan lägga till valfritt antal lager i din GUI-design, beroende på dess komplexitet. Du kan placera grafiska komponenter (t.ex. textrutor, etiketter, knappar) direkt i

, eller så kan du gruppera dem i andra behållare.

Lagren i GUI är kända som inneslutningshierarkin och kan betraktas som ett släktträd. Om

sitter farfar överst, då kan nästa behållare tänkas vara fadern och de komponenter som den har som barnen.

I det här exemplet bygger vi ett GUI med en

som innehåller två

och a

. Den första

kommer att hålla en

och

. Den andra

kommer att hålla en

och a

. Bara en

(och därmed de grafiska komponenterna som den innehåller) kommer att synas i taget. Knappen används för att växla de två synligheten

.

Det finns två sätt att bygga detta GUI med NetBeans. Den första är att manuellt skriva in Java-koden som representerar GUI, som diskuteras i den här artikeln. Den andra är att använda NetBeans GUI Builder-verktyg för att bygga Swing-GUI: er.

För information om hur du använder JavaFX snarare än Swing för att skapa ett GUI, se Vad är JavaFX?

Notera: Den fullständiga koden för detta projekt är kl Exempel Java-kod för att bygga en enkel GUI-applikation.

Skapa en ny Java Applikationsprojekt i NetBeans med en huvudklass Vi kommer att ringa projektet

Kontrollpunkt: I Projekt-fönstret i NetBeans ska vara en toppnivå GuiApp1-mapp (om namnet inte är i fetstil, högerklicka på mappen och välj

). Under

mappen ska vara en källkodspaketmapp med

heter GuiApp1. Den här mappen innehåller huvudklassen som heter

.java.

Innan vi lägger till någon Java-kod lägger du till följande import till toppen av

klass, mellan

linje och

:

Denna import betyder att alla klasser som vi behöver för att göra denna GUI-applikation kommer att vara tillgängliga för oss att använda.

Lägg till den här kodraden inom huvudmetoden:

Detta innebär att det första du behöver göra är att skapa en ny

objekt. Det är en trevlig genväg till exempel program, eftersom vi bara behöver en klass. För att detta ska fungera behöver vi en konstruktör för

klass, så lägg till en ny metod:

I den här metoden lägger vi till all Java-kod som behövs för att skapa GUI, vilket innebär att varje rad från och med nu kommer att vara inne i

metod.

Designanteckning: Du kanske har sett Java-kod publicerad som visar klassen (dvs.

) förlängs från a

. Denna klass används sedan som huvudfönstret för ett program. Det finns verkligen inget behov av att göra detta för en normal GUI-applikation. Den enda gången du vill förlänga

klass är om du behöver göra en mer specifik typ av

(ta en titt på

för mer information om hur du skapar en underklass).

Som nämnts tidigare är det första lagret av GUI är ett applikationsfönster tillverkat av en

. Så här skapar du en

objekt, ring

konstruktör:

Därefter ställer vi upp beteendet i vårt GUI-applikationsfönster med följande fyra steg:

1. Se till att applikationen stängs när användaren stänger fönstret så att det inte fortsätter att köra okänt i bakgrunden:

2. Ställ in en titel för fönstret så att fönstret inte har ett tomt namnfält. Lägg till denna rad:

3. Ställ in fönsterstorleken så att fönstret är dimensionerad för att passa de grafiska komponenterna du placerar i det.

Designanteckning: Ett alternativt alternativ för att ställa in fönstret är att ringa till

metod för

klass. Denna metod beräknar storleken på fönstret baserat på de grafiska komponenterna som den innehåller. Eftersom det här exempelprogrammet inte behöver ändra fönsterstorleken använder vi bara

metod.

4. Centrera fönstret så att det visas i mitten av datorskärmen så att det inte visas i det övre vänstra hörnet på skärmen:

De två raderna här skapar värden för

och

objekt som vi kommer att skapa inom kort med två

arrayer. Detta gör det lättare att fylla i några exempelposter för dessa komponenter:

Nu ska vi skapa det första

objekt. Den kommer att innehålla en

och a

. Alla tre skapas med sina konstruktormetoder:

Anmärkningar om ovanstående tre rader:

• De

  JPanel

  variabel deklareras slutlig. Detta betyder att variabeln bara kan hålla

  JPanel

  som skapas i den här raden. Resultatet är att vi kan använda variabeln i en inre klass. Det kommer att bli uppenbart varför vi senare vill i koden.
• De

  JLabel

  och

  JComboBox

  har värden skickat till dem för att ställa in sina grafiska egenskaper. Etiketten kommer att visas som "Frukt:" och komboboxen kommer nu att ha värdena inne i

  fruitOptions

  array förklarade tidigare.
• De

  Lägg till()

  metod för

  JPanel

  placerar grafiska komponenter i den. EN

  JPanel

  använder FlowLayout som standard layout manager. Detta är bra för den här applikationen eftersom vi vill att etiketten ska sitta bredvid combobox. Så länge vi lägger till

  JLabel

  först kommer det att se bra ut:

Den andra

följer samma mönster. Vi lägger till en

och a

och ställ in värdena på dessa komponenter till "Grönsaker:" och den andra

array

. Den enda andra skillnaden är användningen av

metod för att dölja

. Glöm inte att det kommer att finnas en

kontrollera synligheten hos de två

. För att detta ska fungera måste man vara osynlig i början. Lägg till dessa rader för att ställa in den andra

:

En rad som är värd att notera i koden ovan är användningen av

metod för

. De

värde gör att listan visar objekten den innehåller i två kolumner. Detta kallas en "tidningsstil" och är ett trevligt sätt att visa en lista med objekt snarare än en mer traditionell vertikal kolumn.

Den sista komponenten som behövs är

för att kontrollera synligheten för

s. Värdet som skickas i

konstruktör ställer in etiketten på knappen:

Detta är den enda komponenten som har en händelse lyssnare definierad. En "händelse" inträffar när en användare interagerar med en grafisk komponent. Om en användare till exempel klickar på en knapp eller skriver text i en textlåda inträffar en händelse.

En händelse lyssnar berättar applikationen vad man ska göra när händelsen inträffar.

använder klassen ActionListener för att "lyssna" för ett knappklick av användaren.

Eftersom den här applikationen utför en enkel uppgift när du klickar på knappen kan vi använda en anonym inre klass för att definiera händelse lyssnaren:

Det här kan se ut som läskig kod, men du måste bara dela upp den för att se vad som händer:

• Först kallar vi

  addActionListener

  metod för

  JButton

  . Denna metod förväntar sig en instans av

  Action

  klass, som är klassen som lyssnar på händelsen.
• Därefter skapar vi förekomsten av

  Action

  klass genom att förklara ett nytt objekt med

  ny ActionListener ()

  och sedan tillhandahålla en anonym innerklass - som är all koden inuti de lockiga parenteserna.
• Inuti den anonyma inre klassen lägger du till en metod som heter

  actionPerformed ()

  . Detta är metoden som kallas när du klickar på knappen. Allt som behövs i den här metoden är att använda

  setVisible ()

  för att ändra synligheten för

  JPanel

  s.

Slutligen måste vi lägga till de två

s och

till

. Som standard är a

använder layouthanteraren för BorderLayout. Detta innebär att det finns fem områden (över tre rader) av

som kan innehålla en grafisk komponent (NORD, {VÄST, CENTER, ÖST}, SYDA). Ange detta område med hjälp av

metod:

Slutligen har alla ovanstående koder varit för ingenting om vi inte ställer in

att vara synlig:

Nu är vi redo att köra NetBeans-projektet för att visa applikationsfönstret. Klicka på knappen för att växla mellan att visa komboboxen eller listan.