Skip to main content

Wouter

Go Search
Home
Contact Me
  

Wouter > Posts > When Smart Meets Art, Smart-Art Explained 101
When Smart Meets Art, Smart-Art Explained 101

With all the tension around the ISO ballot rising I thought I would be a good idea not to focus on the political but on the technical aspects of Open XML. And for that I choose to talk a little about the black art of creating Smart Art graphics by hand. Not by going as low as writing ones and zeros, but a few steps higher in the chain, the XML format for Smart-Art, or DrawingML diagrams as they are formally called.

Before going into a simple Smart-Art (sounds better than 'diagram' does it not?) let me give you a small rundown of what you can do with DrawingML as a whole, of course in one of those smart pieces of art:

So a few obvious things like pictures, but perhaps also elements which you do not expect such as text or tables. A good example of the power of DrawingML is found in the table model. Much discussion about it in the Dutch ISO committee, perhaps also in others. WordprocessingML has a table model, SpreadsheetML has one, so why would DrawingML need yet another? Basically DrawingML is, well, about drawing stuff… You could for instance add a DrawingML table to a presentation and add text to it as well, to come up with the following picture:

Now a table in WordprocessingML has little use for effects such as reflection or custom bevel borders on the cells, for SpreadsheetML it would totally kill the highly optimized tables (the spreadsheet is a huge table), so the main type of document to benefit are the mostly graphical presentations. Not that it will never be handy, just less common. Text has the same thing. It has been reported that WordprocessingML supports text, SpreadsheetML optimizes text using a list of unique strings to prevent storing repetitive items, and a presentation might want to use cool looking graphics for text instead:

So you see, DrawingML is all about graphics, but let's examine Smart-Art a little more. Take the first picture in this post with all the circles revolving around the center item. Ever wanted to create such a layout by hand? I know I have, and usually I either get totally bummed by alignment issues, or just never start doing it like that at all. This is where Smart-Art comes to play. Smart-Art defines a model for laying out shapes using custom logic defined in XML. Some of the cool stuff includes the ability to define all the properties such as color, font, reflection from inside the Smart-Art definition, and the ability to take that developer-defined layout and allow it to be customized by the end-user. Take a look at the following picture to see what I mean. I took the same graphic as found above, added a few extra items (the layout logic working to make sure everything aligns) and then I replaced the circles with other shapes, customizing the built-in Smart-Art definition.

So the developer of a Smart-Art graphic can define the initial layout logic and format (color, shapes, fonts etc…) and then I can alter that to create enhanced versions of that graphic, whilst retaining the layout logic! Cool stuff!

My next post will examine the just about simplest Smart-Art you can create. Note that the XML looks super complex, but once you get down to it, it's not that hard.

Comments

There are no comments yet for this post.
Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Name (required) *


Your Url

Type the Web address: (Click here to test)  

Type the description: 

Comments (required) *

Attachments