Dijit-Widgets in Knoten und Links verwenden

Sie können Dijit-Widgets in den Knoten und den Links eines Diagramms verwenden. Ein Knoten kann beispielsweise ein Schaltflächenwidget (Button) enthalten, auf das der Benutzer klickt, um eine Funktion auszuführen, die dem Knoten zugeordnet ist. Dieses Feature ist in Dojo Diagrammer über die Form "GfxWidget" verfügbar.

Form "GfxWidget"

Das Objekt GfxWidget ist eine spezielle GFX-Form in der Bibliothek von Dojo Diagrammer, die die Erstellung und Platzierung eines Dijit-Widgets auf einem Knoten oder einem Link in einem Diagramm steuert. Dieses Objekt lässt das Widget so erscheinen, als wäre es im Knoten oder Link enthalten. Da es sich um eine GFX-Form handelt, kann sie wie jede andere Form (Rechteck, Text usw. ) in jeder Knoten- bzw. Linkschablone verwendet werden.
Die Form "GfxWidget" wird von der Klasse ibm_ilog.diagram.gfxwidget.GfxWidget instanziiert.

GfxWidget in einer Knotenschablone verwenden

Im folgenden Beispiel wird eine Knotenschablone definiert, die ein Button-Widget enthält:
nodeTemplate = "[{"+
"    dojoAttachPoint: 'baseShape',"+
"    shape: {"+
"        x: 0,"+
"        y: 0,"+
"        width: 90,"+
"        height: 40,"+
"        r: 5,"+
"        type: 'rect'"+
"    },"+
"    fill: '{{backgroundColor}}',"+
"    stroke: {"+
"        'color': '{{borderColor}}',"+
"        'width': 2"+
"    },"+
"    selectedStyle: {"+
"        fill: '{{selectedBackgroundColor}}'"+
"    }"+
"}, {"+*
*"    dojoAttachPoint: 'button',"+*
*"    shape: {"+*
*"        type: 'widget',"+*
*"        x: 8,"+*
*"        y: 5,"+*
*"        dojoType: 'dijit.form.Button',"+*
*"        onClick: hello,"+*
*"        label: 'Click me'"+*
*"    }"+*
*"} ]";
Die Form "GfxWidget" wird in der Schablone mithilfe der Eigenschaft type: 'widget' identifiziert. Der Typ des Widgets wird mit der Eigenschaft dojoType des Objekts shape definiert. Die Eigenschaften x und y geben die Position des Widgets im Knoten an. Alle anderen im Formobjekt definierten Eigenschaften werden über einen Aufruf von attr() an das Widget übergeben. In diesem Beispiel werden das Attribut label der Schaltfläche und der Callback onClick definiert.
Anstatt den Widgettyp mit der Eigenschaft dojoType festzulegen, können Sie, wie im folgenden Beispiel gezeigt, eine Eigenschaft createFunction angeben:
"{"+
"    dojoAttachPoint: 'button',"+
"    shape: {"+
"        type: 'widget',"+
"        x: 8,"+
"        y: 8,"+
"        createWidget: createCombo"+
"    }"+
"}"
...
   createCombo = function(shape){
          var colors = {
                label: 'name',
                items: [ { name: 'red' }, { name: 'green' }, { name: 'blue' } ]
              };
     var store = new dojo.data.ItemFileReadStore({data: colors});
     var combo = new dijit.form.ComboBox({store: store});
     return combo;
   };
Die Funktion akzeptiert einen einzigen Parameter, die GFX-Form. Mit dieser Alternative können Sie komplexe Widgets erstellen und deren Datenspeicher initialisieren.

GfxWidget in einer Linkschablone verwenden

Sie können eine Form "GfxWidget" in einer Linkschablone verwenden. Im folgenden Beispiel stellt die Form eine Dekoration in einem Linkpfad bereit:
linkTemplate = "[{"+
"    dojoAttachPoint: '_path',"+
"    shape: {"+
"        type: 'polyline',"+
"        points: [{"+
"            x: 0,"+
"            y: 0"+
"        }, {"+
"            x: 100,"+
"            y: 0"+
"        }]"+
"    },"+
"    stroke: {"+
"       width: {{strokeWidth}}," +
"        color: '{{strokeColor}}'" +
"    },"+
"    selectedStyle: {"+
"        stroke: {"+
"          width: {{selectedStrokeWidth}},"+
"            color: '{{selectedStrokeColor}}'"+
"        }"+
"    }"+
"}, {"+
"    isDecoration: true,"+
"    shape: {"+
"        type: 'widget',"+
"        dojoType: 'dijit.form.Button',"+
"        label: 'X',"+
"        onClick: linkClicked"+
"    }"+
"}, {"+
"    dojoAttachPoint: '_endArrow',"+
"    shape: {"+
"        type: 'polyline',"+
"        points: [{"+
"            x: -8,"+
"            y: 4"+
"        }, {"+
"            x: 0,"+
"            y: 0"+
"        }, {"+
"            x: -8,"+
"            y: -4"+
"        }]"+
"    },"+
"    fill: '{{strokeColor}}',"+
"    selectedStyle: {"+
"        fill: '{{selectedStrokeColor}}'"+
"    }"+
"}]";
Die Eigenschaft isDecoration in der Widgetform bewirkt, dass das Widget automatisch im Linkpfad platziert wird. Weitere Einzelheiten finden Sie in der Beschreibung des Objekts Link.

Einschränkungen

Die von GfxWidget-Formen erstellten und verwalteten Widgets sind nicht in der GFX-Oberfläche vorhanden, die für die Wiedergabe des Diagramms verwendet wird. Sie werden auf der Oberfläche dargestellt. Sie werden automatisch entsprechend der Position des Knotens bzw. der Form des Links verschoben.
Es gelten die folgenden Einschränkungen:
  • Die Z-Reihenfolge wird unter Umständen nicht immer vollständig eingehalten. Wenn sich Knoten A beispielsweise über Knoten B befindet, wird ein Widget, das in B enthalten ist, nicht von Knoten A verdeckt.
  • Widgets werden nicht entsprechend der Zoomebene des Graphen gezoomt. Sie werden auf der Basis der Zoomebene lediglich an neue Positionen der Sichtbarkeit verschoben.
  • Wenn die Form außerhalb eines Diagrammwidgets verwendet wird, muss in dem HTML-Element, das die GFX-Oberfläche enthält, der Stil position auf absolute gesetzt sein.
    Momentan funktionieren GfxWidget-Formen nicht ordnungsgemäß, wenn ein GFX-Layout in der Knotenschablone verwendet wird. Aus diesem Grund müssen Widgets explizit an den absoluten X- und Y-Positionen im Knoten platziert werden.