Knotendarstellung definieren

Die Komponente Diagram generiert Instanzen der Klasse Node, um die Elemente in der Datenquelle darzustellen. IBM® ILOG® Dojo Diagrammer stellt einen integrierten Darstellungsmechanismus bereit, mit dem Sie die grafische Darstellung der Knoten anpassen können.

Knotenschablone definieren

Gehen Sie wie folgt vor, um die Knotenschablone zu definieren:
  • Verwenden Sie die Eigenschaft nodeTemplate des Objekts Diagram.
    Diese Eigenschaft definiert den internen Inhalt und die Darstellung des Knotens. Der Wert ist eine JSON-Zeichenfolge oder ein Objekt, die bzw. das den Knoten als Hierarchie von GFX-Formen beschreibt. Das Format entspricht dem GFX-Serialisierungsformat. Eine GFX-Form setzt sich aus einem Objekt mit einer Eigenschaft shape, die die tatsächliche Form beschreibt, wie z. B. ein Rechteck, und optionalen Eigenschaften wie fill, stroke, transform und font zusammen. Eine GFX-Gruppe wird mithilfe eines Objekts mit einer Eigenschaft children beschrieben, die ein Array untergeordneter Formen enthält.
    Die folgende Schablone definiert beispielsweise den Inhalt eines Knotens als Array, das eine rechteckige Basisform enthält:
    [{
          shape: {
             x: 0,
             y: 0,
             width: 110,
             height: 80,
             type: 'rect'
          },
          fill: '#ff',
          stroke: {
             'width': 2
          }
    }]
    In nodeTemplate eines Objekts Diagram können Sie Bindungen definieren, um eine Eigenschaft einer GFX-Form auf den Wert eines Attributs des entsprechenden Objekts im Datenspeicher oder auf eine Eigenschaft einer Node-Instanz zu setzen. Beispiel:
    [
       {
          shape: {
             x: 0,
             y: 0,
             width: 150,
             height: 40,
             type: 'rect'
          },
          fill: '#d0d0d0',
          stroke: {
             'width': 2
          }
       }, {
          shape: {
             text: '{{data.Name}}',
             x: '10',
             y: '20',
             type: 'text'
          },
          fill: '{{textColor}}'
       }
    ]
    In diesem Beispiel wird eine zweite Textform hinzugefügt. Die Bindung {{data.Name}} gibt an, dass der Text der Form dem Wert des Attributs Name des vom Knoten dargestellten Datenspeicherobjekts entspricht. Außerdem wird der Wert der Textformeigenschaft fill an die Eigenschaft textColor der Node-Instanz gebunden.
    In einigen Fällen wird der Wert des Datenspeicherattributs transformiert. Sie können Filter mit vordefinierten oder angepassten Funktionen verwenden, um den Anfangsbindungswert in einen anderen Wert zu transpormieren. In der folgenden Schablone wird beispielsweise die Eigenschaft data.Name in eine Zeichenfolge in Kleinbuchstaben transformiert:
    [...]
          shape: {
             text: '{{data.Name | lowercase}}',
             x: '10',
             y: '20',
             type: 'text'
          }
    Die Knotenschablone kann eine beliebige Anzahl von GFX-Formen mit einer beliebigen Anzahl an Bindungen enthalten. Die Schablone kann auch verschachtelte GFX-Gruppen enthalten.
    Weitere Informationen zu erweiterten Bindungsfunktionen finden Sie unter Schablonen und Bindungen verwenden.

Mehrere Knotenschablonen definieren

Wenn das Diagramm verschiedene Typen von Knoten enthält, ist es hilfreich, mehrere Knotenschablonen zu definieren, um Knoten verschieden darzustellen.
Gehen Sie wie folgt vor, um mehrere Knotenschablonen zu definieren:
  • Verwenden Sie das Widget nodeTemplateFunction property of the Diagram.
    Die folgende Knotenschablonenfunktion gibt beispielsweise je nach Eigenschaft "type" des Datenelements eine andere Schablone zurück:
    <script type="text/javascript">
             function getNodeTemplate(item, store, diagram) {
                switch (store.getValue(item, "type")) {
                   case "startEvent":
                      return startEventTemplate;
                   case "endEvent":
                      return endEventTemplate;
                   case "task":
                      return taskTemplate;
                }
             }
            </script>
    
            <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodeTemplateFunction="getNodeTemplate" ...>
            </div>
    In diesem Beispiel enthalten die Variablen startEventTemplate, taskTemplate und endEventTemplate verschiedene Schablonen.

