Vue d’ensemble

Le contrôle GanttChart est un contrôle JavaFX personnalisé utilisé pour visualiser tout type de données de planification le long d’une timeline. Les données de modèle nécessaires au contrôle se composent de lignes avec des activités, de liens entre elles et de couches permettant de regrouper les activités.

Le contrôle GanttChart se compose de plusieurs sous-contrôles complexes :

La capture d’écran ci-dessous montre l’apparence initiale d’un contrôle GanttChart vide.

Volets maître/détail

Le diagramme de Gantt utilise deux instances MasterDetailPane de ControlsFX pour la mise en page de haut niveau. Le volet maître/détail principal affiche la table arborescente comme nœud de détail, et le volet maître/détail secondaire affiche initialement une feuille de propriétés comme nœud de détail. La feuille de propriétés est utilisée pendant le développement et peut être remplacée par n’importe quel nœud en appelant setDetail(Node). Elle affiche de nombreuses propriétés utilisées par les contrôles, les moteurs de rendu et les couches système afin d’affiner l’apparence du contrôle. Beaucoup d’entre elles peuvent être modifiées à l’exécution. Le tableau suivant répertorie les méthodes utiles pour travailler avec les volets maître/détail :

Modèle

Le contrôle GanttChart lui-même n’a pas de modèle. Il fournit simplement des méthodes utilitaires et des structures de données pour prendre en charge les contrôles sous-jacents (vue de table arborescente, vue graphique). Le tableau suivant répertorie les méthodes pertinentes :

Mode d’affichage

La propriété displayMode du contrôle GanttChart permet de basculer entre trois dispositions différentes :

• Standard – une disposition avec la vue de table arborescente à gauche et la zone graphique à droite
• Table uniquement – une disposition où la table occupe toute la largeur du contrôle de diagramme de Gantt
• Graphismes uniquement – une disposition où la vue graphique occupe toute la largeur du contrôle GanttChart

Le mode d’affichage peut être modifié en appelant la méthode setDisplayMode(). Les captures d’écran suivantes montrent les différents modes d’affichage.

Disposition standard

Disposition table uniquement

Disposition graphismes uniquement

En-tête graphique

Le nœud d’en-tête graphique remplace la timeline lorsque le contrôle de diagramme de Gantt est utilisé dans un contexte multi-diagrammes de Gantt, par exemple avec un DualGanttChartContainer ou un MultiGanttChartContainer.

Ce nœud peut être défini en appelant GanttChart.setGraphicsHeader(Node). Le nœud passé à cette méthode peut être quelconque. Le seul point important est que sa hauteur préférée doit être définie sur la même valeur que celle de l’en-tête de la table arborescente.

En-tête de ligne – la première colonne de la vue de table arborescente est appelée « en-tête de ligne ». Cette colonne est fournie par l’infrastructure et ne peut pas être supprimée. Par défaut, elle sert à afficher les numéros de ligne, mais elle peut être réutilisée à d’autres fins. La classe RowHeader est une sous-classe de TreeTableColumn avec une logique spécifique. Elle prend en charge le redimensionnement des lignes et peut appeler une fabrique pour produire son graphique.

Type d’en-tête de ligne - l’énumération RowHeaderType définit les différentes façons d’utiliser l’en-tête de ligne.

• GRAPHIC_NODE – fait afficher par les cellules d’en-tête de ligne un nœud personnalisé pour chaque ligne.

• LEVEL_NUMBER – fait afficher par les cellules d’en-tête de ligne le numéro de niveau de la ligne courante (1, 1.1, 1.2, 2, 2.1, 2.2, 2.3, ...).

• ROW_NUMBER – fait afficher par les cellules d’en-tête de ligne le numéro de la ligne courante (1, 2, 3, ...).

Fabrique d’en-tête de ligne – si le type GRAPHIC_NODE est choisi, l’en-tête de ligne appellera la fabrique de nœuds d’en-tête de ligne fournie par la classe GanttChart. L’exemple suivant montre comment enregistrer une implémentation possible d’une telle fabrique.

ganttChart.setRowHeaderNodeFactory(row -> {
    public Node call(R row) {
        Button delete = new Button("Delete");
        delete.setOnAction(evt -> deleteRow(row));
        return delete;
    }
});

Feuille de propriétés

