Alphorm.com Formation JavaFX

Présentation
Formation JavaFX 8
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
Forum : http://www.alphorm.com/forum
Présentation
Fabien Brissonneau
Consultant, concepteur et formateur
Objets Logiciels

Plan
• Présentation de votre formateur
• Qu’est ce que c’est JavaFX?
• Présentation de votre formation
• Le plan de la formation
• Publics concernés
• Prérequis de la formation

Présentation du formateur
• Fabien Brissonneau
• Email : fabien.brissonneau@gmail.com
• Consultant Concepteur et Formateur
• Missions d’architecture, de conception , de réalisation logicielles
• Fondateur de eiXa6
• Actuellement en mission sur un projet de gestion
• Actuellement en mission sur un projet de gestion
• Mes références :
Mon profil Viadeo : http://fr.viadeo.com/fr/profile/fabien.brissonneau
Mon profil LinkedIn : http://fr.linkedin.com/pub/fabien-brissonneau/65/902/92a/

Mes formations sur alphorm

Qu’est-ce que JavaFX?
• Une bibliothèque de classes Java pour construire une IHM
• Une solution pour des clients riches
• La couche graphique officielle de Java depuis la version 8

Plan de la formation
• Les outils et la mise en œuvre
• Les composants d’interface
graphique
• Architecture de l’application
• Concurrence et interopérabilité
• Effets et animations
• Packaging et déploiement
• Graphismes

Publics concernés
• Cette formation s’adresse à des développeurs
• Connaître Java est nécessaire, ne pas être dérouté par sa syntaxe
• Nous ne reviendrons pas sur les concepts du langage

Prérequis de la formation
• Savoir lire du code Java
• Avoir des rudiments sur les interfaces graphiques
• Et … du courage comme toujours !

Les outils nécessaires
• Le SDK JavaFX est compris dans la livraison du JDK Java Standard
• L’outil Netbeans est utilisé en interface de développement
• L’outil SceneBuilder sera utilisé pour les constructions graphiques
• La présentation sera faite sous Windows 8

Les autres formations dév sur Alphorm

Are you ready ? ☺

Présentation générale
Les outils et la mise en œuvre
Fabien Brissonneau
Objets Logiciels
Présentation générale

Plan
• Démarrer avec JavaFX
• Applications graphiques clients riches
• Le client en Java
• Les APIs graphiques
• Le client riche
• Définition de JavaFX
• Le contenu de JavaFX
• Types d’applications

• Applications graphiques clientes
• Environnements d’exécution
• Environnements et outils
Démarrer avec JavaFX
• Concepts d’architecture de base
• Références

• Une application cliente est concerne essentiellement la présentation
• La logique de l’application est en grande partie sur le serveur
• La richesse du client dépend de la technologie employée
Applications graphiques clientes riches

• Le client en Java peut être
Standalone : autonome, lancée de la console ou via le bureau
Web HTML : la partie cliente n’est pas écrite en Java, exécuté sur le serveur
Applet : le Java est exécuté sur le client, utilisant Swing par exemple
Java Web Start : téléchargement et mise à jour du binaire si nécessaire
Le client en Java
Java Web Start : téléchargement et mise à jour du binaire si nécessaire

• Java AWT : apparue avec Java 1, natif
• Java Swing : apparue avec Java 2, pure Java basée sur AWT, sans
ressources
• JavaFX : mixant Java et XML
• SWT : fournie avec Eclipse, concurrent de Swing
Les APIs graphiques
• SWT : fournie avec Eclipse, concurrent de Swing

• Rich Internet Application (RIA)
• Caractéristiques similaires à une application installée
• Enrichit l’expérience HTML traditionnelle
• JavaScript/AJAX, CSS
Le client riche
• Applets, Adobe Flash, SilverLight

• Les applications JavaFX sont Java
• Elles accèdent aux APIs Java
Accès au Système
Accès aux serveurs
L’aspect des applications est modifié grâce aux CSS, séparant apparence
Définition de JavaFX
• L’aspect des applications est modifié grâce aux CSS, séparant apparence
et fonctions
• L’usage du XML pour décrire l’ihm favorise le travail du graphiste
• Le FXML peut être créé via SceneBuilder

• A partir de JavaFX 2.2, les bibliothèques sont intégrées dans le JDK, Java
natif
• FXML est un dialecte XML
• Interactions avec JavaScript dans WebView
• Interactions avec Swing
Le contenu de JavaFX
• Utilisation des CSS
• API de dessin dans un canvas
• Support du multitouch
• Hautement performant pour le rendu
• Déploiement facilité grâce à un packaging natif

