TP de Programmation sur une interface utilisateur simple en JavaFX

Dans ce TP, nous allons voir comment assembler des composants JavaFX afin de créer une interface utilisateur simple, qui presente plusieurs zones d'affichage à l'écran et recoit des commandes de la part de l'utilisateur. Vous pouvez commencer à partir de votre solution aux précédents TPs et Apnées, ou partir de l'état global Etape7.zip.

1 - Informations à l'écran

Nous allons commencer par améliorer un peu les informations que nous présentons à l'écran : nous voulons voir le titre du niveau ainsi que des informations sur le déroulement de la partie comme le nombre de briques restant à détruire, le nombre de balles en réserve et le nombre d'images affichées par seconde. Nous allons organiser ces informations à l'écran de la manière décrite dans le tableau suivant :

Titre
Zone de jeuBriques
Balles
FPS

Pour réaliser cette organisation, il faut comprendre comment sont organisé les composants dans un toolkit graphique :

Il y a plusieurs manières de s'y prendre pour arriver à l'organisation décrite par le tableau précédent :

Le GridPane est un conteneur similaire à une grille virtuelle dans laquelle nous pouvons placer des composants en leur faisant occuper des rectangles de la grille, elle est décrite dans ce tutoriel JavaFX. Dans notre exemple, nous pouvons utiliser un grille de taille 2x2 de la manière suivante :

Une fois notre GridPane en place, nous pouvons régler la répartition de l'espace entre les lignes et les colonnes de la manière suivante :

Exercices

Récupérez le programme Etape8.java. Vous pouvez constater que ce programme contient deux évolutions :

2 - Touches

Dans un toolkit graphique, la pression d'une touche sur le clavier (ou son relâchement) est signalée par un évènement. Le programmeur peut réagir à cet évènement en enregistrant auprès du toolkit une méthode, dite de callback qui sera appelée lorsque l'évènement surviendra. Bien entendu, en java, une méthode ne pouvant exister toute seule, c'est un objet qui implémente une interface particulière qui est enregistré. En JavaFX, cette interface est EventHandler. Cette manière de programmer, en enregistrant des callbacks qui seront appelés lors de l'occurrence d'évènements, est appelée programmation évènementielle. L'interface EventHandler est générique, nous la paramètrerons ici par la classe KeyEvent qui correspond aux évènements en provenance du clavier. Quant à l'enregistrement de notre callback, chaque composant graphique présent dans la bibliothèque de JavaFX dispose d'une méthode d'enregistrement pour chaque type d'évènement par lequel il peut être concerné. Le programme ExempleJavaFXTouches.java illustre cela. Dans ce programme, vous pouvez constater que l'évènement est traité par la méthode handle de l'EventHandler et que le KeyEvent qui lui est passé contient tous les détails concernant l'évènement, ici le code de la touche pressée. En outre, on peut distinguer la pression du relâchement d'une touche car ils sont traités par deux callbacks différents.

Exercices

3 - Souris

Faites de même avec la souris : en enregistrant les bons callbacks sur des MouseEvent vous devriez pouvoir déplacer la raquette à la souris et appeler la méthode action avec une pression sur un bouton.