Toggling buttons in a ToggleButtonBar control in Flex

The following example shows how you can toggle buttons in a Flex ToggleButtonBar control by setting the Boolean toggleOnClick property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/21/toggling-buttons-in-a-togglebuttonbar-control-in-flex/ -->
<mx:Application name="ToggleButtonBar_toggleOnClick_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="toggleOnClick:">
                <mx:CheckBox id="checkBox" />
            </mx:FormItem>
            <mx:FormItem label="selectedIndex:">
                <mx:Label text="{toggleButtonBar.selectedIndex}" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

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

    <mx:ViewStack id="viewStack"
            width="100%"
            height="100%">
        <mx:VBox label="Red" backgroundColor="red" />
        <mx:VBox label="Orange" backgroundColor="haloOrange" />
        <mx:VBox label="Yellow" backgroundColor="yellow" />
        <mx:VBox label="Green" backgroundColor="haloGreen" />
        <mx:VBox label="Blue" backgroundColor="haloBlue" />
    </mx:ViewStack>

    <mx:Label text="{Capabilities.version}" />

</mx:Application>

View source is enabled in the following example.

Tagged as: toggleOnClick