2009-11-05 12 views
5

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

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

PanelSkinmyCustomValueを利用できるようにする方法はありますか?あなたは[スタイル]メタデータを使用する必要が

答えて

5

がさえコンポーネントクラス上の[スタイル]メタデータなしで、あなたが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> 

は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> 
+0

ありがとう! – greggreg

+0

スキンを持たずにこれを行うことはできますか? – HDave

0

あなたはMXMLスキンファイルにコンポーネントクラスをホスト定義する必要があります。 [HostComponent( "your.component.class")]この後

、あなたが hostComponent.getStyle( "myCustomValue")を使用してCSSファイルで定義された任意のスタイルを取得することができます