Programme principal

La barre de contrôle est composée de trois sous-parties, séparée les unes des autres par de fines barres verticales. De gauche à droite, ces parties permettent de définir : la position d'observation, l'instant d'observation, et l'écoulement du temps simulé.

La vue du ciel qui se trouve au centre de l'interface est celle décrite à l'étape 10.

La direction d'observation, c-à-d le centre de la projection stéréographique utilisée, est contrôlée par les touches du curseur lorsque le canevas affichant le ciel est le destinataire des événements clavier. Comme expliqué précédemment, les touches gauche et droite changent l'azimut de cette direction par pas de 10°, tandis que les touches haut et bas changent sa hauteur, par pas de 5°, en la restreignant à l'intervalle [5°, 90°].

Au démarrage du programme, l'azimut d'observation est de 180.000000000001° (plein sud)¹ et la hauteur d'observation est de 15°, tandis que le champ de vue est de 100°.

La barre d'information au bas de la fenêtre affiche les trois informations suivantes :

• à gauche, le champ de vue, en degrés et avec une décimale,
• au centre, les informations au sujet de l'objet le plus proche du curseur de la souris,
• à droite, la position du curseur de la souris dans le système de coordonnées horizontal, en degrés et avec deux décimales pour chacune des composantes.

La partie centrale est vide si aucun objet n'est assez proche du curseur de la souris pour que ses informations soient affichées, mais les parties gauche et droite ne sont jamais vides.

La barre de contrôle est un panneau horizontal de type HBox dont les trois enfants principaux sont eux aussi des panneaux de type HBox. Ces sous-panneaux sont séparés les uns des autres par un séparateur vertical de type Separator.

Le premier sous-panneau contient la partie de l'interface graphique permettant de régler la position d'observation, le second contient celle permettant de régler l'instant d'observation, et le troisième contient celle permettant de régler l'écoulement du temps.

Afin qu'elle ait l'aspect attendu, la barre de contrôle doit être configurée pour que ses enfants — les sous-panneaux et leurs séparateurs — soient correctement espacés et entourés d'une marge. Cette configuration pourrait se faire au moyen de différentes méthodes héritées de Pane ou Node, mais une solution plus simple existe : la méthode setStyle, qui prend en argument une chaîne de caractères décrivant le style du composant au moyen d'un sous-ensemble du langage CSS utilisé sur le Web.

Nous vous suggérons donc d'utiliser cette méthode, et nous vous donnons systématiquement ci-dessous les styles à appliquer aux différents nœuds graphiques. Ainsi, celui de la barre de contrôle est :

-fx-spacing: 4;
-fx-padding: 4;

ce qui signifie que vous devez appeler la méthode setStyle sur le panneau qui la représente, en lui passant en argument une chaîne contenant ce style, sur une seule ligne. En d'autres termes, vous devez écrire quelque chose comme :

HBox controlBar = /* … */;
controlBar.setStyle("-fx-spacing: 4; -fx-padding: 4;");

Le premier sous-panneau de la barre de contrôle contient la partie de l'interface graphique permettant de définir la position d'observation. Il est de type HBox et son style est :

-fx-spacing: inherit;
-fx-alignment: baseline-left;

Les étiquettes décrivant le contenu des champs sont de type Label et le texte de la première est :

Longitude (°) :

Le texte de la seconde étiquette est similaire.

Les champs contenant la longitude et la latitude sont des instance de TextField dont le style est :

-fx-pref-width: 60;
-fx-alignment: baseline-right;

Afin que ces champs n'acceptent que des valeurs valides, c-à-d des nombres à deux décimales et compris dans les bons intervalles, il est nécessaire de leur attacher ce que JavaFX nomme un formateur de texte, de type TextFormatter.

Malheureusement, la manière dont cela doit être fait est complexe et mal documentée, raison pour laquelle nous vous donnons ci-dessous un exemple montrant comment créer le formateur permettant de valider la longitude (lonTextFormatter ci-dessous) et de l'attacher au champ textuel correspondant (lonTextField ci-dessous)

NumberStringConverter stringConverter =
  new NumberStringConverter("#0.00");

UnaryOperator<TextFormatter.Change> lonFilter = (change -> {
    try {
      String newText =
	change.getControlNewText();
      double newLonDeg =
	stringConverter.fromString(newText).doubleValue();
      return GeographicCoordinates.isValidLonDeg(newLonDeg)
	? change
	: null;
    } catch (Exception e) {
      return null;
    }
  });

TextFormatter<Number> lonTextFormatter =
  new TextFormatter<>(stringConverter, 0, lonFilter);

TextField lonTextField =
  new TextField();