Knotenstil definieren

Gehen Sie zum Definieren des Knotenstils wie folgt vor:
  • Verwenden Sie die Eigenschaft nodeStyle, die von der Komponente Diagram bereitgestellt wird. Diese Eigenschaft wird als Dictionary mit Eigenschaft/Wert-Paaren definiert, die die globalen Eigesnchaften festlegen, die auf Knoten angewendet werden sollen.
    Das folgende Knotenstilobjekt spezifiziert die Eigenschaften borderColor und textColor der Knoten, die in der Komponente Diagram angezeigt werden:
    diagram.attr('nodeStyle',{ 
           borderColor:'red', 
           textColor:'blue'
       });
    Wenn die Knotenschablone Bindungen in den Eigenschaften borderColor und textColor definiert, werden die im Knotenstil definierten Eigenschaften automatisch von der Schablone angewendet.
    Er gilt für jede Linkeigenschaft, sofern ein Setter für die Eigenschaft vorhanden ist und der Name den Java-Namenskonventionen entspricht. Für die Eigenschaft a_property muss beispielsweise ein Setter setAProperty vorhanden sein.
    In der folgenden Tabelle sind nur die wichtigsten Node-Darstellungseigenschaften aufgeführt, die mit der Eigenschaft nodeStyle definiert werden können:
    Eigenschaft Typ Beschreibung
    label string
    Definiert die Knotenbeschriftung. Die Standardschablone zeigt die Knotenbeschriftung mit einer Textform an, die an der Mitte des Knotens ausgerichtet ist.
    backgroundColor string oder dojo.Color
    Die Hintergrundfarbe des Knotens. Die Standardschablone bindet diese Eigenschaft an die Eigenschaft "fill" der Knotenbasisform.
    selectedBackgroundColor string oder dojo.Color
    Die Hintergrundfarbe des Knotens, wenn der Knoten ausgewählt wird. Die Standardschablone bindet diese Eigenschaft an die Eigenschaft "fill" der Knotenbasisform.
    borderColor string oder dojo.Color
    Die Randfarbe des Knotens. Die Standardschablone bindet diese Eigenschaft an die Strichfarbe der Knotenbasisform.
    textColor string oder dojo.Color
    Die Textfarbe des Knotens. Die Standardschablone bindet diese Eigenschaft an die Füllfarbe der Knotentextform.
    selectedTextColor string oder dojo.Color
    Die Textfarbe des Knotens, wenn der Text ausgewählt wird. Die Standardschablone bindet diese Eigenschaft an die Füllfarbe der Knotentextform.

Angepasste Knoten über das Programm definieren

Gehen Sie zum Definieren angepasster Knoten wie folgt vor:
  • Setzen Sie das Attribut onNodeCreated oder createNodeFunction des Diagram-Widgets, wenn die in diesem Abschnitt beschriebenen Mechanismen für die Anpassung der Knoten nicht ausreichen.
    onNodeCreated wird jedesmal aufgerufen, wenn ein Knoten erstellt wird. Mit dieser Funktion können Sie den Knoten nach Bedarf anpassen. Die Funktion muss dem folgenden Prototyp entsprechen:
    function nodeCreated(node, diagram){
        // summary: Called after a Node is created by the Diagram widget
        // node: ibm_ilog.diagram.Node: The newly created Node.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget
    };
    Das Attribut createNodeFunction ermöglicht Ihnen, die Art und Weise zu ändern, in der ein Knoten erstellt wird. Es wird bei der Erstellung jedes Knotens aufgerufen und muss dem folgenden Prototyp entsprechen:
    function createNode(item, template, onGraph, diagram){
        // summary: Creates a Node for a given data store item.
        // item: The item contained in the nodesStore.
        // template: The suggested node template.
        // onGraph: The parent Graph in which the node must be created.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget.
        ...
        return node; // ibm_ilog.diagram.Node
    };
    Die vorgeschlagene Schablone, die mit dem Attribut nodeTemplate oder nodeTemplateFunction angegeben wird. createNodeFunction kann eine andere Schablone verwenden.
    Zum Erstellen eines angepassten Knotens muss createNodeFunction die Funtion createTemplatedShape des Diagram-Widgets aufrufen.
    Im folgenden Beispiel wird eine Instanz der Klasse MyNode erstellt, die eine Unterklasse von ibm_ilog.diagram.Node sein muss:
    function createNode(item, template, onGraph, diagram){
        return diagram.createTemplatedShape(MyNode, template, onGraph, diagram.nodeStyle, diagram.nodesStore, item);
    };