Vue des aéronefs

3.2.1. Conseils de programmation

Color c1, c2;
Color c = c1.interpolate(c2, 0.2);

3.3.1. Graphe de scène

Le graphe de scène de la vue des aéronefs est présentée sur la figure 3 plus bas. Chaque rectangle blanc représente un nœud JavaFX, et certains d'entre eux sont accompagnés d'annotations colorées qui donnent :

• en vert, les feuilles de style à attacher au nœud en plaçant leur nom dans la liste retournée par getStylesheets,
• en rouge, l'identité des nœuds, à définir au moyen de la méthode setId,
• en bleu, les classes de style à associer au nœud en plaçant leur nom dans la liste retournée par getStyleClass.

Comme cette image l'illustre, la vue des aéronefs est une instance de Pane, et chaque aéronef est représenté par l'un de ses fils, un groupe dont l'identité est la représentation textuelle de son adresse OACI.

Les deux fils de ce groupe représentent, dans l'ordre, la trajectoire de l'aéronef et un groupe comprenant son étiquette et son icône. La raison pour laquelle l'icône et l'étiquette sont groupées ainsi est que cela facilite leur placement à l'écran.

L'icône est toujours visible, alors que l'étiquette et la trajectoire ne le sont qu'à certaines conditions, comme décrit précédemment.

La vue des aéronefs est destinée à être placée au-dessus de la vue présentant le fond de carte, réalisée à l'étape précédente. Afin que permettre à cette dernière de recevoir les événements souris lorsque l'utilisateur clique sur une partie transparente de la vue des aéronefs, il faut impérativement appeler la méthode setPickOnBounds du panneau la contenant, en lui passant false en argument. Cela peut être fait immédiatement après la création du panneau.

3.3.2. Liens et auditeurs

1. Ensemble des aéronefs visibles
   

   Les aéronefs visibles sur la vue des aéronefs sont ceux de l'ensemble observable passé au constructeur de AircraftController. Cet ensemble doit donc être observé afin que les icônes des aéronefs apparaissent et disparaissent lorsque le contenu de l'ensemble change.

   L'observation de l'ensemble est faite par un auditeur, dont l'installation n'est pas totalement triviale et est donc décrite dans les conseils de programmation plus bas.

2. Groupe de l'aéronef annoté
   

   Comme tous les nœuds JavaFX, le groupe contenant l'icône, la trajectoire et l'étiquette possède une propriété nommée viewOrder qui détermine l'ordre dans lequel il est dessiné dans son parent — ici la vue des aéronefs.

   En liant cette propriété à une expression dont la valeur est égale à la négation de l'altitude de l'aéronef, on garantit que le groupe correspondant à un aéronef volant à une plus haute altitude qu'un autre soit bien dessiné après — et donc par dessus — le groupe correspondant à cet autre aéronef.

3. Groupe icône / étiquette
   

   Le groupe contenant l'icône et l'étiquette a pour but de faciliter le placement à l'écran de ces deux éléments, puisque leur position à l'écran doit toujours être égale. Cela peut sembler surprenant, car sur l'image de la figure 1, le coin haut-gauche de l'étiquette est clairement décalé par rapport à l'icône, mais ce décalage est géré par la feuille de style.

   Le placement du groupe de l'icône et de l'étiquette se fait au moyen de ses propriétés layoutX et layoutY. Elles doivent être liées à une expression dépendant de la position de l'aéronef au voisinage de la Terre et des caractéristiques de la portion de la carte visible à l'écran — niveau de zoom et coin haut-gauche.

   Par exemple, étant donnée la longitude de la position d'un aéronef, on peut déterminer sa coordonnée \(x\) sur la carte du monde au niveau de zoom courant, au moyen des formules données à la §2.5 de l'étape 1 et mises en œuvre dans la classe WebMercator. Cela fait, une simple soustraction de la coordonnée \(x\) du coin haut-gauche de la portion de la carte visible à l'écran donne la coordonnée \(x\) de l'aéronef à l'écran.

4. Icône
   

   L'instance de SVGPath représentant l'icône possède un certain nombre de propriétés qui peuvent être utilisées pour garantir qu'elle a la bonne apparence :

   • content, qui contient le chemin SVG représentant le dessin de l'aéronef, et qui doit être liée à une expression obtenant ce chemin depuis l'instance de AircraftIcon correspondant à l'aéronef,
   • rotate, qui contient l'angle — exprimé en degrés — de la rotation à appliquer à l'icône, et qui doit être liée à une expression égale au cap, en degrés, de l'aéronef si son icône peut être tournée — c.-à-d. si la méthode canRotate de l'instance de AircraftIcon qui lui correspond retourne vrai —, et à 0 sinon,
   • fill, qui contient la couleur de remplissage de l'icône, et qui doit être liée à une expression déterminant cette couleur à partir de l'altitude de l'aéronef.

   Étant donné que les deux premières propriétés doivent être liées à des expressions qui dépendent de l'instance de AircraftIcon correspondant à l'aéronef, il peut être judicieux de définir un lien dont la valeur est justement cette instance.

