JavaFX - vps.ns.ac.rs .Struktura JavaFX aplikacije JavaFX aplikacija ima stukturu stabla, u ijem

  • View
    233

  • Download
    2

Embed Size (px)

Text of JavaFX - vps.ns.ac.rs .Struktura JavaFX aplikacije JavaFX aplikacija ima stukturu stabla, u ijem

JavaFX

Struktura JavaFX aplikacije

JavaFX aplikacija ima stukturu stabla, u ijem korenu se nalazi pozornica (eng. stage).

U praksi, ako je aplikacija pokrenuta na desktop operativnom sistemu, pozornica e biti prozor; ukoliko je aplikacija pokrenuta u okviru veb stranice, pozornica e biti aplet.

Dakle, pozornica zavisi od konkretnog operativnog sistema, odnosno ureaja na kom se aplikacija izvrava.

Bitno je naglasiti da programer vei deo vremena ne mora voditi rauna o tome gde se njegova aplikacija izvrava, to je prednost koju JavaFX nudi u odnosu na mnoge druge grafike biblioteke.

2

Struktura JavaFX aplikacije

Pozornica sadri tano jednu scenu (eng. scene), koja, dalje, sadri vorove (eng. nodes).

vor je najee vizuelna komponenta, poput dugmeta ili polja za unos teksta, ali moe biti i slika, multimedijalni plejer, itd.

Glavna klasa nasleuje klasu Application i implementira njen metod start koji prihvata jedan parametar tipa Stage - pozornicu aplikacije. Inicijalizacija JavaFX aplikacija se uvek vri u ovom metodu.

U narednom primeru scena sadri jedan vor tipa BorderPane, koji, dalje, sadri vor tipa Label, to je vizuelna komponenta za prikaz statikog teksta.

3

Struktura JavaFX aplikacije

4

Struktura JavaFX aplikacije

5

Struktura JavaFX aplikacije

6

Struktura JavaFX aplikacije

7

Struktura JavaFX aplikacije

Scena se postavlja pozivom metoda setScene nad objektom klase Stage.

Da bi pozornica bila vidljiva na ekranu, potrebno je pozvati njen metod show.

Kao to je prikazano u primeru, scena najee ne sadri vizuelne komponente direktno.

Uobiajeni pristup je da se u scenu najpre postavi okno (eng. pane), a zatim da se komponente postavljaju u njega.

8

Dizajniranje korisnikog interfejsa

Veoma bitan aspekt programiranja grafikih korisnikih interfejsapredstavlja rasporeivanje komponenti (tj. vorova) na ekranu, odnosno odreivanje njihovih veliina i pozicija.

Prilikom dodavanja vora moemo sami zadati tanu poziciju i veliinusvakog. Iako pogodan u nekim sluajevima, ovaj pristup se ne preporuuje u realnim aplikacijma.

Naime, problem je to su ovako postavljeni vorovi statini - nee se pomerati niti e menjati svoju veliinu ako korisnik menja veliinuprozora. Stoga, JavaFX nudi okna, objekte koji vre automatskorasporeivanje vorova po sceni.

Okna se prilagoavaju dimenzijama scene, tako da se veliine iraspored vorova menjaju sa promenom veliine same scene. Na ovajnain se znaajno olakava razvoj interaktivnih grafikih aplikacija.

9

Dizajniranje korisnikog interfejsa

JavaFX vorovi nemaju samo jedno polje za veliinu, ve tri. Tj. prilikom rada sa vorovima mogue je zadati:

minimalnu,

eljenu (eng. preferred), i

maksimalnu veliinu.

Iako tano ponaanje zavisi od konkretnog okna, eljena veliina je veliina koju e vor imati ukoliko na sceni ima dovoljno mesta. Kada korisnik smanjuje prozor, okno e smanjivati vorove, ali ne ispod zadatih minimalnih vrednosti.

Ako su minimalne veliine takve da nema dovoljno mesta za sve vorove, moe doi do njihovog preklapanja.

Slino, kada korisnik poveava prozor, neka okna e poveavati vorove, ali ne iznad maksimalnih vrednosti.

10

Dizajniranje korisnikog interfejsa

Generalno, kada kreiramo vor, sve tri veliine se automatski inicijalizuju na odreene vrednosti.

Na primer, ako kreiramo dugme, njegova eljena i maksimalna veliina e biti jednake, tolike da je unutar dugmeta mogue prikazati ceo tekst.

Minimalna veliina e biti tolika da je u dugmetu mogue prikazati tekst i okno ne sme smanjiti dugme ispod toga.

Sa druge strane, maksimalna veliina polja za unos teksta e automatski biti postavljena na neogranienu vrednost, te e ono zauzimati maksimalan dostupan prostor.

11

Dizajniranje korisnikog interfejsa

Vrednosti za veliine vorova moemo postaviti pozivom metoda

set*Width,

set*Height i

set*Size,

gde * moe biti Min, Pref i Max za, redom, minimalnu, eljenu i maksimalnu vrednost.

Veliine su tipa Double; za neogranienu vrednost koristimo konstantu Double.MAX_VALUE.

12

Dizajniranje korisnikog interfejsa

13

BorderPane

BorderPane deli scenu na 5 regiona, od ega su 4 ivina (u oznakama Top, Bottom, Left i Right), a 1 centralni (u oznaci Center). Svaki region moe sadrati najvie jedan vor.

14

BorderPane

15

BorderPane

16

Veliine ivinih regiona BorderPane-a zavise od veliinavorova.

vor u donjem i gornjem regionu e imati visinu jednakueljenoj vrednosti, dok e mu irina biti maksimalna.