• Typiquement applications utilisant les réseaux
• Applications multiplateformes
• Déploiement en tant que
Standalone : le package est lancé comme une application Java classique
Types d’applications
WebStart : à travers un lien Web (ou raccourci sur le bureau), téléchargement
et mise à jour si nécessaire
Encapsulée : dans une page Web
Package auto-contenant : un package avec le runtime Java et JavaFX

Ce qu’on a couvert
• Démarrer avec JavaFX
• Applications graphiques clients riches
• Le client en Java
• Les APIs graphiques
• Le client riche
• Le contenu de JavaFX

Environnements
Fabien Brissonneau
Objets Logiciels
Environnements
d’exécution

Plan
• Le packaging
• Mode d’exécution
• Les composants
• Paramétrer les générations

• Lancement comme une application de bureau
Ligne de commande ou double-clic
• Lancement à partir d’un navigateur web
Téléchargement et exécution
Visualisation dans une page web
Environnements d’exécution
• Visualisation dans une page web
Démarrage au chargement de la page
• Le mode d’exécution impacte le packaging

• Par défaut, les produits de packaging sont
Le fichier JAR
Le fichier JNLP
Un fichier HTML référençant l’application
• Pour mimer des applications natives, on peut encapsuler l’application et
Le packaging
• Pour mimer des applications natives, on peut encapsuler l’application et
le JRE
Distribuées comme exe, msi, dmg, pkg, …

• Programme standalone : invocation par java –jar ou double-clic
• Avec Java Web Start : l’application est téléchargée d’un serveur distant
• Le code Java est encapsulé dans une page Web
• Dans un package auto-contenant : comme une application native
Mode d’exécution

• Le preloader : application JavaFX qui reçoit les notifications concernant
le chargement et l’initialisation (tous les modes)
• Le support des raccourcis : pour les packages auto-contenant et les
applications déployées par le web
• Les applications lancées via le web fonctionnent dans une « sandbox »
Les composants
• Auto-update : vérification automatique des mises à jour (webstart et
dans une page web)

• Modifier le fichier build.xml
• Installer éventuellement le générateur d’installeur
Inno Setup 5, pour un exe
Wix, pour un msi
Paramétrer les générations

• Le packaging
• Mode d’exécution
• Les composants
• Paramétrer les générations

Outils de
Fabien Brissonneau
Objets Logiciels
Outils de
développement

Plan
• JavaFX intégré dans le JDK
• JavaFX SceneBuilder
• Netbeans
• JavaPackager
• ScenicView

JavaFX intégré dans le JDK
• Depuis le JDK 7, JavaFX est intégré dans la livraison JSE
• Pour des versions antérieures, les livraisons séparées de JavaFX sont
dsponibles
• Les exemples et démos de JavaFX sont accessibles dans les exemples et
démos du JDK

JavaFX SceneBuilder
• Permet la construction interactive de l’ihm

L’interface NetBeans
• Outil standard Java
• Intégration possible avec SceneBuilder

JavaPackager
• Permet d’encapsuler une application java dans un
exe. Inclus dans le jdk depuis 7
• Possibilité de comléter le packaging avec InnoSetup

ScenicView
• Site fxexperience.com
• Détaille runtime la composition du graphe

• JavaFX intégré dans le JDK
• JavaFX SceneBuilder
• Netbeans
• JavaPackager
• ScenicView

Concepts
Fabien Brissonneau
Objets Logiciels
Concepts
d’architecture de base

Plan
• JavaFX API et Scene Graph
• Prism
• Glass
• Quantum Toolkit

Concepts d’architecture de base
• Un empilement de plusieurs couches

JavaFX API et Scene Graph
• Scene Graph est une arborescence de nœuds qui représente les
éléments visuels
• Chaque nœud possède : id, classe de style, volume, et éventuellement
effets, opacité, transformations, …
• Les primitives graphiques sont des nœuds
• La manipulation du graphe peut se faire via l’API ou bien de façon
déclarative

Prism
• Responsable du rendu graphique
• Basé sur DirectX, OpenGL, .. Selon les plateformes
• Abstraction sous la forme de Graphics
• Gère le clipping, les régions à rafraichir, et les optimisations
• Supporte les polices de caractères

Glass
• Glass Windowing Toolkit
• Gère la queue d’événements, les événements en entrée, la surface de
dessin
• Partie dépendante de la plateforme
• Tourne dans le même thread que l’application JavaFX
• Tourne dans le même thread que l’application JavaFX
• Basée sur Win32, Cocoa, GTK, … selon les plateformes
• A intervalle régulier, le graphe est synchronisé avec le rendu
• Les CSS sont alors appliquées

Quantum Toolkit
• Sert d’interface entre les APIs JavaFX et Prism et Glass
• Gère les threads rendu/événements
• Le graphe de nœuds peut être créé en dehors du thread de l’application
• Mais l’accès au graphe doit se faire du même thread que celui de
l’application une fois accroché aux Stage, Scene ou Window
l’application une fois accroché aux Stage, Scene ou Window

