Kyle Hayes

Tech, Musings, Life

Layering Components in Your Flex App

| Comments

I asked Ted (as well as pulsed the public Pownce) today if there was a way to make an image component show up behind another component; similar to the functionality of “Send to Back” in Illustrator without the explicit instruction to do so. Happily, he responded that this was definitely possible and to use the DisplayList API. He said that children of a displayObject are ordered by index in Z order. When you addChild, they are added to the front.

You can also use addChildAt to reposition them. With this information, I asked him if you could only reposition at runtime (which I could not have imagined being the case as Adobe just doesn’t overlook things like this). Surely he responded that MXML, being the hierarchal language that it is, it sets the components in their Z order by order of your component tags.

For example:

`

`

The button is on top of the panel which is on top of the image, meaning that the image is in the “background” (though not the actual background of Application as set forth by the backgroundImage attribute).

Here are some links that Ted provided to learn more about the DisplayList API:

Comments