Using Dijit widgets in nodes and links

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 to absolute.
    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.