Übersicht

Das GanttChart-Steuerelement ist ein benutzerdefiniertes JavaFX-Steuerelement zur Visualisierung beliebiger Planungsdaten entlang einer Zeitachse. Die vom Steuerelement benötigten Modelldaten bestehen aus Zeilen mit Aktivitäten, Verknüpfungen zwischen ihnen und Layern zur Gruppierung von Aktivitäten.

Das GanttChart-Steuerelement besteht aus mehreren komplexen Untersteuerelementen:

Der folgende Screenshot zeigt das anfängliche Erscheinungsbild eines leeren GanttChart-Steuerelements.

Master-/Detail-Bereiche

Das Gantt-Diagramm verwendet zwei MasterDetailPane-Instanzen aus ControlsFX für das übergeordnete Layout. Der primäre Master-Detail-Bereich zeigt die TreeTableView als Detailknoten an, und der sekundäre Master-Detail-Bereich zeigt initial ein Eigenschaftsblatt als Detailknoten. Das Eigenschaftsblatt wird zur Entwicklungszeit verwendet und kann durch den Aufruf von setDetail(Node) durch einen beliebigen Knoten ersetzt werden. Es zeigt zahlreiche Eigenschaften, die von den Steuerelementen, den Renderern und den System-Layern zur Feinabstimmung des Erscheinungsbilds verwendet werden. Viele davon können zur Laufzeit geändert werden. Die folgende Tabelle listet relevante Methoden für die Arbeit mit den Master-Detail-Bereichen auf:

Modell

Das GanttChart-Steuerelement hat kein eigenes Modell. Es stellt lediglich Hilfsmethoden und Datenstrukturen zur Verfügung, um die zugrundeliegenden Steuerelemente (TreeTableView, Grafikansicht) zu unterstützen. Die folgende Tabelle listet die relevanten Methoden auf:

Anzeigemodus

Die Eigenschaft displayMode des GanttChart-Steuerelements dient zum Umschalten zwischen drei verschiedenen Layouts:

• Standard – ein Layout mit der TreeTableView auf der linken Seite und dem Grafikbereich auf der rechten Seite
• Table-Only – ein Layout, in dem die Tabelle die gesamte Breite des Gantt-Chart-Steuerelements ausfüllt
• Graphics Only – ein Layout, in dem die Grafikansicht die gesamte Breite des GanttChart-Steuerelements ausfüllt

Der Anzeigemodus kann durch den Aufruf der Methode setDisplayMode() geändert werden. Die folgenden Screenshots zeigen die verschiedenen Anzeigemodi.

Standard-Layout

Nur-Tabellen-Layout

Nur-Grafik-Layout

Grafik-Kopfzeile

Der Grafik-Kopfzeilen-Knoten ersetzt die Timeline, wenn das Gantt-Chart-Steuerelement in einem Multi-Gantt-Chart-Kontext verwendet wird, beispielsweise in einem DualGanttChartContainer oder einem MultiGanttChartContainer.

Dieser Knoten kann durch den Aufruf von GanttChart.setGraphicsHeader(Node) festgelegt werden. Der übergebene Knoten kann beliebig sein. Wichtig ist nur, dass die bevorzugte Höhe dieses Knotens auf denselben Wert wie die bevorzugte Höhe des Tree-Table-Headers gesetzt wird.

Zeilen-Kopfzeile – die erste Spalte in der TreeTableView wird als „Zeilen-Kopfzeile" bezeichnet. Diese Spalte wird vom Framework bereitgestellt und kann nicht entfernt werden. Standardmäßig wird sie zur Anzeige von Zeilennummern verwendet, kann aber für andere Zwecke wiederverwendet werden. Die Klasse RowHeader ist eine Unterklasse von TreeTableColumn mit spezieller Logik. Sie unterstützt die Zeilengrößenänderung und kann eine Factory aufrufen, um ihre Grafik zu erstellen.

Zeilen-Kopfzeilen-Typ – der Enumerator RowHeaderType definiert die verschiedenen Verwendungsmöglichkeiten der Zeilen-Kopfzeile.

• GRAPHIC_NODE – Lässt die Zeilen-Kopfzeilen-Zellen für jede Zeile einen benutzerdefinierten Knoten anzeigen.

• LEVEL_NUMBER – Lässt die Zeilen-Kopfzeilen-Zellen die Ebenennummer der aktuellen Zeile anzeigen (1, 1.1, 1.2, 2, 2.1, 2.2, 2.3, ...).

• ROW_NUMBER – Lässt die Zeilen-Kopfzeilen-Zellen die Nummer der aktuellen Zeile anzeigen (1, 2, 3, ...).

Zeilen-Kopfzeilen-Factory – wenn der Typ GRAPHIC_NODE gewählt wird, ruft die Zeilen-Kopfzeile die Knoten-Factory auf, die von der Klasse GanttChart bereitgestellt wird. Das folgende Beispiel zeigt, wie eine mögliche Implementierung einer solchen Factory registriert werden kann.

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

