Z-Order of Components in a Flex Canvas
This isn't a blog about Flex bugs - honest. But I found another yesterday.
If you have a bunch of components in a Flex Canvas, and show/hide/animate them with states and transitions, the components can change z-order on you without warning. I had a pernicious problem today with something like:
<mx:Canvas> <mx:Panel id='content'/> <mx:Panel id='tool_palette'/> </mx:Canvas>
Where content started out behind tool_palette, but when the latter got hidden (using a RemoveChild node in a state), and reappeared (by transitioning back) it was shown behind the content panel. Clearly a problem.
The solution I found was to separate the objects into two canvases:
<mx:Canvas> <mx:Canvas height="100%" width="100%"> <mx:Panel id='content'/> </mx:Canvas> <mx:Canvas height="100%" width="100%"> <mx:Panel id='tool_palette'/> </mx:Canvas> </mx:Canvas>
which is a bit of a hack, but works. This is the first time I've missed old-flash's z-depth model.