Home > debugging, flex > Identifying visual elements in Flex

Identifying visual elements in Flex

I recently started working on a project to internationalize a large Flex App. One of the problems of internationalizing UIs is that in different languages the same text might grow not only horizontally but also vertically (e.g.: In Chinese the default height is often 16 pixels and not 10 or 12 as in most European languages). So if you have an application that didn’t take that into account (my case) you need to rethink the layout to accommodate this expansion. But my very first problem when I started to look into that application was that I had no clue where where each visual element is defined and:

  • the application is BIG
  • The guys that wrote it are on a time zone 10 hours away

So I was basically on my own to identify visual elements, figure out what the actual layout is and where it is defined.

So I came up with this trick to get a sense on how this application is built:

In the capture phase, the visual events in AS3 are dispatched from the root ancestor to the target. This means that the Application container receive all events. So I registered a listener on the Application container that analyzes these events, finds the actual target and then displays the entire display stack that contains the target object. This helped me identify what AS class represents which visual element and in what container this element is placed.

Here’s is my little bit of code that does this:

public function initTrace(app:WindowedApplication):void {
    app.addEventListener(MouseEvent.MIDDLE_CLICK,middleClickHandler,true);
}
public function middleClickHandler(event:MouseEvent) {
    var tm:Object = event.target;
    var tab:String = "";
    traceObj(tab,tm);
    var tmParent:DisplayObject = tm as DisplayObject;
    while (tmParent != null) {
        tab += "  ";
        traceObj(tab,tmParent);
        tmParent = tmParent.parent;
    }
}
public function traceObj(tab:String,obj:Object):void {
    trace(tab + getQualifiedClassName(obj));
    if (obj is UIComponent) {
        var tmUI:UIComponent = obj as UIComponent;
        trace(tab+tmUI.getStyle("fontFamily") + ":" + tmUI.getStyle("fontSize"));
    }
}

You just need to call the initTrace method on Application.applicationComplete:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" applicationComplete="initTrace(this)">
Categories: debugging, flex Tags:
  1. No comments yet.
  1. April 6th, 2010 at 14:47 | #1