Developer Wiki

In-depth guide for developers to create stencils and templates

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.