Flex tip: make your UIComponents announce themselves
I work a lot with Adobe’s Flex these days. The more I use it, the more I like it.
Here’s a neat little trick for those of you who also use Flex: Every single UI element is styled via entries in a global CSS file and the UI elements pick the correct style via “styleName” properties. So, inside the CSS, you’ll find tons of sections like this one:
{
font-weight:bold;
color:#339933;
font-size:21;
}
And that dc2HeaderDocument is used as a styleName on some UI element. Just recently a UI designer started to work on the CSS-file to make it compliant with the design-document. But how the heck is he supposed to know which UI element uses which style? That would require looking through the *.as/*.mxml sources and identifying the correct relationship between source and presentation.
After some fiddling today I came up with a much more elegant solution to this problem.
In my main mx:Application I register an event handler for the “added” event. The docs say that this event is dispatched “when a display object is added to the display list”. Inside the event handler I check if the added object is a sub-class of UIComponent and if it is the case, then I set the UIComponent’s toolTip property to the UIComponent’s styleName property. This means that every single item that is added to the stage will get a toolTip that represents the styleName used for the UIComponent. Just hover over an item and it will identify itself.
Here’s what I had to do:
…
public function displayObjectAdded(event : Event) : void
{
if(event.target is UIComponent) {
event.target.toolTip =
event.target.styleName?event.target.styleName:”no style”;
}
}
Now UI designer loads the Flex application, hovers over the item that needs to be fixed and immediately knows what CSS-entry to change.
