Interfaces graphiques avec JavaFX

Les nœuds géométriques représentent des formes géométriques diverses ou du texte. Tous héritent d'une classe-mère commune nommée Shape, héritant elle-même de Node. Les principaux types de nœuds graphiques représentent :

• des formes géométriques simples (classes Arc, Circle, Ellipse, Line, Polygon, Polyline et Rectangle),
• des courbes de Bézier (CubicCurve et QuadCurve),
• des « chemins », composés d'une succession d'éléments simples comme des segments de lignes ou de courbes, etc. (Path et SVGPath),
• du texte, qui peut occuper plusieurs lignes (Text).

Les nœuds graphiques présentent un contenu graphique, qui peut être une image ou une vidéo. Ces nœuds, qui héritent directement de la classe Node, sont :

• ImageView, qui affiche une image,
• MediaView, qui affiche une vidéo,
• Canvas, qui affiche une image modifiable, sur laquelle il est possible de dessiner différentes primitives graphiques (lignes, rectangles, etc.).

La différence entre les primitives dessinées sur un canevas et les nœuds géométriques de la section précédente est que ces derniers ont une existence propre dans le graphe de scène et peuvent être manipulés individuellement, ce qui n'est pas le cas des premières. Par exemple, un nœud de type Line appartenant à un graphe de scène peut être déplacé ou tourné, alors qu'une ligne dessinée sur un canevas ne peut plus être manipulée une fois dessinée.

Cette différence est semblable à celle existant entre les programmes de dessin vectoriels — qui représentent un dessin au moyen d'objets similaires aux nœuds géométriques — et les programmes de dessin bitmap — qui représentent un dessin comme un canevas modifiable.

Les nœuds de contrôle sont des nœuds représentant des composants d'interface graphique avec lesquels il est possible d'interagir, comme p.ex. les boutons, les menus, etc. Tous héritent d'une classe-mère commune nommée Control, héritant (indirectement) de Node.

Le terme contrôle rappelle le fait que ces nœuds font partie du contrôleur de l'application, selon la terminologie du patron MVC. Cela dit, la quasi totalité d'entre eux font également partie de la vue, puisqu'ils présentent graphiquement une valeur.

Un panneau (pane) est un nœud dont le but principal est de servir de conteneur à ses nœuds enfants et, souvent, de les organiser spatialement d'une manière ou d'une autre.

Le type le plus simple de panneau est représenté par la classe Pane. Contrairement à la plupart des autres panneaux, celui-ci n'organise pas spatialement ses enfants. Il est donc nécessaire de les placer « manuellement », ce qui offre une flexibilité maximale, au prix bien entendu d'un travail supplémentaire.

Les autres types de panneaux sont représentés par des sous-classes de Pane, qui se distinguent par la manière dont ils organisent leurs enfants. A noter que, lors de l'organisation de ses enfants, un panneau peut être amené à redimensionner ceux qui sont redimensionnables. Cela implique que les nœuds redimensionnables aient un moyen de communiquer à leur parent des informations sur leur taille. Dans ce but, la classe Node est équipée d'un certain nombre de méthodes, permettant entre autres au parent de connaître :

• la largeur/hauteur minimale (minWidth / minHeight),
• la largeur/hauteur maximale (maxWidth / maxHeight), et
• la largeur/hauteur préférée, c-à-d idéale, (prefWidth / prefHeight)

de chacun de ses enfants. Les nœuds dont la taille est fixe ont la même valeur minimale, maximale et préférée pour ces deux dimensions, ce qui n'est bien entendu pas le cas des nœuds redimensionnables.

En JavaFX, une propriété (property) est une cellule observable, c-à-d un objet observable contenant une unique valeur. La valeur contenue par une propriété peut être soit un objet d'un type donné, soit une valeur d'un type primitif.

Une propriété peut être accessible en lecture seule (read only) ou en lecture et écriture (read/write). Bien entendu, les propriétés accessibles en lecture seule, par définition non modifiables, ne sont en général pas immuables, faute de quoi les observer n'aurait aucun intérêt.

