Flex Examples » FxButtonBar http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Determining if an item index is selected in an FxButtonBar control in Flex Gumbo http://blog.flexexamples.com/2009/02/22/determining-if-an-item-index-is-selected-in-an-fxbuttonbar-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/22/determining-if-an-item-index-is-selected-in-an-fxbuttonbar-control-in-flex-gumbo/#comments Sun, 22 Feb 2009 19:06:17 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/22/determining-if-an-item-index-is-selected-in-an-fxbuttonbar-control-in-flex-gumbo/ In a previous example, “Determining if an item is selected in an FxButtonBar control in Flex Gumbo”, we saw how you could determine if a specific item is selected in a Flex Gumbo FxButtonBar control by using the isItemSelected() method.

The following example shows how you can determine if a specific item index is [...]]]> In a previous example, “Determining if an item is selected in an FxButtonBar control in Flex Gumbo”, we saw how you could determine if a specific item is selected in a Flex Gumbo FxButtonBar control by using the isItemSelected() method.

The following example shows how you can determine if a specific item index is selected in a Flex Gumbo FxButtonBar control by using the isItemIndexSelected() method.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/22/determining-if-an-item-index-is-selected-in-an-fxbuttonbar-control-in-flex-gumbo/ -->
<Application name="FxButtonBar_isItemIndexSelected_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        <![CDATA[
            private function btnBar_updateComplete(evt:Event):void {
                lblNegOne.text = btnBar.isItemIndexSelected(-1).toString();
                lblZero.text = btnBar.isItemIndexSelected(0).toString();
                lblOne.text = btnBar.isItemIndexSelected(1).toString();
                lblTwo.text = btnBar.isItemIndexSelected(2).toString();
            }
        ]]>
    </Script>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="isItemIndexSelected(-1):">
                <Label id="lblNegOne" />
            </FormItem>
            <FormItem label="isItemSelected(0):">
                <Label id="lblZero" />
            </FormItem>
            <FormItem label="isItemSelected(1):">
                <Label id="lblOne" />
            </FormItem>
            <FormItem label="isItemSelected(2):">
                <Label id="lblTwo" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxButtonBar id="btnBar"
            updateComplete="btnBar_updateComplete(event);">
        <dataProvider>
            <ArrayCollection source="[One,Two,Three,Four,Five,Six]" />
        </dataProvider>
    </FxButtonBar>

</Application>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/02/22/determining-if-an-item-index-is-selected-in-an-fxbuttonbar-control-in-flex-gumbo/feed/ 0 Determining if an item is selected in an FxButtonBar control in Flex Gumbo http://blog.flexexamples.com/2009/02/22/determining-if-an-item-is-selected-in-an-fxbuttonbar-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/22/determining-if-an-item-is-selected-in-an-fxbuttonbar-control-in-flex-gumbo/#comments Sun, 22 Feb 2009 18:50:57 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/22/determining-if-an-item-is-selected-in-an-fxbuttonbar-control-in-flex-gumbo/ The following example shows how you can determine if a specific item is selected in a Flex Gumbo FxButtonBar control by using the isItemSelected() method.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For [...]]]> The following example shows how you can determine if a specific item is selected in a Flex Gumbo FxButtonBar control by using the isItemSelected() method.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/22/determining-if-an-item-is-selected-in-an-fxbuttonbar-control-in-flex-gumbo/ -->
<Application name="FxButtonBar_isItemSelected_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        <![CDATA[
            private function btnBar_updateComplete(evt:Event):void {
                lblNull.text = btnBar.isItemSelected(null).toString();
                lblOne.text = btnBar.isItemSelected('One').toString();
                lblTwo.text = btnBar.isItemSelected('Two').toString();
                lblThree.text = btnBar.isItemSelected('Three').toString();
            }
        ]]>
    </Script>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="isItemSelected(null):">
                <Label id="lblNull" />
            </FormItem>
            <FormItem label="isItemSelected('One'):">
                <Label id="lblOne" />
            </FormItem>
            <FormItem label="isItemSelected('Two'):">
                <Label id="lblTwo" />
            </FormItem>
            <FormItem label="isItemSelected('three'):">
                <Label id="lblThree" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxButtonBar id="btnBar"
            updateComplete="btnBar_updateComplete(event);">
        <dataProvider>
            <ArrayCollection source="[One,Two,Three,Four,Five,Six]" />
        </dataProvider>
    </FxButtonBar>

