Java Cours : Création de fenêtre en JavaFX
par
popularité : 6%
En javaFX, il est possible de dessiner des fenêtres de dialogue grâce à des outils, tel que JavaFX Scene Builder, qui sont ensuite sauvegardées dans un fichier XML d’extension .fxml
.
Il ce fichier fxml est ensuite chargé dans le code Java pour générer une fenêtre de dialogue.
Il est (souvent) nécessaire d’associer à chaque fenêtre affichée un contrôle des interactions.
Installation de Java FX
Pour les versions de Java ultérieure à 8,
il est nécessaire de télécharger JavaFX,
vous pouvez le télécharger ici sur le site de JavaFX.
L’outil Scene Builder est important pour la réalisation de fenêtre de dialogue.
Préparation de l’IDE
Sous votre IDE préféré,
- inclure les librairies JavaFX dans le projet.
Exemple, sous IntelliJ, dans project structure->Librairie, cliquez sur ’+’ (New Project Library) et indiquez le chemin d’accès au répertoire lib de JavaFx - ajouter ces variables dans les arguments de la JVM :
--module-path /chemin_vers_javafx-sdk/lib --add-modules=javafx.controls,javafx.fxml
Création d’un dialogue pour la gestion des couleurs
Créez un package ’gui’ dans lequel seront stockés les fenêtres et leurs contrôles.
Dans ce package, cliquez du bouton droit, choisissez, « new », « other... »
Dans JavaFX, choisissez « New FXML Document »
Donnez le nom « ChoixCouleursGui »
Le fichier ChoixCouleursGui.fxml est créer. Pour l’éditer avec Scene Builder, sélectionner le avec le bouton droit, puis choisissez « Open with Scene Builder ».
Créer l’interface permettant de sélectionner 3 couleurs : la couleur du jeton pour le joueur 1, celle pour le joueur 2, et la couleur du fond du plateau de jeu.
L’objet de contrôle permettant de sélectionner une couleur est un ColorPicker.
Ajouter un contrôle des actions
Il est nécessaire de créer une classe qui permettra d’effectuer des actions suite aux actions de l’utilisateur.
Il s’agit d’une classe ’normale’ qui contient des attributs et méthodes partagés avec la fenêtre FXML.
Ces attributs et méthodes doivent être précédés du marqueur @FXML .
Ici, nous avons besoin d’accéder aux choix des couleurs, la classe ChoixCouleursControleur
contiendra donc les attributs
- /**selecteur de couleur pour Carre décrit dans le fichier fxml*/
- @FXML private ColorPicker colPickCarre;
- /**selecteur de couleur pour Cercle décrit dans le fichier fxml*/
- @FXML private ColorPicker colPickCercle;
qui doivent être associés aux contrôles dans le fichier FXML.
Egalement il faudra effectuer des actions différentes selon que le bouton ’Ok’ ou ’Annuler’ est actionné ou que l’utilisateur choisit une couleur.
Par exemple, la méthode liée au bouton ’Annuler’ sera de fermer la fenêtre s’écrit :
- /**annulation : fermeture de la fenetre sans prendre en compte les couleurs*/
- dialogStage.close();
- }
On souhaite dessiner un carre et un cercle et disposer d’un menu faisant appel à une interface pour changer les couleurs de ces éléments.
On utilisera objets de type ColorPicker
.
Un changement de couleur pour un objet sera capté par une fonction dédiée, le clic sur un bouton ’go’ demandera le changement des couleurs à l’application, et un bouton ’Cancel’ fermera la fenêtre.
Voici un exemple de code :
ChoixCouleursControleur
:
- **classe servant d'intermediaire de dialogue entre le fichier fxml et la fenetre recevant les objets d'interaction*/
- public class ChoixCouleursControleur {
- /**petit theatre associe */
- Stage dialogStage;
- /**application associe*/
- TestAppelFXML application;
- /**couleur pour le carre*/
- Color colCarre;
- /**couleur pour le cercle*/
- Color colCercle;
- /**selecteur de couleur pour carre lie au fichier fxml*/
- @FXML private ColorPicker colPickCarre;
- /**selecteur de couleur pour cercle lie au fichier fxml*/
- @FXML private ColorPicker colPickCercle;
- /**fonction liable au fcihier fxml*/
- /**fonction liable au fcihier fxml*/
- /**acceptation du choix des couleurs, utilisateur clique sur OK*/
- application.setColCarre(this.colCarre);
- application.setColCercle(this.colCercle);
- application.fill();
- dialogStage.close();
- }
- /**annulation : fermeture de la fenetre sans prendre en compte les couleurs*/
- dialogStage.close();
- }
- /** @param dialogStage lien vers le petit theatre associe*/
- public void setDialogStage(Stage dialogStage) {
- this.dialogStage = dialogStage; }
- /**lien vers l'application
- * recuperation des couleurs actuellement utilisee
- * @param _application une reference a l'application*/
- public void setApplication(TestAppelFXML _application) {
- application = _application;
- this.colCarre = application.getColCarre();
- this.colCercle = application.getColCercle();
- colPickCarre.setValue(colCarre);
- colPickCercle.setValue(colCercle);
- }
- }
On remarque des éléments marqués par le tag @FXML
.
Ces éléments seront lus par l’application SceneBuilder pour faire le lien entre la fenêtre qui y est dessinée et ce contrôleur..
Lier le contrôle à la fenêtre FXML
Pour lier la fenêtre dessinée dans JavaFX Scene Builder, avec le contrôle, il faut dans la colonnes de gauche de ’JavaFX Scene Builder’, dans l’onglet Controller
situé en bas, sélectionner dans Controller class
la classe ChoixCouleursControleur
(attention, ne pas oublier d’indiquer le package si nécessaire).
Ensuite, pour chaque élément de type ColorPicker, sélectionner dans la colonne de droite, l’onglet Code
situé en bas et lier l’élément au nom définit dans la classe de contrôle, ainsi qu’à sa méthode.
L’écran doit ressembler à ceci :
- exemple de scene builder
Répétez les mêmes actions pour les autres éléments de choix de couleurs, ainsi que pour le bouton Annuler qui ne sera lié qu’à sa méthode..
Afficher une fenêtre de dialogue FXML
La fenêtre étant créée, il faut l’appeler à partir de l’application.
Voici une petite application affichant un carré et un cercle. Un menu permet de charger un fichier fxml afin d’en placer le contenu dans une fenêtre.
- public class TestAppelFXML extends Application {
- /** carre peint*/
- /** cercle peint*/
- private static Circle cercle;
- /**
- * initialisation de l'application graphique
- */
- @Override
- public void start(Stage primaryStage) {
- construireScene(primaryStage);
- }
- /**
- * construction du théâtre et de la scène
- */
- private void construireScene(Stage primaryStage) {
- // points de base des éléments graphiques
- // creer un menu
- // creer un item de menu
- //lui definir une action
- miCol.setOnAction(e->choixCouleurs(primaryStage));
- //l'ajouter au menu
- mParam.getItems().add(miCol);
- // creer une barre de menu
- // ajout du menu a la barre
- mb.getMenus().add(mParam);
- // creation d'une mise en forme verticale du menu
- VBox vb = new VBox(mb);
- root.getChildren().add(vb);
- primaryStage.setTitle("TestFXML...");
- primaryStage.setScene(scene);
- // definir les acteurs et les habiller
- dessinEnvironnement(root);
- // afficher le theatre
- primaryStage.show();
- }
- /**fonction qui lance une fenetre modale definie en fxml par JavaFX Scene Builder
- * @param primaryStage theatre de l'application*/
- private void choixCouleurs(Stage primaryStage)
- {
- //chargement du fichier FXML
- AnchorPane page = null;
- FXMLLoader fxmlLoader =null;
- try
- {
- fxmlLoader = new FXMLLoader(getClass().getResource( sceneFile ));
- page =fxmlLoader.load();
- }
- //si le chargement a reussi
- if (page!=null)
- {
- //creation d'une petite fenetre et de son theatre
- Stage dialogStage = new Stage();
- dialogStage.setTitle("Choix des couleurs...");
- //fenetre modale, obligation de quitter pour revenir a la fenetre principale
- dialogStage.initModality(Modality.WINDOW_MODAL);
- //dialogue modale liee a la fenetre parente
- dialogStage.initOwner(primaryStage);
- //creation de la scene a partir de la page chargee du fichier fxml
- Scene miniScene = new Scene(page);
- dialogStage.setScene(miniScene);
- //recuperation du controleur associe a la fenetre
- ChoixCouleursControleur controller = fxmlLoader.getController();
- //liaison entre le controleur et sa fenetre
- controller.setDialogStage(dialogStage);
- //liaison entre le controleur et l'application
- controller.setApplication(this);
- //affichage de la fenetre
- dialogStage.showAndWait();
- }
- }
- /**
- * creation des elements graphiques
- */
- root.getChildren().add(carre);
- cercle = new Circle(200, 200, 100);
- root.getChildren().add(cercle);
- fill();
- }
- /**remplissage des elements graphiques*/
- public void fill()
- {
- carre.setFill(colCarre);
- cercle.setFill(colCercle);
- }
- return colCarre;
- }
- this.colCarre = colCarre;
- }
- return colCercle;
- }
- this.colCercle = colCercle;
- }
- /**
- * lancement de l'application
- */
- launch(args);
- }
- }
voir le code sur ce site