Changing the label placement on an MX TabBar control in Flex

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ -->
<mx:Application name="MX_TabBar_navItemFactory_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <comps:CustomTabBar id="tb"
            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>

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

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ */
package comps {
    import mx.controls.tabBarClasses.Tab;
 
    public class CustomTab extends Tab {
        public function CustomTab() {
            super();
            labelPlacement = "top";
        }
    }
}