Jul 17 2007

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:

.dc2HeaderDocument
{
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:

<mx:Application …. added=”displayObjectAdded(event)” ….>

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.

Leave a Reply