Kódovanie jednoduchého grafického používateľského rozhrania Java

Grafické užívateľské rozhranie (GUI) vytvorené pomocou Platforma Java NetBeans pozostáva z niekoľkých vrstiev kontajnerov. Prvá vrstva je okno používané na presun aplikácie po obrazovke počítača. Toto je známe ako kontajner najvyššej úrovne a jeho úlohou je poskytnúť všetkým ostatným kontajnerom a grafickým komponentom miesto na prácu. Pre stolnú aplikáciu sa zvyčajne tento kontajner najvyššej úrovne vyrobí pomocou

trieda.

Do dizajnu GUI môžete pridať ľubovoľný počet vrstiev v závislosti od jeho zložitosti. Grafické komponenty (napr. Textové polia, štítky, tlačidlá) môžete umiestniť priamo do

alebo ich môžete zoskupiť do iných kontajnerov.

Vrstvy GUI sú známe ako hierarchia kontajnmentu a možno ich považovať za rodokmeň. Ak je

je dedko, ktorý sedí na vrchu, potom sa ďalší kontajner môže považovať za otca a za komponenty, ktoré drží ako deti.

V tomto príklade vytvoríme GUI pomocou

obsahujúce dva

a a

. Prvý

bude držať

a

. Druhy

bude držať

a a

. Len jeden

(a teda aj grafické komponenty, ktoré obsahuje) budú viditeľné naraz. Tlačidlo sa použije na prepnutie viditeľnosti týchto dvoch

instagram viewer

.

Existujú dva spôsoby, ako vytvoriť toto GUI pomocou NetBeans. Prvým je manuálne zadanie kódu Java, ktorý predstavuje GUI, o čom sa hovorí v tomto článku. Druhým je použitie nástroja NetBeans GUI Builder na vytváranie grafík GUI Swing.

Informácie o používaní rozhrania JavaFX namiesto Swing na vytvorenie GUI nájdete na stránke Čo je to JavaFX?

Poznámka: Celý kód tohto projektu je na adrese Príklad kódu Java pre zostavenie jednoduchej GUI aplikácie.

Nastavenie projektu NetBeans

Vytvorte nový Jáva Aplikačný projekt v NetBeans s hlavnou triedou Budeme projekt nazývať

Kontrolný bod: V okne Projekty projektu NetBeans by mal byť priečinok GuiApp1 najvyššej úrovne (ak názov nie je uvedený tučným písmom, kliknite pravým tlačidlom myši na priečinok a vyberte príkaz

). Pod

priečinok by mal byť priečinok Zdrojové balíčky s

nazýva sa GuiApp1. Tento priečinok obsahuje hlavnú triedu s názvom

.java.

Predtým, ako pridáme akýkoľvek kód Java, pridajte nasledujúci import do hornej časti

trieda, medzi

linka a

:

Tieto dovozy znamenajú, že všetky triedy, ktoré potrebujeme na vytvorenie tejto aplikácie GUI, budú k dispozícii na použitie.

V rámci hlavnej metódy pridajte tento riadok kódu:

To znamená, že prvá vec, ktorú musíte urobiť, je vytvoriť nový

objekt. Napríklad je to pekná skratka, pretože potrebujeme iba jednu triedu. Aby to fungovalo, potrebujeme konštruktora pre

triedy, takže pridajte novú metódu:

V tejto metóde vložíme všetok Java kód potrebný na vytvorenie GUI, čo znamená, že každý riadok odteraz bude vo vnútri

metóda.

Poznámka k dizajnu: Možno ste už videli publikovaný kód Java, ktorý zobrazuje danú triedu (t. J.

) rozšírené z a

. Táto trieda sa potom používa ako hlavné okno GUI pre aplikáciu. Pre normálnu aplikáciu GUI to skutočne nie je potrebné. Jediný čas, kedy by ste chceli rozšíriť

trieda je, ak potrebujete konkrétnejší typ

(pozri sa na

ďalšie informácie o vytvorení podtriedy).

Ako už bolo uvedené vyššie, prvá vrstva GUI je okno aplikácie vyrobené z

. Ak chcete vytvoriť

objekt, zavolajte

konštruktor:

Ďalej nastavíme správanie nášho okna GUI pomocou týchto štyroch krokov:

1. Zaistite, aby sa aplikácia zavrela, keď používateľ zatvorí okno, aby na pozadí nezostávala neznáma:

2. Nastavte názov okna tak, aby okno nemalo prázdny nadpis. Pridajte tento riadok:

3. Nastavte veľkosť okna tak, aby bola veľkosť okna prispôsobená grafickým komponentom, ktoré doň umiestnite.

Poznámka k dizajnu: Alternatívnou voľbou pre nastavenie veľkosti okna je vyvolanie okna

metóda

trieda. Táto metóda vypočíta veľkosť okna na základe grafických komponentov, ktoré obsahuje. Pretože táto vzorová aplikácia nemusí meniť svoju veľkosť okna, použijeme iba

metóda.

