JavaFX est un framework et une bibliothèque d’interface utilisateur issue du projet OpenJFX, qui permet aux développeurs Java de créer une interface graphique pour des applications de bureau, des applications internet riches et des applications smartphones et tablettes tactiles . Il s’agit d’une plateforme moderne, efficace et complète pour le développement d’applications riches en Java. JavaFX est fourni en mode open source à partir de la version 11 de JDK.
JFX une bibliothèque graphique pour Java qui permet de créer des interfaces utilisateur riches et interactives. Il est basé sur le langage FXML, qui est un langage déclaratif inspiré du XML.
Dans ce cours, nous allons voir :
Nous allons illustrer chaque notion avec de nombreux exemples de code Java.
Pour commencer, il faut installer JFX sur votre machine. Il existe plusieurs façons de le faire, mais la plus simple est d’utiliser un outil comme Maven ou Gradle (personnellement, je préfère Gradle) qui gère les dépendances automatiquement.
Il suffit d’ajouter la dépendance suivante dans le fichier pom.xml pour Maven :
<dependency> <groupId>org.openjfx</groupId> <artifactId>javafx-controls</artifactId> <version>16</version> </dependency>
Ou dans le fichier build.gradle pour Gradle :
implementation 'org.openjfx:javafx-controls:16'
Ensuite, il faut configurer son environnement de développement (IDE) pour pouvoir utiliser JFX. Il existe plusieurs IDE compatibles avec JFX, comme Eclipse, NetBeans ou IntelliJ IDEA.
Dans cet exemple, nous allons utiliser IntelliJ IDEA. Il faut créer un nouveau projet Java et cocher la case “Create project from template” puis choisir “JavaFX Application”. Cela va générer un squelette de code avec une classe principale qui étend la classe Application de JFX et une méthode start qui crée une fenêtre avec une scène vide.
public class Main extends Application { @Override public void start(Stage primaryStage) throws Exception{ primaryStage.setTitle("Hello World"); primaryStage.setScene(new Scene(new Group(), 300, 275)); primaryStage.show(); } public static void main(String[] args) { launch(args); } }
Pour exécuter le programme, il faut ajouter un argument VM qui spécifie le module JFX à utiliser :
--module-path /path/to/javafx-sdk-16/lib --add-modules javafx.controls
Si tout se passe bien, on devrait voir apparaître une fenêtre avec le titre “Hello World” et une scène vide.
La scène est l’élément principal d’une interface JFX. C’est un conteneur qui peut accueillir différents types de nœuds graphiques, comme des boutons, des textes, des images, etc. La scène a une largeur et une hauteur qui définissent sa taille.
On peut modifier ces propriétés avec les méthodes setWidth et setHeight(). On peut aussi changer la couleur de fond de la scène avec la méthode setFill().
La fenêtre est l’élément qui affiche la scène sur l’écran. C’est une instance de la classe Stage, qui hérite de la classe Window.
La fenêtre a un titre, que l’on peut changer avec la méthode setTitle(). On peut aussi modifier sa taille, sa position, son icône, son style et sa résolution avec d’autres méthodes de la classe Stage.
Les contrôles sont les éléments interactifs de l’interface, comme les boutons, les champs de texte, les listes déroulantes, etc. Ils sont regroupés dans le package javafx.scene.control. Pour créer un contrôle, il suffit d’instancier la classe correspondante et de l’ajouter à la scène. Par exemple, pour créer un bouton avec le texte “OK”, on peut faire :
Button button = new Button("OK"); Scene scene = new Scene(new Group(button), 300, 275);
On peut aussi modifier les propriétés du contrôle, comme sa position, sa taille, son style, son état ou son comportement avec les méthodes de la classe Button ou de ses classes parentes.
Les événements sont les actions qui se produisent lorsqu’un utilisateur interagit avec l’interface, comme cliquer sur un bouton, taper au clavier ou déplacer la souris. Ils sont représentés par des objets qui implémentent l’interface Event ou ses sous-interfaces. Pour gérer un événement, il faut lui associer un écouteur (listener), qui est un objet qui implémente l’interface EventHandler ou une expression lambda. Par exemple, pour afficher un message dans la console lorsque l’utilisateur clique sur le bouton “OK”, on peut faire :
button.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent event) { System.out.println("OK bouton cliqué !"); } });
Ou avec une expression lambda :
button.setOnAction(event -> System.out.println("OK bouton cliqué !"));
Les animations sont les effets visuels qui permettent de donner du mouvement ou du dynamisme à l’interface, comme faire clignoter un texte, faire glisser un élément ou changer la couleur d’un fond. Ils sont regroupés dans le package javafx.animation. Pour créer une animation, il faut instancier la classe correspondante et lui passer les paramètres nécessaires, comme la durée, le cycle, le nœud cible, etc. Par exemple, pour faire clignoter le texte “Hello Univers” toutes les secondes, on peut faire :
Text text = new Text("Hello Univers"); Scene scene = new Scene(new Group(text), 300, 275); FadeTransition ft = new FadeTransition(Duration.seconds(1), text); ft.setFromValue(1.0); ft.setToValue(0.0); ft.setCycleCount(Timeline.INDEFINITE); ft.setAutoReverse(true); ft.play();
On peut aussi combiner plusieurs animations avec des classes comme SequentialTransition ou ParallelTransition.
FXML et CSS sont deux langages utilisés pour créer des interfaces graphiques avec JavaFX. FXML est un langage basé sur XML qui permet de définir la structure et la disposition des éléments graphiques, tels que les boutons, les champs de texte, les menus, etc. CSS est un langage qui permet de définir le style et l’apparence des éléments graphiques, tels que les couleurs, les polices, les bordures, les effets, etc.
FXML et CSS ont des avantages et des inconvénients selon les besoins et les préférences du développeur. FXML permet de séparer la logique de l’interface graphique du code Java, ce qui facilite la maintenance et la réutilisation du code. FXML permet aussi de créer des interfaces graphiques plus facilement avec des outils visuels comme Scene Builder. CSS permet de modifier le style des éléments graphiques sans avoir à changer le code FXML, ce qui offre plus de flexibilité et de personnalisation. CSS permet aussi de créer des thèmes et des styles communs pour plusieurs interfaces graphiques.
FXML et CSS sont donc complémentaires dans l’utilisation de JavaFX. Ils permettent de créer des interfaces graphiques riches et interactives en utilisant les principes du MVC (Modèle-Vue-Contrôleur). Il est possible d’utiliser FXML sans CSS, ou CSS sans FXML, mais il est recommandé d’utiliser les deux pour profiter de leurs avantages respectifs.
Les styles sont les propriétés qui définissent l’apparence des éléments de l’interface, comme la couleur, la police, la bordure, etc. Ils sont regroupés dans le package javafx.scene.layout. Pour appliquer un style à un élément, il faut utiliser la méthode setStyle() et lui passer une chaîne de caractères qui suit la syntaxe du CSS (Cascading Style Sheets). Par exemple, pour changer la couleur du texte “Hello World” en rouge, on peut faire :
text.setStyle("-fx-fill: red;");
On peut aussi définir des styles dans un fichier séparé avec l’extension .css et le lier à la scène avec la méthode getStylesheets().add().
Les effets sont les opérations qui modifient le rendu des éléments de l’interface, comme le flou, l’ombre, la réflexion, etc. Ils sont regroupés dans le package javafx.scene.effect.
Pour appliquer un effet à un élément, il faut instancier la classe correspondante et lui passer les paramètres nécessaires, comme l’intensité, la distance, l’angle, etc. Par exemple, pour ajouter une ombre au texte “Hello World”, on peut faire :
DropShadow ds = new DropShadow(); ds.setOffsetY(3.0); ds.setColor(Color.color(0.4, 0.4, 0.4)); text.setEffect(ds);
On peut aussi combiner plusieurs effets avec la classe Blend.
Ce cours a présenté les notions de base de JFX et quelques exemples de code Java pour illustrer son fonctionnement. Il existe encore beaucoup d’autres fonctionnalités associées à JFX, comme les médias, les graphiques, les formulaires ou les composants personnalisés.
Pour en savoir plus, vous pouvez consulter la documentation officielle de JFX sur le site https://openjfx.io/.
Assurez-vous d’avoir Java Development Kit (JDK) installé sur votre ordinateur. Vous pouvez télécharger la dernière version de JDK sur le site officiel d’Oracle. Assurez-vous également d’avoir une IDE (Integrated Development Environment) Java installée, comme IntelliJ IDEA ou Eclipse.
Ouvrez votre IDE et créez un nouveau projet Java. Assurez-vous de sélectionner un projet avec un support JavaFX intégré, si disponible. Sinon, vous pouvez ajouter la bibliothèque JavaFX manuellement à votre projet.
Si votre projet ne dispose pas d’un support JavaFX intégré, vous devez ajouter les dépendances JavaFX manuellement. Cela implique d’ajouter les bibliothèques JavaFX (comme javafx.controls, javafx.fxml, etc.) à votre projet. Les étapes précises pour ajouter les dépendances peuvent varier en fonction de votre IDE.
Créez une classe principale dans votre projet qui servira de point d’entrée de votre application. Cette classe doit étendre la classe javafx.application.Application et implémenter sa méthode start().
Voici un exemple de classe principale simple :
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class MainApp extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("Ma première application JFX"); Button button = new Button("Cliquez-moi !"); button.setOnAction(e -> System.out.println("Bonjour, JFX !")); StackPane root = new StackPane(); root.getChildren().add(button); Scene scene = new Scene(root, 300, 200); primaryStage.setScene(scene); primaryStage.show(); } }
Cette classe crée une fenêtre de base avec un bouton. Lorsque vous cliquez sur le bouton, il affiche “Bonjour, JFX !” dans la console.
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class MainApp extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { // Configuration de la fenêtre principale primaryStage.setTitle("Ma première application JFX"); // Création des éléments de l'interface utilisateur Label label = new Label("Bonjour, JFX !"); // Configuration de la disposition des éléments VBox root = new VBox(); root.getChildren().add(label); // Configuration de la scène Scene scene = new Scene(root, 300, 200); primaryStage.setScene(scene); // Affichage de la fenêtre primaryStage.show(); } }
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Button; import javafx.scene.layout.StackPane; import javafx.stage.Stage; public class MainApp extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { // Configuration de la fenêtre principale primaryStage.setTitle("Ma première application JFX"); // Création de deux boutons Button button1 = new Button("Bouton 1"); Button button2 = new Button("Bouton 2"); // Configuration de la disposition des éléments StackPane root = new StackPane(); root.getChildren().addAll(button1, button2); // Configuration de la scène Scene scene = new Scene(root, 300, 200); primaryStage.setScene(scene); // Affichage de la fenêtre primaryStage.show(); } }
La disposition des éléments de votre interface utilisateur. Par exemple, VBox (vertical box) et HBox (horizontal box) sont couramment utilisés pour organiser les éléments de manière verticale ou horizontale.
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.layout.VBox; import javafx.stage.Stage; public class MainApp extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { // Configuration de la fenêtre principale primaryStage.setTitle("Ma première application JFX"); // Création des éléments de l'interface utilisateur Label label1 = new Label("Élément 1"); Label label2 = new Label("Élément 2"); Label label3 = new Label("Élément 3"); // Configuration de la disposition des éléments VBox root = new VBox(); root.getChildren().addAll(label1, label2, label3); // Configuration de la scène Scene scene = new Scene(root, 300, 200); primaryStage.setScene(scene); // Affichage de la fenêtre primaryStage.show(); } }
Vous pouvez maintenant exécuter votre application. Assurez-vous d’exécuter la classe principale qui étend javafx.application.Application. Votre application JFX s’ouvrira dans une fenêtre de bureau.
C’est un aperçu basique de la façon d’utiliser JFX pour développer une application Java Desktop. JavaFX offre de nombreuses fonctionnalités pour créer des interfaces utilisateur riches, notamment des contrôles, des effets visuels, des animations, etc. Vous pouvez explorer davantage la documentation officielle de JavaFX pour en savoir plus sur ses fonctionnalités et sa syntaxe.
JavaFX offre plusieurs layouts prédéfinis que vous pouvez utiliser pour organiser les éléments de votre interface utilisateur de manière structurée. Voici certains des layouts les plus couramment utilisés dans JavaFX :
BorderPane : Le BorderPane divise l’espace en cinq régions principales : top, bottom, left, right et center. Chaque région peut contenir un seul élément, ce qui permet de créer une mise en page en utilisant des régions spécifiques pour des éléments tels que des barres de menu, des barres d’outils, des panneaux latéraux, etc.
VBox et HBox : VBox (Vertical Box) et HBox (Horizontal Box) sont des layouts qui organisent les éléments de manière verticale et horizontale, respectivement. Vous pouvez utiliser VBox pour aligner les éléments les uns sous les autres, et HBox pour les aligner côte à côte.
GridPane : Le GridPane organise les éléments dans une grille avec des lignes et des colonnes. Cela permet de placer les éléments à des positions spécifiques dans la grille, offrant ainsi une grande flexibilité de disposition.
FlowPane : Le FlowPane dispose les éléments les uns à côté des autres dans une direction spécifiée (horizontale ou verticale). Lorsque l’espace disponible est insuffisant pour tous les éléments, le FlowPane peut les réorganiser automatiquement sur plusieurs lignes ou colonnes.
StackPane : Le StackPane empile les éléments les uns sur les autres, les superposant. Il est utile pour superposer des éléments tels que des images, des boutons, etc.
TilePane : Le TilePane organise les éléments dans une disposition de tuiles, en les plaçant les uns à côté des autres dans des cellules de taille égale. Les éléments peuvent être disposés horizontalement ou verticalement.
Ces layouts prédéfinis vous offrent une grande flexibilité pour organiser vos éléments d’interface utilisateur de manière structurée et réactive. Vous pouvez également combiner ces layouts pour créer des structures plus complexes en utilisant des layouts imbriqués.
La création d’une interface graphique pour les personnes non voyantes présente des défis particuliers, car les interfaces graphiques traditionnelles reposent souvent sur des éléments visuels. Cependant, il est possible de créer des interfaces accessibles et conviviales pour les personnes non voyantes à l’aide de JFX ou de Swing. Voici une comparaison des avantages et inconvénients de chaque technologie :
JavaFX :
Avantages :
Inconvénients :
Swing :
Dans l’ensemble, JavaFX peut offrir une meilleure prise en charge de l’accessibilité et une esthétique plus moderne pour les interfaces graphiques destinées aux personnes non voyantes. Cependant, il est important de noter que la conception d’interfaces accessibles repose également sur les bonnes pratiques de conception et de développement, indépendamment de la technologie utilisée.
Pour rendre l’interface plus accessible, voici quelques modifications que vous pouvez apporter :
Utilisez des étiquettes (Label) pour les éléments interactifs tels que les boutons et les champs de texte, et définissez des descriptions appropriées pour ces étiquettes. Cela permet aux utilisateurs de technologies d’assistance de comprendre la fonctionnalité de chaque élément.
Label
Ajoutez des indicateurs sonores ou visuels pour informer les utilisateurs non voyants des changements d’état importants, tels que la réussite d’une action ou la présence d’une erreur. Par exemple, vous pouvez jouer un son ou afficher un message d’alerte pour indiquer si une requête a été exécutée avec succès ou s’il y a une erreur.
Utilisez des raccourcis clavier et des gestes tactiles pour faciliter la navigation et l’interaction avec l’interface. Par exemple, vous pouvez définir des touches de raccourci pour les actions courantes comme l’exécution de la requête ou l’effacement du champ de requête.
Assurez-vous que le texte est suffisamment lisible en ajustant la taille de police et en utilisant un contraste élevé entre le texte et l’arrière-plan. Cela est particulièrement important pour les personnes ayant une vision réduite.
Testez l’interface avec des technologies d’assistance telles que les lecteurs d’écran pour vérifier si les informations essentielles sont correctement exposées et si la navigation est fluide.
il est possible de créer vos propres layouts personnalisés avec JavaFX. JavaFX fournit la classe Pane en tant que classe de base pour créer des layouts personnalisés. Vous pouvez étendre la classe Pane ou d’autres classes de layout existantes pour créer un nouveau layout adapté à vos besoins.
Pane
Voici les étapes générales pour créer un layout personnalisé avec JavaFX :
Créez une classe qui étend Pane ou une autre classe de layout existante, telle que Region.
Region
Implémentez la logique de placement et de dimensionnement des éléments enfants dans la méthode layoutChildren(). Cette méthode est appelée automatiquement par JavaFX lorsqu’il est nécessaire de mettre à jour la disposition des éléments du layout.
layoutChildren()
Ajoutez des propriétés personnalisées à votre classe de layout pour permettre aux utilisateurs de spécifier des paramètres de disposition spécifiques. Par exemple, vous pouvez ajouter des propriétés pour régler l’espacement entre les éléments, l’alignement, les marges, etc.
Gérez les modifications des propriétés ou des enfants pour mettre à jour la disposition en conséquence. Vous pouvez utiliser des écouteurs de propriétés, des écouteurs d’événements ou d’autres mécanismes pour détecter les changements et effectuer les mises à jour nécessaires.
Voici un exemple simple de création d’un layout personnalisé qui organise ses éléments enfants horizontalement avec un espacement configurable :
import javafx.scene.layout.Pane; import javafx.scene.layout.Region; public class CustomLayout extends Region { private double spacing = 10.0; public CustomLayout() { super(); } @Override protected void layoutChildren() { double x = getInsets().getLeft(); double y = getInsets().getTop(); double availableWidth = getWidth() - getInsets().getLeft() - getInsets().getRight(); for (javafx.scene.Node child : getChildren()) { double childWidth = child.prefWidth(-1); double childHeight = child.prefHeight(-1); // Positionnement de l'élément enfant child.relocate(x, y); x += childWidth + spacing; // Ajustement de la hauteur du layout en fonction de l'élément enfant le plus haut setHeight(Math.max(getHeight(), y + childHeight)); } } public double getSpacing() { return spacing; } public void setSpacing(double spacing) { this.spacing = spacing; requestLayout(); } }
Dans cet exemple, CustomLayout étend Region et utilise la méthode layoutChildren() pour placer les éléments enfants horizontalement avec un espacement configurable. La propriété spacing permet de régler l’espacement entre les éléments.
CustomLayout
spacing
Vous pouvez ensuite utiliser votre layout personnalisé dans votre application JavaFX en l’ajoutant à d’autres éléments de votre scène, tout comme vous le feriez avec les layouts prédéfinis.
La création de layouts personnalisés offre une grande flexibilité pour adapter la disposition des éléments à des besoins spécifiques. Cela permet de créer des interfaces utilisateur plus avancées et adaptées à des cas d’utilisation spécifiques.
Exemple simple en java :
import javafx.application.Application; import javafx.fxml.FXMLLoader; import javafx.scene.Parent; import javafx.scene.Scene; import javafx.stage.Stage; public class Main extends Application { @Override public void start(Stage primaryStage) throws Exception{ Parent root = FXMLLoader.load(getClass().getResource("exemple.fxml")); primaryStage.setTitle("JavaFX Application"); primaryStage.setScene(new Scene(root, 300, 200)); primaryStage.show(); } public static void main(String[] args) { launch(args); } }
Fichier exemple.fxml
<?xml version="1.0" encoding="UTF-8"?> <?import javafx.scene.control.*?> <?import javafx.scene.layout.*?> <AnchorPane xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="exemple.Controller"> <children> <Button layoutX="14.0" layoutY="14.0" mnemonicParsing="false" onAction="#handleButtonAction" text="Click Moi !" /> <TextField fx:id="textField" layoutX="14.0" layoutY="51.0" /> </children> </AnchorPane>
Note : Le fichier Java doit se trouver dans le même package que le fichier FXML et que le nom du fichier FXML est “exemple.fxml”. La classe “Controller” sera utilisée comme contrôleur pour le fichier FXML (précisé par l’attribut fx:controller=”sample.Controller”).
La classe “Controller” est une classe Java qui sert de contrôleur pour le fichier FXML dans une application JavaFX. Le rôle du contrôleur est de gérer la logique de l’interface utilisateur définie dans le fichier FXML.
Le contrôleur peut contenir des méthodes qui seront liées à des événements déclenchés par les éléments de l’interface utilisateur (comme des boutons, des champs de texte, etc.). Par exemple, si le fichier FXML contient un bouton avec l’attribut onAction=”#handleButtonAction”, alors la classe contrôleur doit avoir une méthode handleButtonAction() pour gérer l’action du bouton.
Voici un exemple de la classe contrôleur correspondant au fichier FXML donné précédemment :
package exemple; import javafx.fxml.FXML; import javafx.scene.control.Button; import javafx.scene.control.TextField; public class Controller { @FXML private TextField textField; @FXML private void handleButtonAction() { // Code pour gérer l'action du bouton System.out.println("Bouton cliqué !"); String text = textField.getText(); System.out.println("Valeur du texte : " + text); } }
Dans cet exemple, la classe “Controller” contient deux annotations @FXML, qui sont utilisées pour injecter les éléments de l’interface utilisateur (le bouton et le champ de texte) définis dans le fichier FXML dans la classe Java. La méthode handleButtonAction() est liée à l’action du bouton et est appelée lorsque le bouton est cliqué. Dans cet exemple, elle affiche simplement un message dans la console et récupère le contenu du champ de texte.
il existe des bibliothèques tierces qui permettent d’intégrer des contenus HTML dans une application JavaFX, en utilisant des composants d’affichage web tels que WebView. WebView est un composant de JavaFX qui permet d’afficher du contenu web, y compris des pages HTML, en utilisant le moteur de rendu WebKit.
Vous pouvez utiliser WebView pour afficher une page HTML dans une application JavaFX, mais cela ne générera pas automatiquement une interface utilisateur JavaFX à partir de cette page HTML. Vous devez toujours gérer manuellement l’interaction entre la page HTML et votre application JavaFX.
Voici un exemple simple de l’utilisation de WebView pour afficher une page HTML dans une application JavaFX :
import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.layout.VBox; import javafx.scene.web.WebView; import javafx.stage.Stage; public class HTMLApp extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("Application JavaFX avec WebView"); WebView webView = new WebView(); webView.getEngine().load("http://www.example.com"); VBox root = new VBox(webView); Scene scene = new Scene(root, 800, 600); primaryStage.setScene(scene); primaryStage.show(); } }
Dans cet exemple, nous créons une instance de WebView et chargeons une page HTML à partir d’une URL spécifiée. Ensuite, nous plaçons le WebView dans un conteneur VBox et affichons le tout dans une fenêtre JavaFX.
N’oubliez pas que l’intégration de contenu HTML dans une application JavaFX peut présenter des défis supplémentaires, notamment en ce qui concerne la gestion de l’interaction entre l’application JavaFX et le contenu HTML, la sécurité et la performance.
Lien vers Scene Builder version gluonhq
Lien vers Scène Builder version Oracle plus ancienne
FXML : FXML est un sigle qui signifie FXML Markup Language. Il s’agit d’un format de données textuelles, dérivé du format XML, qui permet de décrire une interface utilisateur pour des applications conçues avec JavaFX . Il offre une alternative à la conception d’interfaces réalisées par l’écriture de lignes de code, en découplant l’interface graphique du code source qui la contrôle. Cette technologie a été intégrée dans JavaFX à partir de sa version 2.0, pour remplacer JavaFX Script . Pour faciliter la manipulation de ce format de données, le logiciel Scene Builder a été développé par Oracle, permettant ainsi de créer rapidement des interfaces.
https://fr.wikipedia.org/wiki/FXM
https://fabrice-bouye.developpez.com/tutoriels/javafx/gui-interface-utilisateur-vue-controleur-fxml-javafx/
https://docs.oracle.com/javase/8/scene-builder-2/get-started-tutorial/jfxsb-get_started.htm
Code de base non optimisé :
import javafx.application.Application; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.layout.*; import javafx.stage.Stage; public class IhmSQL extends Application { private static IhmSQL instance; private BorderPane root; private VBox panNord; private VBox panSud; private TableView<Object[]> jtbResultat; private static ToggleGroup btGroupeRadio; private static RadioButton btRUpdate; private static RadioButton btRQuery; private static Button btEffacer; private static Button btExecuter; private static Button btQuitter; private TextField champRequete; private static Label etiquetteRequete; private JMenuBar mnuBar; private static Menu mnuLangue; private static MenuItem mnuItemFrancais; private static MenuItem mnuItemAnglais; private IhmSQL() { super("TP3 - Exemple d'exécution de requêtes dans une TableView"); initGUI(); } public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("TP3 - Exemple d'exécution de requêtes dans une TableView"); root = new BorderPane(); root.setTop(panNord); root.setCenter(jtbResultat); root.setBottom(panSud); Scene scene = new Scene(root, 585, 630); primaryStage.setScene(scene); primaryStage.show(); } private void initGUI() { try { panNord = new VBox(); panNord.setAlignment(Pos.CENTER_LEFT); panNord.setSpacing(10); panNord.setPadding(new Insets(10)); etiquetteRequete = new Label(); etiquetteRequete.setText(IhmSQL.getFichierRessource().getString("etiquetteRequete")); champRequete = new TextField(); champRequete.setPrefWidth(366); btExecuter = new Button(); btExecuter.setText(IhmSQL.getFichierRessource().getString("btExecuter")); btExecuter.setPrefWidth(128); panNord.getChildren().addAll(etiquetteRequete, champRequete, btExecuter); jtbResultat = new TableView<>(); // par défaut j'effectue un test sur une table existante jtbResultat.setItems(FXCollections.observableArrayList(AccesBD.executerQuery("show databases"))); panSud = new VBox(); panSud.setAlignment(Pos.CENTER); panSud.setSpacing(3); btRQuery = new RadioButton(); btRQuery.setText(IhmSQL.getFichierRessource().getString("btrQuery")); btRUpdate = new RadioButton(); btRUpdate.setText(IhmSQL.getFichierRessource().getString("btrUpdate")); btEffacer = new Button(); btEffacer.setText(IhmSQL.getFichierRessource().getString("btEffacer")); btQuitter = new Button(); btQuitter.setText(IhmSQL.getFichierRessource().getString("btQuitter")); btQuitter.setPrefWidth(89); btGroupeRadio = new ToggleGroup(); btRQuery.setToggleGroup(btGroupeRadio); btRUpdate.setToggleGroup(btGroupeRadio); btRQuery.setSelected(true); panSud.getChildren().addAll(btRQuery, btRUpdate, btEffacer, btQuitter); mnuBar = new JMenuBar(); mnuLangue = new Menu(IhmSQL.ressource.getString("mnu.langue")); mnuItemFrancais = new MenuItem(IhmSQL.getFichierRessource().getString("mnuItem.francais")); mnuItemAnglais = new MenuItem(IhmSQL.getFichierRessource().getString("mnuItem.anglais")); mnuLangue.getItems().addAll(mnuItemFrancais, mnuItemAnglais); mnuBar.getMenus().add(mnuLangue); btExecuter.setOnAction(event -> { // Code pour l'action du bouton Executer }); btEffacer.setOnAction(event -> { // Code pour l'action du bouton Effacer }); btQuitter.setOnAction(event -> { // Code pour l'action du bouton Quitter }); // ... Ajoutez des écouteurs d'événements pour les autres éléments de l'interface root.setTop(panNord); root.setCenter(jtbResultat); root.setBottom(panSud); root.setTop(mnuBar); } catch (Exception e) { e.printStackTrace(); } } }
Code optimisé avec JFX :
import javafx.application.Application; import javafx.collections.FXCollections; import javafx.geometry.Insets; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.*; import javafx.scene.layout.*; import javafx.stage.Stage; public class IhmSQL extends Application { private VBox root; private VBox panNord; private VBox panSud; private TableView<Object[]> jtbResultat; private ToggleGroup btGroupeRadio; private RadioButton btRUpdate; private RadioButton btRQuery; private Button btEffacer; private Button btExecuter; private Button btQuitter; private TextField champRequete; private Label etiquetteRequete; private MenuBar mnuBar; private Menu mnuLangue; private MenuItem mnuItemFrancais; private MenuItem mnuItemAnglais; public static void main(String[] args) { launch(args); } @Override public void start(Stage primaryStage) { primaryStage.setTitle("TP3 - Exemple d'exécution de requêtes dans une TableView"); initGUI(); Scene scene = new Scene(root, 585, 630); primaryStage.setScene(scene); primaryStage.show(); } private void initGUI() { root = new VBox(); root.setSpacing(10); root.setPadding(new Insets(10)); panNord = new VBox(); panNord.setAlignment(Pos.CENTER_LEFT); panNord.setSpacing(10); etiquetteRequete = new Label(); etiquetteRequete.setText(IhmSQL.getFichierRessource().getString("etiquetteRequete")); champRequete = new TextField(); champRequete.setPrefWidth(366); champRequete.setAccessibleText("Champ de requête"); btExecuter = new Button(); btExecuter.setText(IhmSQL.getFichierRessource().getString("btExecuter")); btExecuter.setAccessibleText("Exécuter la requête"); panNord.getChildren().addAll(etiquetteRequete, champRequete, btExecuter); jtbResultat = new TableView<>(); // par défaut j'effectue un test sur une table existante jtbResultat.setItems(FXCollections.observableArrayList(AccesBD.executerQuery("show databases"))); jtbResultat.setAccessibleText("Résultats de la requête"); panSud = new VBox(); panSud.setAlignment(Pos.CENTER); panSud.setSpacing(3); btRQuery = new RadioButton(); btRQuery.setText(IhmSQL.getFichierRessource().getString("btrQuery")); btRQuery.setAccessibleText("Mode requête"); btRUpdate = new RadioButton(); btRUpdate.setText(IhmSQL.getFichierRessource().getString("btrUpdate")); btRUpdate.setAccessibleText("Mode mise à jour"); btEffacer = new Button(); btEffacer.setText(IhmSQL.getFichierRessource().getString("btEffacer")); btEffacer.setAccessibleText("Effacer le champ de requête"); btQuitter = new Button(); btQuitter.setText(IhmSQL.getFichierRessource().getString("btQuitter")); btQuitter.setAccessibleText("Quitter l'application"); btQuitter.setPrefWidth(89); btGroupeRadio = new ToggleGroup(); btRQuery.setToggleGroup(btGroupeRadio); btRUpdate.setToggleGroup(btGroupeRadio); btRQuery.setSelected(true); panSud.getChildren().addAll(btRQuery, btRUpdate, btEffacer, btQuitter); mnuBar = new MenuBar(); mnuLangue = new Menu(IhmSQL.ressource.getString("mnu.langue")); mnuItemFrancais = new MenuItem(IhmSQL.getFichierRessource().getString("mnuItem.francais")); mnuItemAnglais = new MenuItem(IhmSQL.getFichierRessource().getString("mnuItem.anglais")); mnuLangue.getItems().addAll(mnuItemFrancais, mnuItemAnglais); mnuBar.getMenus().add(mnuLangue); root.getChildren().addAll(mnuBar, panNord, jtbResultat, panSud); // Ajoutez des écouteurs d'événements pour les boutons et les autres éléments de l'interface btExecuter.setOnAction(event -> { // Code pour l'action du bouton Executer }); btEffacer.setOnAction(event -> { // Code pour l'action du bouton Effacer }); btQuitter.setOnAction(event -> { // Code pour l'action du bouton Quitter }); } }
Dans cette version, nous avons utilisé des conteneurs appropriés comme VBox et HBox pour organiser les éléments de l’interface. Nous avons également défini des marges et des espacements appropriés avec Insets et spacing pour améliorer l’apparence de l’interface.
VBox
HBox
Insets
De plus, nous avons utilisé setPrefWidth() et setPrefHeight() pour définir les dimensions préférées des éléments plutôt que de fixer leur taille exacte. Cela permet à l’interface de s’adapter de manière plus flexible à différentes résolutions d’écran.
setPrefWidth()
setPrefHeight()
Enfin, nous avons utilisé des expressions lambda pour les actions des boutons, ce qui permet un code plus concis et plus lisible.
Des attributs accessibleText ont été ajouté à certains éléments de l’interface, tels que le champ de requête, le bouton d’exécution et le tableau des résultats. Ces attributs permettent aux technologies d’assistance, comme les lecteurs d’écran, de lire les informations appropriées.
accessibleText