~ / RICM4 / IHM / tps / 1-grapher-javafx /

TP 1 - Grapher avec JavaFX

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

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).

Pour l'ajout, JavaFX fournit des boîtes de dialogues qu'ils suffit de configurer pour interagir avec l'utilisateur: TextInputDialog pour l'entrée d'une chaîne de caractères et Alert pour signifier les erreurs.

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).

mise à jour : novembre 2019