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.