JavaFX fournit plusieurs classes pour représenter les propriétés. Deux d'entre elles sont particulièrement utiles : ObjectProperty, classe abstraite et générique représentant une propriété d'un type objet donné, et SimpleObjectProperty, classe concrète qui lui correspond. L'extrait de programme ci-dessous montre comment créer une propriété contenant une chaîne, lui attacher un auditeur affichant sa nouvelle valeur chaque fois qu'elle est modifiée, et modifier sa valeur deux fois de suite.

ObjectProperty<String> p = new SimpleObjectProperty<>();
p.addListener((o, oV, nV) -> System.out.println(nV));

p.set("hello");                 // affiche "hello"
p.set("world");                 // affiche "world"

Les propriétés sont utiles, entre autres, pour stocker des valeurs simples qui apparaissent dans une interface graphique JavaFX.

Par exemple, une propriété contenant une chaîne de caractères se combine très bien avec un champ textuel permettant sa visualisation. Il suffit en effet au champ d'observer la propriété et de se mettre à jour à chacun de ses changements pour que la valeur affichée soit toujours celle du modèle.

De même, si un champ textuel stocke la chaîne qu'il affiche dans une propriété — ce qui est le cas — alors le modèle peut observer à son tour cette propriété et se mettre à jour dès qu'elle change. Cela garantit que les changements apportés à la valeur affichée dans le champ sont reflétées dans le modèle.

Comme nous le verrons plus bas, JavaFX offre un mécanisme de liaison permettant de mettre facilement en place cette synchronisation par observation mutuelle de deux propriétés.

Une propriété JavaFX contient une unique valeur observable. Or dans certaines situations, il est nécessaire de stocker une collection de valeurs dans un seul attribut observable.

Pour ce faire, JavaFX fournit, dans le paquetage javafx.collections, un ensemble de classes et interfaces représentant des collections observables. Ces collections sont, entre autres, utilisées par les composants capables de présenter et éventuellement modifier des valeurs composites, décrits à la section 3.3.4.

Les collections observables JavaFX sont calquées sur les collections Java « normales » (et non observables) du paquetage java.util. Ainsi, l'interface ObservableList de JavaFX étend l'interface List de la bibliothèque Java, en lui ajoutant principalement des méthodes liées à l'observation. De même, la classe FXCollections offre des méthodes quasi identiques à celles de la classe Collections, mais dont le comportement est préférable en présence de collections observables.

Par exemple, la méthode sort de FXCollections, qui trie une liste observable exactement comme la méthode sort de Collections trie une liste, s'arrange pour que les auditeurs de la liste ne soient averti du changement de son contenu qu'une fois le tri terminé. Ce comportement est préférable à celui de la méthode sort de Collections, dont chaque échange de deux éléments dans la liste à trier provoque une notification des auditeurs.

Plusieurs propriétés peuvent être combinées dans une classe afin de rendre chacun de ses attributs observables. Les classes de ce genre, dont tous les attributs sont des propriétés, sont très utiles à l'interface entre le modèle d'une application et son interface graphique.

JavaFX définit une convention pour la définition de ce type de classes, que l'on nomme pour des raisons historiques des beans JavaFX. Cette convention spécifie que :

• tout attribut de la classe doit être représenté par une propriété,
• la propriété correspondant à un attribut donné doit être accessible au moyen d'une méthode dont le nom est celui de la propriété suivi du suffixe Property,
• la valeur stockée dans la propriété doit également être accessible au moyen d'une méthode d'accès dont le nom est formé du préfixe get suivi du nom de la propriété (le préfixe is est également accepté pour les propriétés booléennes),
• si la propriété est accessible en lecture et écriture, une méthode de modification doit également être fournie, dont le nom est formé du préfixe set suivi du nom de la propriété.

Par exemple, un bean JavaFX Person représentant une personne et doté d'un attribut firstName accessible en lecture et écriture, et d'un attribut age accessible en lecture seule ressemble à :

public final class Person {
  public ObjectProperty<String> firstNameProperty() { … }
  public String getFirstName() { … }
  public void setFirstName(String newFirstName) { … }

  public ReadOnlyIntegerProperty ageProperty() { … }
  public int getAge() { … }
}

La quasi totalité des classes JavaFX, en particulier celles représentant les différents types de nœuds, sont des beans JavaFX. Dès lors, leurs attributs sont observables et peuvent être facilement liés aux attributs du modèle, ce qui est extrêmement utile, comme nous allons le voir.