</Application>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/02/22/determining-if-an-item-is-selected-in-an-fxbuttonbar-control-in-flex-gumbo/feed/ 2 Setting the selected item on the FxButtonBar control in Flex Gumbo http://blog.flexexamples.com/2009/02/21/setting-the-selected-item-on-the-fxbuttonbar-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/21/setting-the-selected-item-on-the-fxbuttonbar-control-in-flex-gumbo/#comments Sun, 22 Feb 2009 05:49:51 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/21/setting-the-selected-item-on-the-fxbuttonbar-control-in-flex-gumbo/ In a previous example, “Setting the selected index on the FxButtonBar control in Flex Gumbo”, we saw how you could set the selected index on a Flex Gumbo FxButtonBar control by setting the selectedIndex property.

The following example shows how you can set the selected item on a Flex Gumbo FxButtonBar control by setting [...]]]> In a previous example, “Setting the selected index on the FxButtonBar control in Flex Gumbo”, we saw how you could set the selected index on a Flex Gumbo FxButtonBar control by setting the selectedIndex property.

The following example shows how you can set the selected item on a Flex Gumbo FxButtonBar control by setting the selectedItem property.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/21/setting-the-selected-item-on-the-fxbuttonbar-control-in-flex-gumbo/ -->
<Application name="FxButtonBar_selectedItem_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        import mx.utils.ObjectUtil;
    </Script>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="requiresSelection:">
                <FxCheckBox id="checkBox" />
            </FormItem>
            <FormItem label="selectedItem:">
                <Label text="{ObjectUtil.toString(btnBar.selectedItem)}" />
            </FormItem>
            <FormItem direction="horizontal">
                <FxButton label="Select none"
                        fontWeight="bold"
                        click="btnBar.selectedItem = null;" />
                <FxButton label="Select 'One'"
                        click="btnBar.selectedItem = 'One';" />
                <FxButton label="Select 'Two'"
                        click="btnBar.selectedItem = 'Two';" />
                <FxButton label="Select 'Three'"
                        click="btnBar.selectedItem = 'Three';" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxButtonBar id="btnBar"
            requiresSelection="{checkBox.selected}">
        <dataProvider>
            <ArrayCollection source="[One,Two,Three,Four,Five,Six]" />
        </dataProvider>
    </FxButtonBar>

</Application>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/02/21/setting-the-selected-item-on-the-fxbuttonbar-control-in-flex-gumbo/feed/ 0 Creating a vertical Spark ButtonBar control in Flex 4 http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/#comments Fri, 13 Feb 2009 15:36:09 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/ The following example shows how you can create a vertical Spark ButtonBar control in Flex 4 by setting the layout property to a VerticalLayout object and setting the gap property to -1.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/ --> <s:Application name="Spark_ButtonBar_layout_VerticalLayout_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:ButtonBar id="btnBar" horizontalCenter="0" verticalCenter="0"> <s:layout> <s:VerticalLayout [...]]]> The following example shows how you can create a vertical Spark ButtonBar control in Flex 4 by setting the layout property to a VerticalLayout object and setting the gap property to -1.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_ButtonBar_layout_VerticalLayout_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">

    <s:ButtonBar id="btnBar"
            horizontalCenter="0"
            verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="-1" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList source="[Red,Orange,Yellow,Green,Blue]" />
        </s:dataProvider>
    </s:ButtonBar>

</s:Application>

View source is enabled in the following example.

You can also set the button layout direction by creating a custom skin and setting the skinClass style, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_ButtonBar_layout_VerticalLayout_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">

    <s:ButtonBar id="btnBar"
            horizontalCenter="0"
            verticalCenter="0"
            skinClass="skins.CustomButtonBarSkin">
        <s:dataProvider>
            <s:ArrayList source="[Red,Orange,Yellow,Green,Blue]" />
        </s:dataProvider>
    </s:ButtonBar>

</s:Application>