lonTextField.setTextFormatter(lonTextFormatter);

Notez que le formateur lonTextFormatter possède une propriété nommée value et dont le contenu est la longitude en degrés, sous forme de valeur de type Double (!). C'est donc cette propriété qu'il faut lier à la propriété correspondante du bean contenant la position de l'observateur.

Le code ci-dessus peut facilement être adapté au cas de la latitude, et même placé dans une méthode séparée prenant en arguments les aspects qui diffèrent entre ces deux cas, afin d'éviter la duplication de code.

Le second sous-panneau de la barre de contrôle contient la partie de l'interface graphique permettant de définir l'instant d'observation, qui est la combinaison de la date d'observation, l'heure d'observation, et le fuseau horaire dans lequel le couple (date, heure) est exprimé.

Le sous-panneau est de type HBox et son style est :

-fx-spacing: inherit;
-fx-alignment: baseline-left;

Ses deux premiers fils sont consacrés à la date d'observation. Le premier d'entre eux est une étiquette explicative, de type Label, dont le texte est :

Date :

Le second d'entre eux est le nœud permettant de choisir effectivement la date d'observation, de type DatePicker. Sa propriété value est liée à la propriété date du bean contenant l'instant d'observation, et son style est :

-fx-pref-width: 120;

Les deux prochains fils du sous-panneau sont consacrés à l'heure d'observation. Le premier d'entre eux est une étiquette dont le texte est :

Heure :

tandis que le second est un champ textuel de type TextField ayant pour style :

-fx-pref-width: 75;
-fx-alignment: baseline-right;

Tout comme les champs textuels contenant la longitude et la latitude, celui contenant l'heure doit avoir un formateur de texte attaché afin que seules les heures valides puissent être entrées. Une fois encore, ce code vous est donné en raison de la piètre qualité de la documentation existante à ce sujet :

DateTimeFormatter hmsFormatter =
  DateTimeFormatter.ofPattern("HH:mm:ss");
LocalTimeStringConverter stringConverter =
  new LocalTimeStringConverter(hmsFormatter, hmsFormatter);
TextFormatter<LocalTime> timeFormatter =
  new TextFormatter<>(stringConverter);

Notez ici aussi que le formateur timeFormatter possède une propriété value dont le contenu est l'heure d'observation, sous la forme d'une valeur de type LocalTime. C'est donc elle qu'il faut lier avec l'heure d'observation du bean contenant l'instant d'observation.

Le cinquième et dernier fils du sous-panneau est consacré au fuseau horaire. Il s'agit d'un menu déroulant de type ComboBox dont le style est :

-fx-pref-width: 180;

La propriété value de ce menu déroulant est liée à la propriété zone du bean contenant l'instant d'observation. Les fuseaux horaires qu'il contient sont ceux dont le nom est retourné par la méthode getAvailableZoneIds de la classe ZoneId. Notez que sur la plupart des systèmes, il y en a plusieurs centaines. Pour faciliter la recherche, ces fuseaux doivent donc être triés par ordre alphabétique.

Lorsqu'une animation est en cours, tous les nœuds graphiques liés au choix de l'instant d'observation sont désactivés. Cela se fait facilement en liant leur propriété disable à la propriété running de l'animateur de temps.

Le troisième sous-panneau de la barre de contrôle contient la partie de l'interface graphique permettant de définir l'écoulement du temps. Il s'agit encore une fois d'un panneau de type HBox, dont le style est :

-fx-spacing: inherit;

La manière dont le temps s'écoule est déterminée par un accélérateur de temps, dont le choix est effectué au moyen d'un menu déroulant de type ChoiceBox, qui est le premier fils du sous-panneau. Ce menu propose les six accélérateurs nommés définis à l'étape 9 dans le type énuméré NamedTimeAccelerator.

Les choix proposés par ce menu sont définis au moyen d'un appel à la méthode setItems, qui attend un objet de type ObservableList. Les méthodes de la classe FXCollections sont très utiles pour obtenir une telle liste à partir d'une liste Java « normale », de type java.util.List.

Notez de plus que la méthode select de la classe Bindings permet d'effectuer très facilement le lien entre la propriété accelerator de l'animateur de temps et la propriété value du menu. Cette méthode permet de sélectionner un attribut d'une propriété en fonction de son nom, et son utilisation est illustrée par le programme d'exemple ci-dessous, qu'il est conseillé d'étudier en détail :

ObjectProperty<NamedTimeAccelerator> p1 =
  new SimpleObjectProperty<>(NamedTimeAccelerator.TIMES_1);
ObjectProperty<String> p2 =
  new SimpleObjectProperty<>();

p2.addListener((p, o, n) -> {
    System.out.printf("old: %s  new: %s%n", o, n);
  });

