You can download a sample presentation here.
So my last post told a little about what Smart-Art does. Smart-Art takes a bunch of data, which is basically a tree with pieces of text, for which it provides layout and rendering logic using a custom algorithm. For the 2007 Microsoft Office System Microsoft has been friendly enough to provide us with a whole bunch of different layouts which are grouped into collections such as Lists, Cycles or Matrices. The Smart-Art graphics that you find in Office are not Office trickery though, you can fully implement the same samples using WinZip and Notepad. To me that is just a nice opportunity for a company to create a cool Smart-Art graphics library, which using Open XML will be portable not only on the Windows platform but on any office platform supporting Open XML. How's that for increasing the number of great looking documents and presentations. If my personal experience with creating graphics is any measure for general developer crowds (I bet it is), most platforms could use a little smart added into their art :)
So how in this blog post I want to focus on how to create a simple Smart-Art based list, for which the end-result will be 100% Hello World compatible (note that the following image displays two unformatted rectangle shapes with text):
If you edit this graphic and add more data, which you can do from directly inside Office since it is a functioning sample, the layout engine kicks in making sure that the text fits in the vertical space assigned inside the document and that the text is centered like the rest. All of which is default behavior.
Not so smart, and not so much art…yet.
Every Smart-Art graphic is created from four distinct parts inside an Open XML package and if you would open a document with a graphic created from inside Microsoft Office you'd probably find a bunch of XML that would make you stare at in awe… before you close the editor again.
Basically the data section defines a bunch of points with connections between them. The layout file then takes this data and provides layout to them using a custom layout algorithm. This separation is one of those things that makes it easier to implement something like the feature in Microsoft Office where you right-click a Smart-Art graphic and choose to change its layout into something else, like in the table of graphics at the top of this post.
Same data, different layout. Next you'll find the colors part.
Same data, different layout and colors.
The last part is the Quick Styles part, it defines the style applied to the shapes.
Same data and layout, different quick style.
First we will discuss a really simple data part of the Smart-Art graphic. The data part defines a list of points and connections between those points. A point has a type, for instance the 'document' point which defines the first data item representing the entire drawing canvas or a 'node' which is a basic point which can hold data. Other more esoteric types which will be important are the transition points, more on those in a later blog post. The document point will specify which layout, quick style and color definition to use. The node points contain the text and custom formatting that is applied directly to a shape in the diagram outside of the layout, colors and quick style. This allows direct formatting that you apply to a shape in Microsoft Office to be maintained when switching the other parts like the layout. The following sample is a data list for the text 'Hello' and 'World' for the sample we will construct.
|
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<dgm:dataModel
xmlns:dgm="http://schemas.openxmlformats.org/drawingml/2006/diagram"
xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
<dgm:ptLst>
<dgm:pt modelId="1" type="doc">
<dgm:prSet
loTypeId="mylayout"
qsTypeId="mystyle"
csTypeId="mycolors" />
</dgm:pt>
<dgm:pt modelId="2" type="node">
<dgm:t>
<a:bodyPr />
<a:lstStyle />
<a:p>
<a:r>
<a:t>Hello</a:t>
</a:r>
</a:p>
</dgm:t>
</dgm:pt>
<dgm:pt modelId="3" type="node">
<dgm:t>
<a:bodyPr />
<a:lstStyle />
<a:p>
<a:r>
<a:t>World</a:t>
</a:r>
</a:p>
</dgm:t>
</dgm:pt>
</dgm:ptLst>
</dgm:dataModel> |
Because the quick style and color definition can be mostly empty, let's tackle them first. For styles you need to define a unique ID and at least one style label, which is later referenced layout part.
|
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<dgm:styleDef
xmlns:dgm="http://schemas.openxmlformats.org/drawingml/2006/diagram"
xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"
uniqueId="mystyle">
<dgm:styleLbl name="node0" />
</dgm:styleDef> |
Colors only need the unique ID.
|
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<dgm:colorsDef
xmlns:dgm="http://schemas.openxmlformats.org/drawingml/2006/diagram"
xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"
uniqueId="mycolors">
</dgm:colorsDef> |
The main task that we will be performing with the layout part is providing a simple layout algorithm. I will not go into too much detail here just yet, but I do want to show you a little of what you can expect in a layout definition. You basically have a root layout node, which can use XML elements such as forEach or if to provide a custom algorithm to layout it's children. The following sample has the root layout node defined just after the category list which defines the type of layout that you are defining. The layout node points to a style in the quick style part and provides two child elements. The alg element defines the layout algorithm to use, such as the linear algorithm used in the following sample. The linear layout is customized to run from top to bottom, and aligns children centered. Next you need to define which nodes the algorithm applies to. The sample uses forEach to select both child points in the data model, which should be of type 'node' according to the forEach. When such a child node is found (which it will given the sample data I provided) it should create a new layout node using a rounded rectangle as the shape, which will contain text taken from the data point to which the layout node applies.
|
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<dgm:layoutDef
xmlns:dgm="http://schemas.openxmlformats.org/drawingml/2006/diagram"
xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"
xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"
uniqueId="mylayout">
<dgm:title val="" />
<dgm:desc val="" />
<dgm:catLst>
<dgm:cat type="list" pri="3000" />
</dgm:catLst>
<dgm:layoutNode name="linear" styleLbl="node0">
<dgm:alg type="lin">
<dgm:param type="linDir" val="fromT" />
<dgm:param type="vertAlign" val="mid" />
</dgm:alg>
<dgm:forEach axis="ch" ptType="node">
<dgm:layoutNode name="test" styleLbl="node0">
<dgm:shape type="roundRect" r:blip="" />
<dgm:alg type="tx" />
</dgm:layoutNode>
</dgm:forEach>
</dgm:layoutNode>
</dgm:layoutDef> |
That's it, for the Hello World sample. You can take the download from this post and open it in PowerPoint 2007, change the text and add the word 'Again' and be amazed that the layout (center and linear) is maintained. You can also check the shape by applying some coloring, which the current sample doesn't discuss yet.