Z-Order of Components in a Flex Canvas

3 07 2007

This blog has moved to www.djangoandflex.org.uk

This isn’t a blog about Flex bugs – honestly. But found another yesterday.

If you do 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.


Actions

Information

Leave a comment