• JavaFX API et Scene Graph
• Prism
• Glass
• Quantum Toolkit

Références
Fabien Brissonneau
Objets Logiciels
Références

Plan
• Le site Oracle et NetBeans
• Le projet OpenJFX
• La communauté JavaFX
• Un site innovant : fxexperience.com
• Autres et divers

• La documentation
http://download.java.net/jdk8/jfxdocs/index.html
http://download.java.net/jdk8/jfxdocs/javafx/scene/doc-files/cssref.html
• Le JDK, incluant JavaFX
Netbeans pour une interface de développement intégrée
Le site Oracle et Netbeans
• Netbeans pour une interface de développement intégrée

• Sous-projet de OpenJDK
http://openjdk.java.net/projects/openjfx/
Le projet OpenJFX

• https://www.java.net/community/javafx
La communauté JavaFX

• http://fxexperience.com/
• Blog de développeurs de JavaFX
• Site de référence de ScenicView
Un site innovant

• JFXtras.org : contrôles complémentaires
• DataFX : abstraction pour l’accès aux données (www.javafxdata.org)
• OpenDolphin : un framework MVC (http://open-
dolphin.org/dolphin_website/Home.html)
Autres et divers

• Le site Oracle et NetBeans
• Le projet OpenJFX
• La communauté JavaFX
• Un site innovant : fxexperience.com
• Autres et divers

Les contrôles
Les composants d’interface
Fabien Brissonneau
Objets Logiciels
Les contrôles

Plan
• Les contrôles
• Les boutons
• Les textes
• Les box
• Les listes

Contrôles UI
• Construire un nœud dans le graphe
• Portable sur les plateformes
• Adaptables via les CSS

Les boutons
• La racine est un layout

Les textes
• Fixes ou éditables, mot de passe

Les box
• Checkbox, Choicebox

Les listes
• ListView typée de son contenu

Les contrôles
• Label, Button, Radio button, Toggle button
• Checkbox, Choicebox,
• Text Field, Password Field,
• Scroll Bar, Scroll Pane,
• ListView, TableView, Tree TableView, ComboBox,
• ListView, TableView, Tree TableView, ComboBox,
• Separator, Slider, ProgressBar, Hyperlink, Tooltip,
• HTML Editor, Titled Pane, Accordion, Menu,
• Color Picker, Date Picker,
• Pagination Control, File Chooser

• Les contrôles
• Les boutons
• Les textes
• Les box
• Les listes

Les layouts
Fabien Brissonneau
Objets Logiciels
Les layouts

Plan
• BorderPane connaît 5 positions
• HBox met tout à l’horizontal
• VBox met tout à la verticale
• StackPane met tout en pile
• GridPane permet de construire une grille
• FlowPane met tout à la suite
• TilePane présente des cellules uniformes
• AnchorPane ancre les contrôles

Les layouts
• Ce sont des conteneurs intermédiaires
• Chaque layout a sa propre politique d’arrangement des contrôles fils
• Des propriétés supplémentaires peuvent être positionnées
Espacements
Police
Couleur
Contraintes
…

BorderPane

HBox

VBox
• Avec quelques propriétés supplémentaires …

StackPane

GridPane

FlowPane

TilePane
• Similaire au FlowPane, mais tailles identiques

AnchorPane

• BorderPane connaît 5 positions
• HBox met tout à l’horizontal
• VBox met tout à la verticale
• StackPane met tout en pile
• GridPane permet de construire une grille
• FlowPane met tout à la suite
• TilePane présente des cellules uniformes
• AnchorPane ancre les contrôles

Les charts
Fabien Brissonneau
Objets Logiciels
Les charts

Plan
• Pie Chart
• Line Chart
• Area Chart
• Bubble Chart
• Scatter Chart
• Bar Chart

Pie Chart

Line Chart

Area Chart

Bubble Chart

Scatter Chart

Bar Chart

• Pie Chart
• Line Chart
• Area Chart
• Bubble Chart
• Scatter Chart
• Bar Chart

Habillage avec CSS
Fabien Brissonneau
Objets Logiciels
Habillage avec CSS

Plan
• Habillage
• Les CSS
• Créer ses propres feuilles
• Les sélecteurs
• Modifier les axes
• Les couleurs dans les séries
• Et autres…
• Les règles et propriétés
• Appliquer un style à un contrôle
• Appliquer le style dans le code
• Habiller les graphiques

Habillage avec CSS
• Cascading Style Sheet
• L’habillage concerne
Les contrôles
Les graphiques

