GRAFIČKI KORISNIČKI INTERFEJS(GUI)

Grafički korisnički interfejs (GUI) predstavlja set klasa i komponenti koje omogućavaju kreiranje vizuelnog sloja aplikacije, omogućavajući korisnicima interakciju putem grafičkih elemenata, kao što su dugmad, tekstualna polja i meniji, umesto putem teksta ili komandne linije. GUI aplikacija obično sadrži prozore, forme i dijaloge, kroz koje se postavljaju i kontrolišu komponente koje korisnik može koristiti. Klase koje čine GUI omogućavaju dizajn i funkcionalnost komponenti, pružajući intuitivno i vizuelno iskustvo za interakciju sa aplikacijom.

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 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

kao i swing kontrole:

• 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:javaxje 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: 
 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:
​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)

Dosadašnji kod izgleda:
​posle pokretanja dobićemo prazan JFrame prozor sa naslovnom linijom. Na slici je prikazan i koordinatni system:

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:
​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 kreirali panel plave boje potreban je sledeći kod:
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. ​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. 

---

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.

Rešenje: Kao i u prethodnom primeru, za sve ono što se vidi na slici ispod treba kreirati objekat, podesiti njihove attribute seterima i na kraju povezati napravljene objekte. 
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 konstruktoru se kontroliše tok izvršenja programa:
​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: ​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.
Zatim se kreiraju dve labele sa tekstom, dva polja za tekst(JTextField), jedno dugme(JButton) i jedna oblast za tekst (JTextArea).
​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.

​pojaviće se dijalog gde treba zadati ime i lokaciju:
​Klikom na Finish otvara se prozor dizajnera na koji se prevlače kontrole sa toolboxa:
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:

Na formi se nalaze sledeći objekti:

• Objekti klase JLabel na kojima se nalazi statičan tekst: ime, prezime itd

• Objekti klase JTextField u koje korisnik unosi svoje podatke:

Objekti klase JButton: Objekat JTable za prikaz podataka iz baze
​Posle pokretanja aplikacije ova forma će izgledati na sledeći način:
Za bilo koju komponentu možemo podesiti atribute u Properties prozoru tako što prethodno selektujemo odgovarajuću komponentu.

---

Raspoređivanje komponenti-LayoutManager

JavaFX

Za odeljak o naprednim temama, JavaFX je vredno istaknuti kao modernu alternativu Swingu za kreiranje Java GUI-ja sa savremenijim, vizuelno privlačnijim izgledom. Za razliku od Swinga, JavaFX koristi hardverski ubrzanu grafiku, podržava CSS za stilizovanje i nudi bogatije komponente korisničkog interfejsa, što ga čini idealnim za razvoj elegantnih aplikacija na više platformi. Dobro se integriše sa multimedijom, 3D grafikom i responzivnim izgledima, što omogućava dinamičnije i prilagodljivije korisničko iskustvo. JavaFX takođe pojednostavljuje skaliranje i prilagođavanje GUI-ja različitim veličinama i rezolucijama ekrana.

JavaFX primer

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class SimpleJavaFXApp extends Application {

@Override
public void start(Stage primaryStage) {
        Button btn = new Button("Click me!");
btn.setOnAction(e -> System.out.println("Button clicked!"));

        StackPane root = new StackPane(); // Layout koji centrira sadržaj
root.getChildren().add(btn); // Dodavanje dugmeta na layout

        Scene scene = new Scene(root, 300, 200); // Scena sa veličinom 300x200
primaryStage.setTitle("JavaFX Example"); // Postavljanje naslova
primaryStage.setScene(scene); // Povezivanje scene i prozora
primaryStage.show(); // Prikazivanje aplikacije
    }

    public static void main(String[] args) {
        launch(args); // Pokretanje aplikacije
    }
}Objašnjenja:

1. Stage - Glavni prozor aplikacije.
2. Scene - Podloga za organizovanje elemenata (kao što je dugme).
3. StackPane - Layout koji centrira sve dodate elemente.
4. Button - Kreira dugme sa tekstom i akcijom na klik.

Ovaj primer kreira prozor sa dugmetom koje ispisuje poruku u konzoli kada se klikne.

---

---

Srodni članci

Klase i objekti
Nizovi u Javi
Euklidov algoritam
Matrice primeri
Stringovi u C/C++