コンポーネントの作成時にスタイルプロパティを作成すると、コンポーネントのユーザーがスタイルを使用してコンポーネントを設定できます。例えば、次の例では StyledRectangle というコンポーネントを作成し、グラデーションの塗りを使用してそのカラーを定義しています。

このグラデーションは 2 つのカラーで定義し、そのカラーは fillColors という新しいスタイルプロパティで設定します。fillColors スタイルで使用する 2 つのカラーの配列は、コンポーネントのユーザーが設定できます。StyledRectangle.as クラスは、fillColors スタイルのデフォルトカラーを定義していますが、次の例のように独自に設定することもできます。

<?xml version="1.0"?> 
<!-- skinstyle\MainRectWithFillStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">
 
    <!-- Set style by using a CSS type selector. -->
    <mx:Style>
        StyledRectangle {fillColors: #FF00FF, #00FFFF}
    </mx:Style>

    <!-- By default, use the style defined by the CSS type selector. -->
    <MyComp:StyledRectangle id="mySR1"/>

    <!-- By default, use the style defined by the CSS type selector. -->
    <MyComp:StyledRectangle id="mySR2"/>

    <!-- Change the default style by using the setStyle() method. -->
    <mx:Button label="Set gradient" 
        click="mySR2.setStyle('fillColors', [0x000000, 0xFFFFFF]);"/>

    <!-- Set fillColors in MXML. -->
    <MyComp:StyledRectangle id="mySR3" fillColors="[0x00FF00, 0xFFFFFF]"/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例で、StyledRectangle コンポーネントの CSS タイプセレクタは、fillColors プロパティの初期値を #FF00FF および #00FFFF に設定します。2 番目の StyledRectangle コンポーネントでは、Button コントロールの click イベントを使用し、setStyle() メソッドを通じて fillColor スタイルを変更します。3 番目のコンポーネントでは、MXML タグ属性を使用してスタイルプロパティを設定します。

スタイルプロパティの定義

コンポーネントのスタイルプロパティはクラス定義で定義します。

1. スタイルを定義する [Style] メタデータタグをクラス定義の前に挿入します。

   [Style] メタデータタグをクラス定義の前に挿入することにより、スタイルプロパティの MXML タブ属性を定義します。[Style] メタデータタグを省略した場合、プロパティを MXML タグ属性として設定しようとすると、MXML コンパイラからシンタックスエラーが発行されます。

   [Style] メタデータタグのシンタックスは次のとおりです。

   [Style(name="style_name"[,property="value",...])]
   
   

   詳しくは、カスタムコンポーネントのメタデータタグを参照してください。

2. プロパティへの変更を検出するには、styleChanged() メソッドをオーバーライドします。
3. スタイルをコンポーネントの表示に組み込むには、updateDisplayList() メソッドをオーバーライドします。
4. スタイルプロパティのデフォルト値を設定するには、静的初期化子を定義します。

   詳しくは、スタイルのデフォルト値の設定を参照してください。

次の例では、StyledRectangle コンポーネントおよび fillColors スタイルを定義しています。また、塗りのアルファ値を設定するのに使用できる alphas という 2 番目のスタイル プロパティも定義しています。

package myComponents 
{
    // skinstyle/myComponents/StyledRectangle.as
    import mx.core.UIComponent;
    import mx.styles.CSSStyleDeclaration;
    import mx.styles.StyleManager;
    import flash.display.GradientType;

    // Insert the [Style] metadata tag to define the name, type 
    // and other infomration about the style property for the 
    // MXML compiler.
    [Style(name="fillColors",type="Array",format="Color",inherit="no")]
    public class StyledRectangle extends UIComponent
    {
    
        // Define a static variable.
        private static var classConstructed:Boolean = classConstruct();
    
        // Define a static method.
        private static function classConstruct():Boolean {
            if (!StyleManager.getStyleDeclaration("StyledRectangle"))
            {
                // If there is no CSS definition for StyledRectangle, 
                // then create one and set the default value.
                var newStyleDeclaration:CSSStyleDeclaration = 
                    new CSSStyleDeclaration();
                newStyleDeclaration.setStyle("fillColors", [0xFF0000, 0x0000FF]);
                StyleManager.setStyleDeclaration("StyledRectangle", newStyleDeclaration, true);
            }
            return true;
        }
    
        // Constructor  
        public function StyledRectangle() {
            super();    
        }       
    
    
        // Define a default size of 100 x 100 pixels.
        override protected function measure():void {
            super.measure();

            measuredWidth = measuredMinWidth = 100;
            measuredHeight = measuredMinHeight = 100;
        }

        // Define the variable to hold the current gradient fill colors.
        private var fillColorsData:Array;
        private var bFillColorsChanged:Boolean = true;

        // Define variables for additional controls on the fill.
        // You can create style properties for these as well.
        private var alphas:Array = [1.0, 1.0];
        private var ratios:Array = [0x00, 0xFF];
        
        // Override styleChanged() to detect changes in your new style.
        override public function styleChanged(styleProp:String):void {

            super.styleChanged(styleProp);

            // Check to see if style changed. 
            if (styleProp=="fillColors") 
            {
                bFillColorsChanged=true; 
                invalidateDisplayList();
                return;
            }
        }
    
    
        // Override updateDisplayList() to update the component 
        // based on the style setting.
        override protected function updateDisplayList(unscaledWidth:Number,
                unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            // Check to see if style changed. 
            if (bFillColorsChanged==true) 
            {
                // Redraw gradient fill only if style changed.
                fillColorsData=getStyle("fillColors");
                graphics.beginGradientFill(GradientType.LINEAR, 
                    fillColorsData, alphas, ratios);  
                graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
                bFillColorsChanged=false;
            }
        }
    }
}

スタイルのデフォルト値の設定

コンポーネントのスタイルプロパティを作成するときの決定事項の 1 つとして、デフォルト値の設定方法があります。スタイルプロパティのデフォルト値を設定することは、コンポーネントのコンストラクタで setStyle() メソッドを呼び出すことよりも複雑な面があります。Flex によるスタイルの処理方法とスタイルの優先順位を考慮する必要があります。

Flex は、アプリケーションをコンパイルするときに、最初に <mx:Style> タグのスタイル定義を確認します。その後にコンポーネントを作成します。したがって、コンポーネントのコンストラクタ内から setStyle() を呼び出す場合、この呼び出しは <mx:Style> タグの処理後に行われるので、コンポーネントの各インスタンスでスタイルプロパティを設定します。これにより、<mx:Style> タグの競合する CSS 宣言がオーバーライドされます。

スタイルプロパティのデフォルト値を設定する最も簡単な方法は、コンポーネントの静的初期化子を定義することです。静的初期化子は、Flex によってコンポーネントのインスタンスが初めて作成されるときに一度実行されます。スタイルプロパティの定義では、静的初期化子を定義するために classConstructed 変数および classConstruct() メソッドを StyledRectangle.as クラスの一部として使用しました。

classConstruct() メソッドは、Flex によって初めて StyledRectangle コンポーネントが作成されるときに呼び出されます。このメソッドは、<mx:Style> タグを使用して定義された、StyledRectangle クラスのスタイル定義が既に存在するかどうかを確認します。スタイルが定義されていない場合は、classConstruct() メソッドによってスタイルが作成され、スタイルプロパティのデフォルト値が設定されます。

したがって、次の例に示すように <mx:Style> タグをアプリケーションから省略すると、スタイル定義は classConstruct() メソッドによって作成されます。

<?xml version="1.0"?> 
<!-- skinstyle\MainRectNoStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">
 
    <MyComp:StyledRectangle/>
    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

<mx:Style> タグを含めると、次の例に示すように <mx:Style> タグによってデフォルトのスタイル定義が作成されます。

<?xml version="1.0"?> 
<!-- skinstyle\MainRectCSSStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">
 
    <mx:Style>
        StyledRectangle {fillColors: #FF00FF, #00FFFF}
    </mx:Style>

    <MyComp:StyledRectangle/>
    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

スキンのスタイルプロパティの定義

Flex では、スタイルプロパティを使用してコンポーネントのスキンを設定できます。新しいコンポーネントがスキンをサポートしている場合は、スタイルプロパティを使用したスキンの設定もサポートされます。

スキンをサポートするスタイルプロパティの作成方法は、他のスタイルプロパティの作成方法と同じです。styleChanged() メソッドへの呼び出しをトリガするスキンのスタイルプロパティを設定します。styleChanged() メソッドは、スキンへの変更を検出し、updateDisplayList() メソッドでコンポーネントの外観への更新を実行します。

スキンのスタイルプロパティを定義する場合の 1 つの相違点は、[Style] メタデータタグの指定方法です。次の例に示すように、スタイルプロパティがスキンに対応する場合、Class をメタデータタグの type プロパティへの値として指定します。

[Style(name="downSkin", type="Class", inherit="no")]

スキンの作成について詳しくは、スキンの作成を参照してください。