You can use Dijit widgets inside the nodes and the links
of a diagram. For example, a node could contain a Button widget that
the user clicks to execute a function associated with the node. This
feature is available in Dojo Diagrammer through the GfxWidget shape.
The GfxWidget shape
The GfxWidget object
is a special GFX shape in the Dojo Diagrammer library that controls
the creation and the placement of a Dijit widget on top of a node
or a link in a diagram. This object makes the widget appear as if
it was contained in the node or link. Since it is a GFX shape, it
can be used like other shapes (rectangle, text, and so on) in any
node or link template.
The GfxWidget shape is instantiated by the ibm_ilog.diagram.gfxwidget.GfxWidget class.
Using a GfxWidget in a node template
The following example defines a node template that contains
a Button widget:
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'"+* *" }"+* *"} ]";
The GfxWidget shape is identified in the template by
the property
type: 'widget'
. The type of
the widget is defined by the dojoType
property
of the shape
object. The x
and y
properties
specify the position of the widget in the node. All other properties
defined in the shape object are passed to the widget through an attr() call.
This example defines the label
attribute
of the button and the onClick
callback.
Instead of specifying the widget type using the
dojoType
property,
you can specify a createFunction property
as in the following example:"{"+ " 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; };
The function takes a single parameter which is the GFX
shape. This alternative lets you create complex widgets and initialize
their data store.
Using a GfxWidget in a link template
You can use a GfxWidget shape in a link template, as
in the following example where it supplies a decoration on the link
path:
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}}'"+ " }"+ "}]";
The isDecoration property
on the widget shape causes the widget to be placed automatically on
the link path. See the description of the Link object for more details.
Limitations
The widgets created and managed by GfxWidget shapes are
not contained in the GFX surface that is used to render the diagram.
They are superimposed on the surface. They are moved automatically
to fit the position of the node or the shape of the link.
The following limitations are implied:
- The Z-ordering might not always be fully observed. For example, if node A is on top of node B, a widget that is contained in B is not hidden by node A.
- Widgets are not zoomed according to the zoom level of the graph. They are only moved to new positions of visibility based on the zoom level.
- If the shape is used outside of a Diagram widget, the HTML element that contains the GFX surface must have its
position
style set toabsolute
.Currently, GfxWidget shapes do not work correctly when a GFX layout is used in the node template. For this reason, widgets must be placed explicitly at absolute x and y positions in the node.