JavaFX Platformy Technologiczne

JavaFX Platformy Technologiczne Michał Wójcik michal.wojcik@eti.pg.gda.pl http://mwojcik.eti.pg.gda.pl Katedra Architektury Systemów Komputerowych Wydział Elektroniki, Telekomunikacji i Informatyki Politechnika Gdańska 5 marca 2014 Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 1 / 22

JavaFX JavaFX platforma rozwijająca platformy klienckie Java w celu umożliwienia łatwego tworzenia i wdrażania aplikacji RIA zachowujących się tak samo na różnych platformach. Zalety: wykorzystanie języka Java, wykorzystanie tej samej technologii po stronie klienta i serwera, uruchomienie w różnych środowiskach. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 2 / 22

Pomocne Źródła I [1] JavaFX 2.2 Documentation. http://docs.oracle.com/javafx/2/api/. [2] The JavaFX Tutorials. http://docs.oracle.com/javafx/. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 3 / 22

JavaFX elementy Elementy JavaFX 2.2: Java API, nowy silnik graficzny: Prism hardware accelerated graphics pipeline, Glass windowing toolkit; FXML deklaratywny język znaczników pozwalający na tworzenie GUI, UI controls baza różnorodnych kontrolek interfejsu użytkownika, sample applications przedstawienie różnych możliwości technologii JavaFX z przykładami kodów. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 4 / 22

Scene Graph Scene Graph punkt startowy dla konstruowania aplikacji JavaFX. Hierarchiczne drzewo węzłów reprezentujących wizualne elementy. Rodzaje zawartości: Nodes kształty (2-D, 3-D), obrazki, multimedia, tekstu, kontrolki. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 5 / 22

Graphics System Graphics System obsługuje zarówno grafikę 2-D i 3-D sceny, zapewnia softwareowe renderowanie w momencie gdy sprzętowe wsparcie nie jest dostępne. Prism obsługuje proces renderowania, może działać zarówno softwarowo jak i sprzętowo: DirectX 9 dla Windows XP i Windows Vista, DirectX 11 dla Windows 7, OpenGL dla Mac, Linux, Embedded, Java2D gdy wsparcie sprzętowe nie jest dostępne, dostarczana ze wszystkimi dystrybucjami JRE. Quantum Toolkit łączy Prim i Glass Windowing Toolkit udostępniając je wyższej warstwie, zarządza regułami obsługi wątków związanymi z renderowaniem i obsługą zdarzeń. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 6 / 22

Glass Glass Windowing Toolkit dostarcza natywne operacje, takie jak: zarządzanie oknami, timers, surfaces. Jest warstwą zależną od platformy, która łączy platformę JavaFX z natywnym systemem. Zarządza kolejką zdarzeń, wykorzystuje systemową natywną kolejkę zdarzeń do kolejkowania wątków. Działa w tym samym wątku co aplikacja JavaFX. Rodzaje wątków: JavaFX application thread główny wątek aplikacji, wszystkie dostępy do wyświetlanej sceny muszą być realizowane w tym wątku, nie jest tożsamy z Swing/AWT EDT, Prism render thread renderowanie poza obsługą zdarzeń, pozwala na na renderowanie ramki N gdy przetwarzana jest ramka N+1, Media thread działa w tle, synchronizuje ostatnie ramki za pomocą scene graph wykorzystując JavaFX application thread. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 7 / 22

Kontrolki Kontrolki UI: realizowane jako węzły sceny, przenośne pomiędzy platformami, wygląd modyfikowany poprzez CSS, javafx.scene.control: Label, Button, Radio Button, Toggle Button, Checkbox, Choice Box, Text Field, Password Field, Scroll Bar, Scroll Pane, List View, Table View, Separator, Slider, Progress Bar, Progress Indicator, Hyperling, Tooltip, HTML Editor, Titled Pane, Accordion. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 8 / 22

Data Binding Konwencja JavaBeans: public class Person { private int age ; public Person ( ) { age = 0 ; public f i n a l void setage ( int age ) { this. age = age ; public f i n a l int getage ( ) { return age ; Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 9 / 22

Data Binding Nowa konwencja JavaBeans: public class Person { private I n t e g e r P r o p e r t y age = new S i m p l e I n t e g e r P r o p e r t y ( ) ; public Person ( ) { age. s e t ( 0 ) ; public f i n a l void setage ( int age ) { this. age. s e t ( age ) ; public f i n a l int getage ( ) { return age. get ( ) ; public I n t e g e r P r o p e r t y ageproperty ( ) { return age ; Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 10 / 22

Data Binding Reagowanie na zmianę własności: Person p = new Person ( ) ; p. ageproperty ( ). a d d L i s t e n e r (new ChangeListener ( ) { @Override public void changed ( ObservableValue o, Object oldval, Object new Val ) { ) ; Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 11 / 22

Kolekcje JavaFX wprowadza rozszerzenie dla standardowych kolekcji (javafx.collections): interfejsy: ObeservableList lista pozwalająca na śledzenie zmian, ListChangeListener otrzymuje notyfikacje o zmianach na liście, ObservableMap mapa pozwalająca na śledzenie zmian, MapChangeListener otrzymuje notyfikacje o zmianach w mapie; klasy: FXCollections kopia java.util.collections, ListChangeListener.Change zmiany na liście, MapChangeListener.Change zmiany w mapie. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 12 / 22

Layout Kontenery pozwalają na wygodne i dynamiczne układanie kontrolek UI na scenie: BorderPane regiony: top, bottom,right, left, center, HBox jeden rząd poziomo, VBox jeden rząd pionowo, StackPane stos, tworzenie skomplikowanych elementów poprzez składanie, GridPane siatka, FlowPane następujące po sobie elementy poziomo lub pionowo, TilePane siata o elementach w równym rozmiarze, AnchorPane zakotwiczenie elementów: top, bottom, left, right, center. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 13 / 22

Layout Zmiana rozmiaru panelu powoduje automatyczną zmianę rozmiarów niektórych węzłów. Węzły automatycznie zmieniające rozmiar: kontrolki UI, panele. Węzły nie zmieniające rozmiaru (stałe): kształty, item teksty, grupy. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 14 / 22

Layout Rozmiar definiowany przez: preferred size, maximum size, minimum size. Ułożenie kontrolek w panelu definiowane przez: HPos ułożenie w poziomie, VPos ułożenie w pionie, Pos ułożenie w pionie i poziomie. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 15 / 22

CSS Interfejs aplikacji JavaFX może być modyfikowany za pomocą CSS (Cascading Style Sheet): zmiana kodu źródłowego nie jest konieczna, stosowane asynchronicznie, mogą być zastosowane podczas działania aplikacji, dynamiczna zmiana wyglądu, bazuje na W3C CSS v2.1 z wybranymi dodatkami z v3, własne selektory. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 16 / 22

CSS Zastosowanie CSS:.my-button klasa MyButton, #my-button fx:id="my-button",.radio-button.dot styl wypunktowania w RadioButton,.radio-button:hover. Działanie: przedrostek -fx- przy właściwościach,.root odnosi się do wszystkich elementów na scenie, void Node.setId(String id) przypisanie fx-id w kodzie, void Node.setStyle(String style) zastosowanie stylu w kodzie: button1.setstyle("-fx-background-clor: slateblue; -fx-text-fill: white;"); Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 17 / 22

CSS Scene s c e n e = new Scene (new Group ( ), 500, 400) ; scene, g e t S t y l e s h e e t s ( ). add ( " path / s t y l e s h e e t. c s s " ) ;. button { fx f o n t : 16px " S e r i f " ; fx padding : 1 0 ; fx background c o l o r : #CCFF99 ; #my button { Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 18 / 22

FXML FXML pozwala na definiowanie interfejsu użytkownika: oparty na XML, nie kompilowany, możliwość tworzenia interfejsu dynamicznie. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 19 / 22

FXML BorderPane border = new BorderPane ( ) ; Label l a b e l 1 = new Label ( "Page T i t l e " ) ; border. settop ( l a b e l 1 ) ; Label l a b e l 2 = new Label ( "Some data here " ) ; border. s e t C e n t e r ( l a b e l 2 ) ; <BorderPane> <top> <Label f x : i d=" l a b e l 1 " t e x t="page T i t l e "/> </top> <c e n t e r <Label f x : i d=" l a b e l 2 " t e x t="some data here "/> </center > </BorderPane> Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 20 / 22

FXML Parent r o o t = FXMLLoader. load ( g e t C l a s s ( ). getresource ( " fxml \_example. fxml " ), ResourceBundle. getbundle ( " fxmlexample. fxml \_example" ) ) ; public class FXMLBrowserController implements I n i t i a b l e { @FXML Label l a b e l 1 ; @FXML Label l a b e l 2 ; @Override public void i n i t i a l i z e (URL url, ResourceBundle rb ) { Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 21 / 22

Wdrożenie Aplikacje JavaFX mogą być uruchomione na trzy sposoby: samodzielna, uruchamiana jako aplikacja desktopowa, przez przeglądarkę, aplikacja wbudowana w stronę, Web Start. Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca 2014 22 / 22