Introducing templates

A template defines the graphical representation of a node or a link with a string or an object description of the node or link contents. The description is based on the dojox.gfx serialization specification (see http://docs.dojocampus.org/dojox/gfx). This mechanism is called templating.
In Dojo Diagrammer terminology, a template is a description of the graphical representation of a node or link. It is expressed as a JSON string but it can also be a plain JavaScript object.
The following template displays a node as a basic blue rectangular shape. It defines the graphical shape as a Rect GFX shape (indicated by the ‘rect’ type property) with a size of 130x80 pixels and a solid blue color fill:
1. {
2.  shape: {
3.   type:'rect',
4.   width:130,
5.   height:80
6.  },
7.  fill: 'blue'
8.}
The location of the rectangular shape is not specified and is therefore set to the default value (0,0).
For a node to contain more than one shape, the template must define a top-level array that contains child shapes.
The following template displays a rectangular shape coupled with a text shape.
1.[
2.{
3.   shape: {
4.        x: 0,
5.        y: 0,
6.        width: 80,
7.        height: 40,
8.        r: 5,
9.        type: 'rect'
10.    },
11.    fill: 'blue',
12.    stroke: {
13.        'color': 'black',
14.        'width': 2
15.    }
16.}, 
17.{
18.    shape: {
19.        type: 'text',
20.        text: 'Hello World!',
21.        x: 40,
22.        y: 24,
23.        align: 'middle'
24.    },
25.    fill: 'black',
26.    font: {
27.        type: 'font',
28.        size: '10pt',
29.        family: 'sans-serif'
30.    }
31.}
32.]
The first shape, defined from line 2 to line 16, is the same rectangular shape as in the previous example, but with an added custom stroke (line 12). The second shape, defined from line 17 to line 31, is a text GFX shape that displays the Hello World! label.