Dynamic tab width in a Flex 4 TabBar component with skin

Question

Hi,

I have a Flex 4 TabBar component with a custom skin. In this skin, the item renderer is defined with an ButtonBarButton with a custom skin. All the tabs in the itemrenderer have now the same width.

The client however wants me to make the tabs width dynamically, so a smaller tab for a smaller label, a bigger one for a long label. Does anybody know how to adjust the width of Tab (ButtonBarButton)?

Thanks a million!

Answer 1

I found something that works.

Create a custom component that inherits from ButtonBarButton, call it CustomTabButton.

Add a bindable property tabWidth. Then when we update tabWidth, the width of the tab is adjusted with it. THis is how you update the skin:

• set the host component to the custom class CustomTabButton.

• In the SparkSkin definition, bind the width value to the hostComponents property tabWidth.

  width="{hostComponent.tabWidth}"

The skin looks like this:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                 xmlns:mx="library://ns.adobe.com/flex/mx"
                 xmlns:s="library://ns.adobe.com/flex/spark"
                 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
                 minHeight="54"
                 width="{hostComponent.tabWidth}"
                 xmlns:tabbar="be.boulevart.project.components.tabbar.*">

        <!-- host component -->
        <fx:Metadata>
            <![CDATA[ 
            [HostComponent("be.boulevart.project.components.tabbar.CustomTabButton")]
            ]]>
        </fx:Metadata>