• Similaire aux CSS en HTML
• Basées sur la version 2.1 W3C CSS
• Avec des additions de la version 3
• Des extensions spécifiques à JavaFX
Les CSS
• Par défaut : modena.css

• Utiliser l’extension .css
• Dans le même répertoire que la classe principale de l’application JavaFX
Créer ses propres feuilles

• Les sélecteurs
Les classes de styles sont les noms des classes
• .button
Un style est associé à un id (setId(…) sur le noeud)
• #mon-bouton
Le sélecteurs dans les CSS
• #mon-bouton
Les pseudo-classes pour un état donné
• .radio-button: focused

• Les noms de règles sont les noms de propriétés
• -fx-background-color : #333333;
• On peut reprendre dans un nœud descendant une propriété d’un nœud
ascendant
• Changer les propriétés de la classe .root change toute la scene
Les règles et propriétés
• Changer les propriétés de la classe .root change toute la scene

Appliquer un style à un contrôle

Appliquer un style dans le code

• Tous les charts ont des propriété communes :
.chart : la globalité
.chart-content : le contenu graphique
.chart-title : le titre
.chart-legend : la légende
Habiller les graphiques
.chart-legend : la légende

Modifier les axes

• Jusqu’à 8 couleurs de prédéfinies
Les couleurs des séries

• Les symboles des séries
.chart-symbol
• Les couleurs peuvent être des images et des gradients
• …
Et autres …

• Habillage
• Les CSS
• Créer ses propres feuilles
• Les sélecteurs
• Appliquer le style dans le
code
• Habiller les graphiques
• Les sélecteurs
• Les règles et propriétés
• Appliquer un style à un
contrôle
• Les couleurs dans les séries

IHM avec FXML
Architecture de l’application
Fabien Brissonneau
Objets Logiciels
IHM avec FXML

Plan
• Le langage FXML
• Le lien entre FXML et Java
• Les contrôles en FXML
• La gestion des événements
• L’usage de CSS avec FXML
• Utiliser SceneBuilder

• Langage basé sur XML
• Permet la description de l’interface indépendamment du code Java
Le langage FXML

• La scène est construite à partir du XML
Le lien entre Java et FXML

• Chaque balise est un contrôle …
Les contrôles en FXML

• Gérer les événements avec du code Java
La gestion des événements

• Est possible avec un autre langage compatible JSR223
La gestion des événements

• Référencer une CSS dans le fichier FXML
• Les références se font :
Sur la classe de style
Sur les ids des balises
L’usage des CSS avec FXML

CSS et FXML

• Un outil pour modifier la présentation
Utiliser SceneBuilder

• Le langage FXML
• Le lien entre FXML et Java
• Les contrôles en FXML
• L’usage de CSS avec FXML
• Utiliser SceneBuilder

L’arbre Scene Graph
Fabien Brissonneau
Objets Logiciels
L’arbre Scene Graph

Plan
• API Scene Graph
• L’arborescence essentielle
• Les principaux packages
• Les principales classes
• Le modèle

L’API Scene Graph
• Sert à construire une interface graphique
• Avec des effets visuels
• Un graphe de scène est assez commun dans les applications graphiques
• Le développeur construite ce graphe et laisse le système dessiner (quels
objets, les zones à peindre, quels rendus)
objets, les zones à peindre, quels rendus)
• Le graphe contient des nœuds de branches et des nœuds de feuilles

• Accrocher une racine à la scène
L’arborescence essentielle

• Package javafx.scene : Scene, Group,…
• Package javafx.scene.control : Button,…
• Package javafx.scene.layout : StackPane,…
• Package javafx.scene.shape : Rectangle,…
Les principaux packages
• Package javafx.scene.paint : Color
• Dans le premier package, on trouve :
Node
Parent
Scene

• Node : un nœud dans le graphe
• Shape : forme géométrique
• Canvas : zone de tracé libre
• ImageView : pour afficher des images
Les principales classes
• Parent : contient des nœuds
Group : pour appliquer des effets à plusieurs enfants
Region : pour appliquer des CSS et positionner les enfants
WebView : pour gérer un WebEngine

Modèle javafx

• API Scene Graph
• L’arborescence essentielle
• Les principaux packages
• Les principales classes
• Le modèle

Propriétés
Fabien Brissonneau
Objets Logiciels
Propriétés
et binding

Plan
• Les collections observables
• Les propriétés
• Les binding

• Répondre aux changements dynamiques des données
• Les collections sont beaucoup utilisées pour les données
• Un modèle par notification est très simple à utiliser
• Les changements des données vont générer des notifications que nous
observerons
Utiliser des collections observables
observerons

• Des interfaces
ObservableList, ObservableMap
ListChangeListener, MapChangeListener
• Des classes
FXCollections : classe statique
Quid des collections observables
FXCollections : classe statique
List/MapChangeListener.Change : une modification dans la collection

