テーマは、Flex アプリケーションの外観と操作性を定義します。テーマには、アプリケーションのカラースキーマや共通フォントなどの単純なものから、アプリケーションで使用されるすべてのコンポーネントの完全な再スキンのような複雑なものまで定義できます。

テーマは、通常は SWC ファイルの形式をとります。ただし、テーマを CSS ファイルにすることや、SWF ファイルのシンボルのような埋め込みグラフィカルリソースとすることも可能です。テーマ SWC ファイルもスタイル SWF ファイルにコンパイルし、実行時にロードすることができます。詳細については、実行時スタイルシートとしてのテーマ SWC ファイルの使用を参照してください。

デフォルトのテーマである Halo は、SWC ファイルに含まれるグラフィカルスキンとプログラムスキンを組み合わせたものです。この組み合わせは、framework.swc ファイルの中の defaults.css ファイルによって定義されます。framework.swc ファイルでは、Flex コンポーネントのプロパティが数多く設定されています。場合によっては、mx.skins.halo パッケージのクラスが使用されることもあります。Flex には、実際のアプリケーションに適用できる事前定義のテーマがいくつか用意されています。詳細については、付属のテーマファイルについてを参照してください。

SWC ファイルの内容を Flex アプリケーションに適用するには、テーマの使用の手順に従います。独自にテーマを作成するには、テーマ SWC ファイルの作成の手順に従います。テーマを新規に作成しなくても、Flex アプリケーションのテーマを編集できます。このような編集には、themeColor プロパティを使用します。詳細については、テーマの作成を参照してください。

テーマの使用

テーマは通常テーマ SWC ファイルの形をとります。これらの SWC ファイルには、スタイルシートやスキニングアセットが含まれています。プログラムスキンや、SWF ファイル、GIF ファイル、JPEG ファイルのようなグラフィカルアセットは、テーマの SWC ファイルの中でアセットとして使用します。単独の CSS ファイルのみでテーマを構成することもできます。

テーマを、緩い結合で結び付けた各種ファイルの集合とせず、SWC ファイルとしてパッケージ化すると、次の利点が得られます。

• SWC ファイルなので、配布が容易です。
• SWC ファイルは、再コンパイルしない限り、改変してアプリケーションに適用し直すことができません。
• SWC ファイルはプリコンパイルされています。そのため、SWC ファイルに含まれていないスキンクラスのコンパイル時間と比べて、アプリケーションのコンパイル時間が短くなります。

テーマを Flex アプリケーションに適用するには、theme コンパイルオプションを使用して SWC ファイルまたは CSS ファイルを指定します。次の例では、BullyBuster テーマの SWC ファイルを使用するアプリケーションをコンパイルするために、mxmlc コマンドラインコンパイラを使用しています。

mxmlc -theme c:/theme/BullyBuster.swc c:/myfiles/flex/misc/MainApp.mxml

flex-config.xml ファイルのオプションを使用してアプリケーションをコンパイルする場合は、次のようにテーマを指定します。

<compiler>
    <theme>
        <filename>c:/theme/BullyBuster.swc</filename>
    </theme>
</compiler>

テーマのリストに SWC ファイルを追加すると、コンパイラによって、その SWC ファイルに収められているクラスがアプリケーションの library-path に追加されます。さらに、その SWC ファイルにある CSS ファイルがアプリケーションに適用されます。しかし、この逆の操作は機能しません。library-path に SWC ファイルを追加しても、theme オプションを使用してその SWC ファイルを指定していなければ、コンパイラでは、その SWC ファイルにある CSS ファイルがアプリケーションに適用されません。

詳細については、Flex コンパイラの使用を参照してください。

アプリケーションに適用するテーマとして、複数のテーマファイルを指定できます。両方のファイルに重複するスタイルがなければ、それぞれのファイルにあるテーマがすべて適用されます。ただし、テーマファイルの適用順序は重要です。複数のテーマファイルにある同じスタイルプロパティを指定すると、リストの最後にあるテーマが使用されます。次の例では Wooden.css ファイルにあるスタイルプロパティが優先されますが、先頭の 2 つのファイルにのみ存在するプロパティはそのまま適用されます。

<compiler>
    <theme>
        <filename>../themes/Institutional.css</filename>
        <filename>../themes/Ice.css</filename>
        <filename>../themes/Wooden.css</filename>
    </theme>
