Hide a Button in a ButtonBar - actionscript-3

Question

I was wondering if there is any way you hide a particular button in a ButtonBar. According to this answer (and the link provided in the second answer) Disable individual buttons in a buttonbar I need to use the getChildAt method of the ButtonBar, but when I do that I get the custom skin object and not the Button object. I was wondering how I could get access to the Button object.
Thanks!

Answer 1

Under the assumption that all buttons in your button bar will be rendered at the same time and you won't need scrollbars...
With a Spark ButtonBar, you can access the skin part directly to get access to a button. Conceptually something like this:
var button : Button = mySparkButtonBarInstance.dataGroup.getElementAt(SomeIndex);
button.visible = false; // or true
button.includeInLayout = false; // or true
This won't work if your ButtonBar can make use of Virtual Layouts and requires scrolling.
Edit: Here is working code demonstrating this technique:
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
import mx.core.IVisualElement;
protected function button1_clickHandler(event:MouseEvent):void
{
trace(buttonBar.dataGroup.getElementAt(0));
var button :IVisualElement = buttonBar.dataGroup.getElementAt(0);
button.visible = false; // or true
button.includeInLayout = false; // or true }
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingTop="20"/>
</s:layout>
<s:ButtonBar id="buttonBar">
<mx:ArrayCollection>
<fx:String>Flash</fx:String>
<fx:String>Director</fx:String>
<fx:String>Dreamweaver</fx:String>
<fx:String>ColdFusion</fx:String>
</mx:ArrayCollection>
</s:ButtonBar>
<s:Button label="Remove" click="button1_clickHandler(event)" />
</s:WindowedApplication>