Largeur de tabulation dynamique dans un composant Flex 4 TabBar avec habillage

Question

J'ai un composant Flex 4 TabBar avec un habillage personnalisé. Dans cet habillage, le rendu d'élément est défini avec un ButtonBarButton avec un habillage personnalisé. Tous les onglets de l'itemrenderer ont maintenant la même largeur.

Le client veut cependant que je fasse la largeur des onglets dynamiquement, donc une plus petite tabulation pour une étiquette plus petite, une plus grande pour une longue étiquette. Est-ce que quelqu'un sait comment ajuster la largeur de Tab (ButtonBarButton)?

Merci mille fois!

Answer 1

J'ai trouvé quelque chose qui fonctionne.

Créez un composant personnalisé qui hérite de ButtonBarButton, appelez-le CustomTabButton.

Ajout d'une propriété de liaison tabWidth. Ensuite, lorsque nous mettons à jour tabWidth, la largeur de l'onglet est ajustée avec elle. Voici comment vous mettez à jour la peau:

• définir le composant hôte à la CustomTabButton de classe personnalisée.

• Dans la définition SparkSkin, liez la valeur width à la propriété hostComponents tabWidth.

  width = "{hostComponent.tabWidth}"

La peau ressemble à ceci:

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