Définir les skins Flex 4 avec CSS

Question

J'essaie de définir mes Flex 4 Skins via CSS mais mon skin personnalisé ne s'affiche pas. Voici ce que je fais:

Dans ma demande importer mes css et définir le styleName dans mon bouton:

 <fx:Style source="styles.css"/> 
     <s:Button label="Button" styleName="circle"/> 

Voici mon CSS:

@namespace s "library://ns.adobe.com/flex/spark"; 
@namespace mx "library://ns.adobe.com/flex/mx"; 

s|Button.circle 
{ 
    skinClass: ClassReference("skins.buttons.CircleButton"); 
} 

Ma compréhension est que mon Le bouton devrait être fourni il est skinClass via le CSS, mais il ne fonctionne pas. Si je définis la skinClass directement comme ci-dessous, cela fonctionne bien:

<s:Button label="Button" skinClass="skins.buttons.CircleButton"/> 

Toute aide serait appréciée.

Answer 1

Assurez-vous que votre fichier CSS dans le fichier d'application racine première. Deuxièmement, je voudrais essayer de faire le CSS sans le sélecteur de type, donc au lieu de s|Button.circle, faites juste .circle.

EDIT

Vous pouvez également essayer de mettre le style dans une balise de style dans le même conteneur que votre bouton pour voir si cela fonctionne. Etes-vous sûr que votre application peut trouver votre style.css? Montrer plus de code pourrait aider la situation.

Answer 2

par le official Flex CSS documentation:

sélecteur de classe: un sélecteur de classe matchs CSS composants qui répondent à une condition de classe . La syntaxe CSS pour déclarer un sélecteur de classe consiste à préfixer la condition avec un point. Vous pouvez déclarer un sélecteur de classe comme condition d'un sélecteur de type, ou universellement à tout type répondant à la condition de classe .

.header { background-color: #CCCCCC; } 

HBox.footer { background-color: #999999; } 

Remarque: Flex une condition de classe est remplie en utilisant l'attribut styleName sur un composant . Par exemple, vous pouvez avoir deux classes de HBox: "en-tête" et "pied de page". Ci-dessus, le premier sélecteur s'applique à tout composant avec styleName = "header"; le second sélecteur ne devrait appliquer à HBox composants avec styleName = « Pied de page » (quelque chose qui doit effectivement être fixes et exécutées dans Gumbo, comme à jour sélecteurs de classe ont seulement été universelle et tout type dans le sélecteur est ignoré).

On dirait que les sélecteurs ne peuvent pas travailler dans Gumbo ...