Le contrôle par défaut utilisé pour la propriété de nœud de détail du diagramme de Gantt est la feuille de propriétés du projet open source ControlsFX. Elle sert à afficher les propriétés du diagramme de Gantt lui-même et de ses sous-contrôles (timeline, ligne de dates, ligne d’événements, graphismes). Elle affiche aussi les propriétés de tous les moteurs de rendu enregistrés auprès des contrôles. La capture d’écran ci-dessous montre la feuille de propriétés telle qu’elle apparaît lorsqu’elle est définie comme nœud de détail du diagramme de Gantt. Elle peut ensuite être rendue visible en appelant GanttChart.setShowDetail(true).

Lorsque vous écrivez vos propres moteurs de rendu, vous pouvez redéfinir la méthode getPropertySheetItems() et ajouter vos propres éléments à la liste retournée par la superclasse.

Autres fonctionnalités

Taille fixe des cellules – la vue de table arborescente et la vue de liste de JavaFX prennent toutes deux en charge une propriété appelée fixedCellSize. Elle peut être utilisée pour améliorer les performances des deux contrôles. Pour cela, on lui attribue une valeur différente de -1. Une telle valeur indique aux contrôles que chaque cellule aura la même hauteur, ce qui permet d’utiliser des algorithmes plus rapides lors de la mise à jour des contrôles. La classe GanttChart définit également cette propriété afin de garantir que la vue de table arborescente et la vue de liste qu’elle utilise emploient la même taille de cellule. Si elle est définie, le diagramme de Gantt n’utilisera pas la propriété de hauteur des lignes et ne permettra pas non plus à l’utilisateur de redimensionner les lignes.

Timeline maître – le contrôle GanttChart définit une propriété appelée masterTimeLine. Cette propriété est utilisée lorsque le diagramme de Gantt est employé dans un contexte multi-diagrammes de Gantt (par exemple DualGanttChartContainer ou MultiGanttChartContainer). Dans ces situations, c’est la timeline du diagramme de Gantt supérieur qui sert de base au rendu des week-ends, des lignes de grille, etc. Chaque diagramme de Gantt possède toujours son propre sous-contrôle de timeline, mais tous savent lequel est le maître. Il s’agit d’une fonctionnalité de l’infrastructure avec laquelle les applications ne devraient normalement pas interférer.

Type de barre de défilement – le contrôle GanttChart prend en charge différents types de barres de défilement. Le type peut être défini en appelant GanttChartBase.setScrollBarType(ScrollBarType). Les types suivants sont actuellement disponibles :

• NONE - le diagramme de Gantt ne proposera jamais de barres de défilement, ni pour la vue de table arborescente ni pour la zone graphique. Un tel diagramme de Gantt ne pourrait être défilé qu’au clavier, à la molette de la souris ou avec un périphérique tactile.
• INFINITE - le diagramme de Gantt affichera une barre de défilement standard pour la vue de table arborescente et une barre de défilement appelée TimelineScrollBar, qui utilise en interne un PlusMinusSlider (fourni par le projet ControlsFX). Le curseur permet de défiler à différentes vitesses vers le passé ou vers le futur. Cette barre de défilement ne nécessite pas d’« horizon » de défilement spécifié (l’heure la plus ancienne / la plus récente vers laquelle défiler).
• FIXED_HORIZON - le diagramme de Gantt affichera une barre de défilement standard pour la vue de table arborescente ET pour la zone graphique. Les bornes de la barre de défilement sont basées sur les heures de début et de fin de l’horizon telles que définies par le TimelineModel.

Visibilité des barres de défilement - une autre option de configuration liée aux barres de défilement est la propriété booléenne autoHideScrollBars. Si elle vaut true, les barres de défilement de la vue de table arborescente (côté gauche) et de la zone graphique (côté droit) seront placées dans une instance HiddenSidesPane. Ce contrôle conteneur de ControlsFX peut afficher ou masquer les contrôles placés sur l’un de ses côtés. Dans ce cas, les barres de défilement seront placées du côté « bas » et n’apparaîtront que lorsque l’utilisateur approchera le curseur de la souris du bord.

Position – la propriété position de la classe GanttChart sert à indiquer au diagramme de Gantt où il se trouve dans un contexte multi-diagrammes de Gantt (par exemple DualGanttChartContainer ou MultiGanttChartContainer). Les valeurs possibles sont :

• ONLY - le diagramme de Gantt est le seul. C’est la valeur par défaut et elle ne changera pas s’il n’est pas utilisé dans un contexte multi-diagrammes de Gantt.
• FIRST - le diagramme de Gantt est affiché en haut du conteneur.
• MIDDLE - le diagramme de Gantt n’est ni le premier ni le dernier. Il n’est pas non plus le seul.
• LAST - le diagramme de Gantt est affiché en bas du conteneur.

