Creating a Layout Definition File Template
This content is outdated and is no longer being maintained. It is provided as a courtesy for individuals who are still using these technologies. This page may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.
Developers who are interested in working with SmartArt graphics in XML can greatly speed the development of new SmartArt templates by starting with an existing template.
You can create a graphic that is similar to your final design by using an existing template, and then save the graphic, change the file’s .glox file extension to .zip, and examine the XML, which you can then customize. Do not decompress the directories. You can navigate the compressed .zip directories and make changes. When you are finished, rename the compressed .zip directory with the .glox extension.
When you use this technique, remember that you must change the layout uniqueID of the template so that it does not conflict with any existing layout template. The uniqueID is located in the LayoutHeader.xml file, which resides at CompressedFileName.glox\diagrams\LayoutHeader1.xml.
Find the uniqueID attribute in the <layoutDefHdr> tag in the LayoutHeader.xml file, and make it unique. Here is a simple example of a layout header:
The <cat type=”list” pri=”500” /> line indicates that the layout will have a priority of 500 in the Choose a SmartArt Graphic dialog box. The title and desc (description) values are displayed in the 2007 Office system program.
Simple Example Layout
The layout of the graphic is defined in the file CompressedFileName.glox\diagrams\Layout1.xml. For the following discussion of layout file structure, consider the following simplified code example.
The most important section for creating layouts begins with the <!—Root or top-level layout node.--> comment. Notice the <layoutNode> tag. Layout nodes contain information related to positioning and organizing the parts of a graphic.
Root Layout Node
The XML code that defines the basic structure of the graphic is contained in the root layout node. Additional layout nodes are added under the root node to create a hierarchical collection of nodes. When users create a new graphics by using this custom template, this hierarchy uses either data that users supply or default data to build the graphic.
The following example shows a simplified root layout node.
The <alg> tag specifies the algorithm that is used for the node. This provides the overall graphic layout. This example specifies a linear algorithm, which results in a graphic on a linear path. The <constrLst> tag in the example specifies the beginning of a constraint list. You use constraints to specify spacing, font size, and positioning values.
For more information about constraints, see Constraints.