WARNING: This blog contains random thoughts on technology, software engineering, and general all-round nerdery. Read at your own risk. Nerd is contagious.

Thursday, November 08, 2007

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!

Labels:

4 Comments:

Blogger dorkie dork from dorktown said...

riz,

hey, will you contact me at my email. i think we may be neighbors.

7:55 PM

 
Blogger riz said...

dorkie dork,

I have no way to access your email...

2:53 PM

 
Anonymous Anonymous said...

hi, my email is my username, all one word, at gmail.com

11:18 PM

 
Blogger julien said...

MORE useless comment !!!

yeah.

no, more seriously,:

About this getStyle() function, do you know where to define a custom css property so that its linked in the autoCompletion ?

6:41 AM

 

Post a Comment

Links to this post:

Create a Link

<< Home