Boutons de style de Flex TabNavigator

Question

J'ai créé un TabNavigator avec un tas de NavigatorContent à l'intérieur, et je veux habiller seulement les boutons des onglets eux-mêmes. J'ai donc ajouté un skinClass, mais comme dans la documentation, il n'y a pas de partie de skin pour cibler le bouton spécifiquement.

Dois-je le style lui-même mx:TabNavigator d'y arriver? J'espérais pas depuis que je ne sais pas comment composer mx composants et suis plus à l'aise avec le style spark.

D'autres alternatives auxquelles je n'ai pas pensé?

Answer 1

Étant donné que TabNavigator est un composant mx, vous devrez le styler à l'ancienne. Vous pouvez définir le style des boutons en définissant le style « tabStyleName », à savoir:

TabNavigator{ 
    tabStyleName: "myTabButton"; 
} 

.myTabButton{ 
    skin: ClassReference("com.yournamespace.skins.TabButtonSkin"); 
} 

Vous devez créer les peaux à l'ancienne, vous voudrez peut-être regarder la classe mx.skins.halo.Button pour un exemple, ou vous pouvez utiliser degrafa ou vous pouvez utiliser pngs.

Notez que vous pouvez également définir un firstTabStyleName ou un lastTabStyleName séparément si vous le souhaitez.

exemple de la peau programmatique: http://www.davidflatley.com/2007/12/17/programmatic-button-skins-in-flex-3/

degrafa exemple: http://styleanderror.net/2010/02/creating-animated-programmatic-button-skins-in-degrafa/

Answer 2

Vous pouvez vous écrire peau de bouton ou utiliser celui qui est ici http://www.wabysabi.com/flex/enhancedbuttonskin/ EnhancedButtonSkin.as nommé (clic droit, View-Source) . Ensuite, déclarez votre composant TabNavigator et spécifiez son tabStyleName.

<mx:TabNavigator y="0" height="100%" right="0" left="0" id="navigator" tabStyleName="tab"> 

Et maintenant le css:

<fx:Style> 
    .tab 
    { 
    upSkin:ClassReference('com.EnhancedButtonSkin'); 
    overSkin:ClassReference('com.EnhancedButtonSkin'); 
    downSkin:ClassReference('com.EnhancedButtonSkin'); 
    disabledSkin:ClassReference('com.EnhancedButtonSkin'); 
    selectedUpSkin:ClassReference('com.EnhancedButtonSkin'); 
    selectedOverSkin:ClassReference('com.EnhancedButtonSkin'); 
    selectedDownSkin:ClassReference('com.EnhancedButtonSkin'); 
    selectedDisabledSkin:ClassReference('com.EnhancedButtonSkin'); 

    cornerRadii: 5, 5, 0, 0; 
    borderColors: #CC0000, #000000; 
    overBorderColors: #003399, #003399; 
    selectedBorderColors: #666666, #FFFFFF; 
    borderThickness: 1; 
    borderAlpha: 1; 
    fillColors: #CC3300, #F98900; 
    fillAlphas: 1, 1; 
    fillColorRatios: 0, 255; 
    overFillColors: #999999, #FFFFFF; 
    overFillAlphas: 1, 1; 
    overFillColorRatios: 0, 255; 
    selectedFillColors: #999999, #FFFFFF; 
    selectedFillAlphas: 1, 1; 
    selectedFillColorRatios: 111, 255; 
    highlightAlphas: 0, 0; 
    color: #000000; 
    textRollOverColor: #000000; 
    fontSize: 13; 
    } 
</fx:Style> 

Cette css affichera: i.imgur.com/4HwD3.png

Remy