flex 4: Valeur personnalisée css

Question

est-il possible de créer une valeur css personnalisée pour un composant et qu'il soit disponible à la classe de la peau que le 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 dans la peau. En guise de test, j'ai créé un habillage personnalisé et attaché à SkinnableComponent, puis définissez « couleur spéciale » une propriété via CSS. Dans la peau, je lié à « {getStyle ( « specialColor ») », et la valeur récupérai de la propriété que je mets.

Tout ce que vous pourriez sacrifier en omettant les métadonnées est la saisie semi-automatique 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 les métadonnées, voici plus d'informations [Style] sur ce point: balise de métadonnées de style

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