JAVA-18-JavaFx

JavaFx

1. Présentation

Sommaire

7. La concurrence

2. Installation

Objectifs : découvrez les différentes possibilités de création d'interfaces du framework graphique JavaFx.

3. Les différents éléments

4. L'interface avec FXML

5. Gestion du graphisme

6. Les évènements

Présentation

1- Présentation

Succession de Swing et Awt :

JavaFX est un framework graphique pour les applications Java, qui a remplacé les bibliothèques Swing et AWT.JavaFX est une alternative plus moderne et plus flexible à Swing et AWT pour le développement d'applications Java. En apportant plus d'éléments graphiques, des transitions, des interactions utilisateur... Il permet également de développer des applications pour différentes plateformes, telles que desktop, web, mobile et TV.

1- Présentation

Historique :

JavaFX a été développé par Sun Microsystems en 2005. Au fil des années, JavaFX a été mis à jour pour inclure des fonctionnalités plus avancées telles que la prise en charge de HTML5 et JavaScript, ainsi que pour améliorer la performance et la qualité graphique. En 2010, Oracle a acquis Sun Microsystems, ce qui a conduit à une redirection de la stratégie de JavaFX pour s'adapter aux besoins de l'industrie. En ce qui concerne la gouvernance de JavaFX, celle-ci est gérée par l'OpenJFX Project, qui est un projet open source. Grâce à sa gouvernance open source, il est soutenu par une communauté de développeurs déterminés à améliorer le framework pour répondre aux besoins de l'industrie.

1- Présentation

Solution multi-plateformes :

En plus de son support pour les applications desktop, mobiles, web et télévision, JavaFX est également multi-plateforme, ce qui signifie qu'elle fonctionne sur de nombreux systèmes d'exploitation différents, notamment Windows, Mac OS X et Linux, Android... Cela permet aux développeurs de créer des applications qui s'exécutent sur de nombreux systèmes d'exploitation différents, sans avoir à effectuer de modifications spécifiques à chaque plateforme.

1- Présentation

Le déploiement et le packaging :

Les applications JavaFX peuvent être déployées de différentes manières, notamment en utilisant Java Web Start, en utilisant un installeur JavaFX, en utilisant un package d'installation pour le système d'exploitation, ou en utilisant un conteneur JavaFX. Le packaging est la préparation de l'application JavaFX pour le déploiement. Cela implique la compression des fichiers nécessaires à l'application, la définition des dépendances nécessaires, et la préparation des fichiers d'installation. Les applications JavaFX peuvent être empaquetées en utilisant des outils tels que JavaFX Packager, Gradle, ou Maven. Il est important de les faire correctement pour garantir la qualité de l'application et éviter les erreurs et les problèmes techniques.

Info

1- Présentation

Les outils de développement :

Les ide pouvant intégrer la librairie JavaFX :

• Eclipse, NetBeans, Vs Code, IntelliJ...

Un outil graphique pour créer des interfaces utilisateur JavaFX sans écrire de code :

• Scene Builder.

Un outil pour empaqueter et déployer des applications JavaFX :

• JavaFX Packager.

Une bibliothèque graphique pour Java qui permet de développer des applications graphiques et interactives :

• JavaFX Scene Graph.

1- Présentation

Approche déclarative et procédurale :

Avec le framework JavaFX, nous avons deux approches possibles : Approche déclarative :Elle consiste à omettre la façon dont l'interface va être mise en place. Cela veut dire que les classes et propriétés représentant les éléments graphiques ne seront pas instanciées et manipulées via du code. On utilise souvent l'outil "Scene Builder" pour cela. Autour de cette approche, une arborescence d'application est imposée avec des classes Java spécifiques, plus l'apport du langage FXML pour toute la structure des fenêtres (nous y reviendrons plus tard dans le module). Approche procédurale :Elle consiste à écrire du code pour contrôler explicitement le comportement de l'interface utilisateur. Cela peut inclure l'ajout de contrôles, la gestion des événements, la modification de propriétés, etc. Cette approche est souvent considérée comme plus flexible et plus performante, mais elle peut également être plus complexe et plus difficile à maintenir.

Installation

2- Installation

Installation de la librairie dans l'IDE VS Code:

