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.
Comments
Hi Ian
I just saw your blog from the Django site. I'll keep an eye on it to see what you are working on. I've been playing with Flex 2 (and soon, v3) doing db front-ends. I've gone through a few books, including Flexible Rails and Training from the Source. They have been relatively thorough, but the "proper" way of building db apps with Flex has been somewhat tedious - as compared to other frameworks like Delphi or MS Access. I'm hoping Flex 3 makes development easier in that regard.
I'll try to chip in if I have any ideas.
Posted by: alex | July 5, 2007 01:32 PM
Thanks.
I think db front ends is going to be much more challenging in Flex (even Flex3/AIR) than Access/Delphi, because the latter were built for that from the ground up.
I've not done much with CRUD-style functionality from Flex, I'm typically using Flex to provide front-ends to web-apps, so any inspiration or words of wisdom on db-front ends would be very much appreciated!
Posted by: Ian | July 5, 2007 02:58 PM
Most of my career has been spent hooking into db's (edit screens, master-details, reporting), so I really like the change of pace Flex and Flash give me. I'll look forward to reading about the kinds of apps you put together...
Posted by: alex | July 5, 2007 03:09 PM
What about this.??
public function bringTop():void {
if(parent != null) {
parent.setChildIndex(this,parent.numChildren - 1);
}
}
Posted by: luchyx | July 5, 2007 06:53 PM
Thanks luchyx - equally hacky and equally effective!
I had another play with this to see if I could replicate the bug in as simple a block of code as possible, to do a bug report, but it seems that it is quite intermittent and dependent on silly things like the style sheet. I don't have a lot of time to mess about, so I think the hack solution will have to stand.
Posted by: Ian | July 9, 2007 12:43 AM