Slino, vor u levom i desnom regionu e imati irinu jednakueljenoj vrednosti, dok e mu visina biti maksimalna.

Ivini regioni koji ne sadre komponente nisu vidljivi.

Centralni region zauzima sav preostali prostor, i njegov vorima maksimalnu dozvoljenu veliinu.

Statiki metodi klase BorderPane

17

Primer - Dodavanja dugmia u BorderPane

18

19

HBox, VBox i FlowPane

HBox i VBox rasporeuju vorove, redom, po horizontalnoj, odnosno vertikalnoj liniji.

Veliine svojih vorova e inicijalno postaviti na eljene vrednosti, a smanjivae ih ukoliko nema dovoljno mesta, potujui pri tome minimalne veliine.

FlowPane moe da rasporeuje vorove i horizontalno i vertikalno, to se zadaje pomou konstante tipa Orientation. Ovo okno e takoe postaviti veliine svojih vorova na eljene vrednosti.

Ukoliko, pak, nema dovoljno mesta, FlowPane e prelamanjem redova i kolona pokuati da prikae sve vorove, ali im veliine nee menjati.

20

FlowPane

21

HBox, VBox i FlowPane

U osnovnim podeavanjima, vorovi su meusobno slepljeni.

Razmak se u sluaju HBox-a i VBox-a postavlja pozivom metoda setSpacing. U sluaju FlowPane-a, mogue je zasebno zadati horizontalni i vertikalni razmak, pozivom metoda setHgap i setVgap, redom.

Dodatno, da bi se vorovi odlepili od ivica okna, potrebno je pozvati metod setPadding, koji prihvata objekat klase Insets.

Upotreba ova tri okna je prikazana u narednom primeru. Aplikacija sadri 15 dugmia, od kojih su prva tri u HBox-u uz gornju ivicu prozora, druga tri u VBox-u uz desnu ivicu, a poslednjih 9 u FlowPane-u u centralnom delu prozora.

Poto su i sama okna vorovi, i njih moemo stavljati u druge okna (u datom primeru, u BorderPane). Ovakvo kombinovanje okna se najee i koristi u praksi kako bi se dizajnirali kompleksniji korisniki interfejsi.

22

Primer - HBox, VBox i FlowPane

23

Primer - HBox, VBox i FlowPane

24

Primer - HBox, VBox i FlowPane

25

GridPane

GridPane predstavlja tabelu. vor se moe postaviti u proizvoljnueliju tabele, i moe se protezati proizvoljan broj kolona i redova.

Pri tome, tabela raste automatski kako dodajemo vorove u nju. Na primer, ako ve prvi vor postavimo u treu kolonu i drugi red, tabelae automatski postati dimenzija 3x2, pri emu e elije u prve dvekolone kao i prvom redu biti prazne.

Slino, ako vor postavimo u prvu kolonu i prvi red, a kaemo da se protee dve kolone, tabela e biti dimenzija 2x1. Jedna elija moesadrati i vie vorova, ali tada moe doi do njihovog preklapanja.

26

GridPane

GridPane postavlja veliine vorova na zadate eljene vrednosti.

Ukoliko su minimalne dimenzije prevelike, vor moe izai van okviraelije, odnosno tabele.

U podrazumevanim podeavanjima, elija tabele ima visinu najviegvora u redu, i irinu najireg vora u koloni. Ova podeavanja se, naravno, mogu menjati.

Kao to je reeno, dimenzije elija tabele zavise od dimenzija vorova.

Mogue je i runo zadati irine kolona i visine redova, popunjavanjem, redom, kolekcija columnConstraints i rowConstraints GridPane-a.

27

Primer upotreba GridPane-a

28

Primer upotreba GridPane-a

29

Primer upotreba GridPane-a

30

Pane

Postoje situacije u kojima ne elimo automatsko rasporeivanje vorova, ve elimo sami da zadamo (fiksnu) poziciju i veliinu svakog vora. Ovo se postie korienjem okna Pane, koji ujedno predstavlja i osnovnu klasu za sva ostala okna.

Prilikom dodavanja vora, Pane e veliinu vora postaviti na eljenu vrednost i vie je nee menjati. Pozicija svakog vora e biti (0, 0), tj. nalazie se u gornjem-levom uglu okna.

Novu poziciju moemo postaviti ili pozivom metodarelocate koji prihvata x i y, ili pozivima metoda setLayoutX i setLayoutY za pojedinano zadavanje x, odnosno y koordinate. Pri tome, x-osa ide desno, dok y-osa ide dole.

Upotrebom okna Pane imamo veu fleksibilnost u rasporeivanju komponenti, ali je ujedno odgovornost za konaan izgled aplikacije u potpunosti na nama.

31

Primer - Upotreba okna Pane

32

Primer - Upotreba okna Pane

33

Programiranje voeno dogaajima

Za razliku od proceduralnih aplikacija u kojima se naredbe izvravaju sekvencijalno ili paralelno, grafike aplikacije se izvravaju na osnovu dogaaja.

To znai da nakon startovanja aplikacija eka na neki dogaaj, kao to je klik miem ili pritisak tastera, a zatim izvrava skup naredbi kao odgovor na taj dogaaj.

Ovaj model programiranja grafikih aplikacija se naziva programiranje voeno dogaajima (eng. event-driven programming) i u njemu je logika programskog koda izvrnuta.

34

Programiranje voeno dogaajima

Umesto jedinstvenog kontrolnog toka koji bi tekao od poetka do kraja rada aplikacije, sistemski dodelj