Comment puis-je ajouter plusieurs icônes au contrôle Spark TabBar?

Question

Dans le composant MX TabBar, la propriété iconField nous a permis d'afficher différentes icônes dans chaque onglet. Dans Spark, il ne semble pas y avoir de façon inhérente d'ajouter des icônes au TabBar. Quelqu'un at-il un exemple d'implémentation de la prise en charge des icônes pour TabBar de Spark? Y a-t-il un moyen de le faire sans étendre le composant?

Merci beaucoup!

Answer 1

Vous devrez créer un habillage pour ajouter des icônes aux composants Spark; ce n'est pas aussi simple (IMHO) que les composants MX de Flex 3, bien que beaucoup plus extensible.

Voici quelques liens qui pourraient vous aider à démarrer:

• Tour de Flex Tabbar examples
• Custom Skin on Tabbar
• Flex Tabbar with Skin

Answer 2

Je crois que je suis venu avec une solution, que je Je poste ci-dessous pour la postérité. Si quelqu'un a un meilleur moyen, j'apprécierais beaucoup la suggestion.

<!-- main app: TabBar implementation --> 

<s:TabBar 
    dataProvider="{contentTabBarPrimaryDP}" 
    skinClass="skins.ContentTabBarSkin"/> 

<!-- skins.ContentTabBarSkin: ItemRenderer implementation --> 

<s:DataGroup id="dataGroup" width="100%" height="100%"> 
    <s:layout> 
     <s:HorizontalLayout/> 
    </s:layout> 

    <s:itemRenderer> 
     <fx:Component> 
      <custom:IconButtonBarButton 
       label="{data.label}" 
       icon="{data.icon}" 
       skinClass="skins.ContentTabBarButtonSkin"/> 
     </fx:Component> 
    </s:itemRenderer> 
</s:DataGroup> 

<!-- skins.ContentTabBarButtonSkin: icon implementation --> 

<s:HGroup  
    gap="3" 
    paddingBottom="3" 
    paddingLeft="3" 
    paddingRight="3" 
    paddingTop="3" 
    verticalAlign="middle"> 

    <!--- layer 2: icon --> 
    <s:BitmapImage id="iconDisplay" 
     left="5" 
     verticalCenter="0" />  

    <!--- layer 3: label --> 
    <s:Label id="labelDisplay" 
     textAlign="center" 
     verticalAlign="middle" 
     maxDisplayedLines="1" 
     horizontalCenter="0" verticalCenter="1" 
     left="10" 
     right="10" 
     top="2" 
     bottom="2"> 
    </s:Label> 

</s:HGroup> 

Cette solution utilise un objet DTO personnalisé pour le TabBar dataProvider qui stocke le texte de l'étiquette ainsi que l'image d'icône intégrée en tant que classe. Je devais aussi étendre la composante ButtonBarButton ajouter un iconDisplay SkinPart, qui ressemble à ceci:

[SkinPart(required="false")] 
public var iconDisplay:BitmapImage; 

Cette classe a également getters/setters pour l'icône propriété de classe et définit la source d'icône, en tant que telle:

public function set icon(value:Class):void { 

    _icon = value; 

    if (iconDisplay != null) 
     iconDisplay.source = _icon; 

} 

override protected function partAdded(partName:String, instance:Object):void { 

    super.partAdded(partName, instance); 

    if (icon !== null && instance == iconDisplay) 
     iconDisplay.source = icon;  

} 

Answer 3

Il est semble être un bug/manqué fonctionnalité de la version de votre SDK:
http://forums.adobe.com/thread/552543
http://bugs.adobe.com/jira/browse/SDK-24331

Quoi qu'il en soit, t Héks pour la solution avec des skins - très utile

Answer 4

Hey après avoir passé une semaine à essayer de suivre plusieurs façons, (le vôtre étant en tête de liste) j'ai trouvé un moyen plus simple et efficace d'ajouter des icônes à ma barre d'onglets, ou autre composant utilisant le skinning.

Vous n'avez pas besoin de créer un composant personnalisé, en passant simplement l'icône et l'étiquette dans les données.

http://cookbooks.adobe.com/post_Tutorials_for_skinning_Spark_ButtonBar_component_w-16722.html

Comme personnellement, j'utilisais navigateur content de mon TabBar/ViewStack, je suis passé sur l'icône comme icône au lieu de ImageIcon. vous pouvez faire des changements en conséquence.