Eigenschaftsblatt

Das Standard-Steuerelement für den Detailknoten des Gantt-Diagramms ist das Eigenschaftsblatt aus dem Open-Source-Projekt ControlsFX. Es wird verwendet, um die Eigenschaften des Gantt-Diagramms selbst und seiner Untersteuerelemente (Timeline, Dateline, Eventline, Grafik) anzuzeigen. Es zeigt auch die Eigenschaften aller bei den Steuerelementen registrierten Renderer. Der folgende Screenshot zeigt das Eigenschaftsblatt, wie es als Detailknoten des Gantt-Diagramms angezeigt wird. Es kann durch den Aufruf von GanttChart.setShowDetail(true) sichtbar gemacht werden.

Beim Schreiben eigener Renderer können Sie die Methode getPropertySheetItems() überschreiben und eigene Einträge zur Liste der von der Oberklasse zurückgegebenen Einträge hinzufügen.

Weitere Funktionen

Feste Zellgröße – die TreeTableView und die ListView von JavaFX unterstützen beide eine Eigenschaft namens fixedCellSize. Sie kann zur Verbesserung der Performance beider Steuerelemente genutzt werden, indem sie auf einen anderen Wert als -1 gesetzt wird. Dadurch wird den Steuerelementen mitgeteilt, dass jede Zelle dieselbe Höhe hat, was schnellere Algorithmen bei der Aktualisierung ermöglicht. Die Klasse GanttChart definiert diese Eigenschaft ebenfalls, um sicherzustellen, dass die TreeTableView und die ListView dieselbe Zellgröße verwenden. Wenn gesetzt, verwendet das Gantt-Diagramm die Höheneigenschaft der Zeilen nicht und lässt den Benutzer auch keine Zeilengrößenänderung vornehmen.

Master-Timeline – das GanttChart-Steuerelement definiert eine Eigenschaft namens masterTimeLine. Diese wird verwendet, wenn das Gantt-Diagramm in einem Multi-Gantt-Chart-Kontext eingesetzt wird (z. B. DualGanttChartContainer oder MultiGanttChartContainer). In diesen Fällen ist die Timeline des obersten Gantt-Diagramms die Basis für das Rendern von Wochenenden, Gitterlinien usw. Jedes Gantt-Diagramm hat weiterhin sein eigenes Timeline-Untersteuerelement, aber alle wissen, welches das Master ist. Dies ist Framework-Funktionalität, in die Anwendungen normalerweise nicht eingreifen sollten.

ScrollBar-Typ – das GanttChart-Steuerelement unterstützt verschiedene Scrollbar-Typen. Der Typ kann durch den Aufruf von GanttChartBase.setScrollBarType(ScrollBarType) gesetzt werden. Folgende Typen sind derzeit verfügbar:

• NONE – Das Gantt-Diagramm zeigt nie Scrollbars an – weder für die TreeTableView noch für den Grafikbereich. Ein solches Gantt-Diagramm kann nur über die Tastatur, das Mausrad oder ein Touch-Eingabegerät gescrollt werden.
• INFINITE – Das Gantt-Diagramm zeigt eine reguläre Scrollbar für die TreeTableView und eine Scrollbar namens TimelineScrollBar, die intern einen PlusMinusSlider (bereitgestellt vom ControlsFX-Projekt) verwendet. Der Slider ermöglicht das Scrollen in unterschiedlichen Geschwindigkeiten in die Vergangenheit oder Zukunft. Diese Scrollbar benötigt keinen definierten Scroll-„Horizont" (früheste / späteste Zeit).
• FIXED_HORIZON – Das Gantt-Diagramm zeigt eine reguläre Scrollbar sowohl für die TreeTableView als auch für den Grafikbereich. Die Grenzen der Scrollbar basieren auf den Horizont-Start- und -Endzeiten, wie im TimelineModel definiert.

ScrollBar-Sichtbarkeit – eine weitere Konfigurationsoption für Scrollbars ist die boolesche Eigenschaft autoHideScrollBars. Wenn auf true gesetzt, werden die Scrollbars für die TreeTableView (linke Seite) und den Grafikbereich (rechte Seite) in eine HiddenSidesPane-Instanz platziert. Dieses Container-Steuerelement aus ControlsFX kann Steuerelemente ein- oder ausblenden, die an einer seiner Seiten platziert wurden. In diesem Fall werden die Scrollbars an der „unteren" Seite platziert und erscheinen nur, wenn der Benutzer den Mauszeiger nahe am Rand bewegt.

Position – die Eigenschaft position der Klasse GanttChart informiert das Gantt-Diagramm über seine Position in einem Multi-Gantt-Chart-Kontext (z. B. DualGanttChartContainer oder MultiGanttChartContainer). Mögliche Werte sind:

