flex 4: valeur css personnalisée

Question

est-il possible de créer une valeur css personnalisée pour un composant et de la rendre disponible pour la classe d'habillage que ce composant utilise? par exemple, si je définis cela dans un fichier css:

s|Panel{ 
    skinClass: ClassReference("PanelSkin"); 
    myCustomValue: #CCCCFF; 
} 

est-il un moyen de faire myCustomValue disponible dans le PanelSkin?

Answer 1

Même sans métadonnées [Style] sur la classe du composant, il semble que vous pouvez définir les propriétés CSS et ils seront disponibles en la peau. En tant que test, j'ai créé un habillage personnalisé et je l'ai attaché à SkinnableComponent, puis j'ai défini une propriété de couleur spéciale via CSS. Dans l'habillage, j'ai lié à "{getStyle ('specialColor')", et il a récupéré la valeur de la propriété que j'ai définie.

Tout ce que vous pourriez sacrifier en omettant les métadonnées est l'auto-complétion sur le CSS.

Mon code de test:

SkinTest.mxml:

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"> 
<fx:Declarations> 
    <!-- Place non-visual elements (e.g., services, value objects) here --> 
</fx:Declarations> 

<fx:Style> 
    @namespace s "library://ns.adobe.com/flex/spark"; 
    @namespace mx "library://ns.adobe.com/flex/halo"; 

    s|SkinnableComponent { 
     skin-class: ClassReference("skins.CustomSkin"); 
     special-color: blue; 
    } 
</fx:Style> 

<s:SkinnableComponent width="300" height="300"/> 
</s:Application> 

CustomSkin.mxml:

<?xml version="1.0" encoding="utf-8"?> 
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300"> 
<fx:Declarations> 
    <!-- Place non-visual elements (e.g., services, value objects) here --> 
</fx:Declarations> 

<s:Rect left="0" top="0" right="0" bottom="0"> 
    <s:fill> 
     <s:SolidColor color="{getStyle('specialColor')}"/> 
    </s:fill> 
</s:Rect> 
</s:SparkSkin> 

Answer 2

Vous devez utiliser le [style] méta-données, voici plus d'informations à ce sujet: Style metadata tag

Answer 3

Vous devez vous définir hébergez classe de composant dans le fichier de la peau MXML. [HostComponent ("your.component.class")]

Après cela, vous serez en mesure d'obtenir tous les styles définis dans le fichier css en utilisant hostComponent.getStyle ("myCustomValue")