• Créer une liste observable
Exemple de collection observable
• S’abonner à la notification

• Une façon d’accéder aux données
• Les propriétés sont observables
Les propriétés

Abonnement à une propriété

• Des classes disponibles pour les primitives
Le modèle des propriétés

• Le changement dans un contrôle est répercuté dans l’autre
Les propriétés des contrôles

• Les collections observables
• Les propriétés
• Les binding

Composants
Fabien Brissonneau
Objets Logiciels
Composants
personnalisés

Plan
• Décrire le composant dans un fichier FXML
• Coder le Java du contrôleur du composant
• Utiliser le nouveau composant

• Ici un bouton et un label
Décrire le composant FXML

• Le contrôleur charge le fichier FXML
Coder le contrôleur

• Utilisation du composant Perso, rien de spécial
Utiliser le composant

• Décrire le composant dans un fichier FXML
• Coder le Java du contrôleur du composant
• Utiliser le nouveau composant

Applications JavaFX et
Fabien Brissonneau
Objets Logiciels
Applications JavaFX et
HTML5

Plan
• Un navigateur encapsulé dans JavaFX
• Supporte CSS, JavaScript, DOM, HTML5
• Interactions entre JavaFX et JavaScript

• WebView associé à WebEngine
Un navigateur encapsulé
• Chargement du fichier HTML

Supporte HTML, Javascript…

• Exécution du JavaScript à partir de JavaFX
Interaction JavaFX et Javascript
• Et l’inverse

• Un navigateur encapsulé dans JavaFX
• Supporte CSS, JavaScript, DOM, HTML5
• Interactions entre JavaFX et JavaScript

Le multithread en
Concurrence et
interopérabilité
Fabien Brissonneau
Objets Logiciels
Le multithread en
JavaFX

Plan
• Modèle de thread
• Exécution de tâches de fond
• Intégration de JavaFX et Swing

• Un grand nombre de threads
• Un thread remarquable : JavaFX Application
• Les gestionnaires d’événement sont exécutés dans ce dernier thread
• La classe javafx.application.Application
Les threads dans l’application
Méthodes static launch() [ 2 versions]
Méthodes init(), start(), stop() : cycle de vie
• Thread launcher : init()
• Thread JavaFX Application : start() et stop()

• Les événements sont gérés dans ce thread
• Toutes les manipulations de scène (active) doivent être réalisées dans ce
thread
• C’est le même thread que le code natif (Glass Windowing Toolkit)
• Notons le thread du rendu graphique (Prism)
JavaFX Application Thread
• Notons le thread du rendu graphique (Prism)
Synchronisé par des « pulse » (60/s)
• Notons aussi un thread multimédia

• De longs traitements dans le gestionnaire d’événement bloque le
thread UI
• Déléguer les traitements
Utiliser Runnable
Utiliser java.util.concurrent
Méthodes longues …
Utiliser java.util.concurrent
Utiliser javafx.concurrent

Swing et JavaFX
• Composant Swing dans JavaFX
Classe javafx.embed.swing.SwingNode
Permet de connecter un composant simple Swing
• Une scène JavaFX incluse dans une application Swing
Problématique de thread :
• Problématique de thread :
Les manipulations de scène JavaFX se font dans le thread JavaFX Application
Pour Swing, dans Swing EDT
• De JavaFX vers Swing : EventQueue.invokeLater() et dans le sens inverse
: Platform.runLater()

• Modèle de thread
• Exécution de tâches de fond
• Intégration de JavaFX et Swing

Exécution de tâches de
Concurrence et
interopérabilité
Fabien Brissonneau
Objets Logiciels
Exécution de tâches de
fond

Plan
• Le framework javafx.concurrent
• Une interface : Worker
• 3 classes abstraites l’implémentant :
Task<V>
Service<V>
ScheduledService<V>
• Le worker est une unité de travail, dont l’état interne
est inspectable à partir du thread de l’application

• Représente la tâche
L’interface Worker

• READY : état initial
• SCHEDULED
• RUNNING
• SUCCEEDED : état final
Etats du Worker
• CANCELLED : état final
• FAILED : état final
• La méthode cancel() atteint CANCELLED si le worker n’était pas dans un
état final

• Task<V> : une tâche qui fonctionne une fois
Les propriétés supportent les abonnements
Une ihm peut représenter le degré d’avancement de la tâche
• Service<V> : relance indéfiniment une tâche
ScheduledService<V> : dérive de la précédente, contrôle la façon dont
Les classes d’implémentation
• ScheduledService<V> : dérive de la précédente, contrôle la façon dont
la tâche est répétée

