flex 4: custom css value.

Question

is there any way to create a custom css value for a component and have it available to the skin class that component is using? for example, if i define this in a css file:

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

is there a way to make myCustomValue available in the PanelSkin ?

Answer 1

You have to use the [Style] metadata, here's more info on this: Style metadata tag

Answer 2

Even without [Style] metadata on the component class, it seems you can set CSS properties and they'll be available in the skin. As a test, I created a custom skin and attached it to SkinnableComponent, and then set a property 'special-color' via CSS. In the skin, I bound to "{getStyle('specialColor')", and it retrieved the property value that I set.

All you might be sacrificing by omitting the metadata is the autocompletion on the CSS.

My test code:

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 3

You have to define you host component class in the mxml skin file. [HostComponent("your.component.class")]

After this, you'll be able to get any style defined in the css file by using hostComponent.getStyle("myCustomValue")