Egyszerű Java grafikus felhasználói felület kódolása

A grafikus felhasználói felület (GUI) a Java NetBeans platform többrétegű konténerekből áll. Az első réteg az az ablak, amely az alkalmazás mozgatására szolgál a számítógép képernyőjén. Ezt felső szintű tartálynak nevezik, és az a feladata, hogy minden más tárolót és grafikai komponenst munkahelyként biztosítson. Általában asztali alkalmazás esetén ezt a legfelső szintű tárolót a

osztály.

Tetszőleges számú réteget adhat hozzá a grafikus felhasználói felület kialakításához, az összetettségétől függően. Grafikus összetevőket (például szövegmezőket, címkéket, gombokat) közvetlenül a

, vagy csoportosíthatja őket más tárolókba.

A grafikus felhasználói felület rétegeit elszigetelési hierarchiának nevezik, és családfanak tekinthetők. Ha a

a nagyapa ül a tetején, akkor a következő edényt apának és az összetevőit, mint gyermekeket lehet gondolni.

Ebben a példában egy GUI-t építünk fel a

kettőt tartalmaz

és a

. Az első

fog tartani a

és

. A második

fog tartani a

és a

. Csak egy

(és ebből következően az abban található grafikai elemek) egy időben látható lesz. A gombot a kettő láthatóságának váltására használják

instagram viewer

.

Kétféle módon állíthatja elő ezt a felhasználói felületet a NetBeans használatával. Az első az, hogy manuálisan írja be a GUI-t képviselő Java kódot, amelyet ebben a cikkben tárgyalunk. A második az, hogy a NetBeans GUI Builder eszközt használjuk Swing GUI-k készítéséhez.

További információt a JavaFX és a Swing helyett a felhasználói felület létrehozásáról lásd: Mi a JavaFX??

jegyzet: A projekt teljes kódja itt található: Példa Java kódra egy egyszerű GUI alkalmazás létrehozásához.

A NetBeans projekt beállítása

Újat csinálni Jáva Alkalmazási projekt a NetBeans-ban egy főosztálygal. Hívjuk a projektet

Ellenőrző pont: A NetBeans Projekt ablakában a GuiApp1 legmagasabb szintű mappájának kell lennie (ha a név nincs vastag betűvel, kattintson a jobb gombbal a mappára, és válassza a

). A

A mappanak Source Source mappának kell lennie

az úgynevezett GuiApp1. Ez a mappa tartalmazza az úgynevezett főosztályt

.Jáva.

Mielőtt bármilyen Java kódot hozzáadnánk, tegye a következőket az importálási oldal tetejére

osztály, a

vonal és a

:

Ez az import azt jelenti, hogy az összes osztály, amelyre szükségünk van ennek a grafikus felhasználói felületnek az alkalmazásához, elérhető lesz számunkra.

A fő módszer keretein belül adja hozzá a következő sorot:

Ez azt jelenti, hogy az első, amit tennie kell, egy új létrehozása

tárgy. Ez egy egyszerű rövidítés például a programok számára, mivel csak egy osztályra van szükségünk. Ahhoz, hogy ez működjön, szükségünk van egy konstruktorra a

osztály, tehát adjon hozzá egy új módszert:

Ebben a módszerben a GUI létrehozásához szükséges összes Java kódot feltesszük, ami azt jelenti, hogy mostantól minden sor a

eljárás.

Tervezési megjegyzés: Valószínűleg látta, hogy megjelenik az osztályt mutató Java kód (pl.

) meghosszabbítva a

. Ez az osztály ezután az alkalmazás fő GUI ablaka lesz. Valójában nem kell ezt megtenni egy normál GUI alkalmazáshoz. Csak akkor szeretné kiterjeszteni a

osztály akkor, ha meg kell adnia egy speciálisabb osztályt

(vessünk egy pillantást

további információ az alosztály létrehozásáról).

Mint korábban már említettük, a GUI egy alkalmazás ablak, amely a

. Hozzon létre egy

objektum, hívja a

konstruktőr:

Ezután a következő négy lépéssel állíthatjuk be a felhasználói felület alkalmazásának viselkedését:

1. Győződjön meg arról, hogy az alkalmazás bezáródik, amikor a felhasználó bezárja az ablakot, hogy továbbra sem futhasson ismeretlenül a háttérben:

2. Állítsa be az ablak címét, hogy az ablakban ne legyen üres címsor. Adja hozzá ezt a sort:

3. Állítsa be az ablak méretét úgy, hogy az ablak olyan méretű legyen, hogy illeszkedjen a beillesztett grafikai elemekhez.

Tervezési megjegyzés: Az ablak méretének beállítására szolgáló alternatív lehetőség a

módszer

osztály. Ez a módszer kiszámítja az ablak méretét az abban szereplő grafikai összetevők alapján. Mivel ennek a mintaalkalmazásnak nem kell megváltoztatnia az ablak méretét, csak a

eljárás.

