Developing Stencils

The following screenshots are taken from a GNU/Linux desktop using Pencil to create the prototype GUI for a Windows application and the Pencil website mockups

Stencil Collection Structure and File Format

Table of Contents:

Stencil Collection Structure
Format of the Definition.xml

Stencil Collection Structure

A stencil collection is usually distributed as a single ZIP archive containing all related files for that collection.

This collection ZIP archive has one main XML file named (exactly) Definition.xml and other optional files or sub-directories containing supporting files for the main XML (mainly for icon files).

The Definition.xml file name is case-sensitive and is the only required file for a collection. All other files can be omitted when not needed.

Format of the Definition.xml

Each Definition.xml file defines a collection of stencils by providing collection information and all stencil definitions. This is just a standard XML file that can be created by virtually any text editor you have in your system.

General Structure

The Definition.xml file has the following structure:

Definition.xml file structure
Figure 1. The Definition.xml file general structure.

The following list summarizes the format:

The out-most tag is <Shapes> with the namespace URI is http://www.evolus.vn/Namespace/Pencil
Properties of the collection are specified by the <Shapes> node's attributes: id, displayName, description, author and url
Each shape in the collection is defined in a separate <Shape> tag placed right under the root <Shapes> tag. Please refer the next section for details on definition structure for a shape.

Defining a shape using the <Shape> tag

Each shape in a collection is defined in a <Shape> tag with the following structure:

The <Shape> tag structure
Figure 2. The <Shape> tag structure

Specification of Tags in the Definition.xml

The following table describe all tags used in the Definition.xml file.


Tag Name	Attributes	Child Nodes	Purposes
Shapes	id The unique id of the collection displayName The display name description More description of the collection author Name of the authors url URL of the online resource	Shape	Defining a collection of stencils
Shape	id The unique id of the shape (in the current collection) displayName The display name of the shape icon relative path to the icon for the shape	Properties Behaviors Actions Content	Defining a stencil
Properties		PropertyGroup	Container tag holding all properties of a stencil
PropertyGroup	name The name of the property group	Property	Container tag to logically divide property into named group.
Property	name The property name displayName The property display name type The property data type. See Pencil Property Types. p:* Custom attributes in the Pencil's namespace to provide more constraints on property value. For a list of posible attributes of a specific property type, see Pencil Property Types.		Defining a stencil property
Behaviors		For	Container tag holding all behaviors of a stencil
For	ref id of the SVG element in the content section that this behavior is about.	predefined behavior tags. See Pencil Predefined Behaviors.	Defining a set of behaviors that govern a specific SVG element. The ref attribure specifies which SVG element in the content section is governed by the current behavior set.
Actions		Action	Container tag holding all available external actions that the current stencil can accept.
Action	id The unique id of the action (in the current shape) displayName The display name of the action.	Impl	Defining an external action.
Impl			Holding the Javascript implementation of the action.
Content		SVG elements	Defining the stencil look by mean of SVG elements.