Java FX 2, Un Tour d'Horizon

Slide 1

Slide 1 text

Java FX 2 un tour d’horizon

Slide 2

Slide 2 text

@SimonBasle consultant ~ Zenika ~ Java éditeur ~ InfoQ ~ francophone

Slide 3

Slide 3 text

Qu’est-ce que Java FX? 1 2 3 4 5 6 7 8

Slide 4

Slide 4 text

La nouvelle APi pour tout ce qui est Ui en Java SE

Slide 5

Slide 5 text

Une modernisation bienvenue dans la construction d’IHM :)

Slide 6

Slide 6 text

ou comment passer de ce genre d’ applis :

Slide 7

Slide 7 text

à celui là !

Slide 8

Slide 8 text

Décoration avec CSS

Slide 9

Slide 9 text

Décoration avec CSS Layout externalisable en FXML

Slide 10

Slide 10 text

Décoration avec CSS Layout externalisable en FXML FXML scriptable JSR 223 : JavaScript, Groovy, Jython, Clojure...

Slide 11

Slide 11 text

Exemple FXML + Controller

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

package fxmlexample; import javafx.event.ActionEvent; import javafx.fxml.FXML; import javafx.scene.text.Text; public class FXMLExampleController { //annotation @FXML accéder aux champs privés/protégés @FXML private Text actiontarget; public void handleSubmitButtonAction(ActionEvent e) { actiontarget.setText("Sign in button pressed"); } }

Slide 16

Slide 16 text

Exemple CSS

Slide 17

Slide 17 text

root { display: block; } .root { -fx-background-image: url("background.jpg"); } .label { -fx-font-size: 12px; -fx-font-weight: bold; -fx-text-fill: #333333; -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 ); } #welcome-text { -fx-font-size: 32px; -fx-font-family: "Arial Black"; -fx-fill: #818181; -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 ); } #actiontarget { -fx-fill: FIREBRICK; -fx-font-weight: bold; -fx-effect: dropshadow( gaussian , rgba(255,255,255,0.5) , 0,0,0,1 ); } .button { -fx-text-fill: white; -fx-font-family: "Arial Narrow"; -fx-font-weight: bold; -fx-background-color: linear-gradient(#61a2b1, #2A5058); -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 ); }

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Plutôt Stylé!

Slide 20

Slide 20 text

Graphismes Riches 1 2 3 4 5 6 7 8

Slide 21

Slide 21 text

Accéléré matériellement avec le pipeline Prism et un nouveau Gestionnaire de Fenêtres, Glass

Slide 22

Slide 22 text

Effets flou, ombre, réflexion... Transformations translation, rotation, échelle

Slide 23

Slide 23 text

Transitions & Animations

Slide 24

Slide 24 text

Transitions & Animations

Slide 25

Slide 25 text

Transitions & Animations

Slide 26

Slide 26 text

Transitions & Animations

Slide 27

Slide 27 text

Transitions & Animations

Slide 28

Slide 28 text

Transition & Animations

Slide 29

Slide 29 text

Transition & Animations (et pas faites à la main comme celle-ci!)

Slide 30

Slide 30 text

JavaFX vs Swing Affichage d’un Label à la verticale

Slide 31

Slide 31 text

Java FX 2 On applique directement la transformation Label monFxLabel = new Label(“test”); monFxLabel.setRotate(90.0d);

Slide 32

Slide 32 text

Swing On surcharge JLabel et on joue avec Java2D public class VerticalLabel extends JLabel { (...) protected void paintComponent(Graphics g) { Graphics2D gr = (Graphics2D) g.create(); gr.translate(0, getSize(), getHeight()); gr.transform( AffineTransform.getQuadrantRotateInstance(-1)); super.paintComponent(gr); } }

Slide 33

Slide 33 text

Ça reste assez simple... OK Exemple 2: Affichage d’une Image à la verticale

Slide 34

Slide 34 text

Java FX 2 On applique directement la transformation (à la vue) ! Image monFxImage = new Image(“http://.../someImg.png”, true); ImageView view = new ImageView(); view.setImage(monFxImage); view.setRotate(90.0d);

Slide 35

Slide 35 text

Java FX 2 On applique directement la transformation (à la vue) ! Note: le chargement de l’image ci-dessus se fait en arrière- plan (2ème argument), avec un placeholder dans la vue. Pas besoin de coder un SwingWorker pour ça ;) Image monFxImage = new Image(“http://.../someImg.png”, true); ImageView view = new ImageView(); view.setImage(monFxImage); view.setRotate(90.0d);

Slide 36

Slide 36 text

Swing Encore une fois on joue avec Java2D source: stackOverflow.com public static BufferedImage rotate(BufferedImage image, double angle) { double sin = Math.abs(Math.sin(angle)), cos = Math.abs(Math.cos(angle)); int w = image.getWidth(), h = image.getHeight(); int neww = (int)Math.floor(w*cos+h*sin), newh = (int)Math.floor(h*cos+w*sin); GraphicsConfiguration gc = getDefaultConfiguration(); BufferedImage result = gc.createCompatibleImage(neww, newh, Transparency.TRANSLUCENT); Graphics2D g = result.createGraphics(); g.translate((neww-w)/2, (newh-h)/2); g.rotate(angle, w/2, h/2); g.drawRenderedImage(image, null); g.dispose(); return result; }

Slide 37

Slide 37 text

Et pour tout un panel?

Slide 38

Slide 38 text

Et pour tout un panel? c’est pareil, les transformations s’appliquent en cascade...

Slide 39

Slide 39 text

Composants 1 2 3 4 5 6 7 8

Slide 40

Slide 40 text

La fenêtre ( Stage ) affiche une Scene contenant une arborescence de Nodes

Slide 41

Slide 41 text

Support intégré du Multimédia (mp3, mpeg-4, audio faible latence, ...)

Slide 42

Slide 42 text

Vue Web basée sur WebKit

Slide 43

Slide 43 text

50 contrôles out-of-the-box incluant les Graphes

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

Intégration de vue Java FX dans une application Swing possible

Slide 47

Slide 47 text

Intégration de vue Swing dans une application Java FX possible et inversement depuis la version 8 :

Slide 48

Slide 48 text

Propriétés et Bindings 1 2 3 4 5 6 7 8

Slide 49

Slide 49 text

Propriétés utilisées de manière classique (getPrefWidth(), setPrefWidth(...))

Slide 50

Slide 50 text

Propriétés utilisées de manière classique (getPrefWidth(), setPrefWidth(...)) mais aussi Observables (prefWidthProperty().addListener(...))

Slide 51

Slide 51 text

Binding de ces propriétés observables Expressions une classe de propriétés qui facilite les bindings

Slide 52

Slide 52 text

Binding de ces propriétés observables Expressions une classe de propriétés qui facilite les bindings avec des opérations comme divide, substract, etc...

Slide 53

Slide 53 text

Extension du modèle des JavaBeans

Slide 54

Slide 54 text

Extension du modèle des JavaBeans pas limité à l’IHM, peut aussi s’appliquer au modèle Définissez les vôtres!

Slide 55

Slide 55 text

Exploité par les composants affichant des Collections ObservableList ObservableMap

Slide 56

Slide 56 text

MultiTouch 1 2 3 4 5 6 7 8

Slide 57

Slide 57 text

Sur les plate-formes supportant le tactile Rotate + ROTATE_STARTED / FINISHED

Slide 58

Slide 58 text

Sur les plate-formes supportant le tactile Rotate + ROTATE_STARTED / FINISHED Scroll +SCROLL_STARTED / FINISHED

Slide 59

Slide 59 text

Sur les plate-formes supportant le tactile Rotate + ROTATE_STARTED / FINISHED Scroll Zoom +SCROLL_STARTED / FINISHED + ZOOM_STARTED / FINISHED

Slide 60

Slide 60 text

Sur les plate-formes supportant le tactile Rotate + ROTATE_STARTED / FINISHED Scroll Zoom +SCROLL_STARTED / FINISHED + ZOOM_STARTED / FINISHED Swipe SWIPE_LEFT / RIGHT / UP / DOWN

Slide 61

Slide 61 text

Parallélisme et MultiThreading 1 2 3 4 5 6 7 8

Slide 62

Slide 62 text

Package javafx.concurrent Interface Worker

Slide 63

Slide 63 text

Task exécution unique en tâche de fond avec mise à jour de l’UI une FutureTask avec propriétés Observables

Slide 64

Slide 64 text

Service création et exécutions multiples aide à exécuter les Task créées dans le thread JavaFX

Slide 65

Slide 65 text

Nouveautés de Java FX 8 1 2 3 4 5 6 7 8

Slide 66

Slide 66 text

Nouveau thème graphique Modena

Slide 67

Slide 67 text

Nouveau thème graphique Modena Intégration de Swing via la SwingNode

Slide 68

Slide 68 text

Style programmatique via APi CSS

Slide 69

Slide 69 text

Style programmatique via APi CSS Impression des Nodes avec PrinterJob

Slide 70

Slide 70 text

Nouveaux composants DatePicker, TreeTable, TextFlow*

Slide 71

Slide 71 text

Nouveaux composants DatePicker, TreeTable, TextFlow* *Texte riche et bidirectionnel

Slide 72

Slide 72 text

Nouveaux composants DatePicker, TreeTable, TextFlow* Introduction du Rendu 3D

Slide 73

Slide 73 text

Sous-ensemble de FX inclus dans Java SE Embedded Java FX sur le Raspberry Pi !

Slide 74

Slide 74 text

Sous-ensemble de FX inclus dans Java SE Embedded Java FX sur le Raspberry Pi ! mais sans WebView ni support multimédia...

Slide 75

Slide 75 text

Autour de Java FX 1 2 3 4 5 6 7 8

Slide 76

Slide 76 text

Un outil Standard de construction d’ihm en Visuel avec SceneBuilder

Slide 77

Slide 77 text

source: javacodegeeks.com

Slide 78

Slide 78 text

Support des IDE (en ordre alphabétique :p) Eclipse via le plugin e(fx)clipse (3.8, 4.3+)

Slide 79

Slide 79 text

Support des IDE (en ordre alphabétique :p) Eclipse via le plugin e(fx)clipse (3.8, 4.3+) IntelliJ en natif (depuis la 12.1)

Slide 80

Slide 80 text

Support des IDE (en ordre alphabétique :p) Eclipse via le plugin e(fx)clipse (3.8, 4.3+) IntelliJ en natif (depuis la 12.1) Netbeans en natif (depuis la 7.1.1)

Slide 81

Slide 81 text

Des Librairies tierces commencent à apparaître ControlsFX, JideFX, etc...

Slide 82

Slide 82 text

Une bonne Source d’information hebdomadaire (en anglais) : fxexperience.com

Slide 83

Slide 83 text

The End !

Slide 84

Slide 84 text

@SimonBasle Questions ?

Slide 85

Slide 85 text

Qu’est ce que Java FX 2? Graphismes riches Composants Propriétés et Bindings Multitouch Parallélisme et Multithreading Nouveautés de Java FX 8 Autour de Java FX @SimonBasle Questions ?