~ / M1 / TLI / tps / 1-grapher-javafx /

TP 1 - Grapher avec JavaFX

© 2007—2019 - Renaud Blanch

Le but de ce TP est d'apprendre à programmer une application interactice avec la boîte à outils JavaFX. Vous allez réaliser un visualisateur du graphe d'une fonction. Dans un premier temps vous vous familiariserez avec le modèle graphique 2D de JavaFX. Vous rendrez ensuite le visualisateur interactif en utilisant différentes techniques (e.g., widgets, manipulation directe).

Squelette d'application

Récupérez les sources du squelette de l'application. Celles-ci fournissent dans le répertoire graphser/src/ 2 packages : grapher.fc et grapher.ui (respectivement le noyau fonctionnel et l'interface graphique de notre programme). Explorez le code pour comprendre ce qu'il fait.

% tar xzvf grapher.src.tgz
ou
% gunzip grapher.src.tgz
% tar xvf grapher.src.tar

Dans le répertoire grapher/, un fichier build.xml est fourni. Il permet de gérer la compilation du programme à l'aide de ant. Lisez ce fichier et testez la compilation et l'exécution :

% cd grapher
grapher% ant run-fc
grapher% ant run

Si ant n'est pas disponible sur votre machine, vous pouvez compiler et exécuter le programme ainsi :

% cd grapher/src
grapher/src% javac grapher/ui/Main.java
grapher/src% java grapher.ui.Main "sin(x)"

Si vous utilisez Eclipse sur les machines de l'UFR sous linux suivre les étapes suivantes:

• File > New > Project … > Java > Java Project from Existing Ant Buildfile, une boîte de dialogue s'ouvre ;
• Dans le champ Ant buildfile, aller chercher le fichier buil.xml qui est dans le répertoire grapher, puis Finish ;
• Project > Properties > Java Build Path > Libraries sélectionner Add External JARs… ;
• Aller chercher dans /usr/share/openjfx/lib/ les JARs javafx.graphics.jar, javafx.controls.jar et javafx.base.jar ;
• Clic droit sur Grapher > src > grapher.ui > Main.java, Run as > Run Configurations…, onglet Arguments, dans Program arguments: ajouter par exemple "sin(x)" et enfin Run!

Interaction graphique

Modifiez la classe GrapherCanvas pour permettre l'interaction à la souris avec le graphique (voir le principe de gestion des évènements, en particulier les EventHandler et les évènements MouseEvent et ScrollEvent) :

• le drag, bouton gauche enfoncé, doit permettre de déplacer le repère, avec une petite main à la place du curseur par défaut pendant l'interaction (voir la classe Cursor) ;
• le drag, bouton droit enfoncé, doit permettre de sélectionner une zone rectangulaire marquée par un rectangle pointillé, pour zoomer sur cette sélection lorsque le bouton est relâché ;
• le clic gauche (resp. droit) permette de zoomer (resp. dézoomer) de 5%, centré sur le curseur ; et
• la molette (ou le drag bouton du milieu) doit permettre de zoomer ou dézoomer, centré sur le curseur.

Pour la partie graphique (feedback de l'interaction), il faudra voir les méthodes du Canvas et de son GraphicsContext.

Placement

Rendez la liste des fonctions visibles dans une bande redimensionnable à gauche de la fenêtre (SplitPane, ListView).

Interaction avec la liste

Faites en sorte que les fonctions sélectionnées dans la liste soient affichées en gras sur le graphique (voir le SelectionModel de la ListView, et comment observer ses changements à l'aide d'un InvalidationListener).

Permettez la suppression des fonctions sélectionnées et l'ajout de nouvelles fonctions grâce à une barre de boutons (ToolBar, Button, et ActionEvent).

Le programme résultant pourra ressembler à cette capture :

Construction de menus

Faites en sorte que les actions d'ajout et de suppression, possibles depuis la barre de boutons, le soient aussi depuis un menu "Expression" de l'application (MenuBar, Menu et MenuItem). Vous pouvez réutiliser l'EventHandler qui gère les boutons de la barre d'outils.

Faites en sorte que ces commandes puissent être lancées grâce aux raccourcis claviers "Ctrl+N" (ou "Cmd+N" sur le mac) et "Ctrl+Backspace" (ou "Cmd+Backspace") (grâve à la méthode setAccelerator des MenuItem).

Plus d'interactions

Faites en sorte que les expressions contenues dans la liste de gauche soient éditables en place sous forme de texte (voir la section editing de la documentation des ListView et la notion de CellFactory).

Enfin, ajoutez une colonne à la liste de gauche (qui devient une TableView) avec la couleur, éditable en place grâce à un ColorPicker.

mise à jour : octobre 2019