スタイルは、スキンと共に Flex アプリケーションの外観と操作性を定義します。スタイルを使用すると、単独のコンポーネントの外観を変更、あるいは全コンポーネントに同じ外観を適用できます。

カスタムコンポーネントを使用する場合、スタイルの使用方法にはいくつかのオプションが存在します。スタイル情報をまったく含めないカスタムコンポーネントも定義できます。このデザインでは、コンポーネントを使用するアプリケーション開発者がアプリケーションの他の部分と一致するスタイルを適用できます。例えば、テキストを表示するカスタムコンポーネントを定義した場合、アプリケーション開発者はコンポーネントのフォント、フォントサイズ、およびフォントスタイルがアプリケーションの他の部分と一致するスタイルを適用できます。

また、アプリケーション開発者による追加スタイルの適用の必要性をなくすために、ビルトインの外観とともに展開するコンポーネントを開発することもできます。このタイプのコンポーネントは、固定した外観を持つヘッダまたはフッタを必要としながら、アプリケーション本体の外観に高い柔軟性を持つアプリケーションに便利な場合があります。

また、こうした手法を組み合わせてカスタムコンポーネントを開発することもできます。この種のデザインでは、アプリケーション開発者が設定できるスタイルと設定できないスタイルがあります。

Flex のスタイルに関する一般的な情報については、スタイルとテーマの使用を参照してください。カスタムスタイルの作成について詳しくは、カスタムスタイルプロパティを参照してください。

カスタムコンポーネントからのスタイルの適用

コンポーネントがその使用時に常に同じ外観を保持し、アプリケーション開発者がスタイルの適用について配慮する必要がないように、MXML コンポーネント内でスタイルを定義できます。

カスタムコンポーネントでは、次の一方または両方のメカニズムを使用してスタイルを定義します。

• タグプロパティ
• クラスセレクタ

次のカスタムコンポーネントは、ComboBox コントロールのタグプロパティを使用してスタイルを定義しています。

<?xml version="1.0"?>
<!-- mxml/myComponents/StateComboBoxWithStyleProps.mxml -->

<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    openDuration="1000" 
    fontSize="15">

    <mx:dataProvider>   
        <mx:Array>
            <mx:String>AK</mx:String>
            <mx:String>AL</mx:String>
        </mx:Array>
    </mx:dataProvider>
</mx:ComboBox>

また、次の例に示すように、クラスセレクタスタイル宣言を使用して、これらのスタイルを定義することもできます。

<?xml version="1.0"?>
<!-- mxml/myComponents/StateComboBoxWithStyleClassSel.mxml -->

<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml" styleName="myCBStyle">

    <mx:Style>
        .myCBStyle {
            openDuration : 1000;
            fontSize : 15;
            }
    </mx:Style>

    <mx:dataProvider>   
        <mx:Array>
            <mx:String>AK</mx:String>
            <mx:String>AL</mx:String>
        </mx:Array>
    </mx:dataProvider>
</mx:ComboBox>

アプリケーション開発者はこのコンポーネントに追加スタイルを適用できます。例えば、開いている継続時間とフォントサイズのスタイルをコンポーネントで定義している場合でも、アプリケーション開発者はフォントカラーやその他のスタイルを指定できます。次の例では、アプリケーション内で StateComboBoxWithStyleProps.mxml を使用し、コントロールのフォントカラースタイルを指定しています。

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

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

参照元ファイルからのスタイルの適用

MXML コンポーネントを参照する場合、参照元ファイルでは次のメカニズムを使用して MXML コンポーネントのスタイル定義を指定できます。

• タグプロパティ
• クラスセレクタ
• タイプセレクタ

アプリケーション開発者が適用できるスタイルは、MXML コンポーネントのルートタグによりサポートされるスタイルに対応します。次の例では、カスタム MXML コンポーネントのスタイルを設定するために、タグプロパティを使用しています。

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

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

タグ属性としてスタイルを指定した場合、MXML コンポーネントの定義内で設定した、競合するすべてのスタイルがオーバーライドされます。

スタイルは、クラスセレクタを使用して定義できます。次の例に示すように、コントロールの個別のインスタンスにスタイルを適用するために、クラスセレクタを使用することもあります。

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

    <mx:Style>
        .myStateComboBox {
            openDuration : 1000;
        }
    </mx:Style> 

    <MyComp:StateComboBoxWithStyleProps styleName="myStateComboBox"/>
    <mx:ComboBox>
        ...
    </mx:ComboBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、MXML コンポーネントの個別のインスタンスにスタイルを適用するために、MXML コンポーネントのタグ定義内で styleName プロパティを使用しています。ただし、このようなスタイルは、メインアプリケーションファイル内で定義した ComboBox コントロールには適用されません。また、MXML コンポーネントの該当インスタンスを定義する作業の一部分として styleName プロパティを指定していない限り、StateComboBox.mxml の他のインスタンスには適用されません。