p2.bind(Bindings.select(p1, "name"));
p1.set(NamedTimeAccelerator.TIMES_30);

Notez en particulier que la propriété p1 contient un accélérateur de temps nommé, tandis que la propriété p2 contient une chaîne de caractères. Il n'est donc pas possible de lier directement ces deux propriétés, car leurs types diffèrent.

Il est par contre possible de lier l'attribut name de la première propriété à la seconde, et c'est ce qui est fait à l'avant-dernière ligne au moyen de la méthode select. Cette méthode prend en second argument une chaîne de caractères, ici name, spécifiant l'attribut à extraire du contenu de la propriété passée en premier argument, et elle exige qu'un accesseur dont le nom commence par get existe pour cet attribut. Dans cet exemple, cela implique que la classe NamedTimeAccelerator doit posséder une méthode nommée getName retournant une valeur de type String pour que le programme fonctionne.

Cette sélection par nom n'est pas très propre, car les éventuelles erreurs ne sont signalées qu'à l'exécution du programme, mais fort pratique dans certains cas comme ici.

Le second et troisième fils du sous-panneau sont des boutons de type Button. Ces boutons affichent une image qui est en fait un caractère de la police mise à disposition gratuitement par le projet Font Awesome.

Afin de pouvoir utiliser cette police, il vous faut premièrement télécharger l'archive Zip que nous mettons à votre disposition, et placer le fichier qu'elle contient — nommé Font Awesome 5 Free-Solid-900.otf — dans le répertoire resources de votre projet. Cela fait, vous pouvez charger et utiliser la police ainsi :

InputStream fontStream = getClass()
  .getResourceAsStream("/Font Awesome 5 Free-Solid-900.otf");
Font fontAwesome = Font.loadFont(fontStream, 15);

Button resetButton = new Button("\uf0e2");
resetButton.setFont(fontAwesome);
// … reste du code

Des chaînes similaires à celle passée au constructeur de Button permettent d'obtenir les deux autres images. En résumé, les trois chaînes nécessaires à ce projet sont :

• "\uf0e2" pour ,
• "\uf04b" pour ,
• "\uf04c" pour .

Notez que ces chaînes contiennent chacune un seul caractère Java, spécifié au moyen d'une séquence d'échappement Unicode. Pour mémoire, ces séquences d'échappement sont décrites à la §5 du cours sur les entrées/sorties et les valeurs à utiliser se trouvent sur les pages du site du projet Font Awesome dédiées aux icônes correspondantes, à savoir undo, play et pause.

L'affichage du ciel est géré par la classe SkyCanvasManager de l'étape 10, et ne sera donc pas décrit à nouveau ici.

Notez toutefois que pour que le canevas sur lequel le ciel est dessiné puisse être correctement redimensionné, il est nécessaire de le placer dans un panneau de type Pane, placé lui-même dans la zone centrale du BorderPane à la racine du graphe de scène. Cela fait, les dimensions du canevas — largeur et hauteur —  peuvent être liées à celles du panneau.

Au démarrage du programme, le canevas doit être le destinataire des événements clavier, ce qui implique d'appeler sa méthode requestFocus après que la fenêtre principale ait été rendue visible. En d'autres termes, l'appel à requestFocus du panneau du ciel doit être fait après l'appel à show de la fenêtre principale.

La barre d'information est un panneau de type BorderPane dont les zones gauche, centrale et droite sont occupées chacune par un texte de type Text. Le panneau lui-même a pour style :

-fx-padding: 4;
-fx-background-color: white;

Le texte de la zone de gauche a la forme suivante :

Champ de vue : <fov>°

où <fov> donne le champ de vue, avec une décimale. Par exemple, si ce champ de vue vaut 87.6°, le texte de la zone de gauche est :

Champ de vue : 87.6°

Le texte de la zone centrale donne les informations au sujet de l'objet le plus proche du curseur de la souris, s'il y en a une distance de moins de 10 unités dans le repère du canevas. Ces informations sont celles obtenues via la méthode info de CelestialObject.

Le texte de la zone de droite a la forme suivante :

Azimut : <az>°, hauteur : <alt>°

où <az> est l'azimut du point sous le curseur de la souris, avec deux décimales, tandis que <alt> est sa hauteur, avec deux décimales également.

Notez que la méthode format de la classe Bindings (!) peut être très utile pour définir le texte des zones de gauche et de droite. Il s'agit d'une variante de la méthode format de String que vous connaissez déjà, mais qui est dynamique dans le sens où on peut lui donner des liens ou propriétés en arguments et elle recalcule la chaîne formatée chaque fois que ces valeurs changent.