Hack to make layout borders visible in Flex

I put together this quick hack to show the borders of all the containers in a flex application – I found myself wishing for something like firebug’s inspector for flex while spending way too much time debugging a pixel precise layout this week This biggest problem for me was figuring out which control or container was contributing padding to the layout in places where the alignment was off, and it appeared that some of my styles in an embedded css file weren’t working.

The code inserts a canvas over the contents of the application, disables its mouse events (making it transparent to the app/user) and then listens for mouse move events on the Application object. Each time the mouse moves, it queries the display list to find out what’s under the mouse, then draws outlines around that control and all of its parents.

There’s obviously a lot more that could be added to this – like shading padded regions, having a tool tip display which control you’re over along with attributes, but as I don’t know when I’ll have the time (and more importantly the inclination) to make those enhancements happen, I’m putting it up now.

You can right click on the example to view the source. If the embed isn’t working, you can go here where all the flash player autoinstall magic will happen.

Note: this will only work in your application if your root application object has absolute layout because of the way flex containers work- i.e. only containers with absolute layout allow overlapping controls. I had some code that attempted to reparent the children of the application if it had vertical or horizontal layout, but the guts of flex were throwing an error so that code is commented out presently.

Leave a Reply

Your email address will not be published. Required fields are marked *