Pour intégrer JavaFX, vous pouvez suivre les étapes suivantes : 1. Téléchargez et installez la dernière version de VS Code si vous ne l'avez pas déjà fait. 2. Téléchargez le SDK de JavaFX à partir du site officiel. 3. Dans VS Code, avec le raccourci clavier ctrl-shift-p, créer un projet java, comme ci-dessous :

2- Installation

Installation de la librairie dans l'IDE suite :

Pour cela, il faut ajouter dans les librairies du projet, les fichiers jar de la version de javafx téléchargé précédemment. Comme présenté ci-dessous :

2- Installation

Mini application javaFX :

Afin de tester l'import de la bibliothèque dans ce projet javaFX, nous allons créer un fichier à l'intérieur d'un package nommé "appJavafx". Pour cela cliquez droit sur le dossier "src" de l'application et sélectionnez l'option "new java package". Ainsi nous créons dans ce nouveau package une classe java nommées "Main.java" : A l'intérieur de ce fichier nous allons mettre en place une logique pour tester si javaFX est bien installé : Pensez à supprimer le fichier "App.java".

2- Installation

Mini application javaFX :

Pour exécuter correctement l'application en prenant compte des classes principale de javaFX, nous allons créer un fichier "launch.json" : Pour cela, il faut cliquer sur l'icone de debug de VS Code à gauche dans le menu vertical, puis sur le lien "create à launch.json file".

2- Installation

Installation de la librairie dans l'IDE Eclipse:

Pour intégrer JavaFX dans Eclipse, vous pouvez suivre les étapes suivantes : 1. Téléchargez et installez la dernière version d'Eclipse si vous ne l'avez pas déjà fait. 2. Téléchargez le SDK de JavaFX à partir du site officiel. 3. Dans Eclipse, clique droit sur le projet -> build path -> configure build path -> java build path -> libraries -> clique sur module path -> add external JARs

2- Installation

Installation de la librairie dans l'IDE suite :

Vous pouvez en parallèle utiliser le plugin "e(fx)clipse" téléchargeable via le marketplace d'Eclipse. Ce dernier permet de créer un projet "JavaFX" en proposant une structure de base. Une fenêtre déjà fonctionnelle est ainsi proposée pour bien entamer le développement.

2- Installation

Création d'un projet :

Deux manières de créer un projet avec JavaFx : Soit on passe par la création de la classe principale avec la méthode "main()" avec la création complète de la fenêtre en procédurale. Soit on exploite le plugin installé précédemment pour la création d'un projet JavaFX comme montré ci-dessous :

2- Installation

Le cycle de vie de l'application :

Le cycle de vie de l'application JavaFX comprend les étapes suivantes:

1. Initialisation: Création de l'objet Application et appel de la méthode init().
2. Configuration: Configuration des paramètres de l'application, tels que les ressources graphiques et les événements utilisateur.
3. Lancement: Appel de la méthode start() pour démarrer l'application. C'est à ce stade que la fenêtre principale de l'application est créée et affichée à l'utilisateur.
4. Exécution: L'application est maintenant en cours d'exécution et réagit aux événements utilisateur. Les tâches d'arrière-plan peuvent être exécutées à ce stade.
5. Arrêt: Lorsque l'utilisateur ferme la fenêtre principale de l'application, la méthode stop() est appelée pour arrêter proprement l'application. Les ressources utilisées par l'application sont libérées à ce stade.
6. Terminaison: Le cycle de vie de l'application se termine lorsque toutes les ressources ont été libérées et que l'application a quitté.

Les différents éléments

3- Les différents éléments

La structure de la fenêtre :

La structure de la fenêtre JavaFX est basée sur une architecture de Scene Graph. Cela signifie que la fenêtre est construite à partir de nœuds, qui peuvent être des formes, du texte, des images, etc. Chacun de ces nœuds peut contenir d'autres nœuds, formant ainsi un arbre de nœuds. Cet arbre de nœuds est ce qui est affiché à l'écran. La fenêtre JavaFX est composée de plusieurs parties principales :

