Contenu connexe Similaire à Alphorm.com Formation JavaFX (20) Alphorm.com Formation JavaFX1. 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. 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. 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/
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. 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. 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. 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. 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™©
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. 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. • 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. • 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. • 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. • 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. • 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. • 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. • 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. • 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. 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. 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. 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. • 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. • 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. • 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. • 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. • 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. • 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. 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. 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. Plan
• JavaFX intégré dans le JDK
• JavaFX SceneBuilder
• Netbeans
• JavaPackager
Formation JavaFX alphorm.com™©
• ScenicView
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™©
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™©
39. Ce qu’on a couvert
• JavaFX intégré dans le JDK
• JavaFX SceneBuilder
• Netbeans
• JavaPackager
Formation JavaFX alphorm.com™©
• ScenicView
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. Plan
• JavaFX API et Scene Graph
• Prism
• Glass
• Quantum Toolkit
Formation JavaFX alphorm.com™©
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. 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. 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. 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. Ce qu’on a couvert
• JavaFX API et Scene Graph
• Prism
• Glass
• Quantum Toolkit
Formation JavaFX alphorm.com™©
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. Plan
• Le site Oracle et NetBeans
• Le projet OpenJFX
• La communauté JavaFX
• Un site innovant : fxexperience.com
Formation JavaFX alphorm.com™©
• Autres et divers
51. • Sous-projet de OpenJDK
http://openjdk.java.net/projects/openjfx/
Le projet OpenJFX
Formation JavaFX alphorm.com™©
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. 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. 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
58. Contrôles UI
• Construire un nœud dans le graphe
• Portable sur les plateformes
• Adaptables via les CSS
Formation JavaFX alphorm.com™©
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. Ce qu’on a couvert
• Les contrôles
• Les boutons
• Les textes
• Les box
Formation JavaFX alphorm.com™©
• Les listes
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. 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. 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
…
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. 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. Plan
• Pie Chart
• Line Chart
• Area Chart
• Bubble Chart
Formation JavaFX alphorm.com™©
• Scatter Chart
• Bar Chart
85. Ce qu’on a couvert
• Pie Chart
• Line Chart
• Area Chart
• Bubble Chart
Formation JavaFX alphorm.com™©
• Scatter Chart
• Bar Chart
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. 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. Habillage avec CSS
• Cascading Style Sheet
• L’habillage concerne
Les contrôles
Les graphiques
Formation JavaFX alphorm.com™©
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. • 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. • 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. • 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
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
97. • Jusqu’à 8 couleurs de prédéfinies
Les couleurs des séries
Formation JavaFX alphorm.com™©
98. • Les symboles des séries
.chart-symbol
• Les couleurs peuvent être des images et des gradients
• …
Et autres …
Formation JavaFX alphorm.com™©
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. 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. 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. • Langage basé sur XML
• Permet la description de l’interface indépendamment du code Java
Le langage FXML
Formation JavaFX alphorm.com™©
103. • La scène est construite à partir du XML
Le lien entre Java et FXML
Formation JavaFX alphorm.com™©
104. • Chaque balise est un contrôle …
Les contrôles en FXML
Formation JavaFX alphorm.com™©
105. • Gérer les événements avec du code Java
La gestion des événements
Formation JavaFX alphorm.com™©
106. • Est possible avec un autre langage compatible JSR223
La gestion des événements
Formation JavaFX alphorm.com™©
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™©
109. • Un outil pour modifier la présentation
Utiliser SceneBuilder
Formation JavaFX alphorm.com™©
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. 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. Plan
• API Scene Graph
• L’arborescence essentielle
• Les principaux packages
• Les principales classes
Formation JavaFX alphorm.com™©
• Le modèle
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. • Accrocher une racine à la scène
L’arborescence essentielle
Formation JavaFX alphorm.com™©
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. • 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
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. 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
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. • 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. • Créer une liste observable
Exemple de collection observable
Formation JavaFX alphorm.com™©
• S’abonner à la notification
124. • Une façon d’accéder aux données
• Les propriétés sont observables
Les propriétés
Formation JavaFX alphorm.com™©
126. • Des classes disponibles pour les primitives
Le modèle des propriétés
Formation JavaFX alphorm.com™©
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. Ce qu’on a couvert
• Les collections observables
• Les propriétés
• Les binding
Formation JavaFX alphorm.com™©
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. 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. • Ici un bouton et un label
Décrire le composant FXML
Formation JavaFX alphorm.com™©
132. • Le contrôleur charge le fichier FXML
Coder le contrôleur
Formation JavaFX alphorm.com™©
133. • Utilisation du composant Perso, rien de spécial
Utiliser le composant
Formation JavaFX alphorm.com™©
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. 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. Plan
• Un navigateur encapsulé dans JavaFX
• Supporte CSS, JavaScript, DOM, HTML5
• Interactions entre JavaFX et JavaScript
Formation JavaFX alphorm.com™©
137. • WebView associé à WebEngine
Un navigateur encapsulé
Formation JavaFX alphorm.com™©
• Chargement du fichier HTML
139. • Exécution du JavaScript à partir de JavaFX
Interaction JavaFX et Javascript
Formation JavaFX alphorm.com™©
• Et l’inverse
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. 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. Plan
• Modèle de thread
• Exécution de tâches de fond
• Intégration de JavaFX et Swing
Formation JavaFX alphorm.com™©
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. • 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. • 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. 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. 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. 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. 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. • Représente la tâche
L’interface Worker
Formation JavaFX alphorm.com™©
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. • 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. • 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. 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. 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
157. • JFXPanel est une sous-classe de Jcomponent
• Exécution dans le thread JavaFX Application
JavaFX dans Swing
Formation JavaFX alphorm.com™©
158. • SwingNode est un nœud spécialisé
• Valable pour tous les composants légers
Swing dans JavaFX
Formation JavaFX alphorm.com™©
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. Ce qu’on a couvert
• JavaFX dans Swing
• Swing dans JavaFX
Formation JavaFX alphorm.com™©
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. 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. • 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. • Chargement d’une image et lecture de la couleur d’un point
Lire des pixels d’une image
Formation JavaFX alphorm.com™©
165. • Récupération de la couleur et modification
Ecrire des pixels d’une image
Formation JavaFX alphorm.com™©
167. • La classe Scene propose la création d’instantanés
Création d’instantanés
Formation JavaFX alphorm.com™©
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. 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. Plan
• Accéder au contexte
• Exemple de tracés
• Les gradients
• Les ombres
Formation JavaFX alphorm.com™©
• La gestion des événements
172. • Code type pour accéder au contexte graphique
Accéder au contexte
Formation JavaFX alphorm.com™©
173. • Avec des formes prédéfinies
Exemple de tracés
Formation JavaFX alphorm.com™©
174. • Avec un chemin
Exemples de tracés
Formation JavaFX alphorm.com™©
177. • Les événements peuvent être récupérés sur le Canvas
Support des événements
Formation JavaFX alphorm.com™©
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. 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. Plan
• La classe Shape3D
• La caméra
• L’éclairage
• La matière
Formation JavaFX alphorm.com™©
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. • La caméra est un nœud elle-même
• La classe PerspectiveCamera
La caméra
Formation JavaFX alphorm.com™©
183. • De la classe javafx.scene.LightBase
AmbientLight
PointLight
L’éclairage
Formation JavaFX alphorm.com™©
184. • La classe javafx.scene.paint.PhongMaterial
La matière
Formation JavaFX alphorm.com™©
185. Ce qu’on a couvert
• La classe Shape3D
• La caméra
• L’éclairage
• La matière
Formation JavaFX alphorm.com™©
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. 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. • 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. • La gestion du recouvrement
Bending
Formation JavaFX alphorm.com™©
190. • Luminescence, avec un seuil
Par défaut 0.3
Jusqu’à 1.0, qui annule l’effet
Bloom
Formation JavaFX alphorm.com™©
191. • Flouté avec BoxBlur, MotionBlur, GaussianBlur
Blur
Formation JavaFX alphorm.com™©
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.
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.
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. 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. Plan
• Définition et généralités
• Translation
• Rotation
• Mise à l’échelle
Formation JavaFX alphorm.com™©
• Déformation sur un axe (shearing)
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 ! )
203. • Avec les méthodes sur l’objet ou bien la création d’un objet Rotate
Rotation
Formation JavaFX alphorm.com™©
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. 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
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. 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. • 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. Ce qu’on a couvert
• Transitions
• Animations
• Interpolations
Formation JavaFX alphorm.com™©
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. Plan
• Les effets sonores
• Les différents types de fichiers
• Utiliser MediaPlayer
• Mettre en œuvre des vidéos
Formation JavaFX alphorm.com™©
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. 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. 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. 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. 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. 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
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. 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. 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. 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. 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. 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
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. 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™©
233. Ce qu’on a couvert
• Internationalisation du code Java
• Internationalisation du FXML
• Internationalisation avec SceneBuilder
Formation JavaFX alphorm.com™©
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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Pour continuer …
• La formation Java fondamentaux …
• La formation Java avancée …
• La formation Android …
Formation JavaFX alphorm.com™©
246. Merci d’avoir suivi cette formation,
Formation JavaFX alphorm.com™©
rendez-vous pour la suite !