Kodiranje jednostavnog Java grafičkog korisničkog sučelja

Grafičko korisničko sučelje (GUI) izgrađeno pomoću Java NetBeans platforma sastoji se od nekoliko slojeva spremnika. Prvi sloj je prozor koji se koristi za pomicanje aplikacije po zaslonu vašeg računala. To je poznato kao spremnik najviše razine, a njegov je posao dati svim ostalim spremnicima i grafičkim komponentama mjesto u kojem rade. Tipično za stolnu aplikaciju ovaj će spremnik najviše razine biti izrađen pomoću

klase.

Možete dodati bilo koji broj slojeva u svoj GUI dizajn, ovisno o njegovoj složenosti. Grafičke komponente (npr. Tekstne okvire, naljepnice, gumbe) možete smjestiti izravno u

ili ih možete grupirati u druge spremnike.

Slojevi GUI-a poznati su kao hijerarhija zadržavanja i mogu se smatrati obiteljskim stablom. Ako

je li djed sjedio na vrhu, onda se sljedeći spremnik može smatrati ocem i komponentama koje on drži kao djeca.

Za ovaj primjer, izgradit ćemo GUI sa

koji sadrže dvije

i a

. Prvi

će održati

i

. Drugi

će održati

i a

. Samo jedan

(a samim tim i grafičke komponente koje sadrži) bit će vidljive u isto vrijeme. Gumb će se koristiti za prebacivanje vidljivosti dvaju

.

Postoje dva načina za izgradnju ovog GUI-a pomoću NetBeansa. Prvo je ručno upisati Java kod koji predstavlja GUI, o čemu se govori u ovom članku. Drugo je korištenje alata NetBeans GUI Builder za izgradnju Swing GUI-ja.

Pogledajte informacije o korištenju JavaFX-a, a ne Swinga za stvaranje GUI-a Što je JavaFX?

Bilješka: Cjeloviti kod ovog projekta nalazi se na Primjer Java Code za izgradnju jednostavne GUI aplikacije.

Stvorite novo Java Aplikacijski projekt u NetBeans-u s glavnom klasom Nazvat ćemo ga projekt

Check point: U prozoru Projekti NetBeansa trebala bi biti GuiApp1 mapa najviše razine (ako naziv nije podebljan, desnom tipkom miša kliknite mapu i odaberite

). Ispod

mapa bi trebala biti mapa Izvorni paketi sa

naziva GuiApp1. Ta mapa sadrži glavnu klasu koja se zove

.Java.

Prije nego što dodamo bilo koji Java kod, dodajte sljedeći uvoz na vrh

klase, između

crta i

:

Ovaj uvoz znači da će nam biti dostupne sve klase potrebne za izradu ove GUI aplikacije.

Unutar glavne metode dodajte ovu liniju koda:

To znači da je prvo što treba učiniti je stvoriti novo

objekt. To je lijepa prečica za primjerice programe, jer nam treba samo jedan razred. Da bi ovo uspjelo, potreban nam je konstruktor za

klase, pa dodajte novu metodu:

U ovu ćemo metodu staviti sav Java kod potreban za stvaranje GUI-ja, što znači da će svaki red od sada biti unutar

metoda.

Napomena o dizajnu: Možda ste vidjeli objavljeni Java kod koji pokazuje klasu (tj.

) produženo od a

. Ova klasa se tada koristi kao glavni GUI prozor za aplikaciju. To stvarno nema potrebe za normalnom GUI aplikacijom. Jedini put koji biste htjeli produžiti

klasa je ako trebate napraviti određeniji tip

(Pogledaj

za više informacija o stvaranju potklasa).

Kao što je spomenuto ranije, prvi sloj GUI je prozor programa napravljen od

. Da biste stvorili

objekta, nazovite

konstruktor:

Dalje ćemo postaviti ponašanje našeg prozora GUI aplikacije pomoću ova četiri koraka:

1. Provjerite da se aplikacija zatvara kada korisnik zatvori prozor tako da se u pozadini ne nastavi pokretati nepoznato:

2. Postavite naslov prozora tako da prozor nema praznu naslovnu traku. Dodajte ovaj redak:

3. Podesite veličinu prozora tako da se prozor prilagodi grafičkim komponentama koje stavite u njega.

Napomena o dizajnu: Alternativna opcija za postavljanje veličine prozora je pozivanje

metoda

klase. Ova metoda izračunava veličinu prozora na temelju grafičkih komponenti koje sadrži. Budući da ovaj primjerak aplikacije ne mora mijenjati veličinu prozora, jednostavno ćemo ga koristiti