クラスセレクタを使用してスタイルを指定すると、MXML ファイルのクラスセレクタを使用して設定したすべてのスタイルがオーバーライドされます。MXML ファイルのタグプロパティを使用して設定したスタイルはオーバーライドされません。

タイプセレクタを使用してスタイルを定義することもできます。タイプセレクタでは、次の例に示すように、コンポーネントのすべてのインスタンスにスタイルが適用されます。

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

    <mx:Style>
        StateComboBoxWithStyleProps {
            openDuration : 1000;
        }
    </mx:Style> 

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

この例では、タイプセレクタにより、アプリケーション内の StateComboBox コントロールのすべてのインスタンスに openDuration スタイルを指定しています。タイプセレクタを使用してスタイルを指定すると、MXML ファイルのクラスセレクタを使用して設定したすべてのスタイルがオーバーライドされます。MXML ファイルのタグプロパティを使用して設定したスタイルは、オーバーライドされません。

カスタムコンポーネントのルートタグへのタイプセレクタの適用

すべてのカスタムコンポーネントには、そのコンポーネントのスーパークラスを指定するルートタグが含まれています。StateComboBox.mxml の場合、ルートタグは <mx:ComboBox> です。次の例に示すように、メインアプリケーションファイル内で ComboBox コントロールまたは ComboBox コントロールのスーパークラスのタイプセレクタを定義すると、そのルートタグとして ComboBox を使用するすべてのカスタムコンポーネントにそのスタイル定義が適用されます。

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

    <mx:Style>
        ComboBox {
            openDuration: 1000;
            fontSize: 15;
            color: red;
        }
    </mx:Style> 

    <MyComp:StateComboBoxWithStyleProps/>
    <mx:ComboBox/>

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

この例では、すべての ComboBox コントロールとすべての StateComboBox.mxml コントロールで、openDuration は 1000 ミリ秒、fontSize は 15 ポイントであり、赤いテキストを持ちます。

カスタムコントロールのスーパークラスおよびカスタムコントロール自体のタイプセレクタを定義すると、次の例に示すように、Flex によってスーパークラスのタイプセレクタにある競合するすべての設定が無視されます。

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

    <mx:Style>
        ComboBox {
            color: red;
            openDuration: 1000;
            fontSize: 15;
        }
        StateComboBoxWithStyleProps {
            color: green;
        }
    </mx:Style> 

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

この例では、StateComboBox コントロールが緑のテキストと、ComboBox コントロールのタイプセレクタで指定されたスタイル fontSize および openDuration の値を使用しています。

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

Flex には、/frameworks/libs ディレクトリの framework.swc ファイル内に、defaults.css という名前のグローバルスタイルシートがあります。グローバルスタイルシートには、グローバルクラスセレクタ用のスタイル定義に加え、ほとんどの Flex コンポーネント用のタイプセレクタも含まれています。defaults.css ファイルは暗黙的にロードされ、コンパイルの段階で Flex アプリケーションに適用されます。

カスタム MXML コンポーネントおよびカスタム Action Script コンポーネントの最も一般的な配布方法の 1 つは、SWC ファイルを作成することです。SWC ファイルは、Flex 開発者が互いに効率よくコンポーネントやり取りできるようにする、Flex コンポーネントのアーカイブファイルです。単一のファイルを交換するだけでよく、MXML ファイルや ActionScript ファイル、イメージなどのリソースファイルを逐一送信する必要はありません。また、SWF ファイルは SWC ファイル内にコンパイルされているため、コードを簡単に覗くことはできません。

SWC ファイルについて詳しくは、Flex コンパイラの使用とプロジェクトの構築を参照してください。

SWC ファイルには、defults.css という名前のローカルスタイルシートを含めることができます。ローカルスタイルシートには、SWC ファイルに定義されているカスタムコンポーネントに対するデフォルトのスタイル設定が含まれています。Flex では、アプリケーションのコンパイル時、SWC ファイルのコンポーネントにローカルの defaults.css が自動的に適用されます。このようにして、グローバルな defaults.css スタイルシートを、SWC ファイルのローカルバージョンでオーバーライドすることができます。

ローカルバージョンには、以下の要件のみが必要です。

• SWC ファイルに含めることができるスタイルシートは、1 つのみです。
• ファイル名は、defults.css である必要があります。
• ファイルは、SWC ファイルの最上位のディレクトリに格納する必要があります。

例えば、次の例に示すように、StateComboBox.mxml という名前のカスタム ComboBox コントロールを定義します。

