Linkdarstellung definieren

Die Komponente Diagram generiert Instanzen der Klasse Link, um die Relationen zwischen Elementen darzustellen. IBM® ILOG® Dojo Diagrammer stellt einen integrierten Darstellungsmechanismus bereit, mit dem Sie die grafische Darstellung der Links anpassen können.

Linkschablone definieren

Gehen Sie wie folgt vor, um die Linkschablone zu definieren:
  • Verwenden Sie die Eigenschaft linkTemplate. Der Wert ist eine JSON-Zeichenfolge oder ein Objekt, die bzw. das den Knoten als Hierarchie von GFX-Formen beschreibt. Für diesen Wert gelten dieselben Regeln wie für den Wert der Eigenschaft nodeTemplate. Weitere Informationen finden Sie unter Knotendarstellung definieren.
    Ein diagram.Link setzt sich aus drei dojox.gfx.Shape-Unterkomponenten zusammen:
    • Hauptpfad (verbindlich)
    • Startpfeil (optional)
    • Endpfeil (optional)
    Die Linkschablone muss dieser Struktur entsprechen. Für jede Form muss in der Linkschablone mithilfe der Eigenschaft dojoAttachPoint eine bestimmte ID eingefügt werden, die die Unterkomponente angibt, zu der die jeweilige Form gehört. Je nach Unterkomponente muss die Eigenschaft dojoAttachPoint eine der folgenden Unterkomponentenspezifikationen haben: _path, _startArrow oder _endArrow.
Das folgende Beispiel ist eine vereinfachte Version der Standardlinkschablone (mit Bindungen, die zur Vereinfachung entfernt wurden):
[{
      dojoAttachPoint: '_path',
      shape: {
         type: 'polyline',
         points: [{
            x: 0,
            y: 0
         }, {
            x: 100,
            y: 100
         }]
      },
      stroke: {
         width: 2
      }
   }
   ,
   {
      dojoAttachPoint: '_endArrow',
      shape: {
         type: 'polyline',
         points: [{
            x: -8,
            y: 4
         }, {
            x: 0,
            y: 0
         }, {
            x: -8,
            y: -4
         }]
      },
      fill: '#00'
   }
]
Der folgende Code definiert einen Link mit einem Kreis als Startpfeil, einen Linienzug als Linkpfad und einen Endpfeil:
var linkTemplate = "[{
      dojoAttachPoint: '_path',
      shape: {
         type: 'polyline',
         points: [{
            x: 0,
            y: 0
         }, {
            x: 100,
            y: 100
         }]
      },
      stroke: {
         width: 2
      }
   }
   ,
   {
      dojoAttachPoint: '_startArrow',
      shape: {
         type: 'circle',
         r: 4
      },
      fill: 'white',
      stroke: 'black'
   }
   ,
   {
      dojoAttachPoint: '_endArrow',
      shape: {
         type: 'polyline',
         points: [{
            x: -8,
            y: 4
         }, {
            x: 0,
            y: 0
         }, {
            x: -8,
            y: -4
         }, {
            x: -8,
            y: 4
         }]
      },
      fill: 'black'
   }
]";

Linkstil definieren

Gehen Sie wie folgt vor, um den Linkstil zu definieren:
  • Verwenden Sie die Eigenschaft linkStyle. Der Wert ist ein einfaches JavaScript-Objekt, das Definitionen für die entsprechenden Linkeigenschaften enthält, die Sie definieren möchten. Er ist für jede Linkeigenschaft gültig, wenn 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).
    Die Klasse "Link" definiert die folgenden Eigenschaften", die verwendet werden können, um die Darstellung des Links mit der Eigenschaft linkStyle zu ändern:
    Eigenschaft Typ Beschreibung
    strokeColor string oder dojo.Color
    Legt die Strichfarbe für den Link fest.
    strokeWidth int
    Legt die Strichstärke für den Link fest.
    selectedStrokeColor string oder dojo.Color
    Legt die Strichfarbe des Links fest, wenn der Link ausgewählt wird.
    selectedStrokeWidth int
    Legt die Strichstärke des Links fest, wenn der Link ausgewählt wird.
    startArrowVisible boolean
    Legt fest, ob der Startpfeil sichtbar ist.
    startArrowFill dojox.gfx.fill
    Legt die Füllfarbe für den Startpfeil fest.
    startArrowStroke dojox.gfx.stroke
    Legt den Strich für den Startpfeil fest.
    endArrowVisible boolean
    Legt fest, ob der Endpfeil sichtbar ist.
    endArrowFill dojox.gfx.fill
    Legt die Füllfarbe für den Endpfeil fest.
    endArrowStroke dojox.gfx.stroke
    Legt den Strich für den Endpfeil fest.
    Der folgende Code legt beispielsweise die Strichstärke für den Link auf 4:
    <div id="canvas" dojoType='ibm_ilog.diagram.widget.Diagram' style="width:900px;height:700px" movableNode="true"
              linkStyle="{strokeWidth:4}">
       </div>

Angepasste Links über das Programm definieren

Gehen Sie zum Definieren angepasster Links wie folgt vor:
  • Setzen Sie das Attribut onLinkCreated oder createLinkFunction des Diagram-Widgets, wenn die in diesem Abschnitt beschriebenen Mechanismen für die Anpassung der Links nicht ausreichen.
    onLinkCreated wird jedesmal aufgerufen, wenn ein Link erstellt wird. Mit dieser Funktion können Sie den Link nach Bedarf anpassen. Die Funktion muss dem folgenden Prototyp entsprechen:
    function linkCreated(link, start, end, diagram){
        // summary: Called after a Node is created by the Diagram widget
        // link: ibm_ilog.diagram.Link: The newly created Link.
        // start: ibm_ilog.diagram.Node: The start node of the link.
        // end: ibm_ilog.diagram.Node: The end node of the link.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget
    };
    createLinkFunction ermöglicht Ihnen, die Art und Weise zu ändern, in der ein Link erstellt wird. Diese Funktion wird bei der Erstellung jedes Links aufgerufen und muss dem folgenden Prototyp entsprechen:
    function createLink(item, start, end, template, onGraph, diagram){
        // summary: Creates a Link for a given data store item.
        // item: The item contained in the linksStore, or null if the link is not created from a linksStore item.
        // start: ibm_ilog.diagram.Node: The start node of the link.
        // end: ibm_ilog.diagram.Node: The end node of the link.
        // 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 link; // ibm_ilog.diagram.Link
    };
    Die vorgeschlagene Schablone, die mit dem Attribut linkTemplate oder linkTemplateFunction angegeben wird. createLinkFunction kann eine andere Schablone verwenden. Zum Erstellen eines angepassten Links muss createLinkFunction die Funtion createTemplatedShape des Diagram-Widgets aufrufen.
    Im folgenden Beispiel wird eine Instanz der Klasse MyLink erstellt, die eine Unterklasse von ibm_ilog.diagram.Link sein muss:
    function createLink(item, start, end, template, onGraph, diagram){
        return diagram.createTemplatedShape(MyLink, template, onGraph, diagram.linkStyle, diagram.linksStore, item);
    };
    Wenn createLinkFunction den Link nicht mit den Anfangs- und Endknoten verbindet (durch Aufruf von link.setStartPort/setEndPort), wird dies automatisch vom Diagram-Widget nach dem Aufruf von createLinkFunction nachgeholt. createLinkFunction kann den Link jedoch verbinden, um beispielsweise die Verbindungspunkte anzupassen oder um angepasste Ports zu verwenden. In diesem Fall überschreibt das Widget die von der Funktion gesetzten Ports nicht.