• ONLY – das Gantt-Diagramm ist das einzige. Dies ist der Standardwert und ändert sich nicht, wenn es nicht in einem Multi-Gantt-Chart-Kontext verwendet wird.
• FIRST – das Gantt-Diagramm wird oben im Container angezeigt.
• MIDDLE – das Gantt-Diagramm ist weder das erste noch das letzte und auch nicht das einzige.
• LAST – das Gantt-Diagramm wird unten im Container angezeigt.

Der folgende Screenshot zeigt drei Diagramme in einem MultiGanttChartContainer und ihre Positionswerte.

Factory-Methoden – es gibt mehrere geschützte Factory-Methoden zum Erstellen der Untersteuerelemente. Diese Methoden können überschrieben werden, um Unterklassen dieser Steuerelemente zu erstellen.

• TreeTableView createTreeTable(); – Erstellt die TreeTableView auf der linken Seite des Gantt-Diagramms. Ein typischer Anwendungsfall für den Austausch ist, wenn Sie bereits eine spezialisierte TreeTableView mit erweiterten Filter- oder Interaktionsoptionen haben und dieselbe auch in anderen Teilen der Anwendung verwenden möchten.
• Timeline createTimeline(); – Erstellt die Timeline.
• GraphicsBase createGraphics(); – Erstellt die Grafikansicht. Ein Anwendungsfall für den Austausch könnte sein, dass Ihre Anwendung einige Knoten zur Grafikansicht hinzufügt, z. B. eine Art Überlagerung (etwa ein Radar).
• RowHeader createRowHeader(); – Erstellt die Zeilen-Kopfzeilen-Spalte für die TreeTableView.

GanttChartLite

Ein GanttChartLite ist im Grunde dasselbe wie ein GanttChart, außer dass es keine TreeTableView auf der linken Seite anzeigt. Dieser Diagrammtyp ist nützlich, wenn eine Anwendung keine detaillierten Informationen für jede Zeile benötigt. Oft reicht der Name der Zeile (z. B. der Flugzeugname) aus. In diesem Fall kann man die Lite-Version in Kombination mit Zeilen-Kopfzeilen und der Zeilen-Kopfzeilen-Factory verwenden.

Gantt-Chart-Container

Ein Gantt-Diagramm kann eigenständig oder in einem MultiGanttChartContainer oder DualGanttChartContainer verwendet werden. Bei Verwendung in einem dieser Container wird die Position des Gantt-Diagramms wichtig. Das Steuerelement kann das erste, letzte, einzige oder ein mittleres Diagramm sein. Ein „erstes" oder „einziges" Diagramm zeigt immer eine Timeline an. Ein „mittleres" oder „letztes" zeigt eine spezielle Kopfzeile an (siehe setGraphicsHeader()). Die Container sind auch der Grund, warum das Steuerelement zwischen einer Timeline (getTimeline()) und einer Master-Timeline (getMasterTimeline()) unterscheidet. Die Master-Timeline ist die vom „ersten" Diagramm angezeigte, während die reguläre Timeline direkt zu dieser Instanz gehört.

FlexGanttFX wird mit mehreren Containern ausgeliefert, die mehrere Gantt-Diagramme gleichzeitig anzeigen können.

• MultiGattChartContainer, MultiGattChartLiteContainer – ein Container zur Anzeige mehrerer Instanzen von GanttChart / GanttChartLite, der deren Layouts (gleiche Tabellenbreite, gleiche Timeline) sowie Scroll- und Zoom-Verhalten synchronisiert. Der folgende Screenshot zeigt das anfängliche Erscheinungsbild eines leeren Multi-Gantt-Chart-Containers.

• DualGanttChartContainer, DualGanttChartLiteContainer – eine Spezialisierung des MultiGanttChartContainer, die genau zwei Instanzen von GanttChart anzeigen und deren Layouts (gleiche Tabellenbreite, gleiche Timeline) sowie Scroll- und Zoom-Verhalten synchronisieren kann. Der Container unterscheidet zwischen einem primären und einem sekundären Gantt-Diagramm, wobei das sekundäre im Detailknoten-Bereich einer MasterDetailPane angezeigt wird. Es kann nach Bedarf ein- oder ausgeblendet werden. Jedes der beiden Gantt-Diagramme kann eine eigene Kopf- und Fußzeile haben. Initial werden nur die primäre Kopfzeile und die sekundäre Fußzeile verwendet. Der folgende Screenshot zeigt das anfängliche Erscheinungsbild eines leeren Dual-Gantt-Chart-Steuerelements.

• QuadGanttChartContainer, QuadGanttChartLiteContainer – eine Spezialisierung des MultiGanttChartContainer, die genau vier Instanzen von GanttChart anzeigen und deren Layouts (gleiche Tabellenbreite, gleiche Timeline) sowie Scroll- und Zoom-Verhalten synchronisieren kann. Der Container unterscheidet zwischen den Positionen UPPER_LEFT, UPPER_RIGHT, LOWER_LEFT, LOWER_RIGHT. Die Timelines von UPPER_LEFT und LOWER_LEFT scrollen synchron, ebenso die Timelines von UPPER_RIGHT und LOWER_RIGHT.