5. Trajectoire
   

   La trajectoire de l'aéronef est représentée par un groupe de segments de droites reliant les points qui constituent la trajectoire de l'aéronef.

   La représentation graphique de la trajectoire doit être recréée chaque fois que la trajectoire elle-même, ou le niveau de zoom de la carte, change. Pour être informé de ces changements, des auditeurs doivent être installés sur les propriétés correspondantes, mais uniquement lorsque la trajectoire est visible, car recréer une trajectoire invisible est inutile et coûteux.

   Contrairement à celles de l'icône et de l'étiquette, la position des éléments de la trajectoire ne change pas au cours du temps. En fait, leur position est fixe lorsqu'elle est exprimée dans le système de coordonnées de la carte du monde au niveau de zoom courant. Il est donc conseillé d'exprimer effectivement la position des éléments de la trajectoire dans ce système de coordonnées, puis de lier les propriétés layoutX et layoutY à des expressions — très simples ! — permettant de les placer correctement à l'écran.

   Afin que la trajectoire de l'aéronef ne soit visible que s'il est actuellement sélectionné, sa propriété visible doit être liée à une expression dont la valeur n'est vraie que lorsque c'est son propre état qui est contenu dans la propriété passée au constructeur.

6. Étiquette
   

   L'étiquette attachée à l'aéronef est représentée par un texte placé devant un rectangle semi-transparent, qui facilite la lecture.

   Le texte est une instance de Text dont la propriété text doit être liée à une expression produisant la chaîne de l'étiquette.

   L'arrière-plan est une instance de Rectangle. Sa propriété width doit être liée à une expression dont la valeur est égale à la largeur du texte de l'étiquette, plus 4. De même, sa propriété height doit être liée à une expression dont la valeur est égale à la hauteur du texte de l'étiquette, plus 4. Les dimensions du texte de l'étiquette s'obtiennent au moyen de la propriété layoutBounds de l'instance de Text, comme illustrée dans les conseils de programmation plus bas.

   Afin que l'étiquette ne soit visible que lorsqu'elle doit l'être, sa propriété visible doit être liée à une expression qui n'est vraie que lorsque le niveau de zoom est supérieur ou égal à 11, ou que l'aéronef sélectionné est celui auquel l'étiquette correspond.

3.3.3. Gestion des événements

3.3.4. Conseils de programmation

1. Organisation du code
   

   La classe AircraftController étant assez longue, il est important de découper son code en plusieurs méthodes privées, chargées chacune de la construction d'une partie du graphe de scène. Par exemple, vous pourriez avoir une méthode nommée icon dont le seul but est de construire le graphe de scène correspondant à l'icône de l'aéronef, y compris les liens et les gestionnaires d'événements y relatifs.

2. Observation de l'ensemble des états d'aéronefs
   

   Afin d'observer l'ensemble des états des aéronefs qui doivent apparaître à l'écran, il faut installer un auditeur de type SetChangeListener<…> sur l'ensemble passé au constructeur. Cet auditeur reçoit en argument, à chaque changement du contenu de l'ensemble, une valeur de type Change<…>. Les méthodes de cette valeur permettent de savoir si le changement est un ajout ou une suppression, et de connaître l'élément ajouté ou supprimé.

   L'installation de cet auditeur n'est pas totalement triviale si on utilise une lambda, car la méthode addListener est surchargée, et plusieurs de ses variantes acceptent une lambda à un seul argument. Il faut donc utiliser un transtypage explicite afin de forcer le choix de la bonne d'entre elles, ainsi :

   s.addListener((SetChangeListener<ObservableAircraftState>)
   	      change -> { /* … corps de la lambda */ })
   

   où s est l'ensemble observable contenant les états des aéronefs.

   Chaque fois qu'un nouvel aéronef est ajouté à l'ensemble, il faut construire le groupe le représentant — nommé aéronef « annoté » dans la figure 3 — et l'ajouter aux fils du panneau qui représente la vue des aéronefs. De même, chaque fois qu'un aéronef est supprimé de l'ensemble, il faut supprimer le groupe le représentant des fils du panneau. Le fait que le groupe correspondant à un aéronef ait pour identité la représentation textuelle de son adresse OACI simplifie cette suppression.

