In this section, you will learn how to create a Style for a visual element (VisualNode and VisualEdge). A Style is used in conjunction with a Geometry to complete a visual element's graphical representation in a view. While geometries are used for shapes, styles are used for colors, line weights, line strokes and fonts.

Once you have understood how Items are configured and referenced from composite Descriptors, you will automatically understand how Style configurations work. We therefore recommend that you read the previous Geometry sections so that you may understand the Style xml structures more easily.

The following xml fragment is part of the file named styles.xml. Here you should analyze its contents and examine the StyleItem named “AppLabelStyleItem” and the composite (StyleDescriptor) named “AppLabelStyleDescriptor”.

...

<list name="StyleItem">
  <attribute name="Name" value="AppLabelStyleItem"/>
  <attribute name="Type" value="Label"/>
  <set name="Attributes">
    <set name="Fill">
      <attribute name="style" value="solid"/>
      <attribute name="background" type="Color" value="86,130,196"/>
    </set>
    <set name="Font">
      <attribute name="size" type="Integer" value="12"/>
      <attribute name="family" value="Verdana"/>
      <attribute name="color" type="Color" value="white"/>
      <attribute name="weight" value="bold"/>
    </set>
    <set name="Border">
      <attribute name="color" type="Color" value="102, 102, 102"/>
      <attribute name="round edges" type="Boolean" value="true"/>
    </set>      
  </set>
</list>

...
  
<list name="StyleDescriptor">
  <attribute name="Name" value="AppLabelStyleDescriptor" />
  <attribute name="Type" value="Composite" />
  <list name="DescriptorItems">
    <set name="DescriptorItem">
      <attribute name="StyleItem" value="AppLabelStyleItem"/>
    </set> 
    <set name="DescriptorItem">
      <attribute name="StyleItem" value="AppCLabelStyleItem"/>
    </set>           
  </list>
</list>

...

Elaborate details about configuring StyleItem elements can be found in the Elements chapter inside the Framework Manual distributed separately. We strongly recommend that you read that chapter now to gain an in-depth understanding of all Style configuration possibilities available to you.