Defining the nodes appearance

The Diagram component generates instances of the Node class to represent the items in the data source. IBM® ILOG® Dojo Diagrammer provides a built-in styling mechanism that allows you to customize the graphical representation of the nodes.

Defining the node template

To define the node template:
  • Use the nodeTemplate property of the Diagram object.
    This property defines the internal content and the appearance of the node. The value is a JSON string, or an object that describes the node as a hierarchy of GFX shapes. The format is the same as the GFX serialization format. A GFX shape is composed of an object with a shape property that describes the actual shape, such as a rectangle, and optional properties like fill, stroke, transform, and font. A GFX group is described by an object with a children property that contains an array of child shapes.
    For example, the following template defines the content of a node as an array containing a basic rectangle shape:
    [{
          shape: {
             x: 0,
             y: 0,
             width: 110,
             height: 80,
             type: 'rect'
          },
          fill: '#ff',
          stroke: {
             'width': 2
          }
    }]
    In the nodeTemplate of a Diagram, you can define bindings to set a property of a GFX shape to the value of an attribute of the corresponding object in the data store or to a property of a Node instance. For example:
    [
       {
          shape: {
             x: 0,
             y: 0,
             width: 150,
             height: 40,
             type: 'rect'
          },
          fill: '#d0d0d0',
          stroke: {
             'width': 2
          }
       }, {
          shape: {
             text: '{{data.Name}}',
             x: '10',
             y: '20',
             type: 'text'
          },
          fill: '{{textColor}}'
       }
    ]
    In this example, a second text shape is added. The {{data.Name}} binding specifies that the text of the shape is the value of the Name attribute of the data store object that the node represents. In addition, the value of the text shape fill property is bound to the textColor property of the Node instance.
    In some cases, the value of the data store attribute is transformed. You can use filters with predefined or custom functions to transform initial binding value to another value. For example, in the following template, the data.Name property is transformed to a lowercase string:
    [...]
          shape: {
             text: '{{data.Name | lowercase}}',
             x: '10',
             y: '20',
             type: 'text'
          }
    The node template can contain any number of GFX shapes with any number of bindings. The template can also contain nested GFX groups.
    For more information about advanced binding capabilities, see Using templates and bindings.

Defining multiple node templates

When the diagram contains different types of nodes, it is useful to define multiple node templates to represent nodes differently.
To define multiple node templates:
  • Use the nodeTemplateFunction property of the Diagram widget.
    For example, the following node template function returns different templates according to the type property of the data item:
    <script type="text/javascript">
             function getNodeTemplate(item, store, diagram) {
                switch (store.getValue(item, "type")) {
                   case "startEvent":
                      return startEventTemplate;
                   case "endEvent":
                      return endEventTemplate;
                   case "task":
                      return taskTemplate;
                }
             }
            </script>
    
            <div id="diagram" dojoType='ibm_ilog.diagram.widget.Diagram' nodeTemplateFunction="getNodeTemplate" ...>
            </div>
    In this example, the variables startEventTemplate, taskTemplate, and endEventTemplate contain different templates.

Defining the node style

To define the node style:
  • Use the nodeStyle property provided by the Diagram component. This property is defined as a dictionary of property-value pairs that set the global properties to be applied to nodes.
    For example, the following node style object specifies the borderColor and the textColor properties of the nodes displayed in the Diagram component:
    diagram.attr('nodeStyle',{ 
           borderColor:'red', 
           textColor:'blue'
       });
    If the node template defines bindings on the borderColor and textColor properties of a node, the properties defined in the node style are automatically applied by the template.
    It is valid for every property of the node, if a setter exists for the property and its name follows the Java naming conventions. For example, for a property named a_property, a setter setAProperty must exist.
    The following table lists only the main Node appearance properties that can be defined with the nodeStyle property:
    Property Type Description
    label string
    Sets the node label. The default template displays the node label with a text shape aligned in the center of the node.
    backgroundColor string or dojo.Color
    The node background color. The default template binds this property to the fill property of the node base shape.
    selectedBackgroundColor string or dojo.Color
    The node background color when the node is selected. The default template binds this property to the fill property of the node base shape.
    borderColor string or dojo.Color
    The node border color. The default template binds this property to the stroke color of the node base shape.
    textColor string or dojo.Color
    The node text color. The default template binds this property to the fill color of the node text shape.
    selectedTextColor string or dojo.Color
    The node text color when the text is selected. The default template binds this property to the fill color of the node text shape.

Defining custom nodes programmatically

To define custom nodes
  • Set the attributes onNodeCreated or createNodeFunction of the Diagram widget, if the mechanisms described in this topic are not sufficient to customize the nodes.
    The attribute onNodeCreated is called each time a node has been created. It enables you to customize the node as required. The function must conform to the following prototype:
    function nodeCreated(node, diagram){
        // summary: Called after a Node is created by the Diagram widget
        // node: ibm_ilog.diagram.Node: The newly created Node.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget
    };
    The attribute createNodeFunction enables you to change the way a node is created. It is called to create each node and must conform to the following prototype:
    function createNode(item, template, onGraph, diagram){
        // summary: Creates a Node for a given data store item.
        // item: The item contained in the nodesStore.
        // template: The suggested node template.
        // onGraph: The parent Graph in which the node must be created.
        // diagram: ibm_ilog.diagram.widget.Diagram: The Diagram widget.
        ...
        return node; // ibm_ilog.diagram.Node
    };
    The suggested template is the template specified by the nodeTemplate or nodeTemplateFunction attributes. The createNodeFunction can use a different template.
    To create the custom node, the createNodeFunction must call the createTemplatedShape function of the Diagram widget.
    The following example creates an instance of the class MyNode, which must be a subclass of ibm_ilog.diagram.Node:
    function createNode(item, template, onGraph, diagram){
        return diagram.createTemplatedShape(MyNode, template, onGraph, diagram.nodeStyle, diagram.nodesStore, item);
    };