JavaFX Platformy Technologiczne

Transkrypt

1 JavaFX Platformy Technologiczne Michał Wójcik 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 / 22

2 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 / 22

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

4 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 / 22

5 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 / 22

6 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 / 22

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

8 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 / 22

9 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 / 22

10 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 / 22

11 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 ( ) public void changed ( ObservableValue o, Object oldval, Object new Val ) { ) ; Michał Wójcik (KASK, ETI, PG) JavaFX 5 marca / 22

12 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 / 22

13 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 / 22

14 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 / 22

15 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 / 22

16 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 / 22

17 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 / 22

18 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 / 22

19 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 / 22

20 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 / 22

21 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 Label l a b e l 1 Label l a b e l 2 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 / 22

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