</compiler>

付属のテーマファイルについて

Flex には、変更せずにそのまま使用できるテーマがいくつか付属しています。デフォルトの Halo テーマを除き、これらのテーマはすべて SDK の flex_install_dir/frameworks/themes ディレクトリにあります。Flex Builder の場合、テーマは flex_install_dir/sdks/sdk_version/frameworks/themes ディレクトリにあります。

これらのテーマについて次の表で説明します。

テーマ SWC ファイルの作成

テーマ SWC ファイルを構築するには、CSS ファイルを作成し、そのファイル、グラフィカルアセット、およびプログラムアセットを SWC ファイルに追加します。そのためには、compc ユーティリティの include-file オプションを使用します。

framework.swc ファイルにある defaults.css ファイルをカスタマイズして新しいテーマを作成することをお勧めします。以降のセクションでは、これらの手順を詳しく説明します。

テーマのスタイルシートの作成

テーマは、スタイルシートと、そのスタイルシートで使用するアセットで構成されることが普通です。これらのアセットは、グラフィックファイルまたはプログラムスキンクラスです。

テーマの CSS ファイルにグラフィックファイルを追加するには、Embed ステートメントを使用します。次の例では、Button クラスに新しいグラフィカルスキンを定義します。

Button {
    upSkin: Embed("upIcon.jpg");
    downSkin: Embed("downIcon.jpg");
    overSkin: Embed("overIcon.jpg");
}

Embed キーワードに指定する名前は、SWC ファイルをコンパイルするときにスキンアセットに使用する名前と同じにします。

テーマの CSS ファイルにプログラムスキンクラスを追加するには、次の例に示すように、ClassReference ステートメントを使用して目的のクラス名（ファイル名ではありません）を指定します。

Button {
    upSkin:ClassReference('myskins.ButtonSkin');
    downSkin:ClassReference('myskins.ButtonSkin');
    overSkin:ClassReference('myskins.ButtonSkin');
}

前の例では、すべてのスキンが単一のプログラムスキンクラスファイルで定義されていました。詳細については、プログラムスキンの作成を参照してください。

CSS ファイルには、任意の数のクラスセレクタおよびタイプセレクタを指定できます。テーマのスタイル定義でスキンを使用する必要はありません。次の例に示すように、スタイルシートの中でスタイルプロパティを設定するだけですみます。

ControlBar {
    disabledOverlayAlpha: 0; 
    paddingBottom: 10;
    paddingLeft: 10;
    paddingRight: 10;
    paddingTop: 10;
    verticalAlign: "middle";
}

ControlBar コンポーネントのこのタイプセレクタは、framework.swc ファイル内のデフォルトのスタイルシートである defaults.css ファイルから取得したものです。このファイルを使用してテーマの設計に着手することをお勧めします。defaults.css の詳細については、デフォルトのスタイルシートについてを参照してください。

テーマ SWC ファイルのコンパイル

テーマ SWC ファイルをコンパイルするには、Flex コンポーネントコンパイラの include-file オプションおよび include-classes オプションを使用します。このコンパイラは、コンポーネントライブラリおよび RSL（Runtime Shared Library：ランタイム共有ライブラリ）の作成に使用するコンパイラと同じものです。

コンポーネントコンパイラは、compc コマンドラインユーティリティを使用して呼び出すか、Adobe Flex Builder でライブラリプロジェクトを作成する際に呼び出します。

include-file オプションを使用して、テーマ SWC ファイルに CSS ファイルとグラフィックファイルを追加します。これについては、include-file オプションを使用したテーマ SWC ファイルのコンパイルを参照してください。include-classes オプションを使用して、テーマ SWC ファイルにプログラムスキンクラスを追加します。これについては、include-classes オプションを使用したテーマ SWC ファイルのコンパイルを参照してください。

テーマ SWC ファイルのコンパイルに使用するコマンドを簡素化するには、設定ファイルを使用します。詳細については、設定ファイルを使用したテーマ SWC ファイルのコンパイルを参照してください。

include-file オプションを使用したテーマ SWC ファイルのコンパイル

include-file オプションは、2 つのパラメータ、つまり名前とパスを受け取ります。name は、アセットを CSS ファイルで参照する場合と同じように参照するために使用する名前です。path は、アセットへのファイルシステムパスです。include-file を使用するときに、ソースパスにリソースを追加する必要はありません。次のコマンドラインの例では、テーマ SWC ファイルに upIcon.jpg アセットを追加します。

