XAAL Documentation - Graphical Primitives

Graphical Primitives

Graphical primitives are basic graphical components that can be composed to represent arbitrarily complex objects (e.g., a tree data structure). The graphical primitives are as specified by the ITiCSE XML WG, where the following have been defined:

  • point, polyline, line, polygon;
  • arc, ellipse, circle and circle-segment;
  • square, triangle, rectangle;
  • text.

Some of these objects are extensions of other objects. For example, a line is a special instance of a polyline. For ease of use, we have included these ``special case'' objects.

All graphical primitives have some shared attributes: id, hidden, opacity, and style. Every primitive can have an id used for identification. Primitives can be either hidden or visible through use of the attribute hidden, which, by default, is false. Primitives can also be partially opaque (i.e. transparent). In addition, every graphical primitive can contain an element specifying the style. Primitives can also reference pre-defined styles through the style attribute. For examples of styles, see styling.

Two representative graphical primitives are described below by way of examples of their formulations in XML. A complete specifications can be found at the schemas section. The first example below defines a polyline consisting of five nodes.

<polyline id="poly" style="style1">
  <coordinate x="10" y="10"/>
  <coordinate><offset x="10" y="10"/></coordinate>
  <coordinate><offset x="-10" y="10"/></coordinate>
  <coordinate><offset x="20" y="0"/></coordinate>
  <coordinate><offset x="0" y="-20"/></coordinate>
  <closed value="true"/>
    <color name="lime"/>
    <fill-color name="black"/>
    <stroke width="4"/>

The second example describes a text object. It is of particular interest in that it includes support for localization (text in multiple languages can be included). This is achieved by using multiple contents elements that each specify the language used.

 <text opacity="0.5">
   <coordinate x="30" y="50"/>
   <alignment value="left"/>
   <boxed value="true"/>
   <contents lang="en">Text of the object</contents>
   <contents lang="fi">Objektin teksti</contents>
   <contents lang="de">Der Text des Objekts</contents>


To help the usage of more complex primitives, the language has support for defining reusable shapes. For example, to specify the shape cat that consists of circle segments, lines, and an arc, the following XML code fragment can be used.

Cat shape<define-shape name="cat">
    <center x="10" y="5"/>
    <radius length="4"/>
    <angle total="310" start="295"/>
    <center x="10" y="15"></center>
    <radius length="7"/>
    <angle total="255" start="105"/>
  <!-- specification of ears as lines and tail as arc -->    

The next example shows how to use this shape. The location of the shape is calculated as offsets from the given coordinate using the given scale. As can be seen, the usage of the shape is short compared to the specification of the shape. Thus, a lot of effort can be saved by specifying a cat shape and then using it, when one needs to include a herd of cats in an animation.

Cat shape<shape uses="cat">
    <coordinate x="30" y="50"/>
    <shape-scale value="0.5"/>