Custom CSS properties in Flex

So as some of you know, I've been knee-deep in Adobe-land lately. I've been working concurrently in Flash CS3 and Flex/AS3 projects. One of the aspects of the Flex framework which I still need to wrap my head around is themes / skins / states / css for Flex. All the samples online usually show sample code, but only for styling/theming built-in Flex Components.

In my case I'm building a custom "Buddy List" item renderer, which extends the TreeItemRenderer class in Flex. Out of the box, Flex UI components support CSS Styles (the base class UIComponent does). Since my BuddyListTreeItemRenderer extends UIComponent, I can assign it a style. However, since if you're writing a custom component, I have to manually load my style values and assign them to my UI children.

Not having wrapped my head around how to define a simple "state" for my component, I decided to try and just create some CSS properties and hope that I can read them as a key-value pair. I know, I know, you l337 CSS and Flex masters might be getting flustered right now, but what I found is that I can pass custom properties in CSS, as long as the 'value' is a String.

So, for example:

BuddyListItem {

myFooTextColor : 0xFF0000;

}

doesn't work, But this does:

BuddyListItem {

myFooTextColor : "0xFF0000";

}

All that's left is to pick up the style in my code:

var fooValue:Number = this.getStyle("myFooTextColor");

In most cases, AS3 will cast the value correctly for you.

So I know this is not the ideal solution, and if anyone can provide me a better alternative (please!), I'd really appreciate it!