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
aufabsolute
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.