On l'a vu, le fait que les valeurs du modèle de l'application soient observables est très utile pour la mise en œuvre de son interface graphique, car un composant graphique représentant une valeur du modèle peut l'observer et se mettre à jour en cas de changement.

Lors de l'écriture du code faisant le lien entre le modèle observable et l'interface graphique d'une application, il est donc très fréquent de devoir faire en sorte qu'un élément de l'interface graphique observe une valeur du modèle et se mette à jour lorsqu'elle change. Ce code est toujours le même, et il est donc intéressant de l'écrire une fois pour toutes et de le fournir dans une bibliothèque.

Pour cela, JavaFX offre la notion de lien de données (data binding), qui permet de garantir que la valeur d'une propriété est toujours égale à la valeur d'une autre propriété. Les liens peuvent être uni- ou bidirectionnels.

Dans une application graphique JavaFX, la boucle événementielle s'exécute dans un fil d'exécution (thread) séparé, nommé le fil d'application JavaFX (JavaFX Application Thread). Ce fil d'exécution est démarré automatiquement au lancement d'une application JavaFX, rendant la boucle événementielle invisible au programmeur. Elle n'en existe pas moins !

L'ajout par JavaFX d'un fil d'exécution séparé introduit malheureusement tous les problèmes typiques liés à la programmation concurrente, raison pour laquelle il est important d'obéir à quelques règles lors de l'écriture d'une application JavaFX. En particulier, toute manipulation de nœuds JavaFX faisant partie d'un graphe déjà attaché à un objet de type Scene doit se faire depuis le fil d'application JavaFX, de même que toute création d'objet de type Scene ou Stage.

Dans JavaFX, les gestionnaires d'événements sont généralement des objets implémentant l'interface fonctionnelle et générique EventHandler. Le paramètre de type de cette interface spécifie le type de l'événement géré par le gestionnaire. Les gestionnaires d'événements sont attachés à une source d'événements — souvent un nœud — et leurs méthodes sont appelées chaque fois qu'un événement se produit. Les gestionnaires sont donc assez similaires aux observateurs du patron Observer, la méthode update de ces derniers gérant l'événement « l'état du sujet a changé ».

La classe ci-dessous illustre la structure typique d'un programme JavaFX. Comme toute classe principale d'une application JavaFX, elle hérite de la classe Application et créée l'interface graphique dans la méthode start.

public final class JavaFXApp extends Application {
  public static void main(String[] args) {
    launch(args);
  }

  @Override
  public void start(Stage primaryStage) throws Exception {
    Button button = new Button("click me!");
    button.setOnAction(e -> System.out.println("click"));

    Scene scene = new Scene(button);
    primaryStage.setScene(scene);
    primaryStage.show();
  }
}

La méthode main est appelée sur le fil d'exécution principal du programme, comme toujours en Java. Dans la terminologie JavaFX, ce fil est appelé le fil de lancement (launcher thread).

La méthode main se contente d'appeler la méthode launch, qui démarre (entre autres) le fil d'application JavaFX, puis appelle la méthode start sur ce fil. C'est la raison pour laquelle la création de l'interface doit se faire dans la méthode start et pas dans la méthode main ou dans le constructeur de la classe.

Lorsque l'utilisateur clique sur le bouton, la méthode du gestionnaire attaché au bouton via setOnAction est également exécutée sur le fil de l'application JavaFX.

La figure 4 illustre l'exécution des différentes parties du programme sur les deux fils existants.

Lorsqu'un événement se produit, JavaFX collecte les informations à son sujet dans un objet passé au gestionnaire. Par un léger abus de langage, cet objet lui-même est nommé événement (event).

JavaFX définit un grand nombre de types d'événements, parmi lesquels :

• les événements liés à la souris (mouse event) : clic d'un bouton, déplacement du pointeur, survol, etc.
• les événements liés à un écran tactile : appui du doigt, glissement du doigt dans une direction donnée, etc.
• les événements liés au clavier : pression et relâchement d'une touche, etc.

En plus de ces événements généraux, des événements plus spécialisés sont également générés par différents composants. Par exemple, un bouton génère un événement lorsqu'il est pressé, et ainsi de suite.