3. Valeurs changeant au cours du temps
   

   Comme nous l'avons vu, un très grand nombre de caractéristiques des nœuds JavaFX apparaissant à l'écran doit changer au cours du temps, en fonction, entre autres, des changements de l'état des aéronefs.

   La manière la plus simple d'effectuer ces changements est d'utiliser le système de liens de JavaFX. Il est donc capital de bien le comprendre avant de se lancer dans l'écriture du code.

   Il est en particulier important de comprendre que, si ce mécanisme est basé sur le patron Observer, dans la plupart des cas il n'est pas nécessaire de travailler directement avec des observateurs — nommés auditeurs dans JavaFX —, car il est possible de travailler à un plus haut niveau d'abstraction.

   Par exemple, pour que les aéronefs soient dessinés dans le bon ordre, il faut, comme nous l'avons vu, faire en sorte que la valeur de la propriété viewOrder du groupe représente un aéronef soit toujours égale à la négation de son altitude. Cela peut se faire très simplement en liant cette propriété à une expression obtenue au moyen de la méthode negate :

   ObservableAircraftState s = /* état de l'aéronef */;
   Group g = /* groupe de l'aéronef annoté */;
   g.viewOrderProperty().bind(s.altitudeProperty().negate());
   

   Même si en pratique negate utilise un observateur pour être informée des changements de la propriété dont elle doit produire la négation — ici l'altitude de l'aéronef —, cet observateur n'apparaît pas dans le code ci-dessus.

   De manière similaire, la méthode map permet d'appliquer une transformation quelconque, spécifiée généralement au moyen d'une lambda, à une valeur changeant au cours du temps. Ainsi, pour s'assurer que la largeur du rectangle d'arrière-plan de l'étiquette d'un aéronef est toujours égale à la largeur de l'étiquette plus 4, on peut écrire :

   Text t = /* texte de l'étiquette */;
   Rectangle r = /* rectangle d'arrière-plan */;
   r.widthProperty().bind(
     t.layoutBoundsProperty().map(b -> b.getWidth() + 4));
   

   Lorsqu'on travaille avec des chaînes de caractères, la méthode format de Bindings peut être très utile. Elle est similaire à la méthode du même nom de la classe String, et permet donc de formater des chaînes de caractères au moyen d'expressions de formatage du type de celles utilisées par printf. La différence est que les arguments qu'on lui passe peuvent être des valeurs qui changent au cours du temps, et que son résultat est aussi une chaîne qui change au cours du temps.

   Par exemple, pour faire en sorte que le texte d'une instance de Text donne toujours l'altitude en mètres d'un aéronef, on peut écrire :

   Text t = …;
   ObservableAircraftState s = …;
   t.textProperty().bind(
     Bindings.format("%f mètres", s.altitudeProperty()));
   

   Finalement, dans certains cas, aucune des méthodes mentionnées plus haut ne convient. On peut alors souvent utiliser une des méthodes create…Binding de Bindings, qui permettent de créer un « lien » dont la valeur est déterminé par un morceau de code quelconque, donné généralement par une lambda.

   Par exemple, le code ci-dessus pourrait être récrit au moyen de la méthode createStringBinding ainsi :

   Text t = …;
   ObservableAircraftState s = …;
   t.textProperty().bind(
     Bindings.createStringBinding(() ->
       String.format("%f mètres", s.getAltitude()),
       s.altitudeProperty()));
   

   Le premier argument passé aux méthodes create…Binding est une lambda sans argument qui produit une valeur du type désiré, ici une chaîne. Cette lambda utilise généralement une ou plusieurs valeurs qui varient au cours du temps, ici l'altitude de l'aéronef. Ces valeurs sont ce que l'on nomme les dépendances du lien, et elles doivent être toutes passées en arguments, après la lambda.

   Comme cet exemple l'illustre, les méthodes create…Binding sont moins agréables à utiliser que les méthodes spécialisées décrites précédemment, mais elles sont également plus puissantes, et donc indispensables dans certains cas.

4. Positionnement de l'icône et de l'étiquette
   

   La position sur la carte du groupe constitué de l'icône et de l'étiquette de l'aéronef peut se déterminer en projetant, au moyen des méthodes de WebMercator, sa position dans l'espace. Ensuite, une simple soustraction — qui effectue le changement entre le système de coordonnées de la carte du monde entier et celui de la vue — permet d'en calculer sa position dans la vue des aéronefs.

   Le calcul de cette position est une des situations dans laquelle l'utilisation d'une méthode create…Binding — ici createDoubleBinding — est judicieuse.

5. Dessin de l'étiquette
   

   Le point de code Unicode de l'espace demi-cadratin est 2002₁₆, donc une manière de l'insérer dans une chaîne est d'utiliser la syntaxe d'échappement avec \u, par exemple "une\u2002espace".

6. Coloration de la trajectoire
   

   Comme dit plus haut, la trajectoire est représentée par un groupe de segments de droites, chacun d'entre eux étant une instance de Line. La « couleur » utilisée pour dessiner chacun de ces segments, passée à setStroke, est soit :

   • une couleur simple, de type Color, lorsque l'altitude du segment est constante,
   • un dégradé, de type LinearGradient, sinon.

   La documentation de LinearGradient n'étant pas très claire, voici un extrait de code montrant comment construire un dégradé entre les couleurs c1 et c2 :

   Stop s1 = new Stop(0, c1);
   Stop s2 = new Stop(1, c2);
   new LinearGradient(0, 0, 1, 0, true, NO_CYCLE, s1, s2);