Présentation
Formation JavaFX 8
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com...
Plan
• Présentation de votre formateur
• Qu’est ce que c’est JavaFX?
• Présentation de votre formation
• Le plan de la for...
Présentation du formateur
• Fabien Brissonneau
• Email : fabien.brissonneau@gmail.com
• Consultant Concepteur et Formateur...
Mes formations sur alphorm
Formation JavaFX alphorm.com™©
Qu’est-ce que JavaFX?
• Une bibliothèque de classes Java pour construire une IHM
• Une solution pour des clients riches
• ...
Plan de la formation
• Les outils et la mise en œuvre
• Les composants d’interface
graphique
• Architecture de l’applicati...
Publics concernés
• Cette formation s’adresse à des développeurs
• Connaître Java est nécessaire, ne pas être dérouté par ...
Prérequis de la formation
• Savoir lire du code Java
• Avoir des rudiments sur les interfaces graphiques
• Et … du courage...
Les outils nécessaires
• Le SDK JavaFX est compris dans la livraison du JDK Java Standard
• L’outil Netbeans est utilisé e...
Les autres formations dév sur Alphorm
Formation JavaFX alphorm.com™©
Are you ready ? ☺
Formation JavaFX alphorm.com™©
Présentation générale
Les outils et la mise en œuvre
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : h...
Plan
• Démarrer avec JavaFX
• Applications graphiques clients riches
• Le client en Java
• Les APIs graphiques
Formation J...
• Applications graphiques clientes
• Définition de JavaFX
• Environnements d’exécution
• Environnements et outils
Démarrer...
• Une application cliente est concerne essentiellement la présentation
• La logique de l’application est en grande partie ...
• Le client en Java peut être
Standalone : autonome, lancée de la console ou via le bureau
Web HTML : la partie cliente n’...
• Java AWT : apparue avec Java 1, natif
• Java Swing : apparue avec Java 2, pure Java basée sur AWT, sans
ressources
• Jav...
• Rich Internet Application (RIA)
• Caractéristiques similaires à une application installée
• Enrichit l’expérience HTML t...
• Les applications JavaFX sont Java
• Elles accèdent aux APIs Java
Accès au Système
Accès aux serveurs
L’aspect des applic...
• A partir de JavaFX 2.2, les bibliothèques sont intégrées dans le JDK, Java
natif
• FXML est un dialecte XML
• Interactio...
• Typiquement applications utilisant les réseaux
• Applications multiplateformes
• Déploiement en tant que
Standalone : le...
Ce qu’on a couvert
• Démarrer avec JavaFX
• Applications graphiques clients riches
• Le client en Java
• Les APIs graphiqu...
Environnements
Les outils et la mise en œuvre
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://w...
Plan
• Types d’applications
• Environnements d’exécution
• Le packaging
• Mode d’exécution
Formation JavaFX alphorm.com™©
...
• Typiquement applications utilisant les réseaux
• Applications multiplateformes
• Déploiement en tant que
Standalone : le...
• Lancement comme une application de bureau
Ligne de commande ou double-clic
• Lancement à partir d’un navigateur web
Télé...
• Par défaut, les produits de packaging sont
Le fichier JAR
Le fichier JNLP
Un fichier HTML référençant l’application
• Po...
• Programme standalone : invocation par java –jar ou double-clic
• Avec Java Web Start : l’application est téléchargée d’u...
• Le preloader : application JavaFX qui reçoit les notifications concernant
le chargement et l’initialisation (tous les mo...
• Modifier le fichier build.xml
• Installer éventuellement le générateur d’installeur
Inno Setup 5, pour un exe
Wix, pour ...
Ce qu’on a couvert
• Types d’applications
• Environnements d’exécution
• Le packaging
• Mode d’exécution
Formation JavaFX ...
Outils de
Les outils et la mise en œuvre
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.al...
Plan
• JavaFX intégré dans le JDK
• JavaFX SceneBuilder
• Netbeans
• JavaPackager
Formation JavaFX alphorm.com™©
• ScenicV...
JavaFX intégré dans le JDK
• Depuis le JDK 7, JavaFX est intégré dans la livraison JSE
• Pour des versions antérieures, le...
JavaFX SceneBuilder
• Permet la construction interactive de l’ihm
Formation JavaFX alphorm.com™©
L’interface NetBeans
• Outil standard Java
• Intégration possible avec SceneBuilder
Formation JavaFX alphorm.com™©
JavaPackager
• Permet d’encapsuler une application java dans un
exe. Inclus dans le jdk depuis 7
• Possibilité de comléter...
ScenicView
• Site fxexperience.com
• Détaille runtime la composition du graphe
Formation JavaFX alphorm.com™©
Ce qu’on a couvert
• JavaFX intégré dans le JDK
• JavaFX SceneBuilder
• Netbeans
• JavaPackager
Formation JavaFX alphorm.c...
Concepts
Les outils et la mise en œuvre
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alp...
Plan
• JavaFX API et Scene Graph
• Prism
• Glass
• Quantum Toolkit
Formation JavaFX alphorm.com™©
Concepts d’architecture de base
• Un empilement de plusieurs couches
Formation JavaFX alphorm.com™©
JavaFX API et Scene Graph
• Scene Graph est une arborescence de nœuds qui représente les
éléments visuels
• Chaque nœud po...
Prism
• Responsable du rendu graphique
• Basé sur DirectX, OpenGL, .. Selon les plateformes
• Abstraction sous la forme de...
Glass
• Glass Windowing Toolkit
• Gère la queue d’événements, les événements en entrée, la surface de
dessin
• Partie dépe...
Quantum Toolkit
• Sert d’interface entre les APIs JavaFX et Prism et Glass
• Gère les threads rendu/événements
• Le graphe...
Ce qu’on a couvert
• JavaFX API et Scene Graph
• Prism
• Glass
• Quantum Toolkit
Formation JavaFX alphorm.com™©
Références
Les outils et la mise en œuvre
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.a...
Plan
• Le site Oracle et NetBeans
• Le projet OpenJFX
• La communauté JavaFX
• Un site innovant : fxexperience.com
Formati...
• La documentation
http://download.java.net/jdk8/jfxdocs/index.html
http://download.java.net/jdk8/jfxdocs/javafx/scene/doc...
• Sous-projet de OpenJDK
http://openjdk.java.net/projects/openjfx/
Le projet OpenJFX
Formation JavaFX alphorm.com™©
• https://www.java.net/community/javafx
La communauté JavaFX
Formation JavaFX alphorm.com™©
• http://fxexperience.com/
• Blog de développeurs de JavaFX
• Site de référence de ScenicView
Un site innovant
Formation J...
• JFXtras.org : contrôles complémentaires
• DataFX : abstraction pour l’accès aux données (www.javafxdata.org)
• OpenDolph...
Ce qu’on a couvert
• Le site Oracle et NetBeans
• Le projet OpenJFX
• La communauté JavaFX
• Un site innovant : fxexperien...
Les contrôles
Les composants d’interface
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.al...
Plan
• Les contrôles
• Les boutons
• Les textes
• Les box
Formation JavaFX alphorm.com™©
• Les listes
Contrôles UI
• Construire un nœud dans le graphe
• Portable sur les plateformes
• Adaptables via les CSS
Formation JavaFX ...
Les boutons
• La racine est un layout
Formation JavaFX alphorm.com™©
Les textes
• Fixes ou éditables, mot de passe
Formation JavaFX alphorm.com™©
Les box
• Checkbox, Choicebox
Formation JavaFX alphorm.com™©
Les listes
• ListView typée de son contenu
Formation JavaFX alphorm.com™©
Les contrôles
• Label, Button, Radio button, Toggle button
• Checkbox, Choicebox,
• Text Field, Password Field,
• Scroll B...
Ce qu’on a couvert
• Les contrôles
• Les boutons
• Les textes
• Les box
Formation JavaFX alphorm.com™©
• Les listes
Les layouts
Les composants d’interface
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alph...
Plan
• BorderPane connaît 5 positions
• HBox met tout à l’horizontal
• VBox met tout à la verticale
• StackPane met tout e...
Les layouts
• Ce sont des conteneurs intermédiaires
• Chaque layout a sa propre politique d’arrangement des contrôles fils...
BorderPane
Formation JavaFX alphorm.com™©
HBox
Formation JavaFX alphorm.com™©
VBox
• Avec quelques propriétés supplémentaires …
Formation JavaFX alphorm.com™©
StackPane
Formation JavaFX alphorm.com™©
GridPane
Formation JavaFX alphorm.com™©
FlowPane
Formation JavaFX alphorm.com™©
TilePane
• Similaire au FlowPane, mais tailles identiques
Formation JavaFX alphorm.com™©
AnchorPane
Formation JavaFX alphorm.com™©
Ce qu’on a couvert
• BorderPane connaît 5 positions
• HBox met tout à l’horizontal
• VBox met tout à la verticale
• StackP...
Les charts
Les composants d’interface
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alpho...
Plan
• Pie Chart
• Line Chart
• Area Chart
• Bubble Chart
Formation JavaFX alphorm.com™©
• Scatter Chart
• Bar Chart
Pie Chart
Formation JavaFX alphorm.com™©
Line Chart
Formation JavaFX alphorm.com™©
Area Chart
Formation JavaFX alphorm.com™©
Bubble Chart
Formation JavaFX alphorm.com™©
Scatter Chart
Formation JavaFX alphorm.com™©
Bar Chart
Formation JavaFX alphorm.com™©
Ce qu’on a couvert
• Pie Chart
• Line Chart
• Area Chart
• Bubble Chart
Formation JavaFX alphorm.com™©
• Scatter Chart
• B...
Habillage avec CSS
Les composants d’interface
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://w...
Plan
• Habillage
• Les CSS
• Créer ses propres feuilles
• Les sélecteurs
• Modifier les axes
• Les couleurs dans les série...
Habillage avec CSS
• Cascading Style Sheet
• L’habillage concerne
Les contrôles
Les graphiques
Formation JavaFX alphorm.co...
• Similaire aux CSS en HTML
• Basées sur la version 2.1 W3C CSS
• Avec des additions de la version 3
• Des extensions spéc...
• Utiliser l’extension .css
• Dans le même répertoire que la classe principale de l’application JavaFX
Créer ses propres f...
• Les sélecteurs
Les classes de styles sont les noms des classes
• .button
Un style est associé à un id (setId(…) sur le n...
• Les noms de règles sont les noms de propriétés
• -fx-background-color : #333333;
• On peut reprendre dans un nœud descen...
Appliquer un style à un contrôle
Formation JavaFX alphorm.com™©
Appliquer un style dans le code
Formation JavaFX alphorm.com™©
• Tous les charts ont des propriété communes :
.chart : la globalité
.chart-content : le contenu graphique
.chart-title : ...
Modifier les axes
Formation JavaFX alphorm.com™©
• Jusqu’à 8 couleurs de prédéfinies
Les couleurs des séries
Formation JavaFX alphorm.com™©
• Les symboles des séries
.chart-symbol
• Les couleurs peuvent être des images et des gradients
• …
Et autres …
Formation ...
Ce qu’on a couvert
• Habillage
• Les CSS
• Créer ses propres feuilles
• Les sélecteurs
• Appliquer le style dans le
code
•...
IHM avec FXML
Architecture de l’application
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www...
Plan
• Le langage FXML
• Le lien entre FXML et Java
• Les contrôles en FXML
• La gestion des événements
Formation JavaFX a...
• Langage basé sur XML
• Permet la description de l’interface indépendamment du code Java
Le langage FXML
Formation JavaFX...
• La scène est construite à partir du XML
Le lien entre Java et FXML
Formation JavaFX alphorm.com™©
• Chaque balise est un contrôle …
Les contrôles en FXML
Formation JavaFX alphorm.com™©
• Gérer les événements avec du code Java
La gestion des événements
Formation JavaFX alphorm.com™©
• Est possible avec un autre langage compatible JSR223
La gestion des événements
Formation JavaFX alphorm.com™©
• 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’usag...
CSS et FXML
Formation JavaFX alphorm.com™©
• Un outil pour modifier la présentation
Utiliser SceneBuilder
Formation JavaFX alphorm.com™©
Ce qu’on a couvert
• Le langage FXML
• Le lien entre FXML et Java
• Les contrôles en FXML
• La gestion des événements
Form...
L’arbre Scene Graph
Architecture de l’application
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http...
Plan
• API Scene Graph
• L’arborescence essentielle
• Les principaux packages
• Les principales classes
Formation JavaFX a...
L’API Scene Graph
• Sert à construire une interface graphique
• Avec des effets visuels
• Un graphe de scène est assez com...
• Accrocher une racine à la scène
L’arborescence essentielle
Formation JavaFX alphorm.com™©
• Package javafx.scene : Scene, Group,…
• Package javafx.scene.control : Button,…
• Package javafx.scene.layout : StackPan...
• Node : un nœud dans le graphe
• Shape : forme géométrique
• Canvas : zone de tracé libre
• ImageView : pour afficher des...
Modèle javafx
Formation JavaFX alphorm.com™©
Ce qu’on a couvert
• API Scene Graph
• L’arborescence essentielle
• Les principaux packages
• Les principales classes
Form...
Propriétés
Architecture de l’application
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.al...
Plan
• Les collections observables
• Les propriétés
• Les binding
Formation JavaFX alphorm.com™©
• Répondre aux changements dynamiques des données
• Les collections sont beaucoup utilisées pour les données
• Un modèle p...
• Des interfaces
ObservableList, ObservableMap
ListChangeListener, MapChangeListener
• Des classes
FXCollections : classe ...
• Créer une liste observable
Exemple de collection observable
Formation JavaFX alphorm.com™©
• S’abonner à la notification
• Une façon d’accéder aux données
• Les propriétés sont observables
Les propriétés
Formation JavaFX alphorm.com™©
Abonnement à une propriété
Formation JavaFX alphorm.com™©
• Des classes disponibles pour les primitives
Le modèle des propriétés
Formation JavaFX alphorm.com™©
• Le changement dans un contrôle est répercuté dans l’autre
Les propriétés des contrôles
Formation JavaFX alphorm.com™©
Ce qu’on a couvert
• Les collections observables
• Les propriétés
• Les binding
Formation JavaFX alphorm.com™©
Composants
Architecture de l’application
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.al...
Plan
• Décrire le composant dans un fichier FXML
• Coder le Java du contrôleur du composant
• Utiliser le nouveau composan...
• Ici un bouton et un label
Décrire le composant FXML
Formation JavaFX alphorm.com™©
• Le contrôleur charge le fichier FXML
Coder le contrôleur
Formation JavaFX alphorm.com™©
• Utilisation du composant Perso, rien de spécial
Utiliser le composant
Formation JavaFX alphorm.com™©
Ce qu’on a couvert
• Décrire le composant dans un fichier FXML
• Coder le Java du contrôleur du composant
• Utiliser le no...
Applications JavaFX et
Architecture de l’application
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : h...
Plan
• Un navigateur encapsulé dans JavaFX
• Supporte CSS, JavaScript, DOM, HTML5
• Interactions entre JavaFX et JavaScrip...
• WebView associé à WebEngine
Un navigateur encapsulé
Formation JavaFX alphorm.com™©
• Chargement du fichier HTML
Supporte HTML, Javascript…
Formation JavaFX alphorm.com™©
• Exécution du JavaScript à partir de JavaFX
Interaction JavaFX et Javascript
Formation JavaFX alphorm.com™©
• Et l’inverse
Ce qu’on a couvert
• Un navigateur encapsulé dans JavaFX
• Supporte CSS, JavaScript, DOM, HTML5
• Interactions entre JavaF...
Le multithread en
Concurrence et
interopérabilité
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http...
Plan
• Modèle de thread
• Exécution de tâches de fond
• Intégration de JavaFX et Swing
Formation JavaFX alphorm.com™©
• Un grand nombre de threads
• Un thread remarquable : JavaFX Application
• Les gestionnaires d’événement sont exécutés da...
• Les événements sont gérés dans ce thread
• Toutes les manipulations de scène (active) doivent être réalisées dans ce
thr...
• De longs traitements dans le gestionnaire d’événement bloque le
thread UI
• Déléguer les traitements
Utiliser Runnable
U...
Swing et JavaFX
• Composant Swing dans JavaFX
Classe javafx.embed.swing.SwingNode
Permet de connecter un composant simple ...
Ce qu’on a couvert
• Modèle de thread
• Exécution de tâches de fond
• Intégration de JavaFX et Swing
Formation JavaFX alph...
Exécution de tâches de
Concurrence et
interopérabilité
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog :...
Plan
• Le framework javafx.concurrent
• Une interface : Worker
• 3 classes abstraites l’implémentant :
Task<V>
Formation J...
• Représente la tâche
L’interface Worker
Formation JavaFX alphorm.com™©
• READY : état initial
• SCHEDULED
• RUNNING
• SUCCEEDED : état final
Etats du Worker
Formation JavaFX alphorm.com™©
• CAN...
• Task<V> : une tâche qui fonctionne une fois
Les propriétés supportent les abonnements
Une ihm peut représenter le degré ...
• Créer une tâche
• S’abonner à l’avancement
Task<V>
Formation JavaFX alphorm.com™©
• S’abonner à l’avancement
• Démarrer ...
Ce qu’on a couvert
• Une interface : Worker
• 3 classes abstraites l’implémentant :
Task<V>
Service<V>
ScheduledService<V>...
Intégration JavaFX et
Concurrence et
interopérabilité
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : ...
Plan
• JavaFX dans Swing
• Swing dans JavaFX
Formation JavaFX alphorm.com™©
• JFXPanel est une sous-classe de Jcomponent
• Exécution dans le thread JavaFX Application
JavaFX dans Swing
Formation Jav...
• SwingNode est un nœud spécialisé
• Valable pour tous les composants légers
Swing dans JavaFX
Formation JavaFX alphorm.co...
• De JavaFX vers Swing
EventQueue.invokeLater(…)
SwingUtilities.invokeLater(…)
• De Swing vers JavaFX
Platform.runLater(…)...
Ce qu’on a couvert
• JavaFX dans Swing
• Swing dans JavaFX
Formation JavaFX alphorm.com™©
L’API de gestion
Graphisme
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog...
Plan
• Image Ops API, package javafx.scene.image
• Lire des pixels d’une image
• Ecrire des pixels d’une image
• Le contex...
• Image : une image graphique, vous pouvez lire des pixels
• WritableImage : sous-classe de Image, vous pouvez écrire des ...
• Chargement d’une image et lecture de la couleur d’un point
Lire des pixels d’une image
Formation JavaFX alphorm.com™©
• Récupération de la couleur et modification
Ecrire des pixels d’une image
Formation JavaFX alphorm.com™©
• Contexte graphique
Ecrire en bloc
Formation JavaFX alphorm.com™©
• La classe Scene propose la création d’instantanés
Création d’instantanés
Formation JavaFX alphorm.com™©
Ce qu’on a couvert
• Image Ops API, package javafx.scene.image
• Lire des pixels d’une image
• Ecrire des pixels d’une ima...
Dessiner avec Canvas
Graphisme
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/...
Plan
• Accéder au contexte
• Exemple de tracés
• Les gradients
• Les ombres
Formation JavaFX alphorm.com™©
• La gestion de...
• Dans javafx.scene.canvas
Canvas
GraphicsContext
• Consiste en général à
Créer un Canvas
JavaFX Canvas API
Formation Java...
• Code type pour accéder au contexte graphique
Accéder au contexte
Formation JavaFX alphorm.com™©
• Avec des formes prédéfinies
Exemple de tracés
Formation JavaFX alphorm.com™©
• Avec un chemin
Exemples de tracés
Formation JavaFX alphorm.com™©
• Gradient linéaire ou radial
Gradients
Formation JavaFX alphorm.com™©
Ombres
Formation JavaFX alphorm.com™©
• Les événements peuvent être récupérés sur le Canvas
Support des événements
Formation JavaFX alphorm.com™©
Ce qu’on a couvert
• Accéder au contexte
• Exemple de tracés
• Les gradients
• Les ombres
Formation JavaFX alphorm.com™©
•...
Dessiner en 3D
Graphisme
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/blog
F...
Plan
• La classe Shape3D
• La caméra
• L’éclairage
• La matière
Formation JavaFX alphorm.com™©
• La classe javafx.scene.shape.Shape3D est dérivée en :
MeshView
Box
Cylinder
Sphere
La classe Shape3D
Formation JavaFX al...
• La caméra est un nœud elle-même
• La classe PerspectiveCamera
La caméra
Formation JavaFX alphorm.com™©
• De la classe javafx.scene.LightBase
AmbientLight
PointLight
L’éclairage
Formation JavaFX alphorm.com™©
• La classe javafx.scene.paint.PhongMaterial
La matière
Formation JavaFX alphorm.com™©
Ce qu’on a couvert
• La classe Shape3D
• La caméra
• L’éclairage
• La matière
Formation JavaFX alphorm.com™©
Création d’effets
Effets, animations et multimédia
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : htt...
Plan
• Contenu de javafx.scene.effect
• Bending : recouvrement
• Bloom : lueur
• Blur : brouillage
• Drop Shadow : ombre p...
• Contient toutes les classes nécessaires à la réalisation des effets
• Les énumérés
paramètres
Le package javafx.scene.ef...
• La gestion du recouvrement
Bending
Formation JavaFX alphorm.com™©
• Luminescence, avec un seuil
Par défaut 0.3
Jusqu’à 1.0, qui annule l’effet
Bloom
Formation JavaFX alphorm.com™©
• Flouté avec BoxBlur, MotionBlur, GaussianBlur
Blur
Formation JavaFX alphorm.com™©
• Ombre portée
paramétrée en couleur et décalage
Drop Shadow
Formation JavaFX alphorm.com™©
• Ombre dans l’objet lui-même
Inner Shadow
Formation JavaFX alphorm.com™©
Impossible d'afficher l'image. Votre ordinateur ...
• Le reflet
Reflection
Formation JavaFX alphorm.com™©
• Effet d’éclairage
Lighting
Formation JavaFX alphorm.com™©
• Dans cet exemple, appliqué à un groupe
Perspective
Impossible d'afficher l'image. Votre ordinateur manque peut-être de m...
Chaîner les effets
Formation JavaFX alphorm.com™©
Ce qu’on a couvert
• Contenu de javafx.scene.effect
• Bending : recouvrement
• Bloom : lueur
• Blur : brouillage
• Drop Sh...
Les transformations
Effets, animations et multimédia
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : h...
Plan
• Définition et généralités
• Translation
• Rotation
• Mise à l’échelle
Formation JavaFX alphorm.com™©
• Déformation ...
• Package javafx.scene.transform
• Une transformation change l’emplacement d’un objet
• Types de transformations :
Transla...
• Déplacement en x, y et z
Translation
Formation JavaFX alphorm.com™©
• Avec les méthodes sur l’objet ou bien la création d’un objet Rotate
Rotation
Formation JavaFX alphorm.com™©
• Une déformation par échelle
Scaling
Formation JavaFX alphorm.com™©
• Déformation sur un axe
Shearing
Formation JavaFX alphorm.com™©
Ce qu’on a couvert
• Définition et généralités
• Translation
• Rotation
• Mise à l’échelle
Formation JavaFX alphorm.com™©
...
Les transitions
Effets, animations et multimédia
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http:...
Plan
• Transitions
• Animations
• Interpolations
Formation JavaFX alphorm.com™©
• Fade Transition
Les transitions
Formation JavaFX alphorm.com™©
• Fade Transition : disparition progressive
• Path Transition : déplacement le long d’un chemin
• Parallel Transition : ex...
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 à c...
• Des interpolateurs linéaires par défaut sont utilisés
• On peut changer d’interpolateur
Les interpolateurs
Formation Jav...
Ce qu’on a couvert
• Transitions
• Animations
• Interpolations
Formation JavaFX alphorm.com™©
Audios ou vidéos
Effets, animations et multimédia
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http...
Plan
• Les effets sonores
• Les différents types de fichiers
• Utiliser MediaPlayer
• Mettre en œuvre des vidéos
Formation...
Les effets sonores
• Dans le package javafx.scene.media
• La classe AudioClip permet de référencer le fichier son
Le const...
Les différents types de fichiers
• JavaFX supporte 4 formats audio
MP3 (audio/mpeg), AIFF (audio/x-aiff), WAV (audio/x-wav...
La classe MediaPlayer
• Dans le package javafx.scene.media
• Il y a 3 classes essentielles : Media, MediaPlayer et MediaVi...
Mise en œuvre de vidéos
• Créer un Media, le MediaPlayer, puis le MediaView
Formation JavaFX alphorm.com™©
• Lier des cont...
Ce qu’on a couvert
• Les effets sonores
• Les différents types de fichiers
• Utiliser MediaPlayer
• Mettre en œuvre des vi...
Démarrage et
Packaging et déploiement
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alpho...
Plan
• Environnements d’exécution
• Les différences de lancement
• La communication avec la page Web
• La dépendance à la ...
Environnements d’exécution
• Lancement comme une application de bureau
L’utilisateur utilise une ligne de commande ou doub...
Les différences de lancement
• Le support du preloader peut varier
Par exemple, pas d’événements de chargement pour les ap...
La communication avec la page Web
• La classe JavaFX HostServices
• Permet d’accéder au contexte web
Exécution de javascri...
La dépendance à la plateforme
• L’installation préalable du JRE est nécessaire
Un utilisateur peut ne pas avoir les permis...
Ce qu’on a couvert
• Environnements d’exécution
• Les différences de lancement
• La communication avec la page Web
• La dé...
Internationalisation
Packaging et déploiement
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://w...
Plan
• Internationalisation du code Java
• Internationalisation du FXML
• Internationalisation avec SceneBuilder
Formation...
Internationalisation du code Java
• La classe Locale représente une culture/une langue
• La classe ResourceBundle
Sous-cla...
Internationalisation du FXML
• Les clés des propriétés sont repérées par un %
• Puis associer le fichier avec un bundle
Fo...
Internationalisation avec SceneBuilder
• L’outil permet de remplacer les chaînes de caractères une clé
Formation JavaFX al...
Ce qu’on a couvert
• Internationalisation du code Java
• Internationalisation du FXML
• Internationalisation avec SceneBui...
Le packaging
Packaging et déploiement
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alpho...
Plan
• Rôle des outils de packaging
• Le packaging par défaut
• Les outils de packaging
• Le packaging natif
Formation Jav...
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 requ...
Le packaging par défaut
• Dans un répertoire prêt pour la distribution :
Un jar exécutable
Les jar supplémentaires
Un desc...
Les outils de packaging
• Le mode recommandé est d’utiliser les tâches Ant
Jar ant-javafx.jar
• NetBeans utilise les tâche...
Le packaging natif
• Configurer le projet pour générer en natif
Formation JavaFX alphorm.com™©
• Choisir la génération à p...
La sécurité pour les exécutions « web »
• Applications webstart, dans un navigateur…
• Nécessite un JRE au niveau (proposi...
La signature des jar
• Méthode traditionnelle en Java ou bien avec les outils de packaging
• Nécessite un certificat d’un ...
Ce qu’on a couvert
• Rôle des outils de packaging
• Le packaging par défaut
• Les outils de packaging
• Le packaging natif...
Conclusion
Formation JavaFX 8
Formation JavaFX alphorm.com™©
Site : http://www.alphorm.com
Blog : http://www.alphorm.com/b...
Plan
• Les outils et la mise en œuvre
• Les composants d’interface
graphique
• Architecture de l’application
• Concurrence...
Pour continuer …
• La formation Java fondamentaux …
• La formation Java avancée …
• La formation Android …
Formation JavaF...
Merci d’avoir suivi cette formation,
Formation JavaFX alphorm.com™©
rendez-vous pour la suite !
Prochain SlideShare
Chargement dans…5
×

Alphorm.com Formation JavaFX

11 684 vues

Publié le

Formation complète ici:
http://www.alphorm.com/tutoriel/formation-en-ligne-javafx

Avec cette formation découvrez et maitrisez JavaFX. La toute dernière bibliothèque graphique de Java. JavaFX permet au développeur de créer, dessiner, tester, déboguer et déployer des applications client riche qui fonctionnent de façon cohérente sur des plateformes différentes.

Dans cette formation JavaFX, vous allez apprendre à manipuler les différents composants de l’interface graphique avec les layouts et les contrôles standards. Aussi vous allez bien maitriser l’architecture de l’application, avec le rôle des fichiers XML de description de page, liés ou non aux feuilles de style CSS et l’arborescence SceneGraph et le databinding.
La concurrence n'est pas négligée dans cette formation, étant donné qu’il ne faut pas bloquer le thread de peinture. Aussi vous allez mieux appréhender l’interopérabilité avec Swing et JavaScript. La partie graphique ne sera pas oubliée, avec la présentation des possibilités de dessin dans des canvas, en 2D ou en 3D.

Les effets, les animations et les fichiers multimédia seront abordés, apportant une touche excellente à vos interfaces graphiques. Les techniques d’internationalisation sont présentées pour adapter vos applications à différentes cultures et langues. Enfin, les différents types d’applications seront présentés, avec l’impact sur le packaging que ces choix induisent.
Comme toujours, au fur et à mesure votre formateur construira des projets dont les sources sont téléchargeables sur votre compte Alphorm pour mieux pratiquer et suivre votre formateur.

Publié dans : Technologie
0 commentaire
5 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
11 684
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6 276
Actions
Partages
0
Téléchargements
294
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Alphorm.com Formation JavaFX

  1. 1. 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
  2. 2. Plan • Présentation de votre formateur • Qu’est ce que c’est JavaFX? • Présentation de votre formation • Le plan de la formation Formation JavaFX alphorm.com™© • Publics concernés • Prérequis de la formation
  3. 3. 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 Formation JavaFX alphorm.com™© • 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/
  4. 4. Mes formations sur alphorm Formation JavaFX alphorm.com™©
  5. 5. 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 Formation JavaFX alphorm.com™©
  6. 6. 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 Formation JavaFX alphorm.com™© • Concurrence et interopérabilité • Graphismes
  7. 7. 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 Formation JavaFX alphorm.com™©
  8. 8. Prérequis de la formation • Savoir lire du code Java • Avoir des rudiments sur les interfaces graphiques • Et … du courage comme toujours ! Formation JavaFX alphorm.com™©
  9. 9. 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 Formation JavaFX alphorm.com™©
  10. 10. Les autres formations dév sur Alphorm Formation JavaFX alphorm.com™©
  11. 11. Are you ready ? ☺ Formation JavaFX alphorm.com™©
  12. 12. Présentation générale Les outils et la mise en œuvre Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Présentation générale
  13. 13. Plan • Démarrer avec JavaFX • Applications graphiques clients riches • Le client en Java • Les APIs graphiques Formation JavaFX alphorm.com™© • Le client riche • Définition de JavaFX • Le contenu de JavaFX • Types d’applications
  14. 14. • Applications graphiques clientes • Définition de JavaFX • Environnements d’exécution • Environnements et outils Démarrer avec JavaFX Formation JavaFX alphorm.com™© • Concepts d’architecture de base • Références
  15. 15. • 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 Formation JavaFX alphorm.com™©
  16. 16. • 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 Formation JavaFX alphorm.com™© Java Web Start : téléchargement et mise à jour du binaire si nécessaire
  17. 17. • 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 Formation JavaFX alphorm.com™© • SWT : fournie avec Eclipse, concurrent de Swing
  18. 18. • Rich Internet Application (RIA) • Caractéristiques similaires à une application installée • Enrichit l’expérience HTML traditionnelle • JavaScript/AJAX, CSS Le client riche Formation JavaFX alphorm.com™© • Applets, Adobe Flash, SilverLight
  19. 19. • 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 Formation JavaFX alphorm.com™© • 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
  20. 20. • 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 Formation JavaFX alphorm.com™© • 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
  21. 21. • 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 Formation JavaFX alphorm.com™© 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
  22. 22. Ce qu’on a couvert • Démarrer avec JavaFX • Applications graphiques clients riches • Le client en Java • Les APIs graphiques Formation JavaFX alphorm.com™© • Le client riche • Définition de JavaFX • Le contenu de JavaFX • Types d’applications
  23. 23. Environnements Les outils et la mise en œuvre Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Environnements d’exécution
  24. 24. Plan • Types d’applications • Environnements d’exécution • Le packaging • Mode d’exécution Formation JavaFX alphorm.com™© • Les composants • Paramétrer les générations
  25. 25. • 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 Formation JavaFX alphorm.com™© 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
  26. 26. • 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 Formation JavaFX alphorm.com™© • Visualisation dans une page web Démarrage au chargement de la page • Le mode d’exécution impacte le packaging
  27. 27. • 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 Formation JavaFX alphorm.com™© • Pour mimer des applications natives, on peut encapsuler l’application et le JRE Distribuées comme exe, msi, dmg, pkg, …
  28. 28. • 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 Formation JavaFX alphorm.com™©
  29. 29. • 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 Formation JavaFX alphorm.com™© • Auto-update : vérification automatique des mises à jour (webstart et dans une page web)
  30. 30. • 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 Formation JavaFX alphorm.com™©
  31. 31. Ce qu’on a couvert • Types d’applications • Environnements d’exécution • Le packaging • Mode d’exécution Formation JavaFX alphorm.com™© • Les composants • Paramétrer les générations
  32. 32. Outils de Les outils et la mise en œuvre Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Outils de développement
  33. 33. Plan • JavaFX intégré dans le JDK • JavaFX SceneBuilder • Netbeans • JavaPackager Formation JavaFX alphorm.com™© • ScenicView
  34. 34. 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 Formation JavaFX alphorm.com™©
  35. 35. JavaFX SceneBuilder • Permet la construction interactive de l’ihm Formation JavaFX alphorm.com™©
  36. 36. L’interface NetBeans • Outil standard Java • Intégration possible avec SceneBuilder Formation JavaFX alphorm.com™©
  37. 37. JavaPackager • Permet d’encapsuler une application java dans un exe. Inclus dans le jdk depuis 7 • Possibilité de comléter le packaging avec InnoSetup Formation JavaFX alphorm.com™©
  38. 38. ScenicView • Site fxexperience.com • Détaille runtime la composition du graphe Formation JavaFX alphorm.com™©
  39. 39. Ce qu’on a couvert • JavaFX intégré dans le JDK • JavaFX SceneBuilder • Netbeans • JavaPackager Formation JavaFX alphorm.com™© • ScenicView
  40. 40. Concepts Les outils et la mise en œuvre Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Concepts d’architecture de base
  41. 41. Plan • JavaFX API et Scene Graph • Prism • Glass • Quantum Toolkit Formation JavaFX alphorm.com™©
  42. 42. Concepts d’architecture de base • Un empilement de plusieurs couches Formation JavaFX alphorm.com™©
  43. 43. 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 Formation JavaFX alphorm.com™© • La manipulation du graphe peut se faire via l’API ou bien de façon déclarative
  44. 44. 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 Formation JavaFX alphorm.com™© • Supporte les polices de caractères
  45. 45. 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 Formation JavaFX alphorm.com™© • 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
  46. 46. 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 Formation JavaFX alphorm.com™© l’application une fois accroché aux Stage, Scene ou Window
  47. 47. Ce qu’on a couvert • JavaFX API et Scene Graph • Prism • Glass • Quantum Toolkit Formation JavaFX alphorm.com™©
  48. 48. Références Les outils et la mise en œuvre Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Références
  49. 49. Plan • Le site Oracle et NetBeans • Le projet OpenJFX • La communauté JavaFX • Un site innovant : fxexperience.com Formation JavaFX alphorm.com™© • Autres et divers
  50. 50. • 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 Formation JavaFX alphorm.com™© • Netbeans pour une interface de développement intégrée
  51. 51. • Sous-projet de OpenJDK http://openjdk.java.net/projects/openjfx/ Le projet OpenJFX Formation JavaFX alphorm.com™©
  52. 52. • https://www.java.net/community/javafx La communauté JavaFX Formation JavaFX alphorm.com™©
  53. 53. • http://fxexperience.com/ • Blog de développeurs de JavaFX • Site de référence de ScenicView Un site innovant Formation JavaFX alphorm.com™©
  54. 54. • 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 Formation JavaFX alphorm.com™©
  55. 55. Ce qu’on a couvert • Le site Oracle et NetBeans • Le projet OpenJFX • La communauté JavaFX • Un site innovant : fxexperience.com Formation JavaFX alphorm.com™© • Autres et divers
  56. 56. Les contrôles Les composants d’interface Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Les contrôles
  57. 57. Plan • Les contrôles • Les boutons • Les textes • Les box Formation JavaFX alphorm.com™© • Les listes
  58. 58. Contrôles UI • Construire un nœud dans le graphe • Portable sur les plateformes • Adaptables via les CSS Formation JavaFX alphorm.com™©
  59. 59. Les boutons • La racine est un layout Formation JavaFX alphorm.com™©
  60. 60. Les textes • Fixes ou éditables, mot de passe Formation JavaFX alphorm.com™©
  61. 61. Les box • Checkbox, Choicebox Formation JavaFX alphorm.com™©
  62. 62. Les listes • ListView typée de son contenu Formation JavaFX alphorm.com™©
  63. 63. Les contrôles • Label, Button, Radio button, Toggle button • Checkbox, Choicebox, • Text Field, Password Field, • Scroll Bar, Scroll Pane, • ListView, TableView, Tree TableView, ComboBox, Formation JavaFX alphorm.com™© • ListView, TableView, Tree TableView, ComboBox, • Separator, Slider, ProgressBar, Hyperlink, Tooltip, • HTML Editor, Titled Pane, Accordion, Menu, • Color Picker, Date Picker, • Pagination Control, File Chooser
  64. 64. Ce qu’on a couvert • Les contrôles • Les boutons • Les textes • Les box Formation JavaFX alphorm.com™© • Les listes
  65. 65. Les layouts Les composants d’interface Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Les layouts
  66. 66. Plan • BorderPane connaît 5 positions • HBox met tout à l’horizontal • VBox met tout à la verticale • StackPane met tout en pile Formation JavaFX alphorm.com™© • GridPane permet de construire une grille • FlowPane met tout à la suite • TilePane présente des cellules uniformes • AnchorPane ancre les contrôles
  67. 67. 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 Formation JavaFX alphorm.com™© Police Couleur Contraintes …
  68. 68. BorderPane Formation JavaFX alphorm.com™©
  69. 69. HBox Formation JavaFX alphorm.com™©
  70. 70. VBox • Avec quelques propriétés supplémentaires … Formation JavaFX alphorm.com™©
  71. 71. StackPane Formation JavaFX alphorm.com™©
  72. 72. GridPane Formation JavaFX alphorm.com™©
  73. 73. FlowPane Formation JavaFX alphorm.com™©
  74. 74. TilePane • Similaire au FlowPane, mais tailles identiques Formation JavaFX alphorm.com™©
  75. 75. AnchorPane Formation JavaFX alphorm.com™©
  76. 76. Ce qu’on a couvert • BorderPane connaît 5 positions • HBox met tout à l’horizontal • VBox met tout à la verticale • StackPane met tout en pile Formation JavaFX alphorm.com™© • GridPane permet de construire une grille • FlowPane met tout à la suite • TilePane présente des cellules uniformes • AnchorPane ancre les contrôles
  77. 77. Les charts Les composants d’interface Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Les charts
  78. 78. Plan • Pie Chart • Line Chart • Area Chart • Bubble Chart Formation JavaFX alphorm.com™© • Scatter Chart • Bar Chart
  79. 79. Pie Chart Formation JavaFX alphorm.com™©
  80. 80. Line Chart Formation JavaFX alphorm.com™©
  81. 81. Area Chart Formation JavaFX alphorm.com™©
  82. 82. Bubble Chart Formation JavaFX alphorm.com™©
  83. 83. Scatter Chart Formation JavaFX alphorm.com™©
  84. 84. Bar Chart Formation JavaFX alphorm.com™©
  85. 85. Ce qu’on a couvert • Pie Chart • Line Chart • Area Chart • Bubble Chart Formation JavaFX alphorm.com™© • Scatter Chart • Bar Chart
  86. 86. Habillage avec CSS Les composants d’interface Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Habillage avec CSS
  87. 87. Plan • Habillage • Les CSS • Créer ses propres feuilles • Les sélecteurs • Modifier les axes • Les couleurs dans les séries • Et autres… Formation JavaFX alphorm.com™© • Les règles et propriétés • Appliquer un style à un contrôle • Appliquer le style dans le code • Habiller les graphiques
  88. 88. Habillage avec CSS • Cascading Style Sheet • L’habillage concerne Les contrôles Les graphiques Formation JavaFX alphorm.com™©
  89. 89. • 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 Formation JavaFX alphorm.com™© • Par défaut : modena.css
  90. 90. • Utiliser l’extension .css • Dans le même répertoire que la classe principale de l’application JavaFX Créer ses propres feuilles Formation JavaFX alphorm.com™©
  91. 91. • 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 Formation JavaFX alphorm.com™© • #mon-bouton Les pseudo-classes pour un état donné • .radio-button: focused
  92. 92. • 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 Formation JavaFX alphorm.com™© • Changer les propriétés de la classe .root change toute la scene
  93. 93. Appliquer un style à un contrôle Formation JavaFX alphorm.com™©
  94. 94. Appliquer un style dans le code Formation JavaFX alphorm.com™©
  95. 95. • 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 Formation JavaFX alphorm.com™© .chart-legend : la légende
  96. 96. Modifier les axes Formation JavaFX alphorm.com™©
  97. 97. • Jusqu’à 8 couleurs de prédéfinies Les couleurs des séries Formation JavaFX alphorm.com™©
  98. 98. • Les symboles des séries .chart-symbol • Les couleurs peuvent être des images et des gradients • … Et autres … Formation JavaFX alphorm.com™©
  99. 99. Ce qu’on a couvert • Habillage • Les CSS • Créer ses propres feuilles • Les sélecteurs • Appliquer le style dans le code • Habiller les graphiques • Modifier les axes Formation JavaFX alphorm.com™© • Les sélecteurs • Les règles et propriétés • Appliquer un style à un contrôle • Modifier les axes • Les couleurs dans les séries
  100. 100. IHM avec FXML Architecture de l’application Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels IHM avec FXML
  101. 101. Plan • Le langage FXML • Le lien entre FXML et Java • Les contrôles en FXML • La gestion des événements Formation JavaFX alphorm.com™© • L’usage de CSS avec FXML • Utiliser SceneBuilder
  102. 102. • Langage basé sur XML • Permet la description de l’interface indépendamment du code Java Le langage FXML Formation JavaFX alphorm.com™©
  103. 103. • La scène est construite à partir du XML Le lien entre Java et FXML Formation JavaFX alphorm.com™©
  104. 104. • Chaque balise est un contrôle … Les contrôles en FXML Formation JavaFX alphorm.com™©
  105. 105. • Gérer les événements avec du code Java La gestion des événements Formation JavaFX alphorm.com™©
  106. 106. • Est possible avec un autre langage compatible JSR223 La gestion des événements Formation JavaFX alphorm.com™©
  107. 107. • 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 Formation JavaFX alphorm.com™©
  108. 108. CSS et FXML Formation JavaFX alphorm.com™©
  109. 109. • Un outil pour modifier la présentation Utiliser SceneBuilder Formation JavaFX alphorm.com™©
  110. 110. Ce qu’on a couvert • Le langage FXML • Le lien entre FXML et Java • Les contrôles en FXML • La gestion des événements Formation JavaFX alphorm.com™© • L’usage de CSS avec FXML • Utiliser SceneBuilder
  111. 111. L’arbre Scene Graph Architecture de l’application Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels L’arbre Scene Graph
  112. 112. Plan • API Scene Graph • L’arborescence essentielle • Les principaux packages • Les principales classes Formation JavaFX alphorm.com™© • Le modèle
  113. 113. 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) Formation JavaFX alphorm.com™© objets, les zones à peindre, quels rendus) • Le graphe contient des nœuds de branches et des nœuds de feuilles
  114. 114. • Accrocher une racine à la scène L’arborescence essentielle Formation JavaFX alphorm.com™©
  115. 115. • Package javafx.scene : Scene, Group,… • Package javafx.scene.control : Button,… • Package javafx.scene.layout : StackPane,… • Package javafx.scene.shape : Rectangle,… Les principaux packages Formation JavaFX alphorm.com™© • Package javafx.scene.paint : Color • Dans le premier package, on trouve : Node Parent Scene
  116. 116. • 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 Formation JavaFX alphorm.com™© • 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
  117. 117. Modèle javafx Formation JavaFX alphorm.com™©
  118. 118. Ce qu’on a couvert • API Scene Graph • L’arborescence essentielle • Les principaux packages • Les principales classes Formation JavaFX alphorm.com™© • Le modèle
  119. 119. Propriétés Architecture de l’application Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Propriétés et binding
  120. 120. Plan • Les collections observables • Les propriétés • Les binding Formation JavaFX alphorm.com™©
  121. 121. • 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 Formation JavaFX alphorm.com™© observerons
  122. 122. • Des interfaces ObservableList, ObservableMap ListChangeListener, MapChangeListener • Des classes FXCollections : classe statique Quid des collections observables Formation JavaFX alphorm.com™© FXCollections : classe statique List/MapChangeListener.Change : une modification dans la collection
  123. 123. • Créer une liste observable Exemple de collection observable Formation JavaFX alphorm.com™© • S’abonner à la notification
  124. 124. • Une façon d’accéder aux données • Les propriétés sont observables Les propriétés Formation JavaFX alphorm.com™©
  125. 125. Abonnement à une propriété Formation JavaFX alphorm.com™©
  126. 126. • Des classes disponibles pour les primitives Le modèle des propriétés Formation JavaFX alphorm.com™©
  127. 127. • Le changement dans un contrôle est répercuté dans l’autre Les propriétés des contrôles Formation JavaFX alphorm.com™©
  128. 128. Ce qu’on a couvert • Les collections observables • Les propriétés • Les binding Formation JavaFX alphorm.com™©
  129. 129. Composants Architecture de l’application Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Composants personnalisés
  130. 130. Plan • Décrire le composant dans un fichier FXML • Coder le Java du contrôleur du composant • Utiliser le nouveau composant Formation JavaFX alphorm.com™©
  131. 131. • Ici un bouton et un label Décrire le composant FXML Formation JavaFX alphorm.com™©
  132. 132. • Le contrôleur charge le fichier FXML Coder le contrôleur Formation JavaFX alphorm.com™©
  133. 133. • Utilisation du composant Perso, rien de spécial Utiliser le composant Formation JavaFX alphorm.com™©
  134. 134. Ce qu’on a couvert • Décrire le composant dans un fichier FXML • Coder le Java du contrôleur du composant • Utiliser le nouveau composant Formation JavaFX alphorm.com™©
  135. 135. Applications JavaFX et Architecture de l’application Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Applications JavaFX et HTML5
  136. 136. Plan • Un navigateur encapsulé dans JavaFX • Supporte CSS, JavaScript, DOM, HTML5 • Interactions entre JavaFX et JavaScript Formation JavaFX alphorm.com™©
  137. 137. • WebView associé à WebEngine Un navigateur encapsulé Formation JavaFX alphorm.com™© • Chargement du fichier HTML
  138. 138. Supporte HTML, Javascript… Formation JavaFX alphorm.com™©
  139. 139. • Exécution du JavaScript à partir de JavaFX Interaction JavaFX et Javascript Formation JavaFX alphorm.com™© • Et l’inverse
  140. 140. Ce qu’on a couvert • Un navigateur encapsulé dans JavaFX • Supporte CSS, JavaScript, DOM, HTML5 • Interactions entre JavaFX et JavaScript Formation JavaFX alphorm.com™©
  141. 141. Le multithread en Concurrence et interopérabilité Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Le multithread en JavaFX
  142. 142. Plan • Modèle de thread • Exécution de tâches de fond • Intégration de JavaFX et Swing Formation JavaFX alphorm.com™©
  143. 143. • 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 Formation JavaFX alphorm.com™© Méthodes static launch() [ 2 versions] Méthodes init(), start(), stop() : cycle de vie • Thread launcher : init() • Thread JavaFX Application : start() et stop()
  144. 144. • 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 Formation JavaFX alphorm.com™© • Notons le thread du rendu graphique (Prism) Synchronisé par des « pulse » (60/s) • Notons aussi un thread multimédia
  145. 145. • 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 … Formation JavaFX alphorm.com™© Utiliser java.util.concurrent Utiliser javafx.concurrent
  146. 146. 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 : Formation JavaFX alphorm.com™© • 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()
  147. 147. Ce qu’on a couvert • Modèle de thread • Exécution de tâches de fond • Intégration de JavaFX et Swing Formation JavaFX alphorm.com™©
  148. 148. Exécution de tâches de Concurrence et interopérabilité Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Exécution de tâches de fond
  149. 149. Plan • Le framework javafx.concurrent • Une interface : Worker • 3 classes abstraites l’implémentant : Task<V> Formation JavaFX alphorm.com™© Service<V> ScheduledService<V> • Le worker est une unité de travail, dont l’état interne est inspectable à partir du thread de l’application
  150. 150. • Représente la tâche L’interface Worker Formation JavaFX alphorm.com™©
  151. 151. • READY : état initial • SCHEDULED • RUNNING • SUCCEEDED : état final Etats du Worker Formation JavaFX alphorm.com™© • CANCELLED : état final • FAILED : état final • La méthode cancel() atteint CANCELLED si le worker n’était pas dans un état final
  152. 152. • 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 Formation JavaFX alphorm.com™© • ScheduledService<V> : dérive de la précédente, contrôle la façon dont la tâche est répétée
  153. 153. • Créer une tâche • S’abonner à l’avancement Task<V> Formation JavaFX alphorm.com™© • S’abonner à l’avancement • Démarrer la tâche
  154. 154. Ce qu’on a couvert • Une interface : Worker • 3 classes abstraites l’implémentant : Task<V> Service<V> ScheduledService<V> Formation JavaFX alphorm.com™© ScheduledService<V> • Le worker est une unité de travail, dont l’état interne est inspectable du thread de l’application
  155. 155. Intégration JavaFX et Concurrence et interopérabilité Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Intégration JavaFX et Swing
  156. 156. Plan • JavaFX dans Swing • Swing dans JavaFX Formation JavaFX alphorm.com™©
  157. 157. • JFXPanel est une sous-classe de Jcomponent • Exécution dans le thread JavaFX Application JavaFX dans Swing Formation JavaFX alphorm.com™©
  158. 158. • SwingNode est un nœud spécialisé • Valable pour tous les composants légers Swing dans JavaFX Formation JavaFX alphorm.com™©
  159. 159. • De JavaFX vers Swing EventQueue.invokeLater(…) SwingUtilities.invokeLater(…) • De Swing vers JavaFX Platform.runLater(…) Appels de l’un à l’autre Formation JavaFX alphorm.com™© Platform.runLater(…)
  160. 160. Ce qu’on a couvert • JavaFX dans Swing • Swing dans JavaFX Formation JavaFX alphorm.com™©
  161. 161. L’API de gestion Graphisme Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels L’API de gestion d’images
  162. 162. Plan • Image Ops API, package javafx.scene.image • Lire des pixels d’une image • Ecrire des pixels d’une image • Le contexte graphique Formation JavaFX alphorm.com™© • Les instantanés de Scene
  163. 163. • 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 Formation JavaFX alphorm.com™© • WritablePixelFormat : sous-classe de PixelFormat
  164. 164. • Chargement d’une image et lecture de la couleur d’un point Lire des pixels d’une image Formation JavaFX alphorm.com™©
  165. 165. • Récupération de la couleur et modification Ecrire des pixels d’une image Formation JavaFX alphorm.com™©
  166. 166. • Contexte graphique Ecrire en bloc Formation JavaFX alphorm.com™©
  167. 167. • La classe Scene propose la création d’instantanés Création d’instantanés Formation JavaFX alphorm.com™©
  168. 168. Ce qu’on a couvert • Image Ops API, package javafx.scene.image • Lire des pixels d’une image • Ecrire des pixels d’une image • Le contexte graphique Formation JavaFX alphorm.com™© • Les instantanés de Scene
  169. 169. Dessiner avec Canvas Graphisme Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Dessiner avec Canvas
  170. 170. Plan • Accéder au contexte • Exemple de tracés • Les gradients • Les ombres Formation JavaFX alphorm.com™© • La gestion des événements
  171. 171. • Dans javafx.scene.canvas Canvas GraphicsContext • Consiste en général à Créer un Canvas JavaFX Canvas API Formation JavaFX alphorm.com™© Créer un Canvas Récupérer son GraphicsContext Appeler des opérations graphiques
  172. 172. • Code type pour accéder au contexte graphique Accéder au contexte Formation JavaFX alphorm.com™©
  173. 173. • Avec des formes prédéfinies Exemple de tracés Formation JavaFX alphorm.com™©
  174. 174. • Avec un chemin Exemples de tracés Formation JavaFX alphorm.com™©
  175. 175. • Gradient linéaire ou radial Gradients Formation JavaFX alphorm.com™©
  176. 176. Ombres Formation JavaFX alphorm.com™©
  177. 177. • Les événements peuvent être récupérés sur le Canvas Support des événements Formation JavaFX alphorm.com™©
  178. 178. Ce qu’on a couvert • Accéder au contexte • Exemple de tracés • Les gradients • Les ombres Formation JavaFX alphorm.com™© • La gestion des événements
  179. 179. Dessiner en 3D Graphisme Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Dessiner en 3D
  180. 180. Plan • La classe Shape3D • La caméra • L’éclairage • La matière Formation JavaFX alphorm.com™©
  181. 181. • La classe javafx.scene.shape.Shape3D est dérivée en : MeshView Box Cylinder Sphere La classe Shape3D Formation JavaFX alphorm.com™© Sphere • Pour faire ses propres formes : Mesh TriangleMesh
  182. 182. • La caméra est un nœud elle-même • La classe PerspectiveCamera La caméra Formation JavaFX alphorm.com™©
  183. 183. • De la classe javafx.scene.LightBase AmbientLight PointLight L’éclairage Formation JavaFX alphorm.com™©
  184. 184. • La classe javafx.scene.paint.PhongMaterial La matière Formation JavaFX alphorm.com™©
  185. 185. Ce qu’on a couvert • La classe Shape3D • La caméra • L’éclairage • La matière Formation JavaFX alphorm.com™©
  186. 186. Création d’effets Effets, animations et multimédia Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Création d’effets visuels
  187. 187. Plan • Contenu de javafx.scene.effect • Bending : recouvrement • Bloom : lueur • Blur : brouillage • Drop Shadow : ombre portée Formation JavaFX alphorm.com™© • Drop Shadow : ombre portée • Inner Shadow : ombre à l’intérieur • Reflection : reflet • Lighting : illumination • Perspective • Chaîner les effets
  188. 188. • Contient toutes les classes nécessaires à la réalisation des effets • Les énumérés paramètres Le package javafx.scene.effect Formation JavaFX alphorm.com™©
  189. 189. • La gestion du recouvrement Bending Formation JavaFX alphorm.com™©
  190. 190. • Luminescence, avec un seuil Par défaut 0.3 Jusqu’à 1.0, qui annule l’effet Bloom Formation JavaFX alphorm.com™©
  191. 191. • Flouté avec BoxBlur, MotionBlur, GaussianBlur Blur Formation JavaFX alphorm.com™©
  192. 192. • Ombre portée paramétrée en couleur et décalage Drop Shadow Formation JavaFX alphorm.com™©
  193. 193. • Ombre dans l’objet lui-même Inner Shadow Formation JavaFX alphorm.com™© 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.
  194. 194. • Le reflet Reflection Formation JavaFX alphorm.com™©
  195. 195. • Effet d’éclairage Lighting Formation JavaFX alphorm.com™©
  196. 196. • Dans cet exemple, appliqué à un groupe Perspective 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. Formation JavaFX alphorm.com™© 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.
  197. 197. Chaîner les effets Formation JavaFX alphorm.com™©
  198. 198. Ce qu’on a couvert • Contenu de javafx.scene.effect • Bending : recouvrement • Bloom : lueur • Blur : brouillage • Drop Shadow : ombre portée Formation JavaFX alphorm.com™© • Drop Shadow : ombre portée • Inner Shadow : ombre à l’intérieur • Reflection : reflet • Lighting : illumination • Perspective • Chaîner les effets
  199. 199. Les transformations Effets, animations et multimédia Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Les transformations
  200. 200. Plan • Définition et généralités • Translation • Rotation • Mise à l’échelle Formation JavaFX alphorm.com™© • Déformation sur un axe (shearing)
  201. 201. • 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 Formation JavaFX alphorm.com™© 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 ! )
  202. 202. • Déplacement en x, y et z Translation Formation JavaFX alphorm.com™©
  203. 203. • Avec les méthodes sur l’objet ou bien la création d’un objet Rotate Rotation Formation JavaFX alphorm.com™©
  204. 204. • Une déformation par échelle Scaling Formation JavaFX alphorm.com™©
  205. 205. • Déformation sur un axe Shearing Formation JavaFX alphorm.com™©
  206. 206. Ce qu’on a couvert • Définition et généralités • Translation • Rotation • Mise à l’échelle Formation JavaFX alphorm.com™© • Déformation sur un axe (shearing)
  207. 207. Les transitions Effets, animations et multimédia Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Les transitions et animations
  208. 208. Plan • Transitions • Animations • Interpolations Formation JavaFX alphorm.com™©
  209. 209. • Fade Transition Les transitions Formation JavaFX alphorm.com™©
  210. 210. • 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 Formation JavaFX alphorm.com™©
  211. 211. 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 Formation JavaFX alphorm.com™© Des triggers peuvent être ajoutés, avec levée d’événements
  212. 212. • Des interpolateurs linéaires par défaut sont utilisés • On peut changer d’interpolateur Les interpolateurs Formation JavaFX alphorm.com™© • Ou même créer sa propre classe Hériter de Interpolator
  213. 213. Ce qu’on a couvert • Transitions • Animations • Interpolations Formation JavaFX alphorm.com™©
  214. 214. Audios ou vidéos Effets, animations et multimédia Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Audios ou vidéos
  215. 215. Plan • Les effets sonores • Les différents types de fichiers • Utiliser MediaPlayer • Mettre en œuvre des vidéos Formation JavaFX alphorm.com™©
  216. 216. 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 Formation JavaFX alphorm.com™© • Paramétrage ou pas du volume • Paramètres volume, balance, vitesse, priorité…
  217. 217. 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) Formation JavaFX alphorm.com™© FLV : video/x-flv (Flash Video, mais uniquement la variante VP6+MP3) MP4 : video/mp4 (H264 video + AAC audio)
  218. 218. 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 Formation JavaFX alphorm.com™© • MediaPlayer propose des méthodes pour agir sur le média • MediaView est le nœud rattaché au graphe de la scène
  219. 219. Mise en œuvre de vidéos • Créer un Media, le MediaPlayer, puis le MediaView Formation JavaFX alphorm.com™© • Lier des contrôles aux propriétés de la vidéo
  220. 220. Ce qu’on a couvert • Les effets sonores • Les différents types de fichiers • Utiliser MediaPlayer • Mettre en œuvre des vidéos Formation JavaFX alphorm.com™©
  221. 221. Démarrage et Packaging et déploiement Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Démarrage et exécution
  222. 222. Plan • Environnements d’exécution • Les différences de lancement • La communication avec la page Web • La dépendance à la plateforme Formation JavaFX alphorm.com™©
  223. 223. 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 Formation JavaFX alphorm.com™© • 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
  224. 224. 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 Formation JavaFX alphorm.com™© • 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
  225. 225. 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 Formation JavaFX alphorm.com™© • Le contexte web n’existe pas (null) pour les autres types d’applications
  226. 226. 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 Formation JavaFX alphorm.com™© Des frameworks externes sont nécessaires • Une application auto-contenue est nécessaire
  227. 227. Ce qu’on a couvert • Environnements d’exécution • Les différences de lancement • La communication avec la page Web • La dépendance à la plateforme Formation JavaFX alphorm.com™©
  228. 228. Internationalisation Packaging et déploiement Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Internationalisation
  229. 229. Plan • Internationalisation du code Java • Internationalisation du FXML • Internationalisation avec SceneBuilder Formation JavaFX alphorm.com™©
  230. 230. Internationalisation du code Java • La classe Locale représente une culture/une langue • La classe ResourceBundle Sous-classe PropertyResourceBundle Formation JavaFX alphorm.com™© • Associée à un fichier de propriétés Sous-classe ListResourceBundle
  231. 231. Internationalisation du FXML • Les clés des propriétés sont repérées par un % • Puis associer le fichier avec un bundle Formation JavaFX alphorm.com™©
  232. 232. Internationalisation avec SceneBuilder • L’outil permet de remplacer les chaînes de caractères une clé Formation JavaFX alphorm.com™©
  233. 233. Ce qu’on a couvert • Internationalisation du code Java • Internationalisation du FXML • Internationalisation avec SceneBuilder Formation JavaFX alphorm.com™©
  234. 234. Le packaging Packaging et déploiement Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Le packaging
  235. 235. Plan • Rôle des outils de packaging • Le packaging par défaut • Les outils de packaging • Le packaging natif Formation JavaFX alphorm.com™© • La sécurité les exécutions « web » • La signature des jar
  236. 236. 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 Formation JavaFX alphorm.com™© • Fournir des messages d’erreur clairs
  237. 237. 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 Formation JavaFX alphorm.com™© Un fichier HTML avec un code JavaScript pour lancer le jar d’un page web
  238. 238. 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 Formation JavaFX alphorm.com™© L’outil javapackager • Les CSS peuvent être compilées
  239. 239. Le packaging natif • Configurer le projet pour générer en natif Formation JavaFX alphorm.com™© • 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 …
  240. 240. 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 Formation JavaFX alphorm.com™©
  241. 241. 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 Formation JavaFX alphorm.com™©
  242. 242. Ce qu’on a couvert • Rôle des outils de packaging • Le packaging par défaut • Les outils de packaging • Le packaging natif Formation JavaFX alphorm.com™© • La sécurité les exécutions « web » • La signature des jar
  243. 243. Conclusion Formation JavaFX 8 Formation JavaFX alphorm.com™© Site : http://www.alphorm.com Blog : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Conclusion Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels
  244. 244. Plan • 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 Formation JavaFX alphorm.com™© • Concurrence et interopérabilité • Graphismes
  245. 245. Pour continuer … • La formation Java fondamentaux … • La formation Java avancée … • La formation Android … Formation JavaFX alphorm.com™©
  246. 246. Merci d’avoir suivi cette formation, Formation JavaFX alphorm.com™© rendez-vous pour la suite !

×