dr Grzegorz Terlikowski

Prezentacja na temat: "dr Grzegorz Terlikowski"— Zapis prezentacji:

1 dr Grzegorz Terlikowski
Java FX dr Grzegorz Terlikowski

2 JavaFX jest rozwiązaniem RIA
maj pierwsze informacje. 4 grudzień 2008 – upublicznienie wersji 1.0. Technologia ta miała zastąpić aplety, będące już stosunkowo starym rozwiązaniem niesprostającym dzisiejszym wymaganiom. JavaFX zostało w pełni zintegrowane z Javą 8 – co czyni JavaFX następcą bibliotek Swing. Zastosowanie: podobne do Flash i Silverlight.

3 Aplikację można uruchomić :
JavaFX – Możliwości Łatwe budowanie interfejsów graficznych zarówno za pomocą kontrolek JavaFX, jak i kontrolek Swing, Wzbogacanie UI aplikacji o statyczne lub dynamiczne elementy graficzne Java2D i Java3D, Aplikację można uruchomić : na pulpicie, w przeglądarce - jako aplet. na urządzeniu mobilnym, Obsługa multimediów.

4 Standard Java Tools for Easy Development
JavaFX – Narzędzia Standard Java Tools for Easy Development Edytor kodu źródłowego z kolorowaniem syntaktycznym, autouzupełnianiem kodu, refaktoryzacją, itd. Debugowanie kodu, Kreator projektu dla łatwiejszego tworzenia aplikacji JavaFX JavaFX applications are created in Java, developers can take advantage of all the standard Java IDE features. Oracle has included specific JavaFX support in NetBeans 7.1, and we are aware of similar efforts in the eclipse and IntelliJ communities Inne IDE dla Java

5 JavaFX Scene Builder dla szybkiego projektowania UI
JavaFX – Narzędzia – JavaFX Scene Builder JavaFX Scene Builder dla szybkiego projektowania UI Narzędzie WYSIWYG do tworzenia GUI Kontrolki przeciągane są z palety na scenę Generowanie plików w formacie FXML, które mogą być użyte wewnątrz projektu NetBeans lub Eclipse itd.. Może być użyte do tworzenia GUI dla aplikacji desktopowych i webowych Self explanatory

6 Stanowi alternatywę do tworzenia UI w Java.
JavaFX – Cechy FXML JavaFX 2.2 wprowadziła deklaratywny język FXML, który wyparł język skryptowy JavaFx Script, Cechy: Bazuje na XML, Stanowi alternatywę do tworzenia UI w Java. Łatwy do nauki i intuicyjny dla projektantów posiadających doświadczenie w technologiach webowych lub innych technologiach znacznikowych. Możliwość osadzenia skryptów wewnątrz FXML. Każdy język skryptowy wspierany przez JVM może być użyty: JavaScript, Groovy, Scala.

7 JavaFX – FXML – przykład
<?import javafx.scene.control.Label?> <?import javafx.scene.layout.BorderPane?> <BorderPane xmlns:fx=" <top> <Label fx:id="label1" text="Page Title"/> </top> <center> <Label fx:id="label2 " text="Some data here"/> </center> </BorderPane> BorderPane border = new BorderPane ( ) ; Label label1 = new Label("Page Title") ; border.setTop(label1) ; Label label2 = new Label("Some data here") ; border.setCenter(label2) ; Parent root = FXMLLoader.load(getClass().getResource("fxml\example.fxml") , ResourceBundle.getBundle("fxmlexample.fxml\example")) ; public class FXMLBrowserController implements Initiable { @FXML Label label1; Label label2; @Override public void initialize(URL url , ResourceBundle rb ){ ... } }

