Organigramm (WebWidget)
Stellt hierachische Strukturen in einem Baum mit rechteckigen Knoten und Kanten dar. Dieses Widget eignet sich nicht für zyklische Strukturen. Farbe der Knoten und die Größe lassen sich von InstantView aus steuern. Das WebWidget kann sowohl einen vollständig geladenen Baum darstellen, als auch die einzelnen Knoten erst beim Öffnen nachladen.
Verwendung
Abhängigkeiten
- organization.html
- organization-directive.js
- dependencies/
- d3.min.js
- d3-orgchart.js
- organization.css
Nachrichtenschnittstelle
Bei der Richtungsbeschreibung wird das WebWidget in seine zwei Komponenten unterteilt. Das in HTML implementierte WebWidget, welches die Darstellungslogik und Nutzerinteraktion im Browser implementiert und das in InstantView implementierte WebWidget, welches die andere Seite mit den Daten aus ClassiX versorgt und es steuert.
Typ | Richtung | Parameter | Beschreibung |
---|---|---|---|
get_options | HTML→IV | NULL | Die erste Nachricht, die das WebWidget schickt, sobald es sich initialisiert hat. Das Widget erwartet eine options-Nachricht als Antwort. Die Antwort ist optional, sie muss nicht geschickt werden. |
get_root | HTML→IV | NULL | Diese Nachricht wird direkt nach get_options geschickt. Das Widget erwartet eine root-Nachricht als Antwort, bevor es sich zeichnet. |
options | IV→HTML | OPTIONS | Über diese Nachricht kann das Ausshen des Organigramms gesteuert werden, solange es noch nicht initialisiert wurde (root). Ein leeres JSON-Objekt bedeutet, dass sich an den Voreinstellungen nichts ändert. |
root | IV→HTML | NODE | ID | Als Antwort auf die get_root Nachricht soll hier der Wurzelknoten des Baums entweder als Node-Objekt, oder dessen ID als Parameter übergeben werden. Im Fall der ID wird der tatsächliche Knoten durch eine nachfolgende get_node-Nachricht während der Initialisierung nachgeladen. |
get_node | HTML→IV | ID |
Wenn das WebWidget einen Knoten dynamisch nachladen muss, weil es nur dessen ID kennt, dann wird diese Nachricht ausgelöst. Als Antwort wird eine node-Nachricht erwartet. Wird in der root-Nachricht ein vollständig befüllter Wurzelknoten an das Widget gegeben, dann werden keine get_node-Nachrichten vom Widget ausgelöst. |
node | IV→HTML | NODE | Als Antwort auf eine get_node Anfrage sollte IV ein Node-Objekt für die angegebene ID liefern. |
Steuernachrichten | |||
expand | IV→HTML | NULL | ID | Expandiert den Knoten mit der angegebenen ID, oder alle Knoten, falls NULL als ID angegeben wurde. Falls für das Aufklappen der entsprechenden Knoten noch Knoten nachgeladen werden müssen, dann werden diese daraufhin per get_node angefragt bevor die Knoten tatsächlich aufgeklappt werden. |
collapse | IV→HTML | NULL | Klappt alle Knoten zusammen, sodass nur der Wurzelknoten zu sehen ist. Dies ist der Ausgangszustand, nachdem das Widget initialisiert wurde. Beim erneuten ausklappen werden bereits geladene Knoten jedoch nicht erneut per get_node angefragt. |
reload | IV→HTML | NODE | ID |
Initialisiert das Widget mit einem neuen Wurzelknoten vollständig neu. Alle bisher geladenen Knoten werden wieder verworfen. Dies ganz genutzt werden, um eine gänzlich andere Hierarchie in dem Widget darzustellen. Duch das Verwerfen der bisher geladenen Knoten können IDs aus der vorherigen Hierarchie für ganz andere Objekte wiederverwendet werden. Die Darstellung des Widgets lässt sich vor dem Reload über eine weitere options-Nachricht anpassen, sodass sich das gleiche WebWidget je nach angezeigten Daten unterschiedlich darstellt. |
Das Node-Objekt
Das Node-Objekt ist vom Typ CX_JSON_OBJECT und repräsentiert einen oder mehrere Knoten im Organigramm. Jeder Knoten wird über eine id identifiziert, hat einen optionalen text und children (Kindknoten).
Feld | Typ | Beschreibung |
---|---|---|
id | STRING | INTEGER | Eindeutige Identifikation des Knotens, die in der Baumstruktur einmalig sein muss und dazu benutzt wird, Knoten in Nachrichten zu referenzieren. |
text | STRING | Optionaler Text, der in dem Knoten dargestellt werden soll. Falls kein Text angegeben ist, wird die id des Knotens dargestellt. |
children | ARRAY(ID | NODE) | Eine Liste von IDs oder Node-Objekten, die die Kindknoten dieses Knotens repräsentieren. Wenn dieses Feld nicht angegeben wird, dann lässt sich der entsprechende Knoten nicht ausklappen. |
Das Options-Objekt
Das Options-Objekt ist ein CX_JSON_OBJECT, welches verwendet werden kann, um selektiv die Standardoptionen zu überschreiben. Die Standardwerte sind mit ihrer Bedeutung in der folgenden Tabelle abgebildet.
Feld | Typ | Wert | Beschreibung |
---|---|---|---|
node.width | INTEGER | 150 | Breite eines Knotens in Pixel |
node.height | INTEGER | 50 | Höhe eines Knotens in Pixel |
node.padding | INTEGER | 20 | Vertikaler und horizontaler Innenabstand vom Text |
node.vSpace | INTEGER | 30 | Vertikaler Abstand zwischen zwei Knoten (zwischen zwei Ebenen) |
node.color.hasChildren | COLOR | {...} |
Die Farbe, in der die Knoten gezeichnet werden sollen, die weitere Kindknoten zum Aufklappen enthalten. Standard: Farbverlauf #FF8E00→#FF1600 |
node.color.hasNoChildren | COLOR | {...} |
Die Farbe, in der die Knoten gezeichnet werden sollen, die keine Kindknoten besitzen. Standard: Farbverlauf #03A9F4→#0288D1 |
text.color.hasChildren | COLOR | #FFFFFF | Die Textfarbe für Knoten, die Kindknoten enthalten |
text.color.hasNoChildren | COLOR | #FFFFFF | Die Textfarbe für Knoten, die keine Kindknoten enthalten |
duration | INTEGER | 750 | Animationsdauer für das Auf- und Zuklappen von Knoten. (ms) |
Der Color-Typ
Als Farbe kann in dem Organigramm-Widget entweder eine einfache HTML-Farbe als STRING angegeben werden (Bsp: #FF0000 = rot) oder als ein Objekt, welches einen vertikalen Farbverlauf definiert.
Feld | Typ | Beschreibung |
---|---|---|
top | STRING | HTML-Farbe für den oberen Bereich des Knotens |
bottom | STRING | HTML-Farbe für den unteren Bereich des Knotens |