The custom MXML skin, skins/CustomButtonBarSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/ -->
<s:Skin name="CustomButtonBarSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.ButtonBar")]
        ]]>
    </fx:Metadata>

    <fx:Declarations>
        <fx:Component id="middleButton" >
            <s:ButtonBarButton skinClass="spark.skins.default.ButtonBarMiddleButtonSkin" />
        </fx:Component>
    </fx:Declarations>

    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:VerticalLayout gap="-1"/>
        </s:layout>
    </s:DataGroup>

</s:Skin>

You can also set the skinClass style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_ButtonBar_layout_VerticalLayout_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">

    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";

        s|ButtonBar {
            skinClass: ClassReference("skins.CustomButtonBarSkin");
        }
    </fx:Style>

    <s:ButtonBar id="btnBar"
            horizontalCenter="0"
            verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList source="[Red,Orange,Yellow,Green,Blue]" />
        </s:dataProvider>
    </s:ButtonBar>

</s:Application>

Or, you can set the skinClass style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_ButtonBar_layout_VerticalLayout_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        backgroundColor="white">

    <fx:Script>
        <![CDATA[
            import skins.CustomButtonBarSkin;

            private function btn_click(evt:MouseEvent):void {
                btnBar.setStyle("skinClass", CustomButtonBarSkin);
            }
        ]]>
    </fx:Script>

    <s:Button id="btn"
            label="Set skin class"
            click="btn_click(event);"
            x="10"
            y="10" />

    <s:ButtonBar id="btnBar"
            horizontalCenter="0"
            verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList source="[Red,Orange,Yellow,Green,Blue]" />
        </s:dataProvider>
    </s:ButtonBar>

</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/02/13/creating-a-vertical-fxbuttonbar-control-in-flex-gumbo/feed/ 0 Determining when the selected item changes on the FxButtonBar control in Flex Gumbo http://blog.flexexamples.com/2009/02/10/determining-when-the-selected-item-changes-on-the-fxbuttonbar-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/10/determining-when-the-selected-item-changes-on-the-fxbuttonbar-control-in-flex-gumbo/#comments Wed, 11 Feb 2009 07:57:19 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/10/determining-when-the-selected-item-changes-on-the-fxbuttonbar-control-in-flex-gumbo/ The following example shows how you can determine when the selected item changes on the Flex Gumbo FxButtonBar control by listening for the selectionChanging or selectionChanged events.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder [...]]]> The following example shows how you can determine when the selected item changes on the Flex Gumbo FxButtonBar control by listening for the selectionChanging or selectionChanged events.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/10/determining-when-the-selected-item-changes-on-the-fxbuttonbar-control-in-flex-gumbo/ -->
<Application name="FxButtonBar_selectionChanged_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        <![CDATA[
            import mx.events.IndexChangedEvent;

            private function btn_selectionChanging(evt:IndexChangedEvent):void {
                arrColl.addItem(evt);
            }

            private function btn_selectionChanged(evt:IndexChangedEvent):void {
                arrColl.addItem(evt);
            }
        ]]>
    </Script>

    <Declarations>
        <ArrayCollection id="arrColl" />
    </Declarations>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="requiresSelection:">
                <FxCheckBox id="checkBox" />
            </FormItem>
            <FormItem>
                <FxButtonBar id="btnBar"
                        requiresSelection="{checkBox.selected}"
                        selectionChanging="btn_selectionChanging(event);"
                        selectionChanged="btn_selectionChanged(event);">
                    <dataProvider>
                        <ArrayCollection source="[One,Two,Three,Four,Five]" />
                    </dataProvider>
                </FxButtonBar>
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            width="100%">
        <columns>
            <DataGridColumn dataField="type" />
            <DataGridColumn dataField="oldIndex" />
            <DataGridColumn dataField="newIndex" />
        </columns>
    </DataGrid>