• Créer une tâche
• S’abonner à l’avancement
Task<V>
• S’abonner à l’avancement
• Démarrer la tâche

• Une interface : Worker
• 3 classes abstraites l’implémentant :
Task<V>
Service<V>
ScheduledService<V>
ScheduledService<V>
• Le worker est une unité de travail, dont l’état interne est inspectable du
thread de l’application

Intégration JavaFX et
Concurrence et
interopérabilité
Fabien Brissonneau
Objets Logiciels
Intégration JavaFX et
Swing

Plan
• JavaFX dans Swing
• Swing dans JavaFX

• JFXPanel est une sous-classe de Jcomponent
• Exécution dans le thread JavaFX Application
JavaFX dans Swing

• SwingNode est un nœud spécialisé
• Valable pour tous les composants légers
Swing dans JavaFX

• De JavaFX vers Swing
EventQueue.invokeLater(…)
SwingUtilities.invokeLater(…)
• De Swing vers JavaFX
Platform.runLater(…)
Appels de l’un à l’autre
Platform.runLater(…)

• JavaFX dans Swing
• Swing dans JavaFX

L’API de gestion
Graphisme
Fabien Brissonneau
Objets Logiciels
L’API de gestion
d’images

Plan
• Image Ops API, package javafx.scene.image
• Lire des pixels d’une image
• Ecrire des pixels d’une image
• Le contexte graphique
• Les instantanés de Scene

• Image : une image graphique, vous pouvez lire des pixels
• WritableImage : sous-classe de Image, vous pouvez écrire des pixels
• PixelReader, PixelWriter : interfaces, pour lire et écrire des pixels
• PixelFormat : le format des données
Image Ops API
• WritablePixelFormat : sous-classe de PixelFormat

• Chargement d’une image et lecture de la couleur d’un point
Lire des pixels d’une image

• Récupération de la couleur et modification
Ecrire des pixels d’une image

• Contexte graphique
Ecrire en bloc

• La classe Scene propose la création d’instantanés
Création d’instantanés

• Image Ops API, package javafx.scene.image
• Lire des pixels d’une image
• Ecrire des pixels d’une image
• Le contexte graphique
• Les instantanés de Scene

Dessiner avec Canvas
Graphisme
Fabien Brissonneau
Objets Logiciels
Dessiner avec Canvas

Plan
• Accéder au contexte
• Exemple de tracés
• Les gradients
• Les ombres

• Dans javafx.scene.canvas
Canvas
GraphicsContext
• Consiste en général à
Créer un Canvas
JavaFX Canvas API
Créer un Canvas
Récupérer son GraphicsContext
Appeler des opérations graphiques

• Code type pour accéder au contexte graphique
Accéder au contexte

• Avec des formes prédéfinies
Exemple de tracés

• Avec un chemin
Exemples de tracés

• Gradient linéaire ou radial
Gradients

Ombres

• Les événements peuvent être récupérés sur le Canvas
Support des événements

• Accéder au contexte
• Exemple de tracés
• Les gradients
• Les ombres

Dessiner en 3D
Graphisme
Fabien Brissonneau
Objets Logiciels
Dessiner en 3D

Plan
• La classe Shape3D
• La caméra
• L’éclairage
• La matière

• La classe javafx.scene.shape.Shape3D est dérivée en :
MeshView
Box
Cylinder
Sphere
La classe Shape3D
Sphere
• Pour faire ses propres formes :
Mesh
TriangleMesh

• La caméra est un nœud elle-même
• La classe PerspectiveCamera
La caméra

• De la classe javafx.scene.LightBase
AmbientLight
PointLight
L’éclairage

• La classe javafx.scene.paint.PhongMaterial
La matière

• La classe Shape3D
• La caméra
• L’éclairage
• La matière

Création d’effets
Effets, animations et multimédia
Fabien Brissonneau
Objets Logiciels
Création d’effets
visuels

Plan
• Contenu de javafx.scene.effect
• Bending : recouvrement
• Bloom : lueur
• Blur : brouillage
• Drop Shadow : ombre portée
• Inner Shadow : ombre à l’intérieur
• Reflection : reflet
• Lighting : illumination
• Perspective
• Chaîner les effets

• Contient toutes les classes nécessaires à la réalisation des effets
• Les énumérés
paramètres
Le package javafx.scene.effect

• La gestion du recouvrement
Bending

• Luminescence, avec un seuil
Par défaut 0.3
Jusqu’à 1.0, qui annule l’effet
Bloom

• Flouté avec BoxBlur, MotionBlur, GaussianBlur
Blur

• Ombre portée
paramétrée en couleur et décalage
Drop Shadow

