Alphorm.com Formation JavaFX

Présentation

Formation JavaFX 8

Formation JavaFX alphorm.com™©

Site : http://www.alphorm.comBlog : http://www.alphorm.com/blogForum : http://www.alphorm.com/forum

Présentation

Fabien BrissonneauConsultant, concepteur et formateurObjets Logiciels

Plan

• Présentation de votre formateur

• Qu’est ce que c’est JavaFX?

• Présentation de votre formation

• Le plan de la formation


• Publics concernés

• Prérequis de la formation

Présentation du formateur• Fabien Brissonneau

• Email : [email protected]

• Consultant Concepteur et Formateur

• Missions d’architecture, de conception , de réalisation logicielles

• Fondateur de eiXa6

• Actuellement en mission sur un projet de gestion


• Actuellement en mission sur un projet de gestion

• Mes références :

� Mon profil Viadeo : http://fr.viadeo.com/fr/profile/fabien.brissonneau

� Mon profil LinkedIn : http://fr.linkedin.com/pub/fabien-brissonneau/65/902/92a/

Mes formations sur alphorm


Qu’est-ce que JavaFX?

• Une bibliothèque de classes Java pour construire une IHM

• Une solution pour des clients riches

• La couche graphique officielle de Java depuis la version 8


Plan de la formation

• Les outils et la mise en œuvre

• Les composants d’interface graphique

• Architecture de l’application

• Concurrence et interopérabilité

• Effets et animations

• Packaging et déploiement



• Graphismes

Publics concernés

• Cette formation s’adresse à des développeurs

• Connaître Java est nécessaire, ne pas être dérouté par sa syntaxe

• Nous ne reviendrons pas sur les concepts du langage


Prérequis de la formation

• Savoir lire du code Java

• Avoir des rudiments sur les interfaces graphiques

• Et … du courage comme toujours !


Les outils nécessaires

• Le SDK JavaFX est compris dans la livraison du JDK Java Standard

• L’outil Netbeans est utilisé en interface de développement

• L’outil SceneBuilder sera utilisé pour les constructions graphiques

• La présentation sera faite sous Windows 8


Les autres formations dév sur Alphorm


Are you ready ? ☺


Présentation générale

Les outils et la mise en œuvre




Présentation générale

Plan

• Démarrer avec JavaFX

• Applications graphiques clients riches

• Le client en Java

• Les APIs graphiques


• Le client riche

• Définition de JavaFX

• Le contenu de JavaFX

• Types d’applications

• Applications graphiques clientes


• Environnements d’exécution

• Environnements et outils

Démarrer avec JavaFX


• Concepts d’architecture de base

• Références

• Une application cliente est concerne essentiellement la présentation

• La logique de l’application est en grande partie sur le serveur

• La richesse du client dépend de la technologie employée

Applications graphiques clientes riches


• Le client en Java peut être

� Standalone : autonome, lancée de la console ou via le bureau

� Web HTML : la partie cliente n’est pas écrite en Java, exécuté sur le serveur

� Applet : le Java est exécuté sur le client, utilisant Swing par exemple

� Java Web Start : téléchargement et mise à jour du binaire si nécessaire

Le client en Java


� Java Web Start : téléchargement et mise à jour du binaire si nécessaire

• Java AWT : apparue avec Java 1, natif

• Java Swing : apparue avec Java 2, pure Java basée sur AWT, sans ressources

• JavaFX : mixant Java et XML

• SWT : fournie avec Eclipse, concurrent de Swing

Les APIs graphiques


• SWT : fournie avec Eclipse, concurrent de Swing

• Rich Internet Application (RIA)

• Caractéristiques similaires à une application installée

• Enrichit l’expérience HTML traditionnelle

• JavaScript/AJAX, CSS

Le client riche


• Applets, Adobe Flash, SilverLight

• Les applications JavaFX sont Java

• Elles accèdent aux APIs Java

� Accès au Système

� Accès aux serveurs

L’aspect des applications est modifié grâce aux CSS, séparant apparence

Définition de JavaFX


• L’aspect des applications est modifié grâce aux CSS, séparant apparence et fonctions

• L’usage du XML pour décrire l’ihm favorise le travail du graphiste

• Le FXML peut être créé via SceneBuilder

• A partir de JavaFX 2.2, les bibliothèques sont intégrées dans le JDK, Java natif

• FXML est un dialecte XML

• Interactions avec JavaScript dans WebView

• Interactions avec Swing

Le contenu de JavaFX


• Utilisation des CSS

• API de dessin dans un canvas

• Support du multitouch

• Hautement performant pour le rendu

• Déploiement facilité grâce à un packaging natif

• Typiquement applications utilisant les réseaux

• Applications multiplateformes

• Déploiement en tant que

� Standalone : le package est lancé comme une application Java classique

Types d’applications


� WebStart : à travers un lien Web (ou raccourci sur le bureau), téléchargement et mise à jour si nécessaire

� Encapsulée : dans une page Web

� Package auto-contenant : un package avec le runtime Java et JavaFX

Ce qu’on a couvert

• Démarrer avec JavaFX

• Applications graphiques clients riches

• Le client en Java

• Les APIs graphiques


• Le client riche


• Le contenu de JavaFX


Environnements





Environnements d’exécution

Plan



• Le packaging

• Mode d’exécution


• Les composants

• Paramétrer les générations

• Typiquement applications utilisant les réseaux

• Applications multiplateformes

• Déploiement en tant que

� Standalone : le package est lancé comme une application Java classique

Types d’applications


� WebStart : à travers un lien Web (ou raccourci sur le bureau), téléchargement et mise à jour si nécessaire

� Encapsulée : dans une page Web

� Package auto-contenant : un package avec le runtime Java et JavaFX

• 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



• Visualisation dans une page web

� Démarrage au chargement de la page

• Le mode d’exécution impacte le packaging

• Par défaut, les produits de packaging sont

� Le fichier JAR

� Le fichier JNLP

� Un fichier HTML référençant l’application

• Pour mimer des applications natives, on peut encapsuler l’application et

Le packaging


• Pour mimer des applications natives, on peut encapsuler l’application et le JRE

� Distribuées comme exe, msi, dmg, pkg, …

• Programme standalone : invocation par java –jar ou double-clic

• Avec Java Web Start : l’application est téléchargée d’un serveur distant

• Le code Java est encapsulé dans une page Web

• Dans un package auto-contenant : comme une application native

Mode d’exécution


• Le preloader : application JavaFX qui reçoit les notifications concernant le chargement et l’initialisation (tous les modes)

• Le support des raccourcis : pour les packages auto-contenant et les applications déployées par le web

• Les applications lancées via le web fonctionnent dans une « sandbox »

Les composants


• Auto-update : vérification automatique des mises à jour (webstart et dans une page web)

• Modifier le fichier build.xml

• Installer éventuellement le générateur d’installeur

� Inno Setup 5, pour un exe

� Wix, pour un msi

Paramétrer les générations





• Le packaging

• Mode d’exécution


• Les composants

• Paramétrer les générations

Outils de





Outils de développement

Plan

• JavaFX intégré dans le JDK

• JavaFX SceneBuilder

• Netbeans

• JavaPackager


• ScenicView

JavaFX intégré dans le JDK

• Depuis le JDK 7, JavaFX est intégré dans la livraison JSE

• Pour des versions antérieures, les livraisons séparées de JavaFX sont dsponibles

• Les exemples et démos de JavaFX sont accessibles dans les exemples et démos du JDK


JavaFX SceneBuilder

• Permet la construction interactive de l’ihm


L’interface NetBeans

• Outil standard Java

• Intégration possible avec SceneBuilder


JavaPackager

• Permet d’encapsuler une application java dans un exe. Inclus dans le jdk depuis 7

• Possibilité de comléter le packaging avec InnoSetup


ScenicView

• Site fxexperience.com

• Détaille runtime la composition du graphe



• JavaFX intégré dans le JDK

• JavaFX SceneBuilder

• Netbeans

• JavaPackager


• ScenicView

Concepts





Concepts d’architecture de base

Plan

• JavaFX API et Scene Graph

• Prism

• Glass

• Quantum Toolkit


Concepts d’architecture de base

• Un empilement de plusieurs couches


JavaFX API et Scene Graph

• Scene Graph est une arborescence de nœuds qui représente les éléments visuels

• Chaque nœud possède : id, classe de style, volume, et éventuellement effets, opacité, transformations, …

• Les primitives graphiques sont des nœuds


• La manipulation du graphe peut se faire via l’API ou bien de façon déclarative

Prism

• Responsable du rendu graphique

• Basé sur DirectX, OpenGL, .. Selon les plateformes

• Abstraction sous la forme de Graphics

• Gère le clipping, les régions à rafraichir, et les optimisations


• Supporte les polices de caractères

Glass

• Glass Windowing Toolkit

• Gère la queue d’événements, les événements en entrée, la surface de dessin

• Partie dépendante de la plateforme

• Tourne dans le même thread que l’application JavaFX


• Tourne dans le même thread que l’application JavaFX

• Basée sur Win32, Cocoa, GTK, … selon les plateformes

• A intervalle régulier, le graphe est synchronisé avec le rendu

• Les CSS sont alors appliquées

Quantum Toolkit

• Sert d’interface entre les APIs JavaFX et Prism et Glass

• Gère les threads rendu/événements

• Le graphe de nœuds peut être créé en dehors du thread de l’application

• Mais l’accès au graphe doit se faire du même thread que celui de l’application une fois accroché aux Stage, Scene ou Window


l’application une fois accroché aux Stage, Scene ou Window


• JavaFX API et Scene Graph

• Prism

• Glass

• Quantum Toolkit


Références





Références

Plan

• Le site Oracle et NetBeans

• Le projet OpenJFX

• La communauté JavaFX

• Un site innovant : fxexperience.com


• Autres et divers

• La documentation

� http://download.java.net/jdk8/jfxdocs/index.html

� http://download.java.net/jdk8/jfxdocs/javafx/scene/doc-files/cssref.html

• Le JDK, incluant JavaFX

Netbeans pour une interface de développement intégrée

Le site Oracle et Netbeans


• Netbeans pour une interface de développement intégrée

• Sous-projet de OpenJDK

� http://openjdk.java.net/projects/openjfx/

Le projet OpenJFX


• https://www.java.net/community/javafx

La communauté JavaFX


• http://fxexperience.com/

• Blog de développeurs de JavaFX

• Site de référence de ScenicView

Un site innovant


• JFXtras.org : contrôles complémentaires

• DataFX : abstraction pour l’accès aux données (www.javafxdata.org)

• OpenDolphin : un framework MVC (http://open-dolphin.org/dolphin_website/Home.html)

Autres et divers



• Le site Oracle et NetBeans

• Le projet OpenJFX

• La communauté JavaFX

• Un site innovant : fxexperience.com


• Autres et divers

Les contrôles

Les composants d’interface




Les contrôles

Plan

• Les contrôles

• Les boutons

• Les textes

• Les box


• Les listes

Contrôles UI

• Construire un nœud dans le graphe

• Portable sur les plateformes

• Adaptables via les CSS


Les boutons

• La racine est un layout


Les textes

• Fixes ou éditables, mot de passe


Les box

• Checkbox, Choicebox


Les listes

• ListView typée de son contenu


Les contrôles

• Label, Button, Radio button, Toggle button

• Checkbox, Choicebox,

• Text Field, Password Field,

• Scroll Bar, Scroll Pane,

• ListView, TableView, Tree TableView, ComboBox,


• ListView, TableView, Tree TableView, ComboBox,

• Separator, Slider, ProgressBar, Hyperlink, Tooltip,

• HTML Editor, Titled Pane, Accordion, Menu,

• Color Picker, Date Picker,

• Pagination Control, File Chooser


• Les contrôles

• Les boutons

• Les textes

• Les box


• Les listes

Les layouts





Les layouts

Plan

• BorderPane connaît 5 positions

• HBox met tout à l’horizontal

• VBox met tout à la verticale

• StackPane met tout en pile


• GridPane permet de construire une grille

• FlowPane met tout à la suite

• TilePane présente des cellules uniformes

• AnchorPane ancre les contrôles

Les layouts

• Ce sont des conteneurs intermédiaires

• Chaque layout a sa propre politique d’arrangement des contrôles fils

• Des propriétés supplémentaires peuvent être positionnées

� Espacements


� Police

� Couleur

� Contraintes

� …

BorderPane


HBox


VBox

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


StackPane


GridPane


FlowPane


TilePane

• Similaire au FlowPane, mais tailles identiques


AnchorPane



• BorderPane connaît 5 positions

• HBox met tout à l’horizontal

• VBox met tout à la verticale

• StackPane met tout en pile


• GridPane permet de construire une grille

• FlowPane met tout à la suite

• TilePane présente des cellules uniformes

• AnchorPane ancre les contrôles

Les charts





Les charts

Plan

• Pie Chart

• Line Chart

• Area Chart

• Bubble Chart


• Scatter Chart

• Bar Chart

Pie Chart


Line Chart


Area Chart


Bubble Chart


Scatter Chart


Bar Chart



• Pie Chart

• Line Chart

• Area Chart

• Bubble Chart


• Scatter Chart

• Bar Chart

Habillage avec CSS





Habillage avec CSS

Plan

• Habillage

• Les CSS

• Créer ses propres feuilles

• Les sélecteurs

• Modifier les axes

• Les couleurs dans les séries

• Et autres…


• Les règles et propriétés

• Appliquer un style à un contrôle

• Appliquer le style dans le code

• Habiller les graphiques

Habillage avec CSS

• Cascading Style Sheet

• L’habillage concerne

� Les contrôles

� Les graphiques


• Similaire aux CSS en HTML

• Basées sur la version 2.1 W3C CSS

• Avec des additions de la version 3

• Des extensions spécifiques à JavaFX

Les CSS


• Par défaut : modena.css

• Utiliser l’extension .css

• Dans le même répertoire que la classe principale de l’application JavaFX

Créer ses propres feuilles


• Les sélecteurs

� Les classes de styles sont les noms des classes

• .button

� Un style est associé à un id (setId(…) sur le noeud)

• #mon-bouton

Le sélecteurs dans les CSS


• #mon-bouton

� Les pseudo-classes pour un état donné

• .radio-button: focused

• Les noms de règles sont les noms de propriétés

• -fx-background-color : #333333;

• On peut reprendre dans un nœud descendant une propriété d’un nœud ascendant

• Changer les propriétés de la classe .root change toute la scene

Les règles et propriétés


• Changer les propriétés de la classe .root change toute la scene

Appliquer un style à un contrôle


Appliquer un style dans le code


• Tous les charts ont des propriété communes :

� .chart : la globalité

� .chart-content : le contenu graphique

� .chart-title : le titre

� .chart-legend : la légende

Habiller les graphiques


� .chart-legend : la légende

Modifier les axes


• Jusqu’à 8 couleurs de prédéfinies

Les couleurs des séries


• Les symboles des séries

� .chart-symbol

• Les couleurs peuvent être des images et des gradients

• …

Et autres …



• Habillage

• Les CSS

• Créer ses propres feuilles

• Les sélecteurs

• Appliquer le style dans le code

• Habiller les graphiques



• Les sélecteurs

• Les règles et propriétés

• Appliquer un style à un contrôle


• Les couleurs dans les séries

IHM avec FXML

Architecture de l’application




IHM avec FXML

Plan

• Le langage FXML

• Le lien entre FXML et Java

• Les contrôles en FXML

• La gestion des événements


• L’usage de CSS avec FXML

• Utiliser SceneBuilder

• Langage basé sur XML

• Permet la description de l’interface indépendamment du code Java

Le langage FXML


• La scène est construite à partir du XML

Le lien entre Java et FXML


• Chaque balise est un contrôle …

Les contrôles en FXML


• Gérer les événements avec du code Java

La gestion des événements


• Est possible avec un autre langage compatible JSR223

La gestion des événements


• Référencer une CSS dans le fichier FXML

• Les références se font :

� Sur la classe de style

� Sur les ids des balises

L’usage des CSS avec FXML


CSS et FXML


• Un outil pour modifier la présentation

Utiliser SceneBuilder



• Le langage FXML

• Le lien entre FXML et Java

• Les contrôles en FXML



• L’usage de CSS avec FXML

• Utiliser SceneBuilder

L’arbre Scene Graph





L’arbre Scene Graph

Plan

• API Scene Graph

• L’arborescence essentielle

• Les principaux packages

• Les principales classes


• Le modèle

L’API Scene Graph

• Sert à construire une interface graphique

• Avec des effets visuels

• Un graphe de scène est assez commun dans les applications graphiques

• Le développeur construite ce graphe et laisse le système dessiner (quels objets, les zones à peindre, quels rendus)


objets, les zones à peindre, quels rendus)

• Le graphe contient des nœuds de branches et des nœuds de feuilles

• Accrocher une racine à la scène

L’arborescence essentielle


• Package javafx.scene : Scene, Group,…

• Package javafx.scene.control : Button,…

• Package javafx.scene.layout : StackPane,…

• Package javafx.scene.shape : Rectangle,…

Les principaux packages


• Package javafx.scene.paint : Color

• Dans le premier package, on trouve :

� Node

� Parent

� Scene

• Node : un nœud dans le graphe

• Shape : forme géométrique

• Canvas : zone de tracé libre

• ImageView : pour afficher des images

Les principales classes


• Parent : contient des nœuds

� Group : pour appliquer des effets à plusieurs enfants

� Region : pour appliquer des CSS et positionner les enfants

� WebView : pour gérer un WebEngine

Modèle javafx



• API Scene Graph

• L’arborescence essentielle

• Les principaux packages

• Les principales classes


• Le modèle

Propriétés





Propriétés et binding

Plan

• Les collections observables

• Les propriétés

• Les binding


• Répondre aux changements dynamiques des données

• Les collections sont beaucoup utilisées pour les données

• Un modèle par notification est très simple à utiliser

• Les changements des données vont générer des notifications que nous observerons

Utiliser des collections observables


observerons

• Des interfaces

� ObservableList, ObservableMap

� ListChangeListener, MapChangeListener

• Des classes

FXCollections : classe statique

Quid des collections observables


� FXCollections : classe statique

� List/MapChangeListener.Change : une modification dans la collection

• Créer une liste observable

Exemple de collection observable


• S’abonner à la notification

• Une façon d’accéder aux données

• Les propriétés sont observables

Les propriétés


Abonnement à une propriété


• Des classes disponibles pour les primitives

Le modèle des propriétés


• Le changement dans un contrôle est répercuté dans l’autre

Les propriétés des contrôles



• Les collections observables

• Les propriétés

• Les binding


Composants





Composants personnalisés

Plan

• Décrire le composant dans un fichier FXML

• Coder le Java du contrôleur du composant

• Utiliser le nouveau composant


• Ici un bouton et un label

Décrire le composant FXML


• Le contrôleur charge le fichier FXML

Coder le contrôleur


• Utilisation du composant Perso, rien de spécial

Utiliser le composant



• Décrire le composant dans un fichier FXML

• Coder le Java du contrôleur du composant

• Utiliser le nouveau composant


Applications JavaFX et





Applications JavaFX et HTML5

Plan

• Un navigateur encapsulé dans JavaFX

• Supporte CSS, JavaScript, DOM, HTML5

• Interactions entre JavaFX et JavaScript


• WebView associé à WebEngine

Un navigateur encapsulé


• Chargement du fichier HTML

Supporte HTML, Javascript…


• Exécution du JavaScript à partir de JavaFX

Interaction JavaFX et Javascript


• Et l’inverse


• Un navigateur encapsulé dans JavaFX

• Supporte CSS, JavaScript, DOM, HTML5

• Interactions entre JavaFX et JavaScript


Le multithread en

Concurrence et interopérabilité




Le multithread en JavaFX

Plan

• Modèle de thread

• Exécution de tâches de fond

• Intégration de JavaFX et Swing


• Un grand nombre de threads

• Un thread remarquable : JavaFX Application

• Les gestionnaires d’événement sont exécutés dans ce dernier thread

• La classe javafx.application.Application

Les threads dans l’application


� Méthodes static launch() [ 2 versions]

� Méthodes init(), start(), stop() : cycle de vie

• Thread launcher : init()

• Thread JavaFX Application : start() et stop()

• Les événements sont gérés dans ce thread

• Toutes les manipulations de scène (active) doivent être réalisées dans ce thread

• C’est le même thread que le code natif (Glass Windowing Toolkit)

• Notons le thread du rendu graphique (Prism)

JavaFX Application Thread


• Notons le thread du rendu graphique (Prism)

� Synchronisé par des « pulse » (60/s)

• Notons aussi un thread multimédia

• De longs traitements dans le gestionnaire d’événement bloque le thread UI

• Déléguer les traitements

� Utiliser Runnable

� Utiliser java.util.concurrent

Méthodes longues …


� Utiliser java.util.concurrent

� Utiliser javafx.concurrent

Swing et JavaFX

• Composant Swing dans JavaFX

� Classe javafx.embed.swing.SwingNode

� Permet de connecter un composant simple Swing

• Une scène JavaFX incluse dans une application Swing

Problématique de thread :


• Problématique de thread :

� Les manipulations de scène JavaFX se font dans le thread JavaFX Application

� Pour Swing, dans Swing EDT

• De JavaFX vers Swing : EventQueue.invokeLater() et dans le sens inverse : Platform.runLater()


• Modèle de thread

• Exécution de tâches de fond

• Intégration de JavaFX et Swing


Exécution de tâches de





Exécution de tâches de fond

Plan

• Le framework javafx.concurrent

• Une interface : Worker

• 3 classes abstraites l’implémentant :

� Task<V>


� Service<V>

� ScheduledService<V>

• Le worker est une unité de travail, dont l’état interne est inspectable à partir du thread de l’application

• Représente la tâche

L’interface Worker


• READY : état initial

• SCHEDULED

• RUNNING

• SUCCEEDED : état final

Etats du Worker


• CANCELLED : état final

• FAILED : état final

• La méthode cancel() atteint CANCELLED si le worker n’était pas dans un état final

• Task<V> : une tâche qui fonctionne une fois

� Les propriétés supportent les abonnements

� Une ihm peut représenter le degré d’avancement de la tâche

• Service<V> : relance indéfiniment une tâche

ScheduledService<V> : dérive de la précédente, contrôle la façon dont

Les classes d’implémentation


• ScheduledService<V> : dérive de la précédente, contrôle la façon dont la tâche est répétée

• Créer une tâche

• S’abonner à l’avancement

Task<V>


• S’abonner à l’avancement

• Démarrer la tâche


• Une interface : Worker

• 3 classes abstraites l’implémentant :

� Task<V>

� Service<V>

ScheduledService<V>


� ScheduledService<V>

• Le worker est une unité de travail, dont l’état interne est inspectable du thread de l’application

Intégration JavaFX et





Intégration JavaFX et Swing

Plan

• JavaFX dans Swing

• Swing dans JavaFX


• JFXPanel est une sous-classe de Jcomponent

• Exécution dans le thread JavaFX Application

JavaFX dans Swing


• SwingNode est un nœud spécialisé

• Valable pour tous les composants légers

Swing dans JavaFX


• De JavaFX vers Swing

� EventQueue.invokeLater(…)

� SwingUtilities.invokeLater(…)

• De Swing vers JavaFX

Platform.runLater(…)

Appels de l’un à l’autre


� Platform.runLater(…)


• JavaFX dans Swing

• Swing dans JavaFX


L’API de gestion

Graphisme




L’API de gestion d’images

Plan

• Image Ops API, package javafx.scene.image

• Lire des pixels d’une image

• Ecrire des pixels d’une image

• Le contexte graphique


• Les instantanés de Scene

• Image : une image graphique, vous pouvez lire des pixels

• WritableImage : sous-classe de Image, vous pouvez écrire des pixels

• PixelReader, PixelWriter : interfaces, pour lire et écrire des pixels

• PixelFormat : le format des données

Image Ops API


• WritablePixelFormat : sous-classe de PixelFormat

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

Lire des pixels d’une image


• Récupération de la couleur et modification

Ecrire des pixels d’une image


• Contexte graphique

Ecrire en bloc


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

Création d’instantanés



• Image Ops API, package javafx.scene.image

• Lire des pixels d’une image

• Ecrire des pixels d’une image

• Le contexte graphique


• Les instantanés de Scene

Dessiner avec Canvas

Graphisme




Dessiner avec Canvas

Plan

• Accéder au contexte

• Exemple de tracés

• Les gradients

• Les ombres



• Dans javafx.scene.canvas

� Canvas

� GraphicsContext

• Consiste en général à

Créer un Canvas

JavaFX Canvas API


� Créer un Canvas

� Récupérer son GraphicsContext

� Appeler des opérations graphiques

• Code type pour accéder au contexte graphique

Accéder au contexte


• Avec des formes prédéfinies

Exemple de tracés


• Avec un chemin

Exemples de tracés


• Gradient linéaire ou radial

Gradients


Ombres


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

Support des événements



• Accéder au contexte

• Exemple de tracés

• Les gradients

• Les ombres



Dessiner en 3D

Graphisme




Dessiner en 3D

Plan

• La classe Shape3D

• La caméra

• L’éclairage

• La matière


• La classe javafx.scene.shape.Shape3D est dérivée en :

� MeshView

� Box

� Cylinder

� Sphere

La classe Shape3D


� Sphere

• Pour faire ses propres formes :

� Mesh

� TriangleMesh

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

• La classe PerspectiveCamera

La caméra


• De la classe javafx.scene.LightBase

� AmbientLight

� PointLight

L’éclairage


• La classe javafx.scene.paint.PhongMaterial

La matière



• La classe Shape3D

• La caméra

• L’éclairage

• La matière


Création d’effets

Effets, animations et multimédia




Création d’effets visuels

Plan• Contenu de javafx.scene.effect

• Bending : recouvrement

• Bloom : lueur

• Blur : brouillage

• Drop Shadow : ombre portée



• Inner Shadow : ombre à l’intérieur

• Reflection : reflet

• Lighting : illumination

• Perspective

• Chaîner les effets

• Contient toutes les classes nécessaires à la réalisation des effets

• Les énumérés

� paramètres

Le package javafx.scene.effect


• La gestion du recouvrement

Bending


• Luminescence, avec un seuil

� Par défaut 0.3

� Jusqu’à 1.0, qui annule l’effet

Bloom


• Flouté avec BoxBlur, MotionBlur, GaussianBlur

Blur


• Ombre portée

� paramétrée en couleur et décalage

Drop Shadow


• Ombre dans l’objet lui-même

Inner Shadow


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

• Le reflet

Reflection


• Effet d’éclairage

Lighting


• Dans cet exemple, appliqué à un groupe

Perspective




Chaîner les effets


Ce qu’on a couvert• Contenu de javafx.scene.effect

• Bending : recouvrement

• Bloom : lueur

• Blur : brouillage




• Inner Shadow : ombre à l’intérieur

• Reflection : reflet

• Lighting : illumination

• Perspective

• Chaîner les effets

Les transformations





Les transformations

Plan

• Définition et généralités

• Translation

• Rotation

• Mise à l’échelle


• Déformation sur un axe (shearing)

• Package javafx.scene.transform

• Une transformation change l’emplacement d’un objet

• Types de transformations :

� Translation : translation

� Rotation : rotation

Définition et généralités


� Rotation : rotation

� Scaling : mise à l’échelle

� Shearing : un axe « penche »

• Applicables sur un groupe

• Applicables sur 3 coordonnées

� 3 ème coordonnée optionnelle (alors 2D ! )

• Déplacement en x, y et z

Translation


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

Rotation


• Une déformation par échelle

Scaling


• Déformation sur un axe

Shearing



• Définition et généralités

• Translation

• Rotation

• Mise à l’échelle


• Déformation sur un axe (shearing)

Les transitions





Les transitions et animations

Plan

• Transitions

• Animations

• Interpolations


• Fade Transition

Les transitions


• Fade Transition : disparition progressive

• Path Transition : déplacement le long d’un chemin

• Parallel Transition : exécution simultanée de plusieurs transitions

• Sequential Transition : exécution séquentielle de plusieurs transitions

Les transitions


Basées sur une ligne de temps

Les propriétés sont modifiées en fonction du temps

Il faut fournir les états de la scène à certains moments

Les animations


Des triggers peuvent être ajoutés, avec levée d’événements

• Des interpolateurs linéaires par défaut sont utilisés

• On peut changer d’interpolateur

Les interpolateurs


• Ou même créer sa propre classe

� Hériter de Interpolator


• Transitions

• Animations

• Interpolations


Audios ou vidéos





Audios ou vidéos

Plan

• Les effets sonores

• Les différents types de fichiers

• Utiliser MediaPlayer

• Mettre en œuvre des vidéos


Les effets sonores

• Dans le package javafx.scene.media

• La classe AudioClip permet de référencer le fichier son

� Le constructeur charge le fichier (bloque le thread courant)

� La méthode play() joue le son

Paramétrage ou pas du volume


• Paramétrage ou pas du volume

• Paramètres volume, balance, vitesse, priorité…

Les différents types de fichiers

• JavaFX supporte 4 formats audio

� MP3 (audio/mpeg), AIFF (audio/x-aiff), WAV (audio/x-wav), AAC (audio/aac)

• JavaFX support 3 formats vidéo

� FXM : video/x-javafx (format natif, VP6 avec audio MP3)

FLV : video/x-flv (Flash Video, mais uniquement la variante VP6+MP3)


� FLV : video/x-flv (Flash Video, mais uniquement la variante VP6+MP3)

� MP4 : video/mp4 (H264 video + AAC audio)

La classe MediaPlayer

• Dans le package javafx.scene.media

• Il y a 3 classes essentielles : Media, MediaPlayer et MediaView

• Media encapsule la ressource audio ou vidéo

� Taille, durée, erreurs


• MediaPlayer propose des méthodes pour agir sur le média

• MediaView est le nœud rattaché au graphe de la scène

Mise en œuvre de vidéos

• Créer un Media, le MediaPlayer, puis le MediaView


• Lier des contrôles aux propriétés de la vidéo


• Les effets sonores

• Les différents types de fichiers

• Utiliser MediaPlayer

• Mettre en œuvre des vidéos


Démarrage et

Packaging et déploiement




Démarrage et exécution

Plan


• Les différences de lancement

• La communication avec la page Web

• La dépendance à la plateforme



• Lancement comme une application de bureau

� L’utilisateur utilise une ligne de commande ou double-clique sur un JAR

• Lancement par un navigateur

� L’utilisateur clique sur un lien pour télécharger et exécuter

Lancement lors du chargement d’une page web


• Lancement lors du chargement d’une page web

� L’application est exécutée lorsque la page est chargée

• Lancement comme application auto-contenante

� L’application contient le JRE, elle se présente comme une application native

Les différences de lancement

• Le support du preloader peut varier

� Par exemple, pas d’événements de chargement pour les applications standalone

• Les paramètres de proxy sont soit ceux du navigateur soit ceux du système


• Les raccourcis sur le bureau ne sont possibles que pour les applications standalone

• Les applications lancées via un navigateur ne peuvent accéder à certaines ressources client

• La mise à jour automatique est pour les applications accédées vie un navigateur

La communication avec la page Web

• La classe JavaFX HostServices

• Permet d’accéder au contexte web

� Exécution de javascript par exemple

• Les applets peuvent elles aussi accéder au contexte


• Le contexte web n’existe pas (null) pour les autres types d’applications

La dépendance à la plateforme

• L’installation préalable du JRE est nécessaire

� Un utilisateur peut ne pas avoir les permissions

� Une ancienne version du JRE est nécessaire

� L ’application nécessite une version très précise

� Des frameworks externes sont nécessaires


� Des frameworks externes sont nécessaires

• Une application auto-contenue est nécessaire



• Les différences de lancement

• La communication avec la page Web

• La dépendance à la plateforme


Internationalisation





Internationalisation

Plan

• Internationalisation du code Java

• Internationalisation du FXML

• Internationalisation avec SceneBuilder


Internationalisation du code Java

• La classe Locale représente une culture/une langue

• La classe ResourceBundle

� Sous-classe PropertyResourceBundle


• Associée à un fichier de propriétés

� Sous-classe ListResourceBundle

Internationalisation du FXML

• Les clés des propriétés sont repérées par un %

• Puis associer le fichier avec un bundle


Internationalisation avec SceneBuilder

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



• Internationalisation du code Java

• Internationalisation du FXML

• Internationalisation avec SceneBuilder


Le packaging





Le packaging

Plan

• Rôle des outils de packaging

• Le packaging par défaut

• Les outils de packaging

• Le packaging natif


• La sécurité les exécutions « web »

• La signature des jar

Rôle des outils de packaging

• Un outil de packaging génère ce qu’il faut pour l’utilisateur :

• S’assurer que le JRE requis est installé

• Télécharger les dépendances et proposer de les installer

• Fournir un visuel pour l’utilisateur lors du chargement


• Fournir des messages d’erreur clairs

Le packaging par défaut

• Dans un répertoire prêt pour la distribution :

� Un jar exécutable

� Les jar supplémentaires

� Un descripteur de déploiement dans un fichier JNLP

� Un fichier HTML avec un code JavaScript pour lancer le jar d’un page web


� Un fichier HTML avec un code JavaScript pour lancer le jar d’un page web

Les outils de packaging

• Le mode recommandé est d’utiliser les tâches Ant

� Jar ant-javafx.jar

• NetBeans utilise les tâches Ant

• Un outil en ligne de commande


� L’outil javapackager

• Les CSS peuvent être compilées

Le packaging natif

• Configurer le projet pour générer en natif


• Choisir la génération à partir du menu contextuel (NetBeans)

� Image avec un exe lanceur

� Nécessite l’installation de Inno Setup 5 pour un exe auto-exécutable

� Nécessite l’installation de Wix 3 pour un msi

� …

La sécurité pour les exécutions « web »

• Applications webstart, dans un navigateur…

• Nécessite un JRE au niveau (proposition de téléchargement)

• Nécessite l’autorisation d’exécution


La signature des jar

• Méthode traditionnelle en Java ou bien avec les outils de packaging

• Nécessite un certificat d’un tiers, les jar auto-signés sont interdits

• Vous pouvez configurer le poste pour autoriser certaines URL



• Rôle des outils de packaging

• Le packaging par défaut

• Les outils de packaging

• Le packaging natif


• La sécurité les exécutions « web »

• La signature des jar

Conclusion

Formation JavaFX 8



Conclusion


Plan

• Les outils et la mise en œuvre

• Les composants d’interface graphique

• Architecture de l’application


• Effets et animations

• Packaging et déploiement



• Graphismes

Pour continuer …

• La formation Java fondamentaux …

• La formation Java avancée …

• La formation Android …


Merci d’avoir suivi cette formation,


rendez-vous pour la suite !

Alphorm.com Formation JavaFX

Technology