Un jour, j'ai eu l'idée d'écrire une petite application de bureau pour mes besoins - quelque chose comme un petit dictionnaire pour apprendre des mots étrangers - et j'ai commencé à me creuser la tête, comment pourrais-je faire ça ? Naturellement, la première chose qui m’est venue à l’esprit était Swing. Tout le monde a probablement entendu parler de Swing . Il s'agit d'une bibliothèque permettant de créer des interfaces graphiques utilisateur. Du fait que notre bien-aimé Oracle n'a pas encore complètement abandonné Swing, il n'est pas considéré comme obsolète et des applications fonctionnent toujours dessus. Cependant, il n'est plus modernisé par Swing, et les gens d'Oracle nous ont donné un avant-goût de ce qu'est l'avenir de JavaFX. Et en fait, JavaFX utilise les composants Swing comme fournisseur de services)
Qu’est-ce que JavaFX ?
JavaFX est essentiellement une boîte à outils GUI pour Java. Il y aura une petite digression ici, et nous rappellerons ce qu'est une GUI : Interface utilisateur graphique - une interface utilisateur graphique est un type d'interface utilisateur dans laquelle tous les éléments (boutons, menus, icônes, listes) présentés à l'utilisateur sur le les affichages se font sous forme d'images, de graphiques. Contrairement à une interface de ligne de commande, dans une interface graphique, l'utilisateur dispose d'un accès aléatoire aux objets visibles à l'aide de périphériques d'entrée. Souvent, les éléments d’interface sont implémentés sous forme de métaphores et affichent leurs propriétés et leur objectif pour faciliter la compréhension de l’utilisateur. JavaFX vise à créer des jeux et des applications de bureau en Java. En fait, il remplacera Swing grâce au nouvel outil GUI proposé pour Java. Cela nous permet également de styliser les fichiers de mise en page GUI (XML) et de les rendre plus élégants en utilisant CSS, similaire à ce à quoi nous sommes habitués dans les applications Web. JavaFX gère en outre les graphiques 3D intégrés ainsi que les applications audio, vidéo et réseau intégrées dans une seule boîte à outils GUI... Il est facile à apprendre et bien optimisé. Il prend en charge de nombreux systèmes d'exploitation, ainsi que les systèmes Windows, UNIX et Mac OS.
Fonctionnalités JavaFX :
JavaFX est initialement livré avec un large ensemble d'éléments d'interface graphique, tels que toutes sortes de boutons, champs de texte, tableaux, arbres, menus, graphiques, etc., ce qui nous fera gagner beaucoup de temps.
JavaFX utilise souvent des styles CSS, et nous pourrons utiliser un format FXML spécial pour créer l'interface graphique, plutôt que de le faire en code Java. Cela facilite la mise en page rapide d'une interface graphique ou la modification de l'apparence ou de la composition sans avoir à jouer longtemps avec le code Java.
JavaFX propose des parties de diagramme prêtes à l'emploi, nous n'avons donc pas besoin de les écrire à partir de zéro chaque fois que vous avez besoin d'un diagramme de base.
JavaFX est également livré avec un support graphique 3D, ce qui est souvent utile si nous développons un type de jeu ou des applications similaires.
Jetons un petit coup d'œil aux principaux composants de notre fenêtre :
La scène est essentiellement une fenêtre environnante qui agit comme un canevas de départ et contient le reste des composants. Une application peut comporter plusieurs étapes, mais dans tous les cas, il doit y avoir un seul de ces composants. Essentiellement, Stage est le conteneur principal et le point d’entrée.
Scène - affiche le contenu de la scène (comme une poupée gigogne). Chaque étape peut contenir plusieurs composants - scènes, qui peuvent être commutés entre eux. En interne, ceci est implémenté par un graphe d'objets appelé Scene Graph (où chaque élément est un nœud, également appelé Node ).
Les nœuds sont des contrôles, tels que des boutons d'étiquette, ou même des présentations, qui peuvent contenir plusieurs composants imbriqués. Chaque scène peut avoir un nœud imbriqué, mais il peut s'agir d'une mise en page comportant plusieurs composants. L'imbrication peut être multiniveau, avec des mises en page contenant d'autres mises en page et des composants réguliers. Chacun de ces nœuds possède son propre identifiant, son style, ses effets, son état et ses propres gestionnaires d'événements.
Passons donc un peu au code. Depuis que j'utilise Java 8, je n'ai pas besoin de créer de dépendances, puisque JavaFx est dans le JDK par défaut (comme dans Java 9.10), mais si nous avons Java 11+, nous devons alors accéder au référentiel maven et tirez-le de là dépendances.
JavaFX : exemples d'utilisation
Nous créons une classe régulière avec une méthode main(point d'entrée) :
Ici notre classe hérite de javafx.application.Application(ce que nous avons de la boite Bugaga). En principal, nous appelons la méthode Application statique launch()pour lancer notre fenêtre. De plus, notre idée se plaindra de ne pas avoir implémenté la méthode Application, startce que nous faisons finalement. Pourquoi est-ce? Et afin de pouvoir gérer les propriétés (la fonctionnalité de notre fenêtre). Pour ce faire, on utilise un argument entrant primaryStagesur lequel on appelle une méthode showafin de voir la fenêtre se lancer dans main. Complétons un peu notre méthode start:
Alors que voit-on ici ? Parcourons-le ligne par ligne : 2 - définir le nom de la fenêtre elle-même (stage) 3.4 - définir ses dimensions 6.7 - définir le chemin du flux de lecture vers le fichier (icône) 8 - créer le fichier en tant qu'objet Image, qui est connecté au fichier réel par le flux passé dans le constructeur 9 - définir une icône dans le panneau supérieur de la fenêtre 11 - créer un objet bouton 13-16 - définir la réaction lorsque le bouton est enfoncé 17 - créer une scène où on place notre bouton 18 - on place la scène sur notre fenêtre commune 20 - on règle le drapeau de visibilité de la fenêtre Et du coup on obtient une petite fenêtre pour accueillir nos pesels préférés : Tout a l'air bien plus simple que Swing, n'est-ce pas ? Mais ce n'est pas encore fini. Il n'est pas bon d'écrire tout le code pour afficher une application, il faut le diviser d'une manière ou d'une autre pour le rendre plus compréhensible (composants graphiques dans un panier, logique dans un autre). Et ici, XML entre en scène... Oh mon dieu, XML ? Exactement. Plus précisément, nous utilisons son implémentation spécifique pour JavaFX - FXML, dans laquelle nous définissons les composants graphiques de l'application et leurs propriétés (toutes sortes de tailles, etc.), puis la connectons à un contrôleur, qui aide à gérer la logique. Regardons un exemple de ce XML :
2 - le langage de script que nous utilisons 4-6 - les données importées 8-9 Vbox - un conteneur qui place les sous-composants sur une seule ligne. 11 - afficher du texte 13 - un bouton, lorsque vous cliquez dessus, nous utilisons la méthode décrite dans le script aux lignes 15 à 18. Il devrait y avoir du code pour appeler ce fichier XML dans la méthode start, mais maintenant ce n'est plus si important, et nous je l'omettreai (vous trouverez ci-dessous un exemple d'extraction de ce fichier). Donc, bien sûr, XML est bon (mais pas très bon), les écrire manuellement est très déroutant, n'est-ce pas le siècle dernier ?
Présentation de JavaFX SceneBuilder
C'est à ce stade que (roulements de tambour) entre en jeu - SceneBuilder Dans JavaFX Scene Builder est un outil avec lequel nous pouvons concevoir nos fenêtres sous la forme d'une interface graphique puis les enregistrer, et ce programme, en fonction du résultat, construire des fichiers XML que nous allons améliorer dans notre application. L'interface de ce constructeur fmxl ressemble à ceci :
Une petite parenthèse. Cours JavaFX
Je sauterai les détails de l'installation, ainsi qu'une étude détaillée de cet outil. Ce sont des sujets qui méritent d’être approfondis. Par conséquent, je laisserai quand même quelques liens intéressants vers les leçons JavaFX : un (un tutoriel en ligne sur JavaFX) et deux (un autre bon tutoriel). Passons en revue un petit exemple que j'ai esquissé. Au final j'ai eu quelque chose comme :
(un peu comme une fenêtre pour enregistrer les chiens)
Lorsque vous sélectionnez un chien et appuyez sur le bouton Supprimer, le chien est supprimé de notre liste. Lorsque vous sélectionnez un compagnon à quatre pattes et modifiez ses champs, et après avoir appuyé sur le bouton Modifier, les informations du chien sont mises à jour. Lorsque nous appuyons sur le bouton Nouveau, une fenêtre apparaît pour créer un enregistrement pour un nouveau chien (en commençant par son nom) : Cliquez ensuite sur Enregistrer et remplissez le reste de ses champs dans la première fenêtre, puis cliquez sur le bouton Modifier pour sauvegarder. Cela semble facile, non ? Voyons à quoi cela ressemblera dans notre application Java. Pour commencer, je vais juste laisser ici les layouts XML de ces deux fenêtres générées dans SceneBuilder: First (basic) :
À quoi ressemble la structure des dossiers : Comme vous pouvez le voir, il n'y a rien de spécial, il y a des contrôleurs qui représentent certaines fenêtres, il y a des modèles qui représentent nos données. Jetons un coup d'œil à la classe qui lance l'application (implémentation de l'application) : @Data
Nous voyons donc ici la méthode que nous lançons réellement dans start(), à savoir celle qui définit les paramètres de notre fenêtre de base. Comme dans la disposition XML dans les ressources : lui donner une icône, le lier à un contrôleur spécifique et donner au contrôleur un lien vers thisla classe)
Nous voyons ici la méthode responsable de l'apparition de la deuxième fenêtre - la fenêtre de création d'un nouvel enregistrement (le nom d'un nouveau chien). Nous définissons également le contrôleur, la mise en page XML, la scène, etc... La prochaine classe que nous considérerons sera un modèle représentant notre chien (informations à ce sujet) : @Data
publicclassDog{privateStringProperty name;privateStringProperty breed;privateIntegerProperty age;privateStringProperty city;privateIntegerProperty levelOfTraining;publicDog(String name,String breed,int age,String city,int levelOfTraining){this.name =newSimpleStringProperty(name);this.breed =newSimpleStringProperty(breed);this.age =newSimpleIntegerProperty(age);this.city =newSimpleStringProperty(city);this.levelOfTraining =newSimpleIntegerProperty(levelOfTraining);}publicDog(){
name =newSimpleStringProperty();
breed =null;
age =null;
city =null;
levelOfTraining =null;}}
Ici, nous voyons deux constructeurs. L'un est presque normal avec tous les arguments (presque, parce que nous utilisons des wrappers FX spéciaux de types simples) et un constructeur sans arguments : nous l'utilisons lors de la création d'un nouveau chien, qui n'a d'abord qu'un nom. Contrôleur pour la fenêtre de base : @Data
Ici, nous voyons nos champs d'objet, mais au format TextField. Il s'agit d'un format qui représente un champ de saisie de texte. @FXML est une annotation conçue pour lier le code Java et l'objet correspondant de notre mise en page (bouton, champ ou autre).
Nous voyons ici une méthode d'affichage des noms de chiens, à droite dans la liste (son annotation @FXML est liée au composant de mise en page JavaFX TableView).
Dans la première méthode, nous voyons définir une référence interne à la classe qui implémente Application (afin que nous puissions appeler sa méthode pour appeler la deuxième fenêtre), et définir la liste initiale à afficher. La seconde vérifie si le chien actuel possède certaines données et, sur cette base, définit les champs de texte :
Nous voyons ici trois méthodes de la fenêtre de base associées aux boutons :
delete — supprime le chien sélectionné (sélectionné) par index ;
modifier - créer un nouveau chien avec les données transférées et le définir à la place de celui qui était auparavant ;
create - nous créons un nouveau chien et appelons la méthode d'appel de la fenêtre de création, en passant un nouvel objet, et après la fermeture, si le nom n'est pas nul, nous enregistrons le nouvel animal.
Passons au contrôleur de fenêtre pour créer le chien : @Data
Ici, nous voyons la connexion avec le champ de texte dans la fenêtre, traitant les boutons Enregistrer et Annuler, qui ferment d'une manière ou d'une autre la fenêtre. Comme vous pouvez le constater, pour plus de commodité dans ma petite application, j'ai utilisé Lombok, sinon le code aurait beaucoup grandi et je ne l'aurais pas intégré dans ma révision.
C'est probablement tout ce que j'ai pour aujourd'hui. Aujourd'hui, nous nous sommes brièvement familiarisés avec les concepts de base et un exemple d'utilisation de JavaFX, et nous pouvons créer de petites applications de bureau (en utilisant des informations supplémentaires, qui, heureusement, sont abondantes sur Internet). Et vous, à votre tour, aimez))
Passons donc un peu au code. Depuis que j'utilise Java 8, je n'ai pas besoin de créer de dépendances, puisque JavaFx est dans le JDK par défaut (comme dans Java 9.10), mais si nous avons Java 11+, nous devons alors accéder au référentiel maven et tirez-le de là dépendances.
8 - créer le fichier en tant qu'objet Image, qui est connecté au fichier réel par le flux passé dans le constructeur 9 - définir une icône dans le panneau supérieur de la fenêtre 11 - créer un objet bouton 13-16 - définir la réaction lorsque le bouton est enfoncé 17 - créer une scène où on place notre bouton 18 - on place la scène sur notre fenêtre commune 20 - on règle le drapeau de visibilité de la fenêtre Et du coup on obtient une petite fenêtre pour accueillir nos pesels préférés : 
Tout a l'air bien plus simple que Swing, n'est-ce pas ? Mais ce n'est pas encore fini. Il n'est pas bon d'écrire tout le code pour afficher une application, il faut le diviser d'une manière ou d'une autre pour le rendre plus compréhensible (composants graphiques dans un panier, logique dans un autre). Et ici, XML entre en scène... Oh mon dieu, XML ? Exactement. Plus précisément, nous utilisons son implémentation spécifique pour JavaFX - FXML, dans laquelle nous définissons les composants graphiques de l'application et leurs propriétés (toutes sortes de tailles, etc.), puis la connectons à un contrôleur, qui aide à gérer la logique. Regardons un exemple de ce XML :
Cliquez ensuite sur Enregistrer et remplissez le reste de ses champs dans la première fenêtre, puis cliquez sur le bouton Modifier pour sauvegarder. Cela semble facile, non ? Voyons à quoi cela ressemblera dans notre application Java. Pour commencer, je vais juste laisser ici les layouts XML de ces deux fenêtres générées dans 
Comme vous pouvez le voir, il n'y a rien de spécial, il y a des contrôleurs qui représentent certaines fenêtres, il y a des modèles qui représentent nos données. Jetons un coup d'œil à la classe qui lance l'application (implémentation de l'application) : 
GO TO FULL VERSION