• Ombre dans l’objet lui-même
Inner Shadow
Impossible d'afficher l'image. Votre ordinateur manque peut-être de mémoire pour ouvrir l'image ou l'image est endommagée. Redémarrez l'ordinateur, puis ouvrez à nouveau le fichier. Si le x rouge est toujours affiché, vous devrez peut-être supprimer l'image avant de la réinsérer.

• Le reflet
Reflection

• Effet d’éclairage
Lighting

• Dans cet exemple, appliqué à un groupe
Perspective

Chaîner les effets

• Contenu de javafx.scene.effect
• Bending : recouvrement
• Bloom : lueur
• Blur : brouillage
• Inner Shadow : ombre à l’intérieur
• Reflection : reflet
• Lighting : illumination
• Perspective
• Chaîner les effets

Les transformations
Fabien Brissonneau
Objets Logiciels
Les transformations

Plan
• Définition et généralités
• Translation
• Rotation
• Mise à l’échelle
• Déformation sur un axe (shearing)

• Package javafx.scene.transform
• Une transformation change l’emplacement d’un objet
• Types de transformations :
Translation : translation
Rotation : rotation
Définition et généralités
Rotation : rotation
Scaling : mise à l’échelle
Shearing : un axe « penche »
• Applicables sur un groupe
• Applicables sur 3 coordonnées
3 ème coordonnée optionnelle (alors 2D ! )

• Déplacement en x, y et z
Translation

• Avec les méthodes sur l’objet ou bien la création d’un objet Rotate
Rotation

• Une déformation par échelle
Scaling

• Déformation sur un axe
Shearing

• Définition et généralités
• Translation
• Rotation
• Mise à l’échelle
• Déformation sur un axe (shearing)

Les transitions
Fabien Brissonneau
Objets Logiciels
Les transitions
et animations

Plan
• Transitions
• Animations
• Interpolations

• Fade Transition
Les transitions

• Fade Transition : disparition progressive
• Path Transition : déplacement le long d’un chemin
• Parallel Transition : exécution simultanée de plusieurs transitions
• Sequential Transition : exécution séquentielle de plusieurs transitions
Les transitions

Basées sur une ligne de temps
Les propriétés sont modifiées en fonction du temps
Il faut fournir les états de la scène à certains moments
Les animations
Des triggers peuvent être ajoutés, avec levée d’événements

• Des interpolateurs linéaires par défaut sont utilisés
• On peut changer d’interpolateur
Les interpolateurs
• Ou même créer sa propre classe
Hériter de Interpolator

• Transitions
• Animations
• Interpolations

Audios ou vidéos
Fabien Brissonneau
Objets Logiciels
Audios ou vidéos

Plan
• Les effets sonores
• Les différents types de fichiers
• Utiliser MediaPlayer
• Mettre en œuvre des vidéos

Les effets sonores
• Dans le package javafx.scene.media
• La classe AudioClip permet de référencer le fichier son
Le constructeur charge le fichier (bloque le thread courant)
La méthode play() joue le son
Paramétrage ou pas du volume
• Paramétrage ou pas du volume
• Paramètres volume, balance, vitesse, priorité…

Les différents types de fichiers
• JavaFX supporte 4 formats audio
MP3 (audio/mpeg), AIFF (audio/x-aiff), WAV (audio/x-wav), AAC (audio/aac)
• JavaFX support 3 formats vidéo
FXM : video/x-javafx (format natif, VP6 avec audio MP3)
FLV : video/x-flv (Flash Video, mais uniquement la variante VP6+MP3)
FLV : video/x-flv (Flash Video, mais uniquement la variante VP6+MP3)
MP4 : video/mp4 (H264 video + AAC audio)

La classe MediaPlayer
• Dans le package javafx.scene.media
• Il y a 3 classes essentielles : Media, MediaPlayer et MediaView
• Media encapsule la ressource audio ou vidéo
Taille, durée, erreurs
• MediaPlayer propose des méthodes pour agir sur le média
• MediaView est le nœud rattaché au graphe de la scène

Mise en œuvre de vidéos
• Créer un Media, le MediaPlayer, puis le MediaView
• Lier des contrôles aux propriétés de la vidéo

• Les effets sonores
• Les différents types de fichiers
• Utiliser MediaPlayer
• Mettre en œuvre des vidéos

Démarrage et
Packaging et déploiement
Fabien Brissonneau
Objets Logiciels
Démarrage et
exécution

Plan
• Les différences de lancement
• La communication avec la page Web
• La dépendance à la plateforme

Environnements d’exécution
• Lancement comme une application de bureau
L’utilisateur utilise une ligne de commande ou double-clique sur un JAR
• Lancement par un navigateur
L’utilisateur clique sur un lien pour télécharger et exécuter
Lancement lors du chargement d’une page web
• Lancement lors du chargement d’une page web
L’application est exécutée lorsque la page est chargée
• Lancement comme application auto-contenante
L’application contient le JRE, elle se présente comme une application native