4. Középre állítsa az ablakot a számítógép képernyőjének közepén úgy, hogy az nem jelenjen meg a képernyő bal felső sarkában:

A két JPanel hozzáadása

A két vonal itt jön létre értékeket a

és

objektumokat, amelyeket hamarosan létrehozunk, kettő felhasználásával

tömbök. Ez megkönnyíti néhány példabejegyzés kitöltését ezekre az összetevőkre:

Hozza létre az első JPanel objektumot

Tegyük fel az elsőt

tárgy. Ez tartalmaz egy a

és a

. Mindhármat konstruktor módszereikkel hozzák létre:

Megjegyzések a fenti három sorhoz:

  • Az
    JPanel
    a változó deklarálva van végső. Ez azt jelenti, hogy a változó csak a
    JPanel
    ez ebben a sorban jött létre. Ennek eredményeként használhatjuk a változót egy belső osztályban. Nyilvánvalóvá válik, hogy miért akarjuk később beépíteni a kódexbe.
  • Az
    JLabel
    és
    JComboBox
    értéket adtak nekik a grafikai tulajdonságok beállításához. A címke "Gyümölcsök" feliratként jelenik meg, a kombinált doboz értékei pedig a
    fruitOptions
    korábban bejelentett tömb.
  • Az
    add ()
    módszer
    JPanel
    belehelyezi a grafikus komponenseket. A
    JPanel
    alapértelmezésként a FlowLayout funkciót használja elrendezés menedzser. Ez rendben van ebben az alkalmazásban, mivel azt akarjuk, hogy a címke a kombinált doboz mellett üljön. Mindaddig, amíg hozzáadjuk a
    JLabel
    először is jól néz ki:

Hozza létre a második JPanel objektumot

A második

ugyanazt a mintát követi. Hozzáadunk egy a

és a

és állítsa ezen összetevők értékét "Zöldség:" és a második értékre

sor

. Az egyetlen másik különbség a

módszer a

. Ne felejtsd el, hogy lesz egy

a kettő láthatóságának ellenőrzése

. Ahhoz, hogy ez működjön, az embernek láthatatlannak kell lennie az elején. Adja hozzá ezeket a sorokat a második beállításához

:

Az egyik sor, amelyet érdemes megjegyezni a fenti kódban, a

módszer

. Az

Az érték miatt a lista két oszlopban megjeleníti a benne szereplő tételeket. Ezt "újságstílusnak" hívják, és ez egy jó módszer az elemek listájának megjelenítésére, nem pedig a hagyományosabb függőleges oszlopokra.

Befejező érintések hozzáadása

Az utolsó szükséges összetevő a

- a

s. Az átadott érték a

a kivitelező beállítja a gomb címkét:

Ez az egyetlen elem, amely meghatározza az eseményfigyelőt. "Esemény" akkor fordul elő, amikor a felhasználó kölcsönhatásba lép egy grafikus komponenssel. Például, ha a felhasználó egy gombra kattint vagy szöveget ír be a szövegdobozba, akkor esemény történik.

Egy eseményfigyelő megmondja az alkalmazásnak, hogy mit kell tenni, ha az esemény bekövetkezik.

az ActionListener osztály segítségével "hallgat" egy gombnyomásra a felhasználó számára.

Hozza létre az eseményfigyelőt

Mivel ez az alkalmazás egy egyszerű feladatot hajt végre, amikor a gombra kattintunk, anonim belső osztályt használhatunk az eseményfigyelő meghatározására:

Ez ijesztőnek tűnik, de csak le kell bontania, hogy megnézze, mi történik:

  • Először hívjuk a
    addActionListener
    módszer
    JButton
    . Ez a módszer a
    ActionListener
    osztály, amely az az osztály, amely figyeli az eseményt.
  • Ezután létrehozzuk a
    ActionListener
    osztály az új objektum deklarálásával a
    új ActionListener ()
    majd egy anonim belső osztály biztosítása - ami az összes kód a göndör zárójelben.
  • Az anonim belső osztályon belül vegye fel az úgynevezett módszert
    actionPerformed ()
    . Ezt a módszert hívják meg, amikor a gombra kattintanak. Ehhez a módszerhez csak felhasználásra van szükség
    setVisible ()
    megváltoztatni a
    JPanel
    s.

Adja hozzá a JPanelt a JFrame-hez

Végül hozzá kell adnunk a kettőt

s és

hoz

. Alapértelmezés szerint a

a BorderLayout elrendezéskezelőt használja. Ez azt jelenti, hogy az öt terület (három soron át) van

amely tartalmazhat egy grafikus komponenst (NORTH, {WEST, CENTER, KELET}, DÉL). Adja meg ezt a területet a

eljárás:

Állítsa a JFrame-t láthatóvá

Végül, a fenti kód hiábavaló lett, ha nem állítjuk be a

látható legyen:

Most készen állunk arra, hogy futtassuk a NetBeans projektet az alkalmazásablak megjelenítéséhez. A gombra kattintva válthat a kombinált doboz vagy a lista megjelenítése között.