1°/ Objectifs
Deux interfaces graphiques doivent être implémentées. Leur aspect est représenté sur les figures 1.1 et 1.2 ci-dessous.
 |
 |
|
| Fig 1.1 - version 1 de l'interface | Fig 1.2 - version 2 de l'interface |
Ces deux interfaces contiennent les mêmes composants graphiques de base, mais diffèrent sur leur positionnement. D'autre part, le traitement sous-jacent à ces deux interfaces est exactement le même : on souhaite calculer la moyenne des notes entrées par l'utilisateur lorsque celui-ci clique sur le bouton moyenne. Si une note est ajoutée en matière optionnelle, alors le coefficient de la matière dépend de la matière choisie (Latin = 2, Grec = 2 et Sport = 1). La partie traitement sera gérée dans les TP suivants.
2°/ Première version
2.1°/ Structure de base de l'interface
- Créer un nouveau projet JavaFX avec l'IDE Intellij IDEA fichier. Il contiendra le fichier Main.java qui contient la classe Main. Dans cette classe, le point d'entrée à l'application, la fonction main(), est définie.
- Pour ce premier TP simple, tout le code va être ajouté à la classe Main. Vous pouvez supprimer les fichiers Controller.java et sample.fxml qui ne seront pas utilisés dans ce TP.
- Dans la méthode start() d'Application, ajoutez :
- un appel à la méthode initWidgets() qui initialise les composants graphiques avec lesquels l'utilisateur va interagir.
- un appel à la méthode addWidgetsToSceneV1() qui ajoute les composants graphiques à la fenêtre.
- un appel à la méthode primaryStage.setTitle() pour ajouter un titre à la fenêtre
- un appel à la méthode primaryStage.setScene() pour ajouter la scène contenant l'interface graphique à la fenêtre.
- un appel à la méthode primaryStage.show() pour afficher la fenêtre.
Remarque : les méthodes initWidgets() et addWidgetsToSceneV1() seront définies plus tard.
2.2°/ Attributs de classe
- Définir tous les attributs de l'interface graphique.
- Attention : il n'est pas nécessaire de mettre tous les widgets en attributs. Seuls les objets en interaction avec l'utilisateur ou bien ceux dont on devra lire/modifier l'état (dans la partie traitement de l'application) doivent faire partie des attributs de la classe. D'autre part, il n'est en général pas nécessaire de mettre les layouts en attribut, et c'est le cas ici.
- Quelques exemples d'attributs :
- TextField tfAnglais, qui contiendra la note d'anglais entrée par l'utilisateur.
- RadioButton rbAng1, qui correspond au bouton de coefficient 1 pour la note d'anglais.
- ComboBox<String> listOption, qui contient le nom de l'option choisie (Latin, Grec ou Sport). On a besoin de cet attribut, pour connaître le coefficient de la note de l'option.
- Label lMoy, qui contient initialement la string "Valeur", puis qui contiendra la moyenne calculée après un clic sur le bouton Moyenne. On a besoin de cet attribut puisque la valeur du Label va être modifiée.
- Remarque : les widgets tels que le Label lAnglais n'ont pas besoin d'être définis en tant qu'attributs puisqu'ils n'ont aucune interaction avec l'utilisateur et la partie traitement ne liera/modifiera jamais leur état.
2.3°/ Méthode initWidgets()
- Ecrire le code de cette méthode, qui permet de définir tous les attributs de l'interface graphique.
- Il faut notamment instancier tous les widgets déclarés comme attributs et, pour certains, initialiser des paramètres.
- Attention : cette méthode ne gère pas le placement des widgets mais seulement leur création et initialisation. Il n'y a donc aucune instanciation de Layout dans cette méthode.
2.4°/ Méthode addWidgetsToSceneV1()
- Ecrire le code de cette méthode en utilisant les gestionnaires de placement décrits ci-dessous.
 |
| Fig 2.1 - les layouts pour chaque matière |
- Comme on le voit sur la figure 2.1, pour chaque ligne correspondant à une matière ainsi que pour la ligne affichant la moyenne, il faut créer un FlowPane. La ligne de la checkbox étant constitué d'un seul élément, on ne crée pas de layout pour cette ligne.
 |
| Fig 2.2 - le layout principal |
- Comme indiqué sur la figure 2.2, chacun de ces FlowPane plus la checkbox sont ensuite posés dans un VBox.
- Tester cette version lorsque vous diminuer les dimensions de la fenêtre. Vous pouvez remarquer que les composants d'une ligne sont affichés sur plusieurs lignes lorsque cette dernière n'est pas assez large. Pour résoudre ce problème, on peut mettre le layout VBox dans un FlowPane et associer le FlowPane à la Scène.
3°/ Deuxième version
3°1/ le placement des composants
- Dans la classe Main, créer une méthode addWidgetsToSceneV2().
- Écrire le code de cette méthode en utilisant les layouts décrits ci-dessous.
 |
| Fig 3.1 - layout des lignes de bouton radio et des matières |
- Comme l'indique la figure 3.1, chaque trois boutons radio d'une matière sont ajoutés dans un HBox. Ensuite, les cinq lignes des matières sont ajoutées dans un GridPane comme suit : la première colonne de la grille contiendra les labels des matières, la deuxième colonne affichera les champs de texte et la troisième colonne contiendra les HBox contenant chacun les trois boutons radios d'une matière. Le bouton moyenne et le label Valeur sont ajoutés dans un HBox aussi. Enfin, Le GridPane, le CheckBox et le HBox du bouton moyenne, sont ajoutés à un VBox. Ce dernier est associé à la scène de la fenêtre.
3.2°/ Ajouter un cadre.
- Mettre un cadre autour du de la zone de saisie des notes comme dans la figure suivante. Faites en sorte que tous les composants soient bien alignés.
3.3°/ Gérer le redimensionnement de la fenêtre.
- Tester cette version lorsque vous agrandissez la fenêtre.
- Le résultat n'est pas satisfaisant : il faut fixer la position relative des éléments graphiques comme vous avez fait pour la première version de cette interface.