<?xml version="1.0"?>
<!-- StateComboBox.mxml -->
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:dataProvider>
        <mx:String>AK</mx:String>
        <mx:String>AL</mx:String>
        <!-- Add all other states. -->
        </mx:dataProvider>
</mx:ComboBox>

上記のコントロールには、スタイル設定は一切定義されていません。

次に、次の例に示すように、同じディレクトリ内に defaults.css ファイルを作成して、カスタムコンポーネントにデフォルトのスタイル設定を定義します。

StateComboBox
{
    arrowButtonWidth: 40;
    cornerRadius: 10;
    fontSize: "14";
    fontWeight: "bold";
    leading: 0;
    paddingLeft: 10;
    paddingRight: 10;
}

SWC ファイルを作成するには、defaults.css ファイルおよび StateComboBox.mxml ファイルと同じディレクトリにある、compc コマンドラインコンパイラを実行します。次の例のように、include-file オプションを使用して、スタイルシートを指定します。

flex_install_dir\bin\compc -source-path . 
    -include-classes StateComboBox 
    -include-file defaults.css defaults.css 
    -o MyComponentsSWC.swc

この例では、MyComponentsSWC.swc という名前の SWC ファイルを作成しています。

次に、次の例に示すように、StateComboBox コントロールを使用する DefaultCSSApplication.mxml という名前のアプリケーションを作成します。

<?xml version="1.0"?>
<!-- styles/DefaultCSSApplication.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="*">

    <mx:Label text="Custom MXML component using defaults.css from SWC file."/>
    <MyComp:StateComboBox/>

    <mx:Label text="Default ComboBox control using the default defaults.css file."/>
    <mx:ComboBox>
        <mx:dataProvider>
            <mx:String>AK</mx:String>
            <mx:String>AL</mx:String>
        </mx:dataProvider>
    </mx:ComboBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

StateComboBox コントロールの名前空間定義を DefaultCSSApplication.mxml に含めて、コンポーネントを参照していることに注意してください。これは、この MXML コンポーネントは SWC ファイルの最上位のディレクトリにあり、パッケージ名は空であるため、xmlns:MyComp="*" の名前空間定義を使用して参照しているためです。

MyComponentsSWC.swc を使用しているアプリケーションをコンパイルするには、アプリケーションを格納しているディレクトリに MyComponentsSWC.swc をコピーします。その後、Adobe® Flex™ Builder™ のライブラリパスに SWC ファイルを追加するか、または、次の例に示すように、mxmlc コマンドラインコンパイラで -library-path オプションを使用します。

flex_install_dir\bin\mxmlc 
    -file-specs DefaultCSSApplication.mxml 
    --library-path+=.

上記の例では、defaults.css ファイルおよびコンポーネントファイルは同じディレクトリに格納されています。通常、コンポーネントのパッケージ名が SWC ファイルにおけるコンポーネントのディレクトリの場所を示すディレクトリ構造にコンポーネントを配置します。

次の例では、SWC ファイルの myComponents サブディレクトリ内に StateComboBox.mxml ファイルを配置しています。ここで、サブディレクトリは、コンポーネントのパッケージ名に対応します。ただし、SWC ファイルのディレクトリ構造に関係なく、defaults.css は SWC ファイルの最上位ディレクトリ内に存在する必要があります。この SWC ファイルをコンパイルするには、以下のコマンドラインを使用します。

flex_install_dir\bin\compc -source-path . 
    -include-classes myComponents.StateComboBox 
    -include-file defaults.css defaults.css 
    -o MyComponentsSWC.swc

アプリケーションで StateComboBox.mxml コンポーネントを使用するには、次の例に示すように DefaultCSSApplication.mxml を定義します。

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

    <mx:Label text="Custom MXML component using defaults.css from SWC file."/>
    <MyComp:StateComboBox/>

    <mx:Label text="Default ComboBox control using the default defaults.css file."/>
    <mx:ComboBox>
        <mx:dataProvider>
            <mx:String>AK</mx:String>
            <mx:String>AL</mx:String>
        </mx:dataProvider>
    </mx:ComboBox>
</mx:Application>

DefaultCSSApplication.mxml 内の StateComboBox コントロールの名前空間定義に myComponents.* を含めて、SWC ファイルのディレクトリ構造とコンポーネントのパッケージ名を一致させています。

コンパイラの -defaults-css-files オプションを使用して、SWC ファイルを再作成することなく、defaults.css ファイルを変更およびテストできます。-defaults-css-files オプションによって追加された CSS ファイルは SWC ファイルよりも優先順位が高いため、SWC ファイル内の対応する定義をオーバーライドすることができます。

defaults.css ファイルの変更が完了したら、更新した defaults.css ファイルを使用して SWC ファイルを再作成します。