Your First Shape
Let's begin with a collection contains a simple shape that provide a text Hello World. This shape contains Properties definition, elements definition in the Content section and the behaviors that make content changed to property values.
<?xml version="1.0" encoding="UTF-8"?>
<Shapes xmlns="http://www.evolus.vn/Namespace/Pencil"
xmlns:p="http://www.evolus.vn/Namespace/Pencil"
xmlns:svg="http://www.w3.org/2000/svg"
id="collection" displayName="My Collection"
description="My First Collection" author="author">
<Shape id="helloworld" displayName="Hello World"
icon="Icons/plain-text.png">
<Properties>
<PropertyGroup name="Text">
<Property name="label" displayName="Label"
type="PlainText">Hello World</Property>
<Property name="textColor" displayName="Color"
type="Color">#000000ff</Property>
<Property name="textFont"
displayName="Font"
type="Font">Arial|normal|normal|13px</Property>
</PropertyGroup>
</Properties>
<Behaviors>
<For ref="text">
<TextContent>$label</TextContent>
<Fill>$textColor</Fill>
<Font>$textFont</Font>
<BoxFit>
<Arg>new Bound(0, 0, 100, 12)</Arg>
<Arg>new Alignment(0, 1)</Arg>
</BoxFit>
</For>
</Behaviors>
<p:Content xmlns:p="http://www.evolus.vn/Namespace/Pencil"
xmlns="http://www.w3.org/2000/svg">
<text id="text" />
</p:Content>
</Shape>
</Shapes>
Each child node in <For></For> is an
behavior that defines how content should be changed according to
the properties. More details about can be found at the Behavior Reference.
The $label variable is used in the TextContent
behavior in this example shows you the way properties can be
referenced in the input arguments for behaviors.