Tutorial

Tutorial
Prev	Chapter 3. Elements	Next

This section will provide instructions on how to create a Geometry by defining a proper Style for it and combining these two in a valid elements.xml file. This tutorial will show how to create an Element that looks like this:

Figure 3.5. Transducer

Separate into basic shapes

Before starting with the definition of the Geometry Items, we need to separate the graphic into elemental geometric forms. The “Transducer” will then structured like this:

Figure 3.6. Parts of the Transducer

The “Transducer” shape can be divided into 11 basic geometries. These are (from left to right) a dotted line, a rectangle, a polygon (for the triangle), 5 continuous lines and two ellipses. The ellipses are filled with the color black.

Define GeometryItem

Now we create the necessary Geometry Items. These are later combined in a GeometryDescriptor to describe the Transducer shape.

The lines (1 dotted, 5 continuous) will all base on the same GeometryItem. Their characteristic will either be achieved by a proper style (dotted, continuous) or by using an appropriate list of coordinates ('Polyline'). Thus the GeometryItem for the lines is:

Example 3.8. Line GeometryItem

<!-- Line -->
<list name="GeometryItem">
 <attribute name="Name" value="DefaultLine"/>
 <attribute name="Type" value="Line"/>
</list>

The item for the rectangle contains some attributes concerning round edges. These are not used in this case and disabled.

Example 3.9. Line GeometryItem

<!-- Rectangle -->
<list name="GeometryItem">
 <attribute name="Name" value="DefaultRect"/>
 <attribute name="Type" value="Rectangle"/>
 <set name="Attributes">
  <attribute name="RoundEdges" type="Boolean" value="false"/>
  <attribute name="ArcWidth" type="Integer" value="25"/> <!-- ignored -->
  <attribute name="ArcHeight" type="Integer" value="25"/> <!-- ignored -->
 </set>
</list>

The items for ellipse and polygon are similar to the line type, and look like this:

Example 3.10. Several Geometry Items

<!-- Ellipse -->
<list name="GeometryItem">
 <attribute name="Name" value="DefaultEllipse"/>
 <attribute name="Type" value="Ellipse"/>
</list>

<!-- Polygon -->  
<list name="GeometryItem">
 <attribute name="Name" value="DefaultPolygon"/>
 <attribute name="Type" value="Polygon"/>
</list>

Define the GeometryDescriptor

Now we have all the Geometry Items required to describe the full geometry of the chosen shape. Note: We now are just describing the geometry. Appearance is done by the associated StyleDescriptor. The Descriptor will be ordered like this:

Descriptor relevant attributes (name, type, ..)
CoordinateSystem for the Descriptor
Descriptor Items
- Line (the dotted one)
- Rectangle
- Line (in the Rectangle)
- Polygon (for the triangle)
- Line (Polyline)
- Ellipse (1)
- Ellipse (2)
- Line (above the 1st Ellipse)
- Line (for the switch)
- Line (below the 2nd Ellipse)

The GeometryDescriptor will be based on a 400x400 CoordinateSystem and the type will be Composite.

Example 3.11. GeometryDescriptor for the Transducer

<list name="GeometryDescriptor">
 <attribute name="Name" value="Transducer"/>
 <attribute name="Type" value="Composite"/>
 <list name="CoordinateSystem">
  <attribute name="ScaleX" value="0.0, 400.0"/>
  <attribute name="ScaleY" value="0.0, 400.0"/>
 </list>

 <list name="DescriptorItems">
 
 <!-- The Dotted Line -->
  <list name="DescriptorItem">
   <attribute name="Name" value="DefaultLine"/>
   <attribute name="Type" value="Line"/>
   <attribute name="GeometryItemName" value="DefaultLine"/>
   <list name="Coordinates">
    <attribute name="Coordinate" value="0, 200"/>
    <attribute name="Coordinate" value="100, 200"/>
   </list>
  </list>
  
  <!-- The Rectangle (200 x 200) -->      
  <list name="DescriptorItem">
   <attribute name="Name" value="DefaultRect"/>
   <attribute name="Type" value="Rectangle"/>
   <attribute name="GeometryItemName" value="DefaultRect"/>
   <list name="Coordinates">
    <attribute name="Coordinate" value="100, 100"/>
    <attribute name="Coordinate" value="300, 300"/>
   </list>
  </list> 
  
  <!-- The Crossing Line -->      
  <list name="DescriptorItem">
   <attribute name="Name" value="DefaultLine"/>
   <attribute name="Type" value="Line"/>
   <attribute name="GeometryItemName" value="DefaultLine"/>
   <list name="Coordinates">
    <attribute name="Coordinate" value="100, 300"/>
    <attribute name="Coordinate" value="300, 100"/>
   </list>
  </list>
  
  <!-- The Triangle -->
  <list name="DescriptorItem">
   <attribute name="Name" value="DefaultPolygon"/>
   <attribute name="Type" value="Polygon"/>
   <attribute name="GeometryItemName" value="DefaultPolygon"/>
   <list name="Coordinates">
    <attribute name="Coordinate" value="100, 175"/>
    <attribute name="Coordinate" value="125, 200"/>
    <attribute name="Coordinate" value="100, 225"/>
   </list>
   </list> 
   
   <!-- The Polyline At The Right -->
   <list name="DescriptorItem">
    <attribute name="Name" value="DefaultLine"/>
    <attribute name="Type" value="Line"/>
    <attribute name="GeometryItemName" value="DefaultLine"/>
    <list name="Coordinates">
     <attribute name="Coordinate" value="300, 150"/>
     <attribute name="Coordinate" value="316, 200"/>
     <attribute name="Coordinate" value="332, 150"/>
     <attribute name="Coordinate" value="348, 200"/>
     <attribute name="Coordinate" value="364, 150"/>
     <attribute name="Coordinate" value="380, 200"/>
     <attribute name="Coordinate" value="396, 150"/>
    </list>
   </list>
   
   <!-- Ellipse Top (1st) -->  
   <list name="DescriptorItem">
    <attribute name="Name" value="DefaultEllipse"/>
    <attribute name="Type" value="Ellipse"/>
    <attribute name="GeometryItemName" value="DefaultEllipse"/>
    <list name="Coordinates">
     <attribute name="Coordinate" value="250, 200"/>
     <attribute name="Coordinate" value="270, 220"/>
    </list>
   </list>
   
   <!-- Ellipse Bottom (2nd) --> 
   <list name="DescriptorItem">
    <attribute name="Name" value="DefaultEllipse"/>
    <attribute name="Type" value="Ellipse"/>
    <attribute name="GeometryItemName" value="DefaultEllipse"/>
    <list name="Coordinates">
     <attribute name="Coordinate" value="250, 240"/>
     <attribute name="Coordinate" value="270, 260"/>
    </list>
   </list>        
   
   <!-- Line Above The 1st Ellipse -->    
   <list name="DescriptorItem">
    <attribute name="Name" value="DefaultLine"/>
    <attribute name="Type" value="Line"/>
    <attribute name="GeometryItemName" value="DefaultLine"/>
    <list name="Coordinates">
     <attribute name="Coordinate" value="260, 200"/>
     <attribute name="Coordinate" value="260, 190"/>
    </list>
   </list>
   
   <!-- Line Representing The Switch -->
   <list name="DescriptorItem">
    <attribute name="Name" value="DefaultLine"/>
    <attribute name="Type" value="Line"/>
    <attribute name="GeometryItemName" value="DefaultLine"/>
    <list name="Coordinates">
     <attribute name="Coordinate" value="260, 250"/>
     <attribute name="Coordinate" value="230, 230"/>
    </list>
   </list>
   
   <!-- Line Below The 2nd Ellipse-->
   <list name="DescriptorItem">
    <attribute name="Name" value="DefaultLine"/>
    <attribute name="Type" value="Line"/>
    <attribute name="GeometryItemName" value="DefaultLine"/>
    <list name="Coordinates">
     <attribute name="Coordinate" value="260, 260"/>
     <attribute name="Coordinate" value="260, 300"/>
    </list>
   </list>          
   
  </list> <!-- end of items -->
</list> <!-- end of descriptor -->

Define the Style Items

The required Style Items for the Geometry Items are fairly simple. Except for the ellipse style and the dotted line, all styles are based on the default format settings. Thus the Style Items look like this:

Example 3.12. Style Items for the Transducer

<!-- Rectangle -->
<list name="StyleItem">
 <attribute name="Name" value="DefaultRectangle"/>
 <attribute name="Type" value="Rectangle"/>
 <set name="Attributes">
  <set name="Fill"/>
  <set name="Border"/>
 </set>
</list>
  
<!-- Ellipse -->
<list name="StyleItem">
 <attribute name="Name" value="FilledEllipse"/>
 <attribute name="Type" value="Ellipse"/>
 <set name="Attributes">
  <set name="Fill">
   <attribute name="background" type="Color" value="black"/>
  </set>
  <set name="Border"/>
 </set>
</list> 
  
<!-- Polygon -->
<list name="StyleItem">
 <attribute name="Name" value="DefaultPolygon"/>
 <attribute name="Type" value="Polygon"/>
 <set name="Attributes">
  <set name="Fill"/>
  <set name="Border"/>
 </set>
</list> 
    
<!-- DefaultLine -->
<list name="StyleItem">
 <attribute name="Name" value="DefaultLine"/>
 <attribute name="Type" value="Line"/>
 <set name="Attributes">
  <set name="Stroke">
   <attribute name="style" value="Continuous"/>
   <attribute name="weight" type="Integer" value="1"/>
   <attribute name="color" type="Color" value="black"/>
  </set>
  <set name="MarkerBegin">
   <attribute name="type" value="invisible"/>
   <attribute name="size" type="Integer" value="50"/>
   <set name="fill"/>
    <set name="border"/>
  </set>
  <set name="MarkerEnd">
   <attribute name="type" value="invisible"/>
   <attribute name="size" type="Integer" value="50"/>
   <set name="fill"/>
    <set name="border"/>
   </set>
 </set>
</list>

<!-- Dotted Line -->
<list name="StyleItem">
 <attribute name="Name" value="DottedLine"/>
 <attribute name="Type" value="Line"/>
 <set name="Attributes">
  <set name="Stroke">
   <attribute name="style" value="dot"/>
   <attribute name="weight" type="Integer" value="1"/>
   <attribute name="color" type="Color" value="black"/>
  </set>
  <set name="MarkerBegin">
   <attribute name="type" value="invisible"/>
   <attribute name="size" type="Integer" value="50"/>
   <set name="fill"/>
   <set name="border"/>
  </set>
  <set name="MarkerEnd">
   <attribute name="type" value="invisible"/>
   <attribute name="size" type="Integer" value="50"/>
   <set name="fill"/>
   <set name="border"/>
  </set>
 </set>
</list>

Create the StyleDescriptor

With the StyleDescriptor we associate a StyleItem to a GeometryItem. This is done by observing the order of appearance of the Geometry Items.

Example 3.13. StyleDescriptor for the Transducer

<list name="StyleDescriptor">
 <attribute name="Name" value="TransducerStyle"/>
 <attribute name="Type" value="Composite"/>
 <list name="StyleItems">
  <attribute name="StyleItem" value="DottedLine"/>
  <attribute name="StyleItem" value="DefaultRectangle"/>
  <attribute name="StyleItem" value="DefaultLine"/>
  <attribute name="StyleItem" value="DefaultPolygon"/>      
  <attribute name="StyleItem" value="DefaultLine"/>
  <attribute name="StyleItem" value="FilledEllipse"/>
  <attribute name="StyleItem" value="FilledEllipse"/>
  <attribute name="StyleItem" value="DefaultLine"/>
  <attribute name="StyleItem" value="DefaultLine"/>
  <attribute name="StyleItem" value="DefaultLine"/>                
 </list>
</list>

Combine Style and Geometry

The last step is to create a new NodeElement entry in the elements.xml, where you combine the previously created Descriptor items. Such an entry looks like this:

Example 3.14. StyleDescriptor for the Transducer

<list name="NodeElement">
 <attribute name="Name" value="Transducer"/>
 <attribute name="Geometry" value="Transducer"/>
 <attribute name="Style" value="TransducerStyle"/>
</list>

In the application you should be able to reference the created Transducer Composite by using the ElementPool.

Example 3.15. Getting the Transducer Composite

ElementPool.get("Transducer");

When using the ElementPool and adding the Composite to a Repository control, the result might look like this:

Figure 3.7. Screenshot Transducer