Display Element borders in Flex App?

Question

Is there a way to put borders around the (MXML) elements of a Flex application? I'm picturing something similar to what Firebug does for HTML with the Inspect button (see http://getfirebug.com/html and search for "inspect" to see what I mean).

The reason for doing this is that I'm having some trouble with the layout.

Answer 1

Just as I was about to post this I thought of using the Design view of the mxml editor in Flex Builder 3. That does more or less what I wanted. Any other suggestions?

Answer 2

You can try "Kap Inspect", it's probably the thing closest to firebug in Flex enviroment.

Check out the demo here: http://lab.kapit.fr/demo/kapinspect/prod/index.html

And download from here: http://lab.kapit.fr/display/kapinspect/Kap+Inspect

Answer 3

I've done this several times, to figure out layout issues, but not from MXML.

In AS you can draw a rectangle in the given components' graphics layer.

One approach would be to create a listener for the parenting MXML components creationComplete event, and draw your rectangles there - you have to wait until everything has completed instantiation and measurement to make sure you have the correct dimensions.

You'll also want to create a resize listener, if your app is resizable.

Something, loosely, like this:

private function creationCompleteListener():void
{
    drawRectanglesAroundDisplayElements();
}

private function drawRectanglesAroundDisplayElements():void
{
    for each(var displayElement:DisplayObject in displayList)
    {
        var graphicsLayer:Graphics = displayElement.graphics;
        graphicsLayer.lineStyle(1,0xFF0000);
        graphicsLayer.drawRect(0,0,displayElement.width, displayElement.height);
    }
}

That'll run through all of the display objects, including DisplayObjectContainer objects, and put a 1px red border around them.

You may prefer to highlight only certain types of display object, and if so, you can filter by checking the given DisplayObject's name, or datatype.

Sometimes I'll add in a fill with a semi-transparent background, as well, for certain objects. I find that overlapping backgrounds can be easier to see than intersecting lines (of course, that's often not practicable).

For example, if you wanted to give all VBoxes a transparent blue bg, as well as a red outline, you could modify the above like so:

private function drawRectanglesAroundDisplayElements():void
{
    for each(var displayElement:DisplayObject in displayList)
    {
        var graphicsLayer:Graphics = displayElement.graphics;

        if(displayElement is VBox)
        {
            graphicsLayer.beginFill(0x0000FF,.3);
            graphicsLayer.drawRect(0,0,displayElement.width, displayElement.height);
            graphicsLayer.endFill();
        }

        graphicsLayer.lineStyle(1,0xFF0000);
        graphicsLayer.drawRect(0,0,displayElement.width, displayElement.height);
    }
}

Hope that helps.

Answer 4

FlexSpy is another tool that lets you navigate your UI and inspect properties.