DEMO_BG_GANTT 
Das Beispiel DEMO_BG_GANTT ist eine einfache Web-Dynpro-Anwendung, in der ein für die Darstellung von Projekt-Abläufen typisches Gantt-Diagramm erzeugt wird. Mit Hilfe des UI-Elements BusinessGraphics kann eine Vielzahl unterschiedlicher Diagramme erstellt werden, das Gantt-Diagramm ist nur eine der möglichen Variationen. Im Gegensatz zum UI-Element Gantt, welches auf eine komplett andere Darstellungstechnologie zurück greift, kann ein Gantt-Diagramm mit Hilfe des BusinessGraphics-Elements allein über den Context der jeweiligen View ausgestaltet werden.
Das Layout der View
Das Layout der View ist zunächst relativ einfach:
Das UI-Element BusinessGraphics wird in den RootUIElementeContainer eingebettet und als Chart-Typ der Eintrag gantt ausgewählt. In der Elemente-Hierarchie werden anschließend einige spezielle Unter-Elemente angelegt um das Gantt-Diagramm zu beschreiben: Das Unter-Element Kategorie wird benötigt, um die Y-Achse des Diagramms zu strukturieren. Ein Gantt-Diagramm kann eine einzige Kategorie auf der Y-Achse anzeigen, es kann jedoch genau so gut mehrere Kategorien darstellen. Dies könnten beispielweise mehrere Mitarbeiter eines Projekts sein. Für diesen Fall muss der Context-Knoten, an den das Unter-Element Kategorie gebunden ist, die Kardinalität 0..n besitzen.
Die X-Achse eines Gantt-Diagramms stellt in vielen Fällen einen Zeitstrahl dar. Auf diesem Zeitstrahl kann für jede Kategorie (beispielsweise für jeden beteiligten Mitarbeiter) die Verteilung der Projekt-relevanten Zeiträume oder -Punkte graphisch aufgetragen werden. Pro Kategorie muss daher immer mindestens eine Serie angelegt sein.
Im Beispiel DEMO_BG_GANTT wird auf der X-Achse des Diagramms nur eine einzige Zeit-Serie dargestellt. Es ist aber ebenso gut möglich, mehrere Serien anzulegen. Dabei entspräche jede Serie beispielsweise einem Teilprojekt des gesamten Diagramms. In jeder Kategorie würde in diesem Fall eine Gruppe verschieden farbiger Zeiträume angezeigt. Da das Beispiel jedoch nur eine einzige Serie zur Anzeige bringen soll, hat der Context-Knoten, an den das Unter-Element Serie gebunden ist, die Kardinalität 1..1. Wenn Sie das Beispiel kopieren und ausbauen möchten, können Sie die Kardinalität dieses Knotens erweitern, eine Supply-Funktion anlegen und implementieren und dadurch das Diagramm auf die Anzeige mehrerer Serien erweitern.
Jede Serie besteht ihrerseits aus mindestens einem, möglicherweise auch mehreren Points. Jeder Point stellt einen Bereich einer Serie dar, jeweils mit einem Anfangs- und einem Endpunkt. Die Werte für diese Anfang- bzw. Endpunkte werden als eigene Unter-Elemente des Points, als sogenannte Values, ebenfalls in der UI-Elemente-Hierarchie angelegt.
Der Context der View zeichnet im Wesentlichen den Aufbau des Diagramms im View Designer nach. Die Knoten CATEGORIES und POINT sind jeweils von der Kardinalität 0..n, der Knoten SERIES nur von der Kardinalität 1..1. Für CATEGORIES und POINT ist jeweils eine Supply-Funktion angelegt und implementiert.
Die Bindung der UI-Elemente
Die Bindung der verschiedenen Source-bzw- Value-Eigenschaften an die jeweiligen Context-Knoten ist in der folgenden Abbildung im Überblick dargestellt:
Binding-Pfade im Beispiel DEMO_BG_GANTT, View BG_GANTT
UI-Element |
Eigenschaft |
Context-Element |
BUSINESS_GRAPHICS |
categorieSource |
Knoten CATEGORIES |
seriesSource |
Knoten SERIES |
|
SERIES |
pointSource |
Knoten POINT |
POINT |
valueSource |
Knoten POINT |
POINT value START |
value |
Attribut START |
POINT value END |
value |
Attribut END |
Hinweise zum Customizing des Gantt-Diagramms
Achtung
Für eine korrekte Darstellung des Gantt-Diagramms müssen Sie zwei zusätzliche Einstellungen am BusinessGraphics-Control selbst vornehmen. Dafür öffnen Sie wie folgt den Chart Designer:
Markieren Sie das UI-Element BusinessGraphics in der Elemente-Hierarchie
Öffnen Sie mit Hilfe der rechten Maustaste dessen Kontextmenü
Wählen Sie den Eintrag Customizing editieren
In einem zusätzlichen Popup öffnet sich nun der Chart Designer zur Bearbeitung der Einstellungen des Diagramms. Im rechten oberen Teilfenster, der Übersicht, finden Sie an oberster Stelle die Globalen Einstellungen.
Markieren Sie die Zeile Globale Einstellungen. Im rechten unteren Teilfenster des Chart Designers werden Ihnen nun die globalen Einstellungen zum Editieren angeboten. Markieren Wie wiederum die oberste Eigenschaft Chart-Typ und wählen Sie aus den angebotenen Werten den Eintrag Gantt.
Scrollen Sie anschließend in der Übersichts nach unten und expandieren Sie den Eintrag Reihe.
Markieren Sie dessen einziges Unter-Element Standard-Reihe. Im unteren Fenster, also der Anzeige der Eigenschaften der Standard-Reihe, scrollen Sie wiederum nach unten und expandieren den Eintrag Flächeneigenschaften. Noch einmal scrollen Sie nach unten zum Bearbeiten der Eigenschaft Markerform. Setzen Sie diese Eigenschaft auf den Wert Kein.
Beenden Sie den Chart Designer. Ihre so eben vorgenommenen Einstellung werden in einer speziellen XML-Datei abgelegt und immer dann gezogen und verarbeitet, wenn die Anwendung gestartet wird.
Achtung
Nachdem eine Customizing-Datei angelegt oder geändert wurde, muss die View erneut gesichert und aktiviert werden.