~ / INFO4 / IHM / tps / 1-grapher /

TP 1 - Grapher avec Java/Swing

Le but de ce TP est d'apprendre à programmer une application interactice avec la boîte à outils Swing de Java. 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 Swing. 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 grapher/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.

% git clone https://gricad-gitlab.univ-grenoble-alpes.fr/blanchr/java-swing-grapher grapher
% cd grapher
grapher% git remote remove origin
grapher% git remote add origin git@gricad-gitlab.univ-grenoble-alpes.fr:info4-iihm/2021-2022/XX/1-grapher.git
grapher% git push -u origin --all

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 :

grapher% ant run-fc
grapher% ant run

Si vous ne disposez pas de ant, vous pouvez toujours compiler et exécuter à la main pour tester :

grapher% cd src
grapher/src% javac grapher/fc/Test.java
grapher/src% java grapher.fc.Test "sin(x)"
x, sin(x)
0.0, 0.0
0.1, 0.09983341664682815
0.2, 0.19866933079506122
0.30000000000000004, 0.2955202066613396
0.4, 0.3894183423086505
0.5, 0.479425538604203
0.6, 0.5646424733950354
0.7, 0.644217687237691
0.7999999999999999, 0.7173560908995227
0.8999999999999999, 0.7833269096274833
0.9999999999999999, 0.8414709848078964

grapher/src% javac grapher/ui/Main.java
grapher/src% java grapher.ui.Main

Vous pouvez également importer les sources fournies dans votre IDE préféré (souvent il dispose d'une option pour créer un projet à partir d'un fichier build.xml prévu pour l'outil ant). Pensez dans ce cas à préciser la classe principale, car deux classes disposent d'une fonction main : grapher.fc.Test et grapher.ui.Main. Ces fonctions attendent des paramètres pris sur la lignes de commandes (liste de fonctions mathématiques), il faudra donc spécifier ces paramètres via une boîte de configuration dans votre IDE.

Interaction graphique

Modifiez la classe Grapher pour permettre l'interaction à la souris avec le graphique (voir les Listeners réalisés par MouseInputAdapter et MouseWheelListener) :

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.

Placement

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

Interaction avec la liste

Faites en sorte que les fonctions sélectionnées dans la liste soient affichées en gras sur le graphique.

Permettez la suppression des fonctions sélectionnées et l'ajout de nouvelles fonctions grâce à une barre de boutons (How to Use Tool Bars et JToolBar, AbstractAction, JOptionPane).

Le programme résultant pourra ressembler à cette capture :

Construction de menus

Faites en sorte que les actions (How to Use Actions et Action) d'ajout et de suppression, possibles depuis la barre de boutons, le soient aussi depuis un menu "Expression" de l'application (How to Use Menus et JMenuBar, JMenu).

Plus d'interactions

Remplacez la liste de fonctions par une table donnant pour chaque fonction une couleur (How to Use Tables et JTable, TableModel). Faites en sorte que l'expression et la couleur soient éditables (respectivement en place sous forme de texte, et par l'intermédiaire d'un sélecteur de couleur).

mise à jour : 17 septembre 2020