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

By On November 9, 2010 · 1 Comment

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";
        }
    }
}
 
Tagged with: • • • •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

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

  1. web informer says:
    January 18, 2011 at 10:11 pm

    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.