Flex 4: Valor de CSS personalizado

Question

¿hay alguna manera de crear un valor CSS personalizado para un componente y tiene a disposición de la clase componente de la piel que está utilizando? por ejemplo, si yo defino esto en un archivo CSS:

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

¿Hay una manera de hacer myCustomValue disponible en el PanelSkin?

Answer 1

Incluso sin los metadatos [Estilo] en la clase de componente, parece que se puede establecer las propiedades CSS y que estará disponible en la piel. Como prueba, he creado un aspecto personalizado y unido a SkinnableComponent, y luego establecer una propiedad especial 'color' a través de CSS. En la piel, I unido a "{getStyle ( 'specialColor')", y se recuperó el valor de la propiedad que puse.

Todo lo que podrías estar sacrificando omitiendo los metadatos es la terminación automática en el CSS.

Mi código de prueba:

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

Hay que utilizar el [Estilo] metadatos, aquí hay más información sobre esto: Estilo de etiqueta de metadatos

Answer 3

Tiene que definir aloja clase de componente en el archivo de la piel mxml. [HostComponent ( "your.component.class")]

Después de esto, usted será capaz de conseguir cualquier estilo definido en el archivo CSS mediante el uso de hostComponent.getStyle ( "myCustomValue")