8 Glass Windowing Toolkit: dostarcza natywnych systemowych usług.
JavaFX – Architektura wysokopoziomowa Glass Windowing Toolkit: dostarcza natywnych systemowych usług. Prism: renderowanie grafiki sprzętowo lub programowo. Media Engine – wsparcie dla multimediów. Web Engine silnik przeglądarki internetowej, bazuje na WebKit. Trzy główne wątki – aplikacji, Prism, Media Prism - renderowanie grafiki w miarę możliwość sprzętowo!  Glass Windowing Toolkit – systemowa kolejka zdarzeń  Media Engine – wsparcie dla multimediów  Web Engine – silnik przeglądarki internetowej, bazuje na WebKit  Trzy główne wątki – aplikacja, Prism, Media

9 Scene Graph — punkt startowy dla konstruowania aplikacji JavaFX.
JavaFX – Scene Graph Scene Graph — punkt startowy dla konstruowania aplikacji JavaFX. Hierarchiczne drzewo węzłów reprezentujących wizualne elementy, Rodzaje zawartości: Węzły — kształty (2-D, 3-D), obrazki, multimedia, tekst, kontrolki Stany: transformacje(pozycjonowanie i orientacja węzłów), efekty wizualne, Efekty: proste obiekty, które zmieniają wygląd węzłów: Blur, Shadow. Nodes: Shapes (2-D and 3-D), images, media, embedded web browser, text, UI controls, charts, groups, and containers State: Transforms (positioning and orientation of nodes), visual effects, and other visual state of the content Effects: Simple objects that change the appearance of scene graph nodes, such as blurs, shadows, and color adjustment

10 JavaFX – System graficzny
Graphics System — obsługuje zarówno grafikę 2D i sceny 3D, 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, Java2D gdy wsparcie sprzętowe nie jest dostępne, dostarczana ze wszystkimi dystrybucjami JRE. Quantum Toolkit — łączy Prism 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ń.

11 Działa w tym samym wątku co aplikacja JavaFX.
JavaFX – System graficzny 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.

12 JavaFX – System graficzny
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, Prism render thread — renderowanie poza obsługą zdarzeń, pozwala 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.

13 JavaFX – Kontrolki Kontrolki UI realizowane są 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, Progress Indicator, Hyperling, Tooltip, Progress Bar, HTML Editor, List View, Table View, Separator, Slider, Titled Pane, Accordion

14 JavaFx posiada następujące klasy kontenerów:
JavaFX – Kontenery Kontenery pozwalają na wygodne i dynamiczne rozkładanie kontrolek wewnątrz SceneGraph. Klasy kontenerów rozkładów znajdują się w pakiecie javafx.scene.layout. JavaFx posiada następujące klasy kontenerów: 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,

15 JavaFX – 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.

16 style: "-fx-background-color: yellow";
JavaFX – Współpraca z CSS JavaFX wykorzystuje tę samą specyfikację CSS co HTML. Zmienna stylesheet komponentu Scene, jest sekwencją, w związku z czym można do niej przypisać wiele ścieżek do różnych plików CSS. Ponadto istnieje możliwość określenia stylu bezpośrednio w kodzie aplikacji poprzez wykorzystanie właściwości style kontrolki/kontenera, style: "-fx-background-color: yellow"; Klasę stylu określa właściwość styleClass.

17 Klasy do obsługi mediów zlokalizowane są w pakiecie java.scene.media.
JavaFX – Obsługa mediów – API Klasy do obsługi mediów zlokalizowane są w pakiecie java.scene.media. Media obsługiwane są m.in. przez 3 główne klasy: Media reprezentuje plik do odtwarzania, MediaPlayer komponent odtwarzający plik opisany przez obiekt typu Media. MediaView węzeł w SceneGraph, reprezentujący widok na którym zostanie wyświetlony film,