-include-file upIcon.jpg c:/myfiles/themes/assets/upIcon.jpg 

テーマ SWC ファイルに追加するリソースとして、CSS ファイルも指定します。CSS ファイルの名前を指定するときは、.css 拡張子も含めて記述します。拡張子を記述しないと、目的のファイルがスタイルシートとして認識されないので、アプリケーションに適用されません。

コンポーネントコンパイラを使用して、スタイルシートやグラフィカルスキンなどのテーマのアセットを SWC ファイルにコンパイルします。次の例では、compc コマンドラインコンパイラを使用してテーマをコンパイルします。

compc -include-file mycss.css c:/myfiles/themes/mycss.css 
    -include-file upIcon.jpg c:/myfiles/themes/assets/upIcon.jpg 
    -include-file downIcon.jpg c:/myfiles/themes/assets/downIcon.jpg 
    -include-file overIcon.jpg c:/myfiles/themes/assets/overIcon.jpg 
    -o c:/myfiles/themes/MyTheme.swc

include-file オプションにリストの形式で複数のアセットを渡すことはできません。引数のペアごとに -include-file を記述し、その後に引数のペアを指定する必要があります。ほとんどのテーマでは、多くのスキンファイルやスタイルシートが使用されます。それが原因で、コンパイルするたびに負荷が大きくなることがあります。この処理を簡素化するには、load-config オプションを使用し、設定オプションを含むファイルを指定します。例えば、複数の include-file オプションを指定します。詳細については、設定ファイルを使用したテーマ SWC ファイルのコンパイルを参照してください。

include-classes オプションを使用したテーマ SWC ファイルのコンパイル

include-classes オプションは、単一の引数、つまり SWC ファイルに含めるクラス名を受け取ります。クラスファイル名ではなく、クラス名を渡します。例えば、MyButtonSkin.as ではなく、MyButtonSkin を渡します。SWC ファイルをコンパイルするときは、このクラスがソースパスに存在している必要があります。

次のコマンドラインの例では、CSS ファイルと単一のプログラムスキンクラスを持つテーマ SWC ファイルをコンパイルします。このスキンクラスは MyButtonSkin で、themes ディレクトリに置かれています。

compc -source-path c:/myfiles/flex/themes
    -include-file mycss.css c:/myfiles/flex/themes/mycss.css 
    -include-classes MyButtonSkin -o c:/myfiles/flex/themes/MyTheme.swc

include-classes オプションには、リストの形式で複数のクラスを渡すことができます。次の例に示すように、各クラスを空白で区切って記述します。

-include-classes MyButtonSkin MyControlBarSkin MyAccordionHeaderSkin

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

設定ファイルを使用したテーマ SWC ファイルのコンパイル

設定ファイルを使用すると、一般的にコマンドライン上でオプションを渡すより冗長になりますが、その一方で、コンポーネントコンパイラオプションの読み取りと保守は簡単になります。例えば、設定ファイル内でコマンドラインを次のエントリに置き換えることができます。

<?xml version="1.0"?>
<flex-config xmlns="http://www.adobe.com/2006/flex-config">
    <output>MyTheme.swc</output>
    <include-file>
        <name>mycss.css</name>
        <path>c:/myfiles/themes/mycss.css</path>
    </include-file>
    <include-file>
        <name>upIcon.jpg</name>
        <path>c:/myfiles/themes/assets/upIcon.jpg</path>
    </include-file>
    <include-file>
        <name>downIcon.jpg</name>
        <path>c:/myfiles/themes/assets/downIcon.jpg</path>
    </include-file>
    <include-file>
        <name>overIcon.jpg</name>
        <path>c:/myfiles/themes/assets/overIcon.jpg</path>
    </include-file>
    <include-classes>
        <class>MyButtonSkin</class>
        <class>MyAccordionHeaderSkin</class>
        <class>MyControlBarSkin</class>
    </include-classes>
</flex-config>

次の例に示すように、load-config オプションを指定すると、compc で設定ファイルを使用できます。

compc -load-config myconfig.xml

Flex Builder のコンポーネントコンパイラに設定ファイルを渡すこともできます。コンポーネントコンパイラの使用の詳細については、Flex コンパイラの使用を参照してください。