4. Vycentrujte okno tak, aby sa objavilo v strede obrazovky počítača tak, aby sa neobjavilo v ľavom hornom rohu obrazovky:

Pridanie dvoch JPanels

Tu sa vytvoria dva riadky hodnoty pre

a

čoskoro vytvoríme objekty pomocou dvoch

polí. Uľahčuje to naplnenie niektorých vzorových položiek pre tieto komponenty:

Vytvorte prvý objekt JPanel

Teraz vytvorme prvý

objekt. Bude obsahovať

a a

. Všetky tri sú vytvorené pomocou ich konštruktorských metód:

Poznámky k vyššie uvedeným trom riadkom:

  • JPanel
    premenná je deklarovaná konečné. To znamená, že premenná môže obsahovať iba
    JPanel
    ktorý je vytvorený v tomto riadku. Výsledkom je, že premennú môžeme použiť vo vnútornej triede. Bude zrejmé, prečo sa chceme v kóde ďalej zaoberať.
  • JLabel
    a
    JComboBox
    aby im boli odovzdané hodnoty na nastavenie ich grafických vlastností. Štítok sa objaví ako "ovocie:" a kombobox bude mať teraz hodnoty obsiahnuté v
    fruitOptions
    pole deklarované skôr.
  • pridať ()
    metóda
    JPanel
    umiestni doň grafické prvky.
    JPanel
    používa FlowLayout ako predvolenú hodnotu manažér rozloženia. To je v poriadku pre túto aplikáciu, pretože chceme, aby štítok sedel vedľa komboboxu. Pokiaľ pridáme
    JLabel
    Najprv to bude vyzerať dobre:

Vytvorte druhý objekt JPanel

Druhy

má rovnaký vzor. Pridáme a

a a

a nastavte hodnoty týchto zložiek na „Zelenina“ a druhú

rad

. Jediným ďalším rozdielom je použitie internetu

metóda skryť

. Nezabudnite, že bude

kontrolu viditeľnosti oboch

. Aby to fungovalo, musíme byť na začiatku neviditeľní. Pridajte tieto riadky a nastavte druhý

:

Jeden riadok, ktorý stojí za zmienku v uvedenom kóde, je použitie

metóda

.

Hodnota spôsobí, že zoznam zobrazí položky, ktoré obsahuje, v dvoch stĺpcoch. Toto sa nazýva „novinový štýl“ a je to pekný spôsob, ako zobraziť skôr zoznam položiek než tradičnejší vertikálny stĺpec.

Pridávanie dokončovacích dotykov

Posledným potrebným komponentom je

na kontrolu viditeľnosti internetu

s. Hodnota odovzdaná v

konštruktor nastaví označenie tlačidla:

Toto je jediný komponent, ktorý bude mať definovaný poslucháč udalostí. „Udalosť“ nastane, keď používateľ interaguje s grafickou súčasťou. Napríklad, ak používateľ klikne na tlačidlo alebo zapíše text do textového poľa, nastane udalosť.

Poslucháč udalostí povie aplikácii, čo má robiť, keď sa udalosť stane.

používa triedu ActionListener na "počúvanie" pre kliknutie na tlačidlo používateľom.

Vytvorte poslucháča udalostí

Pretože táto aplikácia vykonáva jednoduchú úlohu po kliknutí na tlačidlo, môžeme na definovanie poslucháča udalostí použiť anonymnú vnútornú triedu:

Môže to vyzerať ako strašidelný kód, ale musíte ho len rozobrať, aby ste videli, čo sa deje:

  • Po prvé, hovoríme
    addActionListener
    metóda
    JButton
    . Táto metóda očakáva výskyt
    ActionListener
    class, čo je trieda, ktorá počúva danú udalosť.
  • Ďalej vytvoríme inštanciu
    ActionListener
    triedy vyhlásením nového objektu pomocou
    nový ActionListener ()
    a potom poskytnutím anonymnej vnútornej triedy - čo je celý kód v zložených zátvorkách.
  • Do anonymnej vnútornej triedy pridajte tzv
    actionPerformed ()
    . Toto je metóda, ktorá sa volá po kliknutí na tlačidlo. Všetko, čo je pri tejto metóde potrebné, je použitie
    setVisible ()
    zmeniť viditeľnosť internetu
    JPanel
    s.

Pridajte JPanels do JFrame

Nakoniec ich musíme pridať

s a

do

. V predvolenom nastavení a

používa správcu rozloženia BorderLayout. To znamená, že existuje päť oblastí (v troch radoch)

ktorý môže obsahovať grafický komponent (SEVER, {ZÁPAD, CENTRUM, VÝCHOD}, JUH). Túto oblasť špecifikujte pomocou

metóda:

Nastavte JFrame na viditeľný

A konečne, všetky vyššie uvedené kódy nebudú k ničomu, ak nenastavíme

byť viditeľný:

Teraz sme pripravení spustiť projekt NetBeans a zobraziť okno aplikácie. Kliknutím na tlačidlo prepnete medzi zobrazením kombinovaného výberu alebo zoznamu.