OBJEKTNO ORIJENTISANO

PROGRAMIRANJE

FXML I SCENEBUILDER
Staa Vujii Stankovi

FXML

FXML je zasnovan na jeziku XML i obezbeuje strukturu za izgradnju grafikog korisnikog interfejsa odvojeno od aplikacione logike koda. FXML nema shemu poput XML-a, ali ima osnovnu, unapred definisanu strukturu.

FXML je direktno povezan sa Javom.

FXML

Iako FXML moe da se koristi za kreiranje bilo kakvog grafikog korisnikog interfejsa, posebno je korisan za kreiranje grafikih korisnikih interfejsa koji imaju velike, kompleksne grafove scena, forme, unos podataka ili sloene animacije. FXML je pogodan za definisanje statikih rasporeda kao to su forme, kontrole i tabele, ili dinamike sadraje koji ukljuuju skripte.
3

PRIMER

Primer grafikog korisnikog interfejsa koji sadri BorderPane, i u poljima na vrhu i u centru ima labele.

Java kod: BorderPane border = new BorderPane(); Label toppanetext = new Label("Page Title"); border.setTop(toppanetext); Label centerpanetext = new Label ("Some data here"); border.setCenter(centerpanetext);

FXML: <BorderPane> <top> <Label text="Page Title"/> </top> <center> <Label text="Some data here"/> </center> </BorderPane>

DOBRE STRANE UPOTREBE FXML-A

Graf scene se jednostavnije sagleda u FXML-u, pa je jednostavnije napraviti i odravati grafiki korisniki interfejs kroz testiranja. Kod pisan u FXML-u ne mora da se kompajlira da bi se videle promene. FXML moe da se upotrebljava sa bilo kojim Java Virtual Machine (JVM) jezikom, kao to su Java, Scala ili Clojure. U FXML-u mogu da se koriste JavaScript i drugi skript jezici. ...

KORISNI LINKOVI

Introduction to FXML
http://docs.oracle.com/javafx/2/api/javafx/fxml/docfiles/introduction_to_fxml.html

FXML I SCENEBUILDER

Scene Builder generie izvorni kod FXML dokumenta kako se definie grafiki korisniki interfejs za JavaFX aplikaciju.

Scene Builder omoguava da se brzo i jednostavno napravi prototip interaktivne aplikacije koja povezuje vizuelne komponente sa logikom aplikacije.

SCENEBUILDER

JavaFX Scene Builder je alat za dizajniranje JavaFX aplikacija. Omoguava jednostavno prevlaenje (drag-and-drop) i pozicioniranje komponenata grafikog korisnikog interfejsa na JavaFX scenu. Kako se gradi scena, tako se automatski generie odgovarajui FXML dokument.

10

OSNOVNI PROZOR
Nakon izbora layout-a pri kreiranju FXML dokumenta i njegovog otvaranja u Scene Builderu, potrebno je izvriti poveanje Content panel-a. Iz Hierarchy panel-a sa leve strane izabrati (oznaiti) layout (npr. BorderPane) Iz Inspector panel-a sa desne strane izabrati sekciju Layout i uneti npr. 300 u polje Pref Width i 200 u Pref Height polje i pritisnuti Enter.

11

PRIDRUIVANJE CSS DOKUMENTA

.border-layout{
Boja pozadine

-fx-background-color: radial-gradient(radius 100%, white, skyblue); -fx-border-color: blueviolet; }

Boja ivice
12

PRIDRUIVANJE CSS DOKUMENTA

U Hierarchy Hierarchy panel-u izabrati komponentu kojoj se pridruuje CSS, npr. BorderPane. U Inspector panel-u izabrati sekciju Properties, kliknuti dugme sa znakom plus (+) u Stylesheets i izabrati .css dokument sa podacima o stilu. Potom iz Style Class klikom na dugme sa znakom plus (+) izabrati odgovarajui podatak za odreivanje stila komponente.

13

14

LIBRARY PANE

Iz Library Pane-a mogu da se izaberu, prevuku i pozicioniraju u centralnu radnu povrinu: Containers Controls Popup Controls Menu Content Shapes Charts Misc

15

PRIMER
Prevui komponentu Button u centralno polje BorderPane-a. Inspector Pane Layout Pref Width (80) Pref Height (30) Inspector Pane Properties Text (Zdravo!) Font (Book Antiqua, Bold Italic, 14px)

<center> <Button mnemonicParsing="false" prefHeight="30.0" prefWidth="80.0" text="Zdravo!" textAlignment="LEFT">

