Динамическая ширина табуляции в компоненте Flex 4 TabBar с кожей

Question

У меня есть компонент Flex 4 TabBar с пользовательским скином. На этом скине рендеринга элемента определяется с помощью ButtonBarButton с пользовательским скином. Все вкладки в itemrenderer имеют одинаковую ширину.

Клиент, однако, хочет, чтобы я сделал динамически ширину вкладок, поэтому небольшая вкладка для меньшей метки, большая для длинной метки. Кто-нибудь знает, как настроить ширину Tab (ButtonBarButton)?

Спасибо, миллион!

Answer 1

Я нашел что-то, что работает.

Создайте пользовательский компонент, который наследуется от ButtonBarButton, назовите его CustomTabButton.

Добавить связующее имуществоtabWidth. Затем, когда мы обновляем tabWidth, ширина вкладки регулируется им. Это как вы обновляете кожу:

• установить компонент хоста в пользовательский класс CustomTabButton.

• В определении SparkSkin привяжите значение ширины к свойству hostComponents tabWidth.

  ширина = "{hostComponent.tabWidth}"

Кожа выглядит следующим образом:

<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>