Flex Examples » ToggleButtonBar http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Toggling buttons in a ToggleButtonBar control in Flex http://blog.flexexamples.com/2009/01/21/toggling-buttons-in-a-togglebuttonbar-control-in-flex/ http://blog.flexexamples.com/2009/01/21/toggling-buttons-in-a-togglebuttonbar-control-in-flex/#comments Thu, 22 Jan 2009 07:58:49 +0000 Peter deHaan http://blog.flexexamples.com/2009/01/21/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 [...]]]> 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.

 
]]> http://blog.flexexamples.com/2009/01/21/toggling-buttons-in-a-togglebuttonbar-control-in-flex/feed/ 4 Setting text styles for a selected button in a ToggleButtonBar control in Flex http://blog.flexexamples.com/2008/11/08/setting-text-styles-for-a-selected-button-in-a-togglebuttonbar-control-in-flex/ http://blog.flexexamples.com/2008/11/08/setting-text-styles-for-a-selected-button-in-a-togglebuttonbar-control-in-flex/#comments Sun, 09 Nov 2008 05:12:10 +0000 Peter deHaan http://blog.flexexamples.com/2008/11/08/setting-text-styles-for-a-selected-button-in-a-togglebuttonbar-control-in-flex/ The following example shows how you can set the text color for the selected button in a Flex ToggleButtonBar control by setting the selectedButtonTextStyleName style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/11/08/setting-text-styles-for-a-selected-button-in-a-togglebuttonbar-control-in-flex/ --> <mx:Application name="ToggleButtonBar_selectedButtonTextStyleName_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> .mySelectedButtonTextStyleName { color: haloBlue; } </mx:Style> <mx:Array [...]]]> The following example shows how you can set the text color for the selected button in a Flex ToggleButtonBar control by setting the selectedButtonTextStyleName style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/11/08/setting-text-styles-for-a-selected-button-in-a-togglebuttonbar-control-in-flex/ -->
<mx:Application name="ToggleButtonBar_selectedButtonTextStyleName_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .mySelectedButtonTextStyleName {
            color: haloBlue;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One Fish" />
        <mx:Object label="Two Fish" />
        <mx:Object label="Red Fish" />
        <mx:Object label="Blue Fish" />
    </mx:Array>

    <mx:ToggleButtonBar id="toggleButtonBar"
            selectedButtonTextStyleName="mySelectedButtonTextStyleName"
            dataProvider="{arr}" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/11/08/setting-text-styles-for-a-selected-button-in-a-togglebuttonbar-control-in-flex/feed/ 2 Setting a label’s font weight on a Flex LinkBar and ToggleButtonBar control http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/#comments Mon, 14 Jan 2008 15:28:48 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ The following example shows how you can set the font weight of a label on LinkBar control and ToggleButton control in Flex by setting the linkButtonStyleName style and buttonStyleName style respectively.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> .myCustomLinkButtonStyleName { [...]]]> The following example shows how you can set the font weight of a label on LinkBar control and ToggleButton control in Flex by setting the linkButtonStyleName style and buttonStyleName style respectively.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myCustomLinkButtonStyleName {
            fontWeight: normal;
        }

        .myCustomButtonStyleName {
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            linkButtonStyleName="myCustomLinkButtonStyleName" />

    <mx:ToggleButtonBar id="toggleButtonBar"
            dataProvider="{arr}"
            buttonStyleName="myCustomButtonStyleName" />

</mx:Application>

View source is enabled in the following example.

Or, you can set the styles a bit more globally by using the following snippet:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        LinkBar {
            linkButtonStyleName: regularFontWeight;
        }

        ToggleButtonBar {
            buttonStyleName: regularFontWeight;
        }

        .regularFontWeight {
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}" />

    <mx:ToggleButtonBar id="toggleButtonBar"
            dataProvider="{arr}" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/feed/ 3 Creating a vertical ToggleButtonBar in Flex http://blog.flexexamples.com/2007/08/22/creating-a-vertical-togglebuttonbar-in-flex/ http://blog.flexexamples.com/2007/08/22/creating-a-vertical-togglebuttonbar-in-flex/#comments Wed, 22 Aug 2007 15:18:56 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/22/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 [...]]]> 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.

 
]]> http://blog.flexexamples.com/2007/08/22/creating-a-vertical-togglebuttonbar-in-flex/feed/ 2