Les différences de lancement
• Le support du preloader peut varier
Par exemple, pas d’événements de chargement pour les applications
standalone
• Les paramètres de proxy sont soit ceux du navigateur soit ceux du
système
• Les raccourcis sur le bureau ne sont possibles que pour les applications
standalone
• Les applications lancées via un navigateur ne peuvent accéder à
certaines ressources client
• La mise à jour automatique est pour les applications accédées vie un
navigateur

La communication avec la page Web
• La classe JavaFX HostServices
• Permet d’accéder au contexte web
Exécution de javascript par exemple
• Les applets peuvent elles aussi accéder au contexte
• Le contexte web n’existe pas (null) pour les autres types d’applications

La dépendance à la plateforme
• L’installation préalable du JRE est nécessaire
Un utilisateur peut ne pas avoir les permissions
Une ancienne version du JRE est nécessaire
L ’application nécessite une version très précise
Des frameworks externes sont nécessaires
Des frameworks externes sont nécessaires
• Une application auto-contenue est nécessaire

• Les différences de lancement
• La communication avec la page Web
• La dépendance à la plateforme

Internationalisation
Fabien Brissonneau
Objets Logiciels
Internationalisation

Plan
• Internationalisation du code Java
• Internationalisation du FXML
• Internationalisation avec SceneBuilder

Internationalisation du code Java
• La classe Locale représente une culture/une langue
• La classe ResourceBundle
Sous-classe PropertyResourceBundle
• Associée à un fichier de propriétés
Sous-classe ListResourceBundle

Internationalisation du FXML
• Les clés des propriétés sont repérées par un %
• Puis associer le fichier avec un bundle

Internationalisation avec SceneBuilder
• L’outil permet de remplacer les chaînes de caractères une clé

• Internationalisation du code Java
• Internationalisation du FXML
• Internationalisation avec SceneBuilder

Le packaging
Fabien Brissonneau
Objets Logiciels
Le packaging

Plan
• Rôle des outils de packaging
• Le packaging par défaut
• Les outils de packaging
• Le packaging natif
• La sécurité les exécutions « web »
• La signature des jar

Rôle des outils de packaging
• Un outil de packaging génère ce qu’il faut pour l’utilisateur :
• S’assurer que le JRE requis est installé
• Télécharger les dépendances et proposer de les installer
• Fournir un visuel pour l’utilisateur lors du chargement
• Fournir des messages d’erreur clairs

Le packaging par défaut
• Dans un répertoire prêt pour la distribution :
Un jar exécutable
Les jar supplémentaires
Un descripteur de déploiement dans un fichier JNLP
Un fichier HTML avec un code JavaScript pour lancer le jar d’un page web
Un fichier HTML avec un code JavaScript pour lancer le jar d’un page web

Les outils de packaging
• Le mode recommandé est d’utiliser les tâches Ant
Jar ant-javafx.jar
• NetBeans utilise les tâches Ant
• Un outil en ligne de commande
L’outil javapackager
• Les CSS peuvent être compilées

Le packaging natif
• Configurer le projet pour générer en natif
• Choisir la génération à partir du menu contextuel (NetBeans)
Image avec un exe lanceur
Nécessite l’installation de Inno Setup 5 pour un exe auto-exécutable
Nécessite l’installation de Wix 3 pour un msi
…

La sécurité pour les exécutions « web »
• Applications webstart, dans un navigateur…
• Nécessite un JRE au niveau (proposition de téléchargement)
• Nécessite l’autorisation d’exécution

La signature des jar
• Méthode traditionnelle en Java ou bien avec les outils de packaging
• Nécessite un certificat d’un tiers, les jar auto-signés sont interdits
• Vous pouvez configurer le poste pour autoriser certaines URL

• Rôle des outils de packaging
• Le packaging par défaut
• Les outils de packaging
• Le packaging natif
• La sécurité les exécutions « web »
• La signature des jar

Conclusion
Formation JavaFX 8
Conclusion
Fabien Brissonneau
Objets Logiciels

Plan
• Les outils et la mise en œuvre
• Les composants d’interface
graphique
• Architecture de l’application
• Effets et animations
• Packaging et déploiement
• Graphismes

Pour continuer …
• La formation Java fondamentaux …
• La formation Java avancée …
• La formation Android …

Merci d’avoir suivi cette formation,
rendez-vous pour la suite !

Alphorm.com Formation JavaFX

Contenu connexe

Tendances (20)

En vedette (20)

Similaire à Alphorm.com Formation JavaFX (20)

Plus de Alphorm (20)

Alphorm.com Formation JavaFX