Creating a vertical ToggleButtonBar in Flex

The following example creates a ToggleButtonBar control in Flex and sets its toggleOnClick property to true.

According to the Flex 2.0.1 documentation:

If you set the toggleOnClick property of the ToggleButtonBar container to true, selecting the currently selected button deselects it. By default the toggleOnClick property is set to false.

You can check out the different behaviors of the toggleOnClick property by selecting or deselecting the check box in the upper left corner. Likewise, you can change the ToggleButtonBar control’s direction property by changing the selected value in the combo box in the upper-right corner. If the toggleOnClick property is set to true and you deselect a button in the ToggleButtonBar control, the ToggleButtonBar control’s selectedIndex property is set to -1 and the Flex application sets the ViewStack container’s visible property to false.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/22/creating-a-vertical-togglebuttonbar-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="toggleOnClick"
                selected="true" />

        <mx:Label text="selectedIndex: {toggleButtonBar.selectedIndex}"
                textAlign="center"
                width="100%" />

        <mx:Label text="direction:" />
        <mx:ComboBox id="comboBox"
                change="toggleButtonBar.direction = comboBox.selectedLabel">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="horizontal" />
                    <mx:Object label="vertical" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>
    </mx:ApplicationControlBar>

    <mx:HBox>
        <mx:ToggleButtonBar id="toggleButtonBar"
                dataProvider="{viewStack}"
                toggleOnClick="{checkBox.selected}" />

        <mx:ViewStack id="viewStack"
                width="160"
                height="120"
                visible="{toggleButtonBar.selectedIndex > -1}">
            <mx:Canvas label="Red" backgroundColor="red" />
            <mx:Canvas label="Orange" backgroundColor="haloOrange" />
            <mx:Canvas label="Yellow" backgroundColor="yellow" />
            <mx:Canvas label="Green" backgroundColor="haloGreen" />
            <mx:Canvas label="Blue" backgroundColor="haloBlue" />
        </mx:ViewStack>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

Tagged as: toggleOnClick