フレックス4：カスタムCSS値

Question

コンポーネントのカスタムCSS値を作成し、コンポーネントが使用しているスキンクラスで利用できるようにする方法はありますか？たとえば、これをCSSファイルで定義する場合：

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

作る方法はありますか myCustomValue で利用可能 PanelSkin ?

Answer 1

コンポーネントクラスに[スタイル]メタデータがなくても、CSSプロパティを設定できるようになり、スキンで利用できるようになります。テストとして、カスタムスキンを作成してSkinnablecomponentに取り付けてから、CSSを介して「特別な色」を設定しました。皮膚では、「{getStyle（ 'specialcolor'）」に縛られ、設定したプロパティ値を取得しました。

メタデータを省略して犠牲にしているのは、CSSのオートコンプリートだけです。

私のテストコード：

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>

custantkin.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

スタイル]メタデータを使用する必要があります。これについては、以下をご覧ください。 スタイルメタデータタグ

Answer 3

MXMLスキンファイルでホストコンポーネントクラスを定義する必要があります。 [hostComponent（ "your.component.class"）

この後、hostComponent.getStyle（ "myCustomValue"）を使用して、CSSファイルで定義されたスタイルを取得できます。