18 JavaFX – Obsługa mediów – przykład
@Override public void start(Stage primaryStage) { final String mediaUrl = " // create media player Media media = new Media( mediaUrl ); MediaPlayer mediaPlayer = new MediaPlayer(media); mediaPlayer.setAutoPlay( true ); // create mediaView and add media player to the viewer MediaView mediaView = new MediaView( mediaPlayer ); root.getChildren().add( mediaView ); primaryStage.setScene(new Scene(root, 600, 500)); primaryStage.show(); }

19 JavaFX – Silnik webowy WebEngine Dostarcza podstawowej funkcjonalności do przeglądania stron webowych. Wspiera interakcje z użytkownikiem: nawigacja za pomocą linków, przesyłanie formularzy. Bazuje na WebKit. WebView Strona Web jako węzeł – Node w SceneGraph Mogą być zastosowane efekty Enkapsulacja obiektu WebEngine

20 JavaFX – Silnik webowy @Override public void start(Stage primaryStage) { WebView webView = new WebView(); webView.getEngine().load( " ); root.getChildren().add( webView ); primaryStage.setScene(new Scene(root, 600, 500)); primaryStage.show(); }

21 JavaFX – wykresy JavaFX provides a rich set of charting controls that simplifies the display of complex data as a single picture. 21

22 GaussianBlur InnerShadow SepiaTone Reflection Lighting JavaFX – Efekty
To improve the richness of a GUI JavaFX provides a comprehensive set of effects that can be applied to nodes. Remember that media is a node, so all of these effects can be applied to media just as easily as to shapes or controls. Reflection Lighting 22

23 JavaFX – Efekty – przykład
@Override public void start(Stage primaryStage) { Image iJavaFx = new Image( getClass().getResourceAsStream( "indice.jpg" )); ImageView ivJavaFx = new ImageView(); root.getChildren().add( ivJavaFx ); Reflection r = new Reflection(); r.setFraction( 0.9 ); root.setEffect( r ); primaryStage.setScene(new Scene(root, 600, 500)); primaryStage.show(); } To improve the richness of a GUI JavaFX provides a comprehensive set of effects that can be applied to nodes. Remember that media is a node, so all of these effects can be applied to media just as easily as to shapes or controls. 23

24 Transformacje JavaFX – transformacje
Rectangle rect=new Rectangle(0,0,60,60); rect.setFill(Color.DODGERBLUE); rect.setArcWidth(10); rect.setArcHeight(10); rect.setRotate(45); Nodes can be transformed in standard ways or an affine transform matrix can be used. rect.setScaleX(2); rect.setScaleY(0.5); Shear shear = new Shear(0.7, 0); rect.getTransforms().add(shear); rect.setTranslateX(40); rect.setTranslateY(10); 24

25 JavaFX – transformacje – przykład
Group circles = new Group(); for (int i = 0; i < 30; i++) { Circle circle = new Circle(150, Color.web("white", 0.05)); circle.setStrokeType(StrokeType.OUTSIDE); circle.setStroke(Color.web("white", 0.16)); circle.setStrokeWidth(4); circle.setTranslateX(random() * 800); circle.setTranslateY(random() * 600); circles.getChildren().add(circle); } root.getChildren().add(circles); Nodes can be transformed in standard ways or an affine transform matrix can be used. 25

26 JavaFX – Binding Tworzą zależności między właściwością oraz wartością, która może się zmieniać. Wysokopoziomowe API Łatwe w użyciu Wystarczające dla większości zastosowań Niskopoziomowe API Zastosowanie w bardziej skomplikowanych sytuacjach Zoptymalizowane pod kątem szybszego wykonywania się. Binding is one of the most powerful features of JavaFX. It allows developers to specify the relationship between properties and values so that when the value changes the property is automatically modified byt the JavaFX runtime system. This is analogous to the listener pattern used extensively in AWT/Swing but requires less coding by the developer. The API is separated into a high level version that covers most of the common tasks, but does not provide total flexibility. For tasks that require complete flexibility the low-level API can be used. This, however, requires more coding. 26

27 Podstawowe dla wysokopoziomowego bindingu
JavaFX – Binding - właściwości Podstawowe dla wysokopoziomowego bindingu Konkretne typy dla wszystkich podstawowych typów, String i Object DoubleProperty, StringProperty, itd.. Proste API bind / unbind bindBidirectional / unbindBidirectional isBound Properties are the basis for high-level binding. There are property types for all Java primitives as well as String and Object. The API for this is simple, allowing you to bind or unbind the property. Bi-directional binding is also supported. 27

28 JavaFX – Binding – przykład prostego bindingu
private SimpleDoubleProperty topXProperty = new SimpleDoubleProperty(); private SimpleDoubleProperty topYProperty = Line foldLine = new Line(); foldLine.setEndX(200); foldLine.setEndY(200); foldLine.startXProperty().bind(topXProperty); foldLine.startYProperty().bind(topYProperty); ... topXProperty.set(tx); topYProperty.set(ty); Here we have a simple binding example. We create two properties that we will modify the values of. We bind these to the start X and Y co-ordinates of a line. Whenever we change the values of the properties the line’s position will automatically change (this could be, for example, through a timeline or by ising a mouse) position) 28

29 JavaFX – Binding – przykład bindingu z wykorzystaniem JB
public class Person { private IntegerProperty age = new SimpleIntegerProperty(); public Person(){ age.set(0); } public final void setAge (int age){ this.age.set(age); public final int getAge (){ return age.get(); public IntegerProperty ageProerty( ){ return age ; Nowa konwencja JavaBeans Here we have a simple binding example. We create two properties that we will modify the values of. We bind these to the start X and Y co-ordinates of a line. Whenever we change the values of the properties the line’s position will automatically change (this could be, for example, through a timeline or by ising a mouse) position) Person p = new Person() ; p.ageProperty().addListener (new ChangeListener ( ) { @Override public void changed(ObservableValue o, Object oldVal, Object new Val ){ } }); Reagowanie na zmianę właściwości 29

30 Animacje są kluczową cechą bogatych aplikacji internetowych.
JavaFX – Animacje Animacje są kluczową cechą bogatych aplikacji internetowych. Klasy służące do animacji obiektów są dostępne w pakiecie javafx.animation. JavaFX wspiera dwa typy animacji: Animacje oparte na klatkach kluczowych - powszechny sposób tworzenia animacji. Wykorzystywane są m.in we Flash, Flex (od wersji 4) oraz Silverlight. Tranzycje – proste animacje typu from/to/by.

31 Predefiniowane, animacje z pojedynczym celem
JavaFX – Animacje – Tranzycje Predefiniowane, animacje z pojedynczym celem Fade, Path, Pause, Rotate, Scale, Translate , Mogą określać wartości: from, to i by. Kontenery tranzycji Parallel, Sequance, Mogą być dowolnie zagnieżdżane. To simplify comman tasks JavaFX includes a number of animated transitions to automate things like fading, rotation, scaling and so on. The start end and intermediate points can all be specificed. These can then be grouped together to provide either sequential or parallel transitions. For non-standard animations arbitary Timelines can also be included in the parallel or sequential transitions. 31

32 JavaFX – Animacje – Tranzycje – Przykład
final Rectangle rectPath = new Rectangle (0, 0, 40, 40); rectPath.setArcHeight(10); rectPath.setArcWidth(10); rectPath.setFill(Color.ORANGE); ... Path path = new Path(); path.getElements().add(new MoveTo(20,20)); path.getElements().add(new CubicCurveTo(380, 0, 380, 120, 200, 120)); path.getElements().add(new CubicCurveTo(0, 120, 0, 240, 380, 240)); PathTransition pathTransition = new PathTransition(); pathTransition.setDuration(Duration.millis(4000)); pathTransition.setPath(path); pathTransition.setNode(rectPath); pathTransition.setOrientation( PathTransition.OrientationType.ORTHOGONAL_TO_TANGENT); pathTransition.setCycleCount(Timeline.INDEFINITE); pathTransition.setAutoReverse(true); pathTransition.play(); To simplify comman tasks JavaFX includes a number of animated transitions to automate things like fading, rotation, scaling and so on. The start end and intermediate points can all be specificed. These can then be grouped together to provide either sequential or parallel transitions. For non-standard animations arbitary Timelines can also be included in the parallel or sequential transitions. 32

33 Timeline KeyFrame: KeyValue: Tranzycje i Timelines
JavaFX – Animacje – Klatki kluczowe Timeline Modyfikuje wartości zmiennych wyspecyfikowanych w KeyFrames. KeyFrame: określa, która zmienna powinna mieć daną wartość w danym czasie. KeyValue: Wartość, która ma być interpolowana w danym przedziale czasowym. Animations are changes in properties that happen over time (fading by modifying opacity, moving the position of a node, etc). JavaFX uses a Timeline to implement this; each one consisting of a series of KeyFrames. These are points in time where a property will have a specified value (it can also be used to start an action through a method call). The KeyValue has one or more KeyValues that represent the property-value tuple. When a Timeline is started the JavaFX runtime will alter the value of the property automatically. By binding to the changing property the GUI can be animated. Tranzycje i Timelines Niestandardowe animacje mogą wykorzystywać Timeline w blokach Parallel i Sequence. 33

34 JavaFX – Animacje – Klatki kluczowe – Przykład
Timeline timeline = new Timeline(); for (Node circle: circles.getChildren()) { timeline.getKeyFrames().addAll( new KeyFrame(Duration.ZERO, new KeyValue(circle.translateXProperty(), circle.getTranslateX()), new KeyValue(circle.translateYProperty(), circle.getTranslateY()) ), new KeyFrame(new Duration(5000), new KeyValue(circle.translateXProperty(), 400), new KeyValue(circle.translateYProperty(), 300) new KeyFrame(new Duration(10000), new KeyFrame(new Duration(12500), new KeyValue(circle.translateXProperty(), random() * 800), new KeyValue(circle.translateYProperty(), random() * 600) ) ); } timeline.play(); To simplify comman tasks JavaFX includes a number of animated transitions to automate things like fading, rotation, scaling and so on. The start end and intermediate points can all be specificed. These can then be grouped together to provide either sequential or parallel transitions. For non-standard animations arbitary Timelines can also be included in the parallel or sequential transitions. 34

35 Aplikacje JavaFX, mogą być wdrożone
JavaFX – Wdrażanie aplikacji Aplikacje JavaFX, mogą być wdrożone Jako zwykła aplikacja desktopowa, Java Plugin – umożliwiający uruchomienie apletu wewnątrz przeglądarki, Java Web Start – narzędzie wykorzystujące protokół JNLP (Java Network Launching Protocol), który umożliwia pobranie zdalnej aplikacji i uruchomienie jej na pulpicie, Network

36 HTML 5 vs Flex/Silverlight/JavaFX
Jeżeli zasięg aplikacji jest ważny (co jest wymogiem aplikacji konsumenckich) i ma być ona umiarkowanie interaktywna powinniśmy wybrać HTML5, który ma (lub w niedalekiej przyszłości będzie miał) największy zasięg. Jeżeli chcemy utworzyć aplikację wysoce interaktywną (być może też wykorzystać umiejętności programistów przez co zmniejszyć koszty produkcji) powinniśmy wybrać Silverlight, Flex lub JavaFX. We Flex/Silverlight można tworzyć aplikacje biznesowe do zastosowań wewnątrz korporacyjnych.

37 Flex vs Silverlight (1) Flex i Silverlight są technologiami do siebie podobnymi, tak więc jak dokonać wyboru? Silverlight jest oczywistym wyborem dla firm, które mocno zainwestowały w produkty firmy Microsoft. Znajomość języków programowania i narzędzi powoduje płynne przejście na Silverlight. Flex powinien być wybrany przez te firmy, które bazują na oprogramowaniu Java. Podobne środowiska IDE oraz frameworki umożliwiające połączenie Flex i Java sprawiają, że jest to dobry wybór. We Flex/Silverlight można tworzyć aplikacje biznesowe do zastosowań wewnątrz korporacyjnych.

38 Flex vs Silverlight (2) Należy mieć też na uwadze, że poziom przyjęcia aplikacji Flash/Flex jest dużo wyższy od aplikacji Silverlight. We Flex/Silverlight można tworzyć aplikacje biznesowe do zastosowań wewnątrz korporacyjnych.