metoda.

4. Centrirajte prozor da bi se prikazao na sredini zaslona računala kako se ne bi prikazao u gornjem lijevom kutu zaslona:

Dvije crte ovdje stvaraju vrijednosti za

i

objekata koje ćemo uskoro stvarati koristeći dva

polja. To olakšava popunjavanje primjera unosa za te komponente:

A sada, napravimo prvo

objekt. Sadržat će

i a

. Sva tri su stvorena pomoću svojih konstruktorskih metoda:

Napomene o gornja tri retka:

• JPanel

  deklarirana je varijabla konačni. To znači da varijabla može držati samo

  JPanel

  stvoreno u ovoj liniji. Rezultat toga je da varijablu možemo koristiti u unutarnjoj klasi. Postat će očito zašto želimo kasnije u kodu.

• JLabel

  i

  JComboBox

  imaju vrijednosti koje su im proslijeđene za postavljanje njihovih grafičkih svojstava. Oznaka će se pojaviti kao "Fruits:" i sada će u okviru okvira biti vrijednosti sadržane u

  fruitOptions

  niz najavljen ranije.

• dodati()

  metoda

  JPanel

  stavlja grafičke komponente u njega.

  JPanel

  koristi FlowLayout kao svoj zadani upravitelj izgleda. To je u redu za ovu aplikaciju jer želimo da naljepnica sjedi pored komboboxa. Sve dok dodamo

  JLabel

  prvo će izgledati u redu:

Drugi

slijedi isti obrazac. Mi ćemo dodati a

i a

i postavite vrijednosti tih komponenti na "Povrće:" i na drugo

red

. Jedina druga razlika je upotreba

metoda za skrivanje

. Ne zaboravite da će biti

kontrola vidljivosti njih dvojice

. Da bi ovo uspjelo, treba biti nevidljiv u startu. Dodajte ove retke za postavljanje drugog

:

Jedna crta koju valja spomenuti u gornjem kodu je upotreba

metoda

.

Vrijednost čini da popis u dva stupca prikazuje stavke koje sadrži. To se naziva "novinskim stilom" i lijep je način prikaza popisa stavki, a ne tradicionalni vertikalni stupac.

Posljednja potrebna komponenta je

za kontrolu vidljivosti

a. Vrijednost prenesena u

konstruktor postavlja oznaku gumba:

Ovo je jedina komponenta koja će definirati slušatelja događaja. "Događaj" se događa kada korisnik komunicira s grafičkom komponentom. Na primjer, ako korisnik klikne na gumb ili upiše tekst u tekstni okvir, dogodi se događaj.

Slušatelj događaja kaže aplikaciji što učiniti kada se događaj dogodi.

koristi klasu ActionListener za "slušanje" za klik gumba od strane korisnika.

Budući da ova aplikacija izvršava jednostavan zadatak kada se klikne gumb, pomoću anonimne interne klase možemo definirati slušatelja događaja:

To može izgledati kao zastrašujući kod, ali samo ga morate razbiti kako biste vidjeli što se događa:

• Prvo zovemo

  addActionListener

  metoda

  JButton

  . Ova metoda očekuje instancu

  ActionListener

  razred, što je klasa koja sluša događaj.
• Zatim kreiramo instancu

  ActionListener

  klase deklariranjem novog objekta pomoću

  novi ActionListener ()

  a zatim pružanje anonimne unutarnje klase - što je sav kod unutar kovrčavih zagrada.
• Unutar anonimne unutarnje klase dodajte metodu koja se zove

  actionPerformed ()

  . Ovo je metoda koja se poziva kad se klikne gumb. Sve što je potrebno u ovoj metodi je korištenje

  setVisible ()

  za promjenu vidljivosti

  JPanel

  a.

Na kraju, moramo dodati dva

s i

prema

. Prema zadanim postavkama, a

koristi upravitelj izgleda BorderLayout. To znači da pet područja (preko tri reda)

koja može sadržavati grafičku komponentu (SJEVER, {ZAPAD, CENTAR, ISTOK}, JUŽNA). Navedite ovo područje pomoću

metoda:

Konačno, gore navedeni kôd neće biti ništa ako ne postavimo

biti vidljiv:

Sada smo spremni pokrenuti projekt NetBeans za prikaz prozora aplikacije. Klikom na gumb promijenit ćete se na prikazu kombiniranog okvira ili popisa.