<font>
<Font name="Book Antiqua Bold Italic" size="14.0" /> </font> </Button> </center> Slino je moglo da se postigne upotrebom CSS-a.
16

PRIDRUIVANJE CSS DOKUMENTA

Slino kao malopre, mogue je izgled i veliinu slova na dugmetu odrediti upotrebom CSS-a: .font { -fx-text-fill: darkcyan; -fx-font-style: italic; -fx-font-size: 14; -fx-font-family: "Book Antiqua"; }
17

PRIDRUIVANJE CSS DOKUMENTA

Mogue je pridruiti sceni .css dokument i direktno: scene.getStylesheets().add(getClass(). getResource("../TestSB.css").toExternalForm());

String sadri relativnu putanju .css dokumenta u odnosu na .class fajl. Metod setStyle() se koristi za definisanje izgleda pojedinanih komponenti. Npr. dugme.setStyle("-fx-background-color: radialgradient(radius 100%, gray, red)");

18

DODATNE NAPOMENE
esto je potrebno ponititi ono to je uraeno: Menu Edit Undo. Mogue je promeniti veliinu komponente da bude jednaka veliini roditelja: Modify Fit to Parent. Ili Ctrl+K. Mogue je vei broj komponenti organizovati na odreen nain:

Oznaiti vei broj komponenti: obeleiti prvu od njih klikom miem, a potom drei pritisnut Ctrl, oznaiti i ostale.
19

Menu Arrange Wrap in HBox (npr.). Za pregled grafikog korisnikog interfejsa: Menu Preview Preview in Window.

CONTROLLER CLASS
Potrebno je u Scene Builderu postaviti kontroler klasu korenom elementu. Na taj nain se omoguava JavaFX Scene Builder-u da pristupi nazivima Event Handler-a i deklarisanih instancnih varijabli. Inspector Pane Code Controller class

20

CONTROLLER CLASS
fx:controller atribut (koji e automatski biti dodat u FXML dokument nakon prethodnog izbora kontroler klase) omoguava povezivanje FXML dokumenta i kontroliue klase. Controller class je kompajlirana klasa koja implementira kod u pozadini (dogaaje u pozadini) hijerarhije objekata koja je definisana FXML dokumentom. Kontroleri se koriste za implementaciju Event Handler-a koji slue za rukovanje dogaajima vezanim za elemente grafikog korisnikog interfejsa definisane u FXML dokumentu.

21

<center> <Button fx:id="dugme" mnemonicParsing="false" onAction="#handleButtonAction" prefHeight="30.0" prefWidth="80.0" text="Zdravo!" textAlignment="LEFT"> <font> <Font name="Book Antiqua Bold Italic" size="14.0" /> </font> </Button> </center>
public class TestSBController implements Initializable { @FXML private Button dugme; @FXML private void handleButtonAction(ActionEvent event) { System.out.println("ZDRAVO!!!"); } }

22

CONTROLLER CLASS - INITIALIZE

Najee je dovoljno da se rukovoenje dogaajima definie na predstavljeni nain. Ako je potrebno da se postigne vea kontrola nad ponaanjem kontrolera i elemenata kojima on upravlja, moe da se definie metod initialize()

public void initialize();

koji se poziva jednom prilikom implementacije kontrolera, kada su sadraji FXML dokumenata koji su mu pridrueni u potpunosti uitani, ime se omoguava implementiranoj klasi da izvri post-procesiranje nad sadrajem, da pristupi resursima koji su korieni pri uitavanju dokumenata ili lokacijama koje su koriene za reavanje relativnih putanja u dokumentu.

23

<center> <Button fx:id="dugme" mnemonicParsing="false" prefHeight="30.0" prefWidth="80.0" text="Zdravo!" textAlignment="LEFT"> <font> <Font name="Book Antiqua Bold Italic" size="14.0" /> </font> </Button> </center> public class TestSBController implements Initializable { public Button dugme; @Override public void initialize(URL location, Resources resources) { button.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { 24 System.out.println("ZDRAVO!!!"); } }); }}

@FXML

Ukoliko se u kontroler klasi polja lanovi i metode za upravljanje dogaajima oznae kao private ili protected, neophodno ih je oznaiti obelejem javafx.fxml.FXML (@FXML), kako bi FXML dokument mogao da im pristupi ili ih menja.

25

FXML LOADER

FXMLLoader klasa je odgovorna za uitavanje FXML izvornog dokumenta i vraanje dobijenog grafa scene.

@Override public void start(Stage stage) throws Exception { Parent root = FXMLLoader.load(getClass().getResource("TestSB.fxml"));

Scene scene = new Scene(root);

stage.setScene(scene); stage.show(); }

26