1°/ Introduction
Dans ce TP vous allez apprendre à dessiner des formes avec JavaFX et utiliser le Scene Builder pour créer l'interface graphique.
Ci-dessous un exemple pour dessiner sur une Canvas.
Ci-dessous un exemple pour dessiner sur une Canvas.
public void start(Stage primaryStage) {
primaryStage.setTitle("Drawing");
Group root = new Group();
Canvas canvas = new Canvas(300, 250);
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.setFill(Color.GREEN);
gc.setStroke(Color.BLUE);
gc.setLineWidth(5);
gc.fillOval(10, 60, 30, 30);
root.getChildren().add(canvas);
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
Il existe pas mal de méthodes dans la classe GraphicsContext qui vous permettent de dessiner sur les composants différentes formes, par exemple :
fillRect() : un rectangle remplit
strokeRect : un rectangle vide
2°/Description de l'application
Vous devez faire une application qui respecte le paradigme MVC et qui contient un SplitPane qui divise la fenêtre en deux parties :
- Un formulaire qui permet à l'utilisateur de choisir quoi dessiner (couleur, forme, forme remplie ou vide, couleur de l'arrière plan, ...)
- Un Canvas qui va afficher le dessin de l'utilisateur choisi avec le formulaire
Figure 1 : Une fenêtre comprenant un formulaire et une Canvas pour afficher le dessin de l'utilisateurLe ComboBox comprend les items suivants : Rectangle, Oval, Arc, Round Rectangle. Les champs de textes "Arc dimensions" sont désactivés si l'arc ou le round rectangle ne sont pas sélectionnés. Pour choisir la couleur de l'arrière plan ou de la forme utilisez un ColorPicker.
L'interface graphique doit être conçue avec Scene Builder qui va générer un fichier FXML. Le fichier FXML doit être chargé dans la Vue avec une instance de la classe FXMLLoader. L'interface aura un contrôleur qui va écouter les évènements générés par les deux boutons (Draw pour dessiner sur Canvas la forme selon les données saisies dans le formulaire et Clear pour effacer le contenu du formulaire et du Canvas) et le ComboBox (Form) pour désactiver ou activer les champs de texte "Arc Dimensions".
ResourceBundle bundle = ResourceBundle.getBundle("tp5",Locale.getDefault()); // Les pairs noms/valeurs des champs de texte sont stockées dans tp5.properties
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("View.fxml"),bundle); //instancier un objet de la classe FXMLLoader
SplitPane layout = fxmlLoader.load(); //Charger l'interface définit dans View.fxml
Controller controller = fxmlLoader.<Controller>getController(); //récupérer une référence au contrôleur qui écoute les évènements générés par l'interface
controller.setModel(m); //passer le modèle au contrôleur Code 1 : Charger une interface depuis un fichier FXML
Utilisez Scene Builder pour concevoir l'interface en glissant déposant les composants de l'interface dans la fenêtre et en modifiant leurs propriétés.
Figure 2 : Utilisation de Scene Builder pour créer l'interface
Utilisez les bundles et SceneBuilder pour internationaliser l'application. Il faut pouvoir lancer l'application en Français ou en Anglais selon la langue locale de l'utilisateur de l'application. Tous les composants graphiques qui affichent du texte doivent avoir leur texte remplacé par le nom d'un champs. Les valeurs de ses champs seront saisies dans un fichier qui a une extension .properties pour chaque langue (Voir le cours 4).
Dans la figure 2, les champs qui décrivent le Canvas sont internationalisés et le fichier .properties pour la langue française est le suivant :
canvasProp.value = Propriétés de la canvas
canvasDimensions.value = Dimensions
canvasHeight.value = Hauteur
canvasWidth.value = Largeur
BGColor.value = Couleur de fond Code 2 : Contenu du fichier tp5_fr_FR.properties