1. Le Stage est un composant de base dans la construction d'applications graphiques en JavaFX. Elle est souvent associée à la classe Scene, qui définit les éléments graphiques qui seront affichés à l'intérieur de la fenêtre.
2. La Scène : C'est la partie principale de la fenêtre, qui contient tous les nœuds. La scène est généralement définie par un objet Scene.
3. Les nœuds : Ce sont les éléments de base de la scène, qui peuvent être des formes, du texte, des images, etc. Les nœuds sont définis par des objets tels que Circle, Rectangle, Text, etc.
4. Les Layouts : Les Layouts sont des nœuds qui permettent de contrôler la disposition des nœuds sur la scène. Il existe différents types de Layouts, tels que FlowPane, HBox, VBox, etc.
5. Les contrôles : Les contrôles sont des nœuds interactifs tels que des boutons, des cases à cocher, des curseurs, etc. Ils sont définis par des objets tels que Button, CheckBox, Slider, etc.

Info

3- Les différents éléments

La classe Application :

La classe Application définit le point d'entrée pour une application JavaFX. Elle est utilisée pour définir le comportement de base de l'application, tels que les méthodes pour démarrer, arrêter et initialiser l'interface graphique. Pour créer une application JavaFX, il faut étendre la classe Application et implémenter les méthodes start() et stop(). La méthode start() définit le contenu et le comportement de l'interface graphique, tandis que la méthode stop() définit les actions à effectuer lors de la fermeture de l'application. La méthode launch() permet l'exécution de la fenêtre. Il faut pour cela la positionner dans la méthode main() de l'application.

3- Les différents éléments

La classe Stage:

La classe Stage est une classe dérivée de la classe javafx.stage.Window et représente une fenêtre.Les "Stages" peuvent être utilisés pour afficher des scènes, des dialogues, des boîtes de message, des fenêtres de notification, etc. Les stages peuvent également être personnalisés avec des styles, des dimensions et des comportements de fenêtre. Les stages peuvent être contrôlés via des méthodes telles que show(), hide(), close(), etc. Elle est représentée comme argument de la méthode "start()" afin de l'alimenter par une Scene lors de l'exécution de la fenêtre.

Info

3- Les différents éléments

La classe Scene:

La classe Scene dans JavaFX est une classe principale qui définit une scène pour une application JavaFX. Elle contient tout le contenu de l'interface utilisateur d'une application, tels que les boutons, les champs de saisie, les images, etc. Elle permet de définir la taille de la scène et de spécifier le contenu affiché. Elle est définie dans le package javafx.scene et peut être associée à un objet Stage, qui représente la fenêtre de l'application. Elle peut être utilisée pour définir différents styles pour une scène, tels que les couleurs de fond, les images de fond, etc. Elle peut également être utilisée pour ajouter des événements tels que des clics de souris ou des touches du clavier pour une scène.

Info

3- Les différents éléments

Les conteneurs :

Les conteneurs en JavaFX sont des éléments qui peuvent contenir d'autres éléments graphiques tels que des boutons, des images, du texte, etc. Ils permettent de structurer les éléments graphiques dans une interface utilisateur pour une meilleure présentation. Il existe plusieurs types de conteneurs en JavaFX, chacun ayant ses propres caractéristiques et fonctionnalités : BorderPane : Il s'agit d'un conteneur divisé en cinq régions principales : nord, sud, est, ouest et centre. Chacune de ces régions peut contenir un élément graphique différent. HBox et VBox : Les conteneurs HBox et VBox sont utilisés pour organiser les éléments graphiques horizontalement et verticalement, respectivement. StackPane : Il s'agit d'un conteneur qui empile les éléments graphiques les uns sur les autres. Le dernier élément ajouté est le plus visible. FlowPane : Il s'agit d'un conteneur qui arrange les éléments graphiques de gauche à droite et de haut en bas. Les éléments graphiques se débordent sur la ligne suivante si il n'y a plus d'espace disponible. TilePane : Il s'agit d'un conteneur qui arrange les éléments graphiques de gauche à droite et de haut en bas en utilisant des "tuiles". Les éléments graphiques se débordent sur la ligne suivante si il n'y a plus d'espace disponible.

Info

3- Les différents éléments

Exemples :

Voici des exemples avec les conteneurs Borderpane, Hbox et Vbox. Afin de représenter ces interfaces, il faut bien organiser le code procédural afin de respecter la structure :

• Créer un objet du conteneur désiré : Il peut s'agir d'un Pane, StackPane, GridPane, FlowPane, etc.

• Ajouter des enfants au conteneur : Vous pouvez ajouter des éléments tels que des boutons, des images, des étiquettes, etc. à l'aide de la méthode getChildren().add().

