スタイルプロパティは、使用フォントのサイズや背景色など、コンポーネントの外観を定義します。カスタム ActionScript コンポーネントは、基本クラスのスタイルをすべて継承するので、その基本クラスと同様に設定できます。

カスタムコンポーネントのスタイルプロパティを変更するには、コンポーネントのコンストラクタで、setStyle() メソッドを使用します。このメソッドでは、コンポーネントのすべてのインスタンスに対して同じスタイルが適用されますが、コンポーネントのユーザーは MXML のタグで、setStyle() メソッドの設定をオーバーライドできます。コンポーネントのクラスファイルで設定されていないスタイルプロパティは、すべてコンポーネントのスーパークラスから継承されます。

次の ActionScript クラスファイルは、BlueButton コントロールの color スタイルと borderColor スタイルを設定しています。

package myComponents
{
    // as/myComponents/BlueButton.as
    import mx.controls.Button;

    public class BlueButton extends Button 
    {
    
        public function BlueButton() {
            super();

            // Set the label text to blue.
            setStyle("color", 0x0000FF);

            // Set the borderColor to blue.
            setStyle("borderColor", 0x0000FF);
        }
    }
}

次の MXML ファイルは、コンポーネントのクラスファイルで設定されたデフォルトの color と borderColor スタイルで、BlueButton コントロールを使用します。

<?xml version="1.0"?> 
<!-- as/ASMainBlueButton.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComps="myComponents.*">

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

コンストラクタでスタイルを設定しても、コンポーネントのユーザーがスタイルを変更するのを防ぐことはできません。例えば、次の例のように、ユーザーは color スタイルに値を設定できます。

<?xml version="1.0"?> 
<!-- as/MainBlueButtonRed.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComps="myComponents.*">

    <MyComps:BlueButton label="Submit" color="0xFF0000"/>
      
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

color プロパティの設定以外に、フォントやフォントサイズなどのスタイルプロパティを設定できます。使用可能なスタイルプロパティについて詳しくは、親コントロールのクラスに関する情報を参照してください。

また、コンポーネントに新しいスタイルプロパティを定義することもできます。詳しくは、ActionScript を使用した高度なビジュアルコンポーネントを参照してください。

defaults.css ファイルのスタイルの適用

コンポーネントを SWC ファイルとしてパッケージする場合は、defaults.css という名前のグローバルスタイルシートを SWC ファイルに定義できます。defaults.css ファイルには、SWC ファイルに定義されているすべてのコンポーネントの、デフォルトのスタイル設定が定義されます。

詳しくは、defaults.css ファイルのスタイルの適用を参照してください。