DepthToggleButtonBar – a simple custom component example

05.19.08Posted by Ben in FlexComments Off

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.

Example and source.

Enjoy!

Both comments and pings are currently closed.

Nick

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”.
Ben

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 );
http://www.triadfug.org Shawn Y

Where does he get those wonderful toys!