Alphorm.com Formation JavaFX

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

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

Présentation du formateur • Fabien Brissonneau • Email : fabien.brissonneau@gmail.com • Consultant Concepteur et Formateur • Missions d’architecture, de conception , de réalisation logicielles • Fondateur de eiXa6 • Actuellement en mission sur un projet de gestion 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/

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 • La couche graphique officielle de Java depuis la version 8 Formation JavaFX alphorm.com™©

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

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™©

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™©

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™©

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 : http://www.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Présentation générale

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

• 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

• 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™©

• 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

• 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

• 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

• 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

• 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

• 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

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

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

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

• 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

• 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, …

• 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™©

• 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)

• 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™©

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

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

Plan • JavaFX intégré dans le JDK • JavaFX SceneBuilder • Netbeans • JavaPackager Formation JavaFX alphorm.com™© • 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 Formation JavaFX alphorm.com™©

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 le packaging avec InnoSetup Formation JavaFX alphorm.com™©

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.com™© • ScenicView

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

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 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

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

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

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

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.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Références

Plan • Le site Oracle et NetBeans • Le projet OpenJFX • La communauté JavaFX • Un site innovant : fxexperience.com Formation JavaFX alphorm.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 Formation JavaFX alphorm.com™© • Netbeans pour une interface de développement intégrée

• 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 JavaFX alphorm.com™©

• JFXtras.org : contrôles complémentaires • DataFX : abstraction pour l’accès aux données (www.javafxdata.org) • OpenDolphin : un framework MVC (http://opendolphin.org/dolphin_website/Home.html) Autres et divers Formation JavaFX alphorm.com™©

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

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

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 alphorm.com™©

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 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

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.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Les layouts

Plan • BorderPane connaît 5 positions • HBox met tout à l’horizontal • VBox met tout à la verticale • StackPane met tout en pile 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

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 …

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 • 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

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

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 • Bar Chart

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

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

Habillage avec CSS • Cascading Style Sheet • L’habillage concerne Les contrôles Les graphiques Formation JavaFX alphorm.com™©

• 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

• 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™©

• 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

• 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

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 : le titre .chart-legend : la légende Habiller les graphiques Formation JavaFX alphorm.com™© .chart-legend : la légende

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 JavaFX alphorm.com™©

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

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

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

• Langage basé sur XML • Permet la description de l’interface indépendamment du code Java Le langage FXML Formation JavaFX alphorm.com™©

• 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’usage des CSS avec FXML Formation JavaFX alphorm.com™©

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 Formation JavaFX alphorm.com™© • L’usage de CSS avec FXML • Utiliser SceneBuilder

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

Plan • API Scene Graph • L’arborescence essentielle • Les principaux packages • Les principales classes Formation JavaFX alphorm.com™© • 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) Formation JavaFX alphorm.com™© 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 Formation JavaFX alphorm.com™©

• 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

• 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

Modèle javafx Formation JavaFX alphorm.com™©

Ce qu’on a couvert • API Scene Graph • L’arborescence essentielle • Les principaux packages • Les principales classes Formation JavaFX alphorm.com™© • Le modèle

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

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 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

• 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

• 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.alphorm.com/blog Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels Composants personnalisés

Plan • Décrire le composant dans un fichier FXML • Coder le Java du contrôleur du composant • Utiliser le nouveau composant Formation JavaFX alphorm.com™©

• 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 nouveau composant Formation JavaFX alphorm.com™©

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

Plan • Un navigateur encapsulé dans JavaFX • Supporte CSS, JavaScript, DOM, HTML5 • Interactions entre JavaFX et JavaScript Formation JavaFX alphorm.com™©

• 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 JavaFX et JavaScript Formation JavaFX alphorm.com™©

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

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 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()

• 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

• 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

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()

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™©

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

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

• 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™© • 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 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

• Créer une tâche • S’abonner à l’avancement Task<V> Formation JavaFX alphorm.com™© • S’abonner à l’avancement • Démarrer la tâche

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

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

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 JavaFX alphorm.com™©

• SwingNode est un nœud spécialisé • Valable pour tous les composants légers Swing dans JavaFX Formation JavaFX alphorm.com™©

• 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(…)

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 Forum : http://www.alphorm.com/forum Fabien Brissonneau Consultant, concepteur et formateur Objets Logiciels L’API de gestion d’images

Plan • Image Ops API, package javafx.scene.image • Lire des pixels d’une image • Ecrire des pixels d’une image • Le contexte graphique Formation JavaFX alphorm.com™© • 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 Formation JavaFX alphorm.com™© • WritablePixelFormat : sous-classe de PixelFormat

• 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 image • Le contexte graphique Formation JavaFX alphorm.com™© • Les instantanés de Scene

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

Plan • Accéder au contexte • Exemple de tracés • Les gradients • Les ombres Formation JavaFX alphorm.com™© • La gestion des événements

• 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

• Code type pour accéder au contexte graphique Accéder au contexte 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™© • La gestion des événements

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

• 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

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

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

• 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™©

• 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.

• 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.

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

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

Plan • Définition et généralités • Translation • Rotation • Mise à l’échelle Formation JavaFX alphorm.com™© • 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 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 ! )

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)

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

• 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™©

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

• 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

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

Plan • Les effets sonores • Les différents types de fichiers • Utiliser MediaPlayer • Mettre en œuvre des vidéos Formation JavaFX alphorm.com™©

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é…

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)

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

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

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™©

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

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™©

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

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

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

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

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™©

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

Plan • Internationalisation du code Java • Internationalisation du FXML • Internationalisation avec SceneBuilder Formation JavaFX alphorm.com™©

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

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™©

Internationalisation avec SceneBuilder • L’outil permet de remplacer les chaînes de caractères une clé Formation JavaFX alphorm.com™©

Ce qu’on a couvert • Internationalisation du code Java • Internationalisation du FXML • Internationalisation avec SceneBuilder Formation JavaFX alphorm.com™©

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

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

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

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

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

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 …

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™©

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™©

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

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

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

Pour continuer … • La formation Java fondamentaux … • La formation Java avancée … • La formation Android … Formation JavaFX alphorm.com™©

Alphorm.com Formation JavaFX

Contenu connexe

Tendances

En vedette

Similaire à Alphorm.com Formation JavaFX

Plus de Alphorm

Alphorm.com Formation JavaFX