DepthToggleButtonBar - a simple custom component example
I recently needed a component very similar to the ToggleButtonBar that is provided by Flex. The seemingly minor difference was that the selected button needed to be placed above the others in terms of z-index. I assumed I would be able to subclass ToggleButtonBar and tweak it to my needs but ran into a problem: the buttons are arranged horizontally/vertically according to their child index. This meant even though I could change z-order when a button was clicked, it was then moved to the right end of the row of buttons on the next render update.
In response I created my own component that would do exactly what I needed and have decided to post the base functionality here. I have added copious amounts of comments to the code so I won’t bother trying to explain it here. Questions and comments go in the form below. :)
Enjoy!
on May 19th, 2008 at 8:30 am
Great Component! The only issue I can see is that when one item is selected, the z-order of other buttons should be reset. For example, if I click the third button, then click the first again, it shows both as being “on top”.
on May 19th, 2008 at 8:37 am
Thanks Nick. You could certainly do what you mentioned very easily, it just wasn’t required/desired for my component so I didn’t implement it. You could replace the click handler with something like this:
for( var i:int = 0; i < buttonList.length; i++ ){
var btn:Button = buttonList[i];
btn.selected = false;
setChildIndex( btn, 0 );
}
setChildIndex( DisplayObject( event.target ), numChildren - 1 );
on June 6th, 2008 at 8:47 pm
Where does he get those wonderful toys!