To create a node programmatically, use the ibm_ilog.diagram.Graph.createNode() method. When no argument is specified, the createNode method
creates an ibm_ilog.diagram.Node instance and initializes it with the default node
template (a rectangular shape and a text shape).
To specify a custom graphical representation, the Graph.createNode method
accepts a
template
parameter that must
either be a string or a plain JavaScript object property that conforms
to the GFX serialization specification. For example:var graph = ... var template = ibm_ilog.diagram.declareTemplate({ shape: {type:'rect'}, fill: 'blue'}); var node = graph.createNode(template);
Note
In this example, the template parameters are defined
as strings. The optional ibm_ilog.diagram.declareTemplate() function
processes the template for the templating engine, resulting in better
performance. See the Bindings section for an example
defining template parameters as JavaScript object properties.
To change templates dynamically, use the node.applyTemplate() method.
In this way, you can change the graphical representation of the same
node instance and keep the link port settings. For example:
var graph = ... var template = ibm_ilog.diagram.declareTemplate({ shape: {type:'rect'}, fill: 'blue'}); var node = graph.createNode(template); // ... // later, the template is changed for a new one node.applyTemplate({ shape: {type:'ellipse'}, fill: 'red'});
If a subcomponent is referenced from the node instance,
that is, the node instance defines a direct reference to one of its
children, the template can tag the subcomponent with the
dojoAttachPoint
property.
The value of this property is the property name of the reference defined
on the node instance. For example:[{ dojoAttachPoint: 'baseShape', shape: { type: 'rect', ... } ... }, { dojoAttachPoint: 'textShape', shape: { type: 'text', ... } ... }]
If you use this template, a new property is set on the
node instance for each
dojoAttachPoint
entry
in the template, and it applies to the corresponding shape. After
applying the template, you access the rectangular shape through the node.baseShape
property
and the text shape through the node.textShape property.