La capture d’écran ci-dessous montre trois diagrammes dans un MultiGanttChartContainer et leurs valeurs de position.

Méthodes de fabrique – plusieurs méthodes de fabrique protégées servent à créer les sous-contrôles. Ces méthodes peuvent être redéfinies pour créer des sous-classes de ces contrôles.

• TreeTableView createTreeTable(); - crée la vue de table arborescente affichée sur le côté gauche du diagramme de Gantt. Un cas d’utilisation typique pour remplacer cette table est celui où vous disposez déjà d’une spécialisation de vue de table arborescente avec des options avancées de filtrage ou d’interaction. Vous pouvez vouloir utiliser la même vue de table arborescente que celle déjà utilisée ailleurs dans votre application.
• Timeline createTimeline(); - crée la timeline.
• GraphicsBase createGraphics(); - crée la vue graphique. Un cas d’utilisation pour remplacer la vue standard pourrait être que votre application ajoute quelques nœuds à la vue graphique, par exemple une sorte de superposition au-dessus des graphismes (p. ex. un radar).
• RowHeader createRowHeader(); - crée la colonne d’en-tête de ligne pour la vue de table arborescente.

GattChartLite

Un GanttChartLite est fondamentalement identique à un GanttChart, sauf qu’il n’affiche pas de TreeTableView sur son côté gauche. Ce type de diagramme est utile lorsqu’une application n’a pas besoin d’afficher beaucoup de détails pour chaque ligne. Souvent, le nom de la ligne (p. ex. le nom de l’avion) suffit. Dans ce cas, on peut choisir la version lite en combinaison avec les en-têtes de ligne et leur fabrique.

Conteneurs de diagrammes de Gantt

Un diagramme de Gantt peut être utilisé seul ou à l’intérieur d’un MultiGanttChartContainer ou d’un DualGanttChartContainer. Lorsqu’il est utilisé dans l’un de ces conteneurs, la position du diagramme de Gantt devient importante. Le contrôle peut être le premier diagramme, le dernier, le seul, ou un diagramme situé quelque part au milieu. Un diagramme « premier » ou « seul » affiche toujours une timeline. Un diagramme « intermédiaire » ou « dernier » affiche un en-tête spécial (voir setGraphicsHeader()). Les conteneurs expliquent également pourquoi le contrôle distingue une timeline (getTimeline()) d’une timeline maître (getMasterTimeline()). La timeline maître est celle affichée par le diagramme « premier », tandis que la timeline normale est celle qui appartient directement à cette instance.

FlexGanttFX est fourni avec plusieurs conteneurs capables d’afficher plusieurs diagrammes de Gantt en même temps.

• MultiGattChartContainer, MultiGattChartLiteContainer - un conteneur capable d’afficher plusieurs instances de GanttChart / GanttChartLite et de garder leurs dispositions (même largeur de table, même timeline) ainsi que leur comportement de défilement et de zoom synchronisés. La capture d’écran ci-dessous montre l’apparence initiale d’un conteneur multi-diagrammes de Gantt vide.

• DualGanttChartContainer, DualGanttChartLiteContainer - une spécialisation de MultiGanttChartContainer capable d’afficher exactement deux instances de GanttChart et de garder leurs dispositions (même largeur de table, même timeline) ainsi que leur comportement de défilement et de zoom synchronisés. Le conteneur distingue un diagramme de Gantt principal et un secondaire, le diagramme secondaire étant situé dans la section du nœud de détail d’un MasterDetailPane. Il peut être masqué ou affiché à la demande. Chacun des deux diagrammes de Gantt peut avoir son propre en-tête et son propre pied de page. Initialement, seuls l’en-tête principal et le pied de page secondaire sont utilisés. L’en-tête sert à afficher une instance de GanttChartToolBar et le pied de page une instance de GanttChartStatusBar. La capture d’écran ci-dessous montre l’apparence initiale d’un contrôle de double diagramme de Gantt vide.

• QuadGanttChartContainer, QuadGanttChartLiteContainer - une spécialisation de MultiGanttChartContainer capable d’afficher exactement quatre instances de GanttChart et de garder leurs dispositions (même largeur de table, même timeline) ainsi que leur comportement de défilement et de zoom synchronisés. Le conteneur distingue les emplacements de diagramme de Gantt UPPER_LEFT, UPPER_RIGHT, LOWER_LEFT, LOWER_RIGHT. Les timelines des diagrammes de Gantt UPPER_LEFT et LOWER_LEFT défilent de manière synchronisée, tout comme les timelines de UPPER_RIGHT et LOWER_RIGHT.