Changing the label placement on an MX ButtonBar control in Flex (redux)

In a previous example, “Changing the label placement for a Flex ButtonBar control”, we saw how you could change the button’s label placement relative to its icon in a ButtonBar control in Flex by using the getChildAt() method and labelPlacement property.

The following example shows how you can set the label/icon placement on an MX ButtonBar control in Flex by extending the MX ButtonBar class and setting the navItemFactory property in the mx_internal namespace to a custom class.

Since this example uses the mx_internal namespace, you can't always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/ -->
<mx:Application name="MX_ButtonBar_navItemFactory_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:local="*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <local:CustomButtonBar id="bb"
            dataProvider="{viewstack}"
            labelField="label"
            iconField="icon"
            width="300" />
 
    <mx:ViewStack id="viewstack"
            backgroundColor="white"
            width="300" height="100">
        <mx:Canvas id="tab_1"
                label="Tab 1"
                icon="@Embed('Assets.swf#CloseButtonUp')">
            <mx:Button />
        </mx:Canvas>
        <mx:Canvas id="tab_2"
                label="Tab 2"
                icon="@Embed('Assets.swf#CloseButtonOver')">
            <mx:ColorPicker />
        </mx:Canvas>
        <mx:Canvas id="tab_3"
                label="Tab 3"
                icon="@Embed('Assets.swf#CloseButtonOver')">
            <mx:ComboBox dataProvider="[red,orange,yellow,green,blue]" />
        </mx:Canvas>
    </mx:ViewStack>
 
</mx:Application>

The custom MX ButtonBar control, CustomButtonBar.as, is as follows:

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/ */
package {
    import mx.controls.ButtonBar;
    import mx.core.ClassFactory;
    import mx.core.mx_internal;
 
    public class CustomButtonBar extends ButtonBar {
        public function CustomButtonBar() {
            super();
            mx_internal::navItemFactory = new ClassFactory(CustomButtonBarButton);
        }
    }
}

And the custom nav item factory, CustomButtonBarButton.as, is as follows:

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/ */
package {
    import mx.controls.buttonBarClasses.ButtonBarButton;
 
    public class CustomButtonBarButton extends ButtonBarButton {
        public function CustomButtonBarButton() {
            super();
            labelPlacement = "top";
        }
    }
}

One thought on “Changing the label placement on an MX ButtonBar control in Flex (redux)

  1. is that right as i heard RIA is not only about technology and RIA technology offers more user interface components. Developers need not rely on typical HTML conventions to build their applications.

Comments are closed.