Java - Rad sa Swingom


U ovoj lekciji upoznaćemo se sa kreiranjem Swing prozora u NetBeans razvojnom okruženju. Java aplikacija sa Swing grafičkim okruženjem je ista kao i bilo koja druga aplikacija, pa se zbog toga i projekat kreira standardno.




Kao novi projekat, dovoljno je odabrati Java Application, što je bio slučaj i u dosadašnjim primjerima. Nakon što je novi projekat kreiran, vrijeme je da kreirati i Swing prozor grafičkog korisničkog okruženja. Dovoljno je da u paket dodamo JFrame Form.




Nakon kreiranja JFrame Form prikazaće se sljedeći prozor:




Da bismo upravo dodani prozor, odnosno JFrame, prikazali na ekranu, potrebno je da to učinimo u main() metodi glavne klase, gde ćemo dodati sljedeći kod:

import javax.swing.JFrame;

public class Main {
    public static void main(String[] args) {
        MyFrame frame = new MyFrame();
        frame.setVisible(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
    }
}

Kada pokrenemo projekat, na ekranu dobićemo sljedeći prikaz:




Kreiranje UI-ja korištenjem NetBeans designera

Da bi grafička aplikacija imala neku funkciju, potrebno je da sadrži neki korisnički ulaz, odnosno interakciju sa korisnikom. Taj korisnik može biti čovek ili neki sistem u kome aplikacija egzistira. Da bismo ostvarili interaktivnost Swing aplikacije sa korisnikom, koristimo Swing kontrole.




U NetBeans-u, Swing kontrole se nalaze zajedno sa drugim komponentama u Palette panelu, u desnom dijelu aplikacije. Ukoliko Palette panel nije vidljiv, moguće ga je aktivirati opcijom Window -> IDE Tools -> Palette ili skraćenicom Ctrl+Shift+8.




Komponente u Palette panelu su podjeljene na više logičkih cjelina. Pogledajmo koje su to:

  • Swing Containers – različite komponente u koje se mogu smjestiti druge kontrole.
  • Swing Controls – upravljačke kontrole: tasteri, slajderi, progres barovi i slično.
  • Swing Menus – meniji, opcije menija i dr.
  • Swing Windows – namjenski prozori i dijalog boksovi (prozor za odabir boja, prozor za odabir fajla sa fajl sistema...).
  • Swing Fillers – kontrole za definisanje nevidljivog prostora među kontrolama.
  • AWT – standardne AWT kontrole: meniji, tekst boksovi, tasteri...
  • Beans – Java Bean komponente.
  • Java Persistence – kontrole za rukovanje bazom podataka.

Pored izloženih kontrola, moguće je dodati i kontrole koje nisu podrazumjevano izložene aktivacijom Palette Managera (desnim klikom miša na Palette panel, a zatim na opciju Palette Manager).




Unutar Palette Managera moguće je skidati opcije sa paleta ili ih dodavati.




Odmah ispod Palette panela nalazi se Properties panel. Ovaj panel sadrži sva svojstva selektovane komponente. Ova lista je karakteristična i različita za svaki tip komponente, ali se svojstva koja imaju istu namjenu najčešće isto i nazivaju. Na primer, stvojstvo text predstavlja prikazani tekst komponente, dok svojstvo name predstavlja njeno logičko ime.




Navigator panel prikazuje sve komponente koje okvir (Frame/forma) sadrži. Ovaj prikaz omogućava efikasnu navigaciju kroz komponente (daleko efikasnije od traženja komponente na formi).




Iznad glavnog prozora nalaze se opcije za prebacivanje sa izvornog koda na dizajn aplikacije, a odmah pored njih i tri modifikatora kontrola. Selection Mode predstavlja standaradni modifikator, koji podrazumeva običnu selekciju kontrola. Connection Mode omogućava spajanje kontrola putem određenog događaja (više o tome kasnije), a Preview Design predstavlja prikaz finalnog izgleda aplikacije bez startovanja funkcionalnosti.




Dizajn forme

U ovoj lekciji kreiraćemo korisnički interfejs koji će da sadržati dve labele, dve tekst kontrole i dva tastera. Cilj aplikacije će biti ispis poruke Hello Firstname LastName! unutar Message prozora, pri čemu će FirstName biti ime koje je korisnik uneo, a LastName prezime. Prikaz će se dogoditi ukoliko korisnik aktivira taster OK, a ukoliko odabere taster Clear, biće uklonjen unos iz tekstualnih kontrola.

Prve dve kontrole, koje ćemo smjestiti na formu, jesu dve JLabel kontrole. Ove kontrole se najčešće koriste samo da bi prikazale neki tekst, iako im je moguće dodjeliti i funkcionalnost (slušače događaja). Kontrole se smještaju na formu (kontejner) prevlačenjem (Drag and Drop ili dvoklikom). Nakon prevlačenja kontrole, unutar Properties panela, otvoriće se svojstva kontrole i biće aktivna sve dok je kontrola selektovana. Unutar svojstava tekst kontrola, kao tekst unesite svojstva „First name:” i „Last name:”, a kao nazive lblFirstName i lblLastName.




Nakon kreiranja JLabel kontrola kreirajte i JTextField kontrole po istom principu. JTextField su najjednostavnije kontrole za korisnički unos sa tastature. Nakon kreiranja (prevlačenja na stranu) dodjelite nazive (Variable Name) kontrolama: tbFirstName i tbLastName. Za dodeljivanje naziva potrebno je odabrati Code podmeni u okviru Properties prozora.




Pored načina prikazanog na slici, naziv varijable kontrole moguće je izmjeniti i odabirom opcije Change Variable Name iz kontekstnog menija kontrole.




Dodeljivanje smislenih imena kontrolama deluje irelevantno kada su u pitanju male količine kontrola. Jednostavno, okruženje bi i samo davalo unikatna imena, pomoću kojih bi se lako pristupalo kontrolama (jTextField1, jTextField2, jTextField3...). Problem nastaje kada unutar neke forme postoji mnogo kontrola. Tada snalaženje može biti znatno otežano ukoliko kontrole nemaju intuitivne nazive. Takođe, možete da primjetite da tekstualne kontrole već sadrže određene tekstualne vrednosti. Da bismo ove vrednosti uklonili, potrebno je da odaberemo tekstualnu kontrolu čiji tekst želimo da promenimo, a zatim da iz Properties panela modifikujemo text svojstvo.



Poslje JTextField kontrola unesite i dva tastera. Swing kontrola koja reprezentuje taster je JButton kontrola. Jednoj kontroli dodjelite text svojstvo Ok i name svojstvo btnOk, a drugoj text svojstvo Clear i name svojstvo btnClear. Pored ovih dodavanja kontrola, smanjili smo veličinu prozora, pa kompletan dizajn izgleda ovako:




Nakon što je dizajniranje forme završeno, ovaj dizajn je moguće pogledati bez pokretanja aplikacije, i to pritiskom na taster Preview.



Dodavanje programske logike

Do sada smo se bavili samo iscrtavanjem aplikacije, odnosno dizajnerskim dijelom ili kreiranjem UI-ja. Sada, kada je dizajn kompletiran, možemo pristupiti programskoj logici. Iznad glavnog prozora nalaze se opcije Design i Source. Opcija Design (Design View) je ona koju smo koristili do sada za dizajniranje komponenti. Rad u Design Modelu ne podrazumjeva nikakvu magiju. Jednostavno, sve što uradimo unutar dizajnera eksponira se na Java kod u pozadini. I kompletno grafičko okruženje koje smo iscrtali mogli smo kreirati i putem koda. Naravno, to bi bilo daleko teže. Da bismo pregledali sadržaj samog koda, aktiviramo opciju Sorce (Source View).




Jedan dio unutar koda je vidljiv, dok je drugi dio zaklonjen (Folded). U zaklonjenom dijelu nalazi se logika koja postavlja kontrole na formu, podešava im svojstva i slično. Ovaj kod, pored toga što je zaklonjen, takođe je i zaključan od strane okruženja. Tako da, osim što se mjenjanje ovog koda ne preporučuje, čak i da želimo da ga promjenimo, to ne možemo učiniti (svi dijelovi koda koji imaju sivu podlogu su zaključani i ne mogu se menjati, osim putem dizajnera).




Prilikom specificiranja funkcionalnosti ove jednostavne aplikacije rekli smo da želimo da se na osnovu unesenih vrijednosti u tekst polja nakon aktivacije tastera Ok prikaže prozor sa porukom Dobrodošao na kurs Java programiranje , nakon koje će da sljedi unijeto ime i prezime. Da bismo ovo ostvarili, moramo kreirati logiku za prepoznavanje aktivacije tastera. Prepoznavanje aktivacije tastera može se ostvariti na dva načina: jedan način je – kliknuti desnim klikom miša na željenu kontrolu (taster Ok), a zatim odabrati opciju Events > Action > actionPerformed.




Drugi način je da izvršimo dvoklik lijevim tasterom miša na kontrolu. Bez obzira na to koji se način upotrjebi, rezultat će biti isti, tj. okruženje će automatski kreirati metod događaja pod nazivom koji podrazumeva naziv kontrole spojen sa nazivom događaja. Pogledajmo primjer:

...
private void btnOkActionPerformed(java.awt.event.ActionEvent evt)
{
// TODO add your handling code here:
}
...

Svaka kontrola ima specifičan način (get i set metode) za rukovanje svojstvima u odnosu na to koja svojstva sadrži. Gotovo sve kontrole koje mogu da sadrže tekst sadrže i metode getText() i setText(). Da bismo preuzeli tekstualni sadržaj iz tekst boksova, koristićemo metodu getText():

...
String firstName = tbFirstName.getText();
String lastName = tbLastName.getText();
...

Dobavljene podatke možemo emitovati u željenoj formi na izlaz. Da bismo emitovali Message boks, koristimo metodu showMessageDialog() klase JOptionPane. Kao parametre, ovoj metodi pridružujemo objekat koji će zapravo emitovati boks (u našem slučaju to je JFrame, glavna forma) i poruku koja će biti ispisana unutar boksa:

...
JOptionPane.showMessageDialog(this, "Dobrodošao na kurs Java programiranje " + firstName + " " + lastName);
...



Funkcionalnost drugog tastera, odnosno tastera Clear, realizovaćemo na isti način kao i za prethodni taster, uz dodavanje odgovarajuće logike. Možemo dva puta kliknuti na taster Clear kako bismo se u pozadini pretplatili na Click događaj i dobili izgenerisanu metodu događaja. Izgenerisana metoda će izgledati ovako:

private void btnClearActionPerformed(java.awt.event.ActionEvent evt) {
    // TODO add your handling code here:
}

U okviru ove metode potrebno je dodati logiku za brisanje sadržaja tekstualnih kontrola:

tbFirstName.setText("");
tbLastName.setText("");

Nakon kreiranja posljednjeg metoda, aplikacija će ispuniti zahteve specifikacije i (ako je sintaksno sve napisano pravilno) moći će da bude startovana.