</Application>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/02/10/determining-when-the-selected-item-changes-on-the-fxbuttonbar-control-in-flex-gumbo/feed/ 1 Requiring a user has an item selected on the FxButtonBar in Flex Gumbo http://blog.flexexamples.com/2009/02/09/requiring-a-user-has-an-item-selected-on-the-fxbuttonbar-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/09/requiring-a-user-has-an-item-selected-on-the-fxbuttonbar-in-flex-gumbo/#comments Tue, 10 Feb 2009 07:28:49 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/09/requiring-a-user-has-an-item-selected-on-the-fxbuttonbar-in-flex-gumbo/ The following example shows how you can make sure that the Flex Gumbo FxButtonBar control has an item selected by setting the Boolean requiresSelection property.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For [...]]]> The following example shows how you can make sure that the Flex Gumbo FxButtonBar control has an item selected by setting the Boolean requiresSelection property.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/09/requiring-a-user-has-an-item-selected-on-the-fxbuttonbar-in-flex-gumbo/ -->
<Application name="FxButtonBar_requiresSelection_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
        ]]>
    </Script>

    <Declarations>
        <ArrayCollection id="arrColl"
                source="[One,Two,Three,Four,Five]" />
    </Declarations>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="requiresSelection:">
                <FxCheckBox id="checkBox"
                        selected="true" />
            </FormItem>
            <FormItem label="selectedIndex:">
                <Label text="{btnBar.selectedIndex}" />
            </FormItem>
            <FormItem label="selectedItem:">
                <Label text="{ObjectUtil.toString(btnBar.selectedItem)}" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxButtonBar id="btnBar"
            dataProvider="{arrColl}"
            requiresSelection="{checkBox.selected}" />

</Application>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/02/09/requiring-a-user-has-an-item-selected-on-the-fxbuttonbar-in-flex-gumbo/feed/ 0 Using the FxButtonBar control in Flex Gumbo http://blog.flexexamples.com/2009/02/08/using-the-fxbuttonbar-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/08/using-the-fxbuttonbar-control-in-flex-gumbo/#comments Mon, 09 Feb 2009 06:23:49 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/08/using-the-fxbuttonbar-control-in-flex-gumbo/ The following example shows how you can use the Flex Gumbo FxButtonBar by setting the dataProvider property to an ArrayCollection object.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading [...]]]> The following example shows how you can use the Flex Gumbo FxButtonBar by setting the dataProvider property to an ArrayCollection object.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/08/using-the-fxbuttonbar-control-in-flex-gumbo/ -->
<Application name="FxButtonBar_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
        ]]>
    </Script>

    <Declarations>
        <ArrayCollection id="arrColl"
                source="[One,Two,Three,Four,Five]" />
    </Declarations>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="selectedIndex:">
                <Label text="{btnBar.selectedIndex}" />
            </FormItem>
            <FormItem label="selectedItem:">
                <Label text="{ObjectUtil.toString(btnBar.selectedItem)}" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxButtonBar id="btnBar"
            dataProvider="{arrColl}" />

</Application>

View source is enabled in the following example.

You can also set the dataProvider property inline in MXML using the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/08/using-the-fxbuttonbar-control-in-flex-gumbo/ -->
<Application name="FxButtonBar_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
        ]]>
    </Script>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="selectedIndex:">
                <Label text="{btnBar.selectedIndex}" />
            </FormItem>
            <FormItem label="selectedItem:">
                <Label text="{ObjectUtil.toString(btnBar.selectedItem)}" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxButtonBar id="btnBar">
        <dataProvider>
            <ArrayCollection source="[One,Two,Three,Four,Five]" />
        </dataProvider>
    </FxButtonBar>

</Application>

Or, you can set the dataProvider property using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/08/using-the-fxbuttonbar-control-in-flex-gumbo/ -->
<Application name="FxButtonBar_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <Script>
        <![CDATA[
            import mx.utils.ObjectUtil;
            import mx.collections.ArrayCollection;

            private var arrColl:ArrayCollection;

            private function init():void {
                var arr:Array = ["One", "Two", "Three", "Four", "Five"];
                arrColl = new ArrayCollection(arr);
                btnBar.dataProvider = arrColl;
            }
        ]]>
    </Script>

    <ApplicationControlBar dock="true">
        <Form styleName="plain">
            <FormItem label="selectedIndex:">
                <Label text="{btnBar.selectedIndex}" />
            </FormItem>
            <FormItem label="selectedItem:">
                <Label text="{ObjectUtil.toString(btnBar.selectedItem)}" />
            </FormItem>
        </Form>
    </ApplicationControlBar>

    <FxButtonBar id="btnBar"
            initialize="init();" />

</Application>

This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/02/08/using-the-fxbuttonbar-control-in-flex-gumbo/feed/ 0