GRAFIČKI KORISNIČKI INTERFEJS(GUI)
Grafički korisnički interfejs predstavlja skup klasa za grafički prikaz neke aplikacije. Sastoji se od formi,dijaloga, komponenti koje se mogu naći na formi.
Potrebne klase se nalaze u paketima(java.awt i javax. swing).
Potrebne klase se nalaze u paketima(java.awt i javax. swing).
- AWT(Abstract Window Toolkit) biblioteka koja obezbeđuje upotrebu minimalnog skupa komponenti grafičkog interfejsa, a kojeg poseduju sve platforme koje podržavaju Javu. Izgleda “podjednako osrednje” na svim platformama. Paketi:
- java.awt
- java.awt.event
- java.awt.image
- java.awt.datatransfer
- Swing je biblioteka napisana “od nule”, u Javi.Ne oslanja se na operativni sistem. Jednako izgleda i radi na svim platformama. Ima veliki broj komponenti. Podržava Drag&Drop,kao i rad sa clipboard-om.Kompletna podrška za Unicode kodnu stranu.
- Javafx je biblioteka klasa koja se koristi za kreiranje bogatih internet aplikacija(Rich Internet Aplication). RIA je web aplikacija koja je više okrenuta korisniku, multiplatformska je, nalik je desktop aplikacijama
Grafički interfejsi: Swing korisnički paket
VIDEO LEKCIJE
VIDEO 1: Izrada grafičke aplikacije-1.deo |
VIDEO 2: Kreiranje forme za logovanje-1.deo |
|
|
|
Video 3: Postavljanje slike na labelu |
Video 4: Zamena slike na labeli |
|
U ovom video je opisano kako da u Java programskom jeziku postavite sliku na labelu. Klasa slike je ImageIcon, dok se za labelu koristi JLabel klasa.
|
Video pokazuje kako da postojeću sliku na labeli, kao komponenti JAVA grafike, zamenite novom, koja se nalazi na lokalnom kompjuteru. Korišćene klase su ImageIcon, JLabel i JFileChooser iz paketa swing.
|
|
|
|
VIDEO 5: Kreiranje forme za logovanje-2.deo
U ovom delu je pokazano kako se dizajnira forma za registrovanje novog korisnika. Pokazana je takođe i funkcionalnost. Klikom na dugme za registraciju, pamte se podaci o korisniku, a zatim posle logovanja prikazuje se stranica aplikacije na koju korisnik želi da pristupi.
Forme se mogu praviti dinamički pisanjem sopstvenog koda ili statički pomoću alata za programiranje npr. Netbeans-a prevlačenjem komponenti na formu.
Dinamičko pravljenje formi
Sastoji se od pravljenja objekata koji predstavljaju komponente na formi. Pri tome koristimo objekte:
- Font Objekat
- Color Objekat.
- JFrame Objekat
- Frame Layout and Centering
- JButton Kontrola
- JLabel Kontrola
- JTextField Kontrola
- JTextArea Kontrola
- JCheckBox Kontrola
- JRadioButton Kontrola.
- JPanel Kontrola
- JList Kontrola
- JScrollPane Konotrola
- JComboBox Kontrola
JFrame klasa
Svaka grafička aplikacija mora imati bar jedan dijalog-prozor. Da bi napravili takav jedan prozor treba da se napravi objekat klase JFrame(klasa se nalazi u swing paketu u biblioteci klasa). Pri tome se ovaj paket mora importovati u aplikaciju naredbom:
import javax.swing.JOptionPane;
javax je paket u kome se nalazi potpaket swing, dok je JFrame klasa koja se uvozi u program. Inače sve komponente koje kasnije treba staviti na dijalog nalaze se uglavnom u swing paketu. Objekat koji predstavlja dijalog nazvaćemo win i definiše se na sledeći način:
win = new JFrame();
Dalje, potrebno je definisati attribute objekta win. Vrednosti atributa se postavljaju pomoću “setera”, metoda koje zapošinju sa set…Na primer, da bi podesili naslov(title) koristimo seter setTitle:
win.setTitle(“Naslov grafike”);
Da bi se JFrame dijalog prikazao potrebno je podesiti barem još sledeće :
- Veličinu(metoda setSize)
- Ponašanje aplikacije posle klika close dugmeta(x-dugme u gornjem levom uglu prozora), metoda je setDefaultCloseOperation
- vidljivost, korišćenjem metode setVisible(true)
Slika 8: Swing korisnički paket. Kreiranje objekta klase JFrame
posle pokretanja dobićemo prazan JFrame prozor sa naslovnom linijom. Na slici je prikazan i koordinatni system:
Slika 9: Swing korisnički paket. Objekta klase JFrame(Prozor)
PRIMER: Grafika sa tekstom i slikom:
Tekst zadatka: Napraviti JFrame prozor i na njega postaviti dve labele jednu sa tekstom i jednu sa slikom.
Rešenje:
Naša grafika bi trebalo da bude kao na sledećoj slici:
Rešenje:
Naša grafika bi trebalo da bude kao na sledećoj slici:
Slika 10: Swing korisnički paket. JFrame objekt sa tekstom i slikom
|
| ||
Vidimo da na JFrame prozoru treba postaviti 3 komponente tj. napraviti tri objekta: panel plave boje koji na sebi nosi dve labele, jednu sa tekstom, drugu sa slikom.
Da bi se prikazala slika potrebno je pronaći odgovarajuću sliku i iskopirati je negde unutar foldera koji predstavlja aplikaciju. Najbolje je sve slike staviti u podfolder koji se npr. zove “slike”. Ako se fajl koji predstavlja našu sliku zove SuncevSistem i ima extenziju .jpg, relativna URL putanja fajla u odnosu na folder aplikacije je:
Da bi se prikazala slika potrebno je pronaći odgovarajuću sliku i iskopirati je negde unutar foldera koji predstavlja aplikaciju. Najbolje je sve slike staviti u podfolder koji se npr. zove “slike”. Ako se fajl koji predstavlja našu sliku zove SuncevSistem i ima extenziju .jpg, relativna URL putanja fajla u odnosu na folder aplikacije je:
String putanja=”slike/SuncevSistem.jpg”;
Da bi kreirali panel plave boje potreban je sledeći kod:
Slika 11: Swing korisnički paket. JPanel objekt.
Metoda setLayout je zadužena za izgled panela i njoj treba proslediti objekat klase koja je nasleđena od klase LayoutManager.To je objekat zadužen za raspored komponenti po panelu. Ako je taj objekat null, onda će se raspoređivati tako što se pomoću koordinata definiše pravougaonik unutar kojeg će biti smeštena komponenta.(metoda setBounds).
Metoda setContentPane povezuje panel sa win objektom.
Dalje, kreiramo labelu za tekst(objekat klase JLabel), postavljamo na nju tekst, definišemo granice tj. pravougaonik unutar koga će biti smeštena i na kraju dodajemo je na panel. Pravougaonik se defineše pomoću 4 broja gde se prva dva odnose na položaj pravougaonika definisan sa x i y koordinatom tačke gornjeg levog ugla pravougaonika, dok preostala dva broja predstavljaju veličinu, tj. širinu i visinu pravougaonika.
Metoda setContentPane povezuje panel sa win objektom.
Dalje, kreiramo labelu za tekst(objekat klase JLabel), postavljamo na nju tekst, definišemo granice tj. pravougaonik unutar koga će biti smeštena i na kraju dodajemo je na panel. Pravougaonik se defineše pomoću 4 broja gde se prva dva odnose na položaj pravougaonika definisan sa x i y koordinatom tačke gornjeg levog ugla pravougaonika, dok preostala dva broja predstavljaju veličinu, tj. širinu i visinu pravougaonika.
Slika 12: Swing korisnički paket. JLabel objekt sa tekstom.
Da bi tekst bio uočljiviji kreirali smo objekat klase Font f, vrste „Vedrana“, bold stil, veličine 20px i postavili ga za tekući font labele sa tekstom.
Kreiranje labele sa slikom je slično, samo što se umesto metode za postavljanje teksta „setText“ sada koristi metoda „setIcon“ za postavljanje slike. Slika je ovde u stvari objekat klase ImageIcon. Konstruktoru ove klase se prosleđuje putanja do fajla koji predstavlja sliku. Naravno, fajl sa slikom je potrebno kopirati u folder aplikacije kako je ranije objašnjeno.
Kreiranje labele sa slikom je slično, samo što se umesto metode za postavljanje teksta „setText“ sada koristi metoda „setIcon“ za postavljanje slike. Slika je ovde u stvari objekat klase ImageIcon. Konstruktoru ove klase se prosleđuje putanja do fajla koji predstavlja sliku. Naravno, fajl sa slikom je potrebno kopirati u folder aplikacije kako je ranije objašnjeno.
Slika 13: Swing korisnički paket. JLabel objekt sa slikom.
PRIMER: Sila trenja:
Tekst zadatka: Telo mase m klizi po ravnoj podlozi. Potrebno je izračunati silu trenja koja se javlja između tela mase m i podloge.
- Napraviti GUI za unos koeficijenta trenja i mase tela m.
- Izračunati silu trenja za podrazumevane vrednosti mase od 1kg, kao i koef. trenja od 0.03 i rezultat prikazati u izveštaju.
Slika 14: Swing korisnički paket. Sila trenja GUI
Treba kreirati: objekat klase JFrame(glavni prozor aplikacije), panel klase JPanel, koji na sebi nosi ostale komponente. To su dve labele sa tekstom(JLabel), dva polja za unos teksta(JTextField), dugme za unos podataka klase JButton i oblast za tekst gde će biti napisan izveštaj(JTextArea).
U početku kreira se JFrame objekat, odnosno objekat klase koja nasleđuje JFrame.
U početku kreira se JFrame objekat, odnosno objekat klase koja nasleđuje JFrame.
Slika 15: Swing korisnički paket. Sila trenja GUI-kreiranje objekta
U konstruktoru se kontroliše tok izvršenja programa:
Slika 16: Swing korisnički paket. Sila trenja GUI-konstruktor
Prvo se pomoću službene reči super poziva konstruktor nadređene klase i njemu se prosleđuje naslov title. Kreiranje grafike je prebačeno u posebnu metodu kreirajGUI(). Zatim se pravi objekat trenje klase SilaTrenja u kojem se čuvaju podaci vezani za silu trenja. Atributi ovog objekta, kao i metoda za izračunavanje sile trenja i metoda toString, koja vraća tekst za izveštaj rezultata, se takođe nalaze u istoj klasi:
Slika 17: Sila trenja - klasa
Pogledajmo sada kako izgleda metoda za kreiranje GUI-a:
U Prvom delu kod je sličan prethodnom primeru gde se prvo pravi objekat JFrame. Da bi se pristupilo objektu klase u kojoj se ta metoda nalazi koristi se službena reč this. Zatim se kreira panel i povezuje sa glavnim prozorom aplikacije metodom setContentPane.
U Prvom delu kod je sličan prethodnom primeru gde se prvo pravi objekat JFrame. Da bi se pristupilo objektu klase u kojoj se ta metoda nalazi koristi se službena reč this. Zatim se kreira panel i povezuje sa glavnim prozorom aplikacije metodom setContentPane.
Slika 18: KreirajGUI metoda
Zatim se kreiraju dve labele sa tekstom, dva polja za tekst(JTextField), jedno dugme(JButton) i jedna oblast za tekst (JTextArea).
Slika 19: Kreiranje GUI komponenti na panelu. Računanje sile trenja.
Vidimo da se je za svaki od tih objekata potrebno kreirati instancu objekta, podesiti granice i dodati objekat na panel koji ih sadrži.
Netbeans forme.
Razvojna okruženja(IDE) imaju podršku za rad sa Formama(prozori klase JFrame ili klase koja nasleđuje JFrame). U sledećem tekstu je prokazano kreiranje formi pomoću Netbeans (IDE ) razvojnog okruženja.
Da bi kreirali objekat koji predstavlja formu unosi se klikom na odgovarajući paket, i klikom na new – JFrame Forme, kao što je prikazano na slici ispod.
Da bi kreirali objekat koji predstavlja formu unosi se klikom na odgovarajući paket, i klikom na new – JFrame Forme, kao što je prikazano na slici ispod.
Slika 20: Grafički Korisnički Interfejs. Kreiranje netbeans formi.
pojaviće se dijalog gde treba zadati ime i lokaciju:
Slika 21: Grafički Korisnički Interfejs. Kreiranje netbeans formi. Ime i lokacija
Klikom na Finish otvara se prozor dizajnera na koji se prevlače kontrole sa toolboxa:
Slika 22: Grafički Korisnički Interfejs. Kreiranje netbeans formi. Dizajner
U donjem desnom uglu se nalazi Properties dijalog u kome su prikazane osobine selektovane kontrole.
Primer 3:Unos podataka o korisniku
Tekst: Napraviti formu za unos podataka o korisniku nekog cd kluba.
Rešenje: Posle prevlačenja komponenti na formu ona treba da izgleda:
Rešenje: Posle prevlačenja komponenti na formu ona treba da izgleda:
Slika 23: Grafički Korisnički Interfejs. Kreiranje netbeans formi. Primer- CD klub
Na formi se nalaze sledeći objekti:
- Objekti klase JLabel na kojima se nalazi statičan tekst: ime, prezime itd
Slika 24: Grafički Korisnički Interfejs. Kreiranje netbeans formi. Primer- CD klub-prikaz labela
- Objekti klase JTextField u koje korisnik unosi svoje podatke:
Slika 25: Grafički Korisnički Interfejs. Kreiranje netbeans formi. Primer- CD klub-prikaz polja za unos
Objekti klase JButton:
Slika 26: Grafički Korisnički Interfejs. Kreiranje netbeans formi. Primer- CD klub-prikaz dugmadi za akcije
Objekat JTable za prikaz podataka iz baze
Slika 27: Grafički Korisnički Interfejs. Kreiranje netbeans formi. Primer- CD klub-prikaz prazne tabele
Posle pokretanja aplikacije ova forma će izgledati na sledeći način:
Slika 28: Grafički Korisnički Interfejs. Kreiranje netbeans formi. Primer- CD klub-prikaz tabele korisnika
Za bilo koju komponentu možemo podesiti atribute u Properties prozoru tako što prethodno selektujemo odgovarajuću komponentu.
Slika 29: Grafički Korisnički Interfejs. Kreiranje netbeans formi. Primer- CD klub-prikaz osobina
Raspoređivanje komponenti-LayoutManager
|
Vizuelni deo aplikacije (GUI) obično započinjemo ili JFrame objektom ili nekim objektom klase koja nasleđuje JFrame. Ostale komponente dalje, paneli, dugmad, padajuće liste, polja za tekst itd dodajemo na Panel objekat(Container) koji je ugnježden u objekat JFame. Sve te komponente koje stavljamo na taj panel ili kreiramo više panela koje treba dodati na kontejner panel, a ostale komponente rasporediti po tim panelima. U svakom slučaju mora da se kreira i objekat koji je zadužen za raspoređivanje komponenti po nekoj "roditelj" komponenti. Takav objekat pripada nekoj klasi koja nasleđuje klasu LayoutManager. Te klase opisuju različite načine raspoređivanja. Npr. BorderLayout raspoređivanje je po principu strana sveta i tako obično započinjemo svaku aplikaciju. Pogledajte u sledećem videu kako se pomoću netbeans-ovog dizajnera 5 različitih panela raspoređuje po glavnom panelu.
Podrazumevani raspored je FlowLayout, prirodan način raspoređivanja. Kod ovog načina raspoređivanja komponente se dodaju u jednom redu, jedna do druge sve dok staju u taj red, pa se zatim prebacuju u sledeći. Pri tome se vodi se računa o njihovoj veličini, i one se pri dodavanju u određeni red centriraju. GridLayout raspored je koristan kada je raspored u vidu šahovske table ili mreže. BoxLayout je koristan za raspored u jednom redu ili koloni. |
Video: Raspored komponenti
|
|
Sledeće
Događaji u javi>| |