Graphismes avec Java FX

Travailler avec des fichiers image

Ce programme va permettre d'afficher des images provenant de fichiers image enregistrés localement.
On utilise ici par exemple les "échantillons d'images" fournis par Windows dans le dossier "Mes Images".

Mise en place de l'interface

Créer un nouveau projet JavaFX appelé "images" en suivant la procédure expliquée dans le tutoriel précédent (seul le nom du projet sera différent).

Dans l'explorateur de package d'Eclipse, déplier l'arborescence du projet "images". Faire un clic-droit sur le nom du fichier FXML du projet et choisir "Open with SceneBuilder".

Dans la "library" de SceneBuilder, déplier la liste "Controls" et faire glisser un "ImageView" de la liste "Controls" sur la partie "insert CENTER" du "BorderPane" dans la partie "Hierarchy" en bas à gauche.

Une "ImageView" est un élément capable d'afficher des images. Pour l'instant celle-ci ne contient aucune image, donc il est normal que rien ne soit visible.

Faire glisser une "ButtonBar" de la liste "Controls" dans la partie "insert BOTTOM" du "BorderPane" .

Changer l'intitulé du bouton en "Suivante".

La "hierarchy" doit maintenant contenir ceci :

Agrandir un peu les dimensions de l'image et de son contenant à l'aide de la souris

Enregistrer le travail sous SceneBuilder et retourner sous Eclipse. Ouvrir le fichier "Main.java" de l'application et supprimer les indications "400,400". Lancer le programme et vérifier que la fenêtre s'ouvre et que le bouton "Suivante" est visible.

Il faut maintenant déclarer les éléments ajoutés dans le code du fichier contrôleur, comme on l'a vu ici .

Ajouter dans le code de la classe contrôleur (fichier EchantillonController.java) les lignes

@FXML ImageView vueImage;
@FXML Button boutonSuivante;

Utiliser l'assistance d'Eclipse pour ajouter le code permettant d'importer les classes nécessaires depuis la bibliothèque FX.
Le code de la classe contrôleur est maintenant

package application;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.image.ImageView;

public class EchantillonController {
	@FXML ImageView vueImage;
	@FXML Button boutonSuivante;
}

Retourner sous SceneBuilder pour attribuer les "fx:id" de l'ImageView et du Button, comme expliqué ici.

 

L'interface du programme est maintenant en place, il ne reste plus qu'à écrire le code.