Kevin Hoyt

Inspired by my friend Waldo Smeet’s blog entry on using 9-slice and Flash 8 to skin Flex 2 components, it occurred to me that not everybody wants to use the Flash authoring tool. In fact, Flex was created for those enterprise developers who appreciated the power of a ubiquitous runtime, but who weren’t particularly interested in mastering timelines, keyframes, symbols and the myriad of other designer-oriented aspects of the authoring tool. Lucky for us, Flex 2 also includes a very impressive programmatic skinning feature. That’s right, if you can draw it using the Drawing API (which I might remind you has become incredibly powerful with Flash 8), then you can use it as a skin.

The first thing you need to do when creating a programmatic skin is to choose a base class from which to extend. There are three to choose from (ProgrammaticSkin, Border and RectBorder) based on your particular requirements. The next step is to override the updateDisplayList() method. It’s here where you’ll draw whatever it is that you want your skin to look like. Of course not all skins always carry the same appearance, sometimes the skin changes based on a particular state. By checking on the name of the skin that is being requested (through an inherited property of the skin classes), you can change what it is your drawing at runtime.

It is also possible to look up the parent component to further customize your skin. Using this ability, you can create one skin class, or a parent skin class that leverage others, to encompass all the different states of all the different controls you are using in your entire application. In the case of the Service Manager skin, I wanted to have the skewed rectangular shape blend in with the rest of the application. This meant determining the if the header being drawn was the first, last, or somewhere in-between. Armed with this information, we can account for headers that reach into the main user interface.

You might think that there is something tricky that comes next. Certainly it couldn’t be as easy as a little AS3 subclass? Indeed, if you’re using Flex Builder, that’s all there is to it. The last step is simply to assign the class to the skin style properties. In classic Flex fashion, this is typically done in a CSS file. Where you might generally use “font-size: 10;” as a style, here there’s a little twist on the syntax. You must tell the style what class you are using through a ClassReference entry which takes the form of “upSkin: ClassReference( “ServiceManagerSkins” );”. As you look through the API reference you’ll see many “xxxSkin” style properties - those are all the skins you can use (programmatically or otherwise).

As somebody who really likes to customize the look of his applications, the new skinning features in Flex 2 really opens up the possibilities. It should go without saying that there’s a substantial number of new style properties alone, so skinning may often be overkill in many cases. And all the other features? What’s not to love about the entire line-up? The code for my skinning example is attached, and as usual here’s a screenshot of the results.

This entry was posted on Friday, February 3rd, 2006 at 8:24 pm and is filed under Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.