スタイルの使用 -- Flex 2.01

Flex ではスタイルを定義することにより、フォント、パディング、整列方法など、コンポーネントの一部の属性を設定できます。これらは、カスケーディングスタイルシート (CSS) で定義、使用するスタイルと同じです。各ビジュアルコンポーネントはスーパークラスのスタイルの多くを継承しながら、独自のスタイルを定義できます。スーパークラスのスタイルの中にはサブクラスで使用されないものもあります。ビジュアルコンポーネントでサポートされているスタイルを確認するには、『Adobe Flex 2 リファレンスガイド』のコンポーネントのページにあるスタイルのセクションを参照してください。

MXML では、すべてのスタイルをタグ属性として設定できます。したがって、次の例のように、paddingTop プロパティと paddingBottom プロパティを使用して Box コンテナの境界とその内容との間隔を設定できます。

<?xml version="1.0"?>
<!-- components\MXMLStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:VBox id="myVBox1" borderStyle="solid">
        <mx:Button label="Submit"/>
    </mx:VBox>

    <mx:VBox id="myVBox2" 
        borderStyle="solid" 
        paddingTop="12" 
        paddingBottom="12" >

        <mx:Button label="Submit"/>
    </mx:VBox>
</mx:Application>

また、ActionScript で setStyle() メソッドを使用するか、MXML で <mx:Style> タグを使用して、スタイルを設定することもできます。setStyle() メソッドは、スタイル名と値の 2 つのパラメータを受け取ります。次の例は、前の例と同じ機能を持ちます。

<?xml version="1.0"?>
<!-- components\ASStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            private function initVBox():void {
                myVBox2.setStyle("paddingTop", 12);
                myVBox2.setStyle("paddingBottom", 12);
            }
        ]]> 
    </mx:Script>

    <mx:VBox id="myVBox1" borderStyle="solid">
        <mx:Button label="Submit"/>
    </mx:VBox>

    <mx:VBox id="myVBox2" 
        borderStyle="solid" 
        initialize="initVBox();">

        <mx:Button label="Submit"/>
    </mx:VBox>
</mx:Application>

<mx:Style> タグを使用するときは、CSS シンタックス、またはスタイル宣言を含む外部ファイルへの参照を使用してスタイルを設定します。次に例を示します。

<?xml version="1.0"?>
<!-- components\TagStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        .myStyle {paddingTop: 12; paddingBottom: 12;}
    </mx:Style>

    <mx:VBox id="myVBox1" borderStyle="solid">
        <mx:Button label="Submit"/>
    </mx:VBox>

    <mx:VBox id="myVBox2" 
        styleName="myStyle" 
        borderStyle="solid">

        <mx:Button label="Submit"/>
    </mx:VBox>
</mx:Application>

スタイル定義の中でピリオドに続けて指定された部分は "クラスセレクタ" と呼ばれ、新たに指定するスタイルを定義しています。上の例では myClass がこれに相当します。定義したスタイルは、styleName プロパティを使用してコンポーネントに適用できます。上の例では、このスタイルを 2 番目の VBox コンテナに適用しています。

"タイプセレクタ" は、特定のコンポーネントタイプのすべてのインスタンスにスタイルを適用します。

次の例では、すべての Box コンテナの上下の余白を定義しています。

<?xml version="1.0"?>
<!-- components\TypeSelStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    
    <mx:Style>
        Box {paddingTop: 12; paddingBottom: 12;}
    </mx:Style>

    <mx:VBox id="myVBox" borderStyle="solid">
        <mx:Button label="Submit"/>
    </mx:VBox>

    <mx:Box id="myBox" borderStyle="solid">
        <mx:Button label="Submit"/>
    </mx:Box>
</mx:Application>

Flex の一部のスタイル (すべてのスタイルではない) は親コンテナから子コンテナに継承され、さらにスタイルタイプ全体やクラス全体に継承されます。borderStyle スタイルは VBox コンテナによって継承されないため、この例は前の例と同じ結果になります。上記のどの例も、次のようなアプリケーションになります。