• Définir les propriétés du conteneur : Vous pouvez définir la taille, la position, l'alignement, etc. du conteneur en utilisant les propriétés telles que setPrefSize(), setLayoutX(), setAlignment(), etc.

• Ajouter le conteneur à la scène : Utilisez la méthode getChildren().add() de l'objet Scene pour ajouter le conteneur à la scène.

3- Les différents éléments

Les formes de base :

Avec le framework javaFX, nous pouvons définir des formes géométriques. Ces formes sont représentée par des classes comme tout élément de javaFX. Nous pouvons ainsi proposer plusieurs formes de base telles que:

• Rectangle
• Circle
• Ellipse
• Polygon
• Polyline
• Line

Ces formes peuvent être personnalisées en termes de couleur, de taille, de position, etc. en utilisant des propriétés telles que la couleur de remplissage, la couleur de bordure, la largeur de bordure, etc.

Info

3- Les différents éléments

Les controls :

JavaFX propose un large éventail de contrôles qui permettent aux développeurs de créer des applications graphiques riches et interactives. Les contrôles les plus courants incluent : Button - Ce contrôle représente un bouton que l'utilisateur peut cliquer pour déclencher une action. Label - Permet d'afficher du texte statique à l'utilisateur. TextField - Permet à l'utilisateur de saisir du texte. CheckBox - Permet à l'utilisateur de sélectionner une option. RadioButton - Permet à l'utilisateur de sélectionner une option dans un groupe de boutons radio. ComboBox - Permet à l'utilisateur de sélectionner une option dans une liste déroulante. ListView - Permet à l'utilisateur de visualiser et de sélectionner un ou plusieurs éléments dans une liste. TableView - Permet à l'utilisateur de visualiser et de manipuler des données enregistrées dans un format de tableau. ProgressBar - Affiche la progression d'une tâche en cours. Slider - Permet à l'utilisateur de définir une valeur en glissant un curseur. Ces contrôles sont tous personnalisables pour s'adapter aux besoins spécifiques de l'application, et de nouveaux contrôles peuvent être développés en utilisant les API JavaFX.

Info

3- Les différents éléments

Exemples :

Voici des exemples avec les controls TableView, Label et TextField. Pour mettre en place un "control" dans une "scene", nous faisons appel à sa classe, en l'instanciant. Le constructeur de la classe permet de définir des arguments pour compléter le "control". Ensuite, ce dernier est placé à l'intérieur de la "scene" par le biais d'un conteneur comme dans les exemples ci-dessous. Ces exemples montrent la méthode procédurale, nous verrons plus loin dans le cours avec le langage FXML.

3- Les différents éléments

Les médias :

Il existe plusieurs types de médias dans JavaFX, notamment :

1. Images : JPEG, PNG, BMP, GIF, etc.
2. Vidéos : MP4, FLV, AVI, etc.
3. Audio : MP3, WAV, AIFF, etc.
4. Animations : GIF animé, SVG, etc.
5. Documents : PDF, Word, Excel, etc.
6. Séquences d'images : GIF animé, métrage, etc.
7. Streaming vidéo en direct : RTSP, HLS, etc.
8. Jeux : jeux en 2D, jeux en 3D, etc.

Ces différents types de médias peuvent être intégrés dans les applications à l'aide de différentes classes, tels que MediaView, ImageView, WebView et VideoView.

3- Les différents éléments

Importer un média :

Voici comment importer un média dans l'ide Eclipse ou autres IDE : Pensez à créer un ou plusieurs dossiers pour vos ressources.

3- Les différents éléments

Exemples :

Voici deux exemples de code d'intégration de média :

• Le premier permettant l'intégration d'un fichier vidéo provenant de l'arborescence du projet.
• Le second permettant l'intégration d'une page web.

3- Les différents éléments

Ajouter du style en CSS :

Il existe plusieurs méthodes pour intégrer du CSS en JavaFX:

• En utilisant des feuilles de style externes : Vous pouvez créer une feuille de style CSS externe et la lier à votre application JavaFX en utilisant la méthode Scene.getStylesheets().add().
• En utilisant des feuilles de style internes: Vous pouvez également définir du CSS directement dans votre code JavaFX en utilisant la méthode Scene.getStylesheets().add() avec un chemin vers une ressource interne.
• En utilisant les styles inline: Vous pouvez définir du CSS directement dans votre code JavaFX en utilisant la méthode "setStyle()" sur un nœud spécifique.

• Chaque propriété CSS possède ce préfixe "-fx".

Il est recommandé d'utiliser une feuille de style externe ou interne pour gérer efficacement le style de votre application JavaFX. Les styles inline sont utiles pour des mises en forme temporaires et les styles définis à l'aide de classes CSS sont utiles pour une mise en forme générale et réutilisable.

3- Les différents éléments

Une feuille de styles interne :

Voici comment créer une feuille de styles dans l'arboresccence de l'application :

3- Les différents éléments

Exemple de code côté classe :

Le code ci-dessous montre l'ajout de styles CSS sur la Scene et le Label d'un champ de formulaire : Pour lier la feuille de styles à l'application, on utilise la méthode "getStyleSheets()" et "add()" appartenant à la classe Scene. Elle est ainsi lier avec la classe principale. Ensuite, pour attribuer un identifiant à un objet front, on utilise la méthode "setId()" et pour attribuer une classe, la méthode "getStyleClass().add()". Pour

3- Les différents éléments

Exemple de code côté CSS :

Le code ci-dessous montre la déclaration des sélecteurs et propriétés CSS des objets concernés : L'écriture des sélecteurs est la même que pour du CSS3 classique. La différence se trouve dans la syntaxe des propriétés, un préfixe "-fx" les accompagne.Certaines propriétés portent des noms qui diffères. Pour

3- Les différents éléments

Style inline :

Comme indiqué plus haut dans le cours, on peut appliquer du CSS directement sur l'objet en exécutant la méthode "setStyle()" : Pour

Info

L'interface avec FXML

4- L'interface avec FXML

Présentation :

L'interface avec FXML est un moyen de décrire la structure d'une interface utilisateur en utilisant un fichier XML. Il est largement utilisé avec JavaFX.Avec FXML, vous pouvez définir les composants de l'interface utilisateur, leurs propriétés et les interactions entre eux en utilisant du code XML. Par exemple, vous pouvez définir un bouton, définir son texte et son action en cas de clic tels que <Button>, <text> et <onAction>. L'avantage du FXML est qu'elle sépare la logique de la vue, ce qui facilite la maintenance et la modification de l'interface utilisateur. Pour créer un fichier FXML, voici ci-dessous la procédure courante :

4- L'interface avec FXML

Structure des fichiers FXML :

La structure des fichiers FXML est basée sur le format XML (eXtensible Markup Language). Cela signifie qu'ils sont formatés en utilisant des balises pour décrire la structure de l'interface utilisateur. Un fichier FXML définit généralement la disposition des éléments graphiques dans une fenêtre ou un widget, y compris les boutons, les textes, les images, etc. Chaque élément est défini en utilisant une balise dédiée : La structure d'un fichier FXML comprend également des déclarations d'espace de noms et des attributs pour définir les propriétés de chaque élément : La racine est définie par la balise <VBox>, qui définit le type de conteneur (VBox) et les espaces de noms utilisés dans le fichier. Les enfants du conteneur sont définis à l'intérieur de la balise <children>, avec chaque élément défini par une balise distincte. Les attributs définissent les propriétés de chaque élément, telles que le texte, l'id, la classe...

4- L'interface avec FXML

La liaison classe java et fichier FXML :

Pour lier le fichier FXML et la classe concernée, on utilise la classe FXMLLoader. Cette classe possède une méthode "load()" permettant le chargement du fichier FXML. Pour effectuer cela, on passe en argument de la méthode "load()", les méthodes "getClass()" et "getRessource()". Puis en tant qu'argument de la méthode "getRessource()" on défini le chemin vers le fichier FXML. Dans l'exemple ci-dessous, l'objet "root" est une instance de la classe VBox, balise parente du côté FXML. C'est pour cela, qu'elle est référente à la feuille de style.

Gestion du graphisme

Les évènements

La concurrence

2- Titre de ma séquence

Terminé !

Vous venez de terminer cette séquence de formation ! Bravo à présent c'est à vous de jouer ! Rendez-vous dans VirtualSchool pour poursuivre l'aventure... Au programme exercice XXX intitulé : "Nom de l'exercice"

Retour sur VirtualSchool