I was asked recently if you could move a child component in one container out of that container and above another container. You know what I said? "Easy" ...just like time travel.
The cool thing about CSS in HTML is that you can specify negative values and the content will move to those values. So you can have a div with a image inside of the div and specify negative coordinates to move the image over and out of the div. You can do the same thing in Flex. Just like in HTML we need to keep the z index or stacking order of our content in mind.
We set the clipContent property of the Canvas container to false and we can move the child component anywhere we like. If we want our child component to be above other components and containers they must be ordered after other other containers in the MXML source code. The way the Flex framework works, the last item in the source code added to the display list is stacked above other items. Like a stack of paper, each mxml container is stacked in the order the are listed from top to bottom in the mxml source code. Just look at the example code. Try moving the first canvas code after the second canvas. See. See what happens. I told you it would do that. Why didnt you listen? You never listen to me anymore. All I do is cook and clean up after you. It's all about you. All you think of is yourself.
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
-
-
<mx:Canvas x="91" y="10" width="338" height="65" backgroundColor="#004080">
-
-
<!-- The lower the mxml tag in the source the higher the z order. -->
-
<!-- Like stacking paper in a pile whatever is added last to the pile is added on top. -->
-
<mx:Canvas x="91" y="74" width="200" height="200" backgroundColor="#FF0000" clipContent="false">
-
<mx:Image x="21" y="-10" width="100" height="100">
-
<mx:source>http://www.drumbeatinsight.com/images/dndTreeBox2.jpg</mx:source>
-
</mx:Image>
-
</mx:Canvas>
-
-
</mx:Application>
Content clipped and outside of canvas bounds (as shown in design view and browser):
Content not clipped and outside of canvas bounds (as shown in browser):
Update! Another method you can use to place the content above the chrome is to set the includeInLayout property to false of the child components. See the Icon Component aka Preloader Component for an implementation of this behavior.
thanks for the tip on clipContent!
Any tips on how to control the zIndex programatically?
@Karl - That's a good question...
@Karl You can try to reorder the children with addChildAt and remove Child to reorder them
Great tip! You saved me a lot of work :0)
To reoder the children you can use the swapChildren method.
[...] to pass the Label… I was ready to begin when I read about the includeInLayout property (in judah’s blog!). Now I have what I need and - better! - no [...]
This tip was very useful.
Like what you mentioned, I just had to re-order my MXML declaration to fix the problem.
Thank you very much!
Really nice tip.
twas helpful.
Thanks!