Flex スタイル,CSS,スキン,テーマ

スタイルの設定
- 属性
- CSS
- メソッド
スタイルの公開
CSS記述
スキン
テーマ
- テーマの変更

スタイルの設定 †

属性 †

APIリファレンスの「スタイル」に記載されているものがイベント属性として記述できます。例えばButtonコンポーネントであれば、fillColorsスタイルを以下のように記述できます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

   <mx:Button label="click!" fillColors="[0x000000,0xFF0000]"/>
   <mx:Button label="click!" fillColors="[0x000000,0x00FF00]"/>
   <mx:Button label="click!" fillColors="[0x000000,0x0000FF]"/>

</mx:Application>

↑

CSS †

スタイルはCSSによって書き換えることが可能です。CSSはStyleタグを使用しソース内、もしくは外部CSSファイルとして記述できます。下記はソース内に記述する方法です。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

   <mx:Style>
      .red {
         fillColors:#FF0000,#FFFFFF;
      }
      .green {
         fillColors:#00FF00,#FFFFFF;
      }
      .blue {
         fillColors:#0000FF,#FFFFFF;
      }
   </mx:Style>

   <mx:Button styleName="red"   label="click!"/>
   <mx:Button styleName="green" label="click!"/>
   <mx:Button styleName="blue"  label="click!"/>

</mx:Application>

↑

メソッド †

スタイルは、実際にはUIComponentクラスのsetStyleメソッドによって処理されています。前述のサンプルをスクリプトによって書き換えます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">

   <mx:Script>
      <![CDATA[
         private function init():void
         {
            red  .setStyle("fillColors",[0xFF0000,000000]);
            green.setStyle("fillColors",[0x00FF00,000000]);
            blue .setStyle("fillColors",[0x0000FF,000000]);
         }
      ]]>
   </mx:Script>

   <mx:Button id="red"   label="click!"/>
   <mx:Button id="green" label="click!"/>
   <mx:Button id="blue"  label="click!"/>

</mx:Application>

↑

スタイルの公開 †

スタイルをMXMLタグの属性としてイベントを公開するにはStyleメタデータタグを使用します。name属性で指定した文字列がスタイル属性として公開されます。通常、import文の後、クラス定義の前に挿入します。

/**
 *  Gap between the label and icon, when the <code>labelPlacement</code> property
 *  is set to <code>left</code> or <code>right</code>.
 * 
 *  @default 2
 */
[Style(name="horizontalGap", type="Number", format="Length", inherit="no")]

コード的にはスタイルの値をgetStyleメソッドにより取得し、その取得した値を描画に作用させることによって実現します。つまりFlexフレームワークとしてのスタイルの実装はオブジェクトにスタイルの値を埋め込むところまでであり、実際の描画はそのクラス自身で実装されます。

↑

CSS記述 †

↑

クラスセレクタ †

MXMLのstyleName属性値で特定される要素に対してスタイルを設定します。

.bodyText { 
    textAlign: left;
}

↑

タイプセレクタ †

特定のコンポーネントすべてに対してスタイルを設定します。以下はLabelコンポーネントに対して。

Label { 
   textAlign: left;
}

↑

グローバルセレクタ †

すべてのコントロールに対してスタイルを設定します。

global {
   fontSize:22;
   textDecoration: underline;
}

↑

RGB形式記述の注意点 †

HEX形式（0x000000）ではなく、＃から始まる形式（#000000）です。注意！

↑

スキン †

コンポーネントのビジュアルエレメントを修正または置換することで外観を変更する処理。例えばButtonコントロールの概観を変更するにはskinスタイルを使用します。

Button {
   overSkin: Embed("../assets/images/orb_over_skin.gif");
   upSkin: Embed("../assets/images/orb_up_skin.gif");
   downSkin: Embed("../assets/images/orb_down_skin.gif");
}

skinスタイルには、１．埋め込みアセット、２．描画クラスを指定することができ、それぞれグラフィカルスキン、プログラマスキンと呼ばれます。

↑

グラフィカルスキン †

埋め込みアセットを指定します。

Button {
   overSkin: Embed("../assets/images/orb_over_skin.gif");
   upSkin: Embed("../assets/images/orb_up_skin.gif");
   downSkin: Embed("../assets/images/orb_down_skin.gif");
}

↑

プログラムスキン †

描画クラスを指定します。指定はClass Referenceを利用します。

Button {
   upSkin:ClassReference('MySkin');
   downSkin:ClassReference('MySkin');
   overSkin:ClassReference('MySkin');
   disabledSkin:ClassReference('MySkin');
}

↑

プログラムスキンの利点 †

描画内容はすべてスクリプトで記述する、すなわち画像リソースが含まれないのでコンパイル後の容量が大きくならない。

↑

テーマ †

テーマを変更することで概観を大きく変更することが出来る。すべてのスタイルのデフォルトをごっそり変更するイメージ。

↑

テーマの変更 †

コンパイル時にtheme引数を追加する。以下はconfigファイルにおける記述例。ソースパス上に「アプリケーション名-config.xml」を作成しコンパイルすることで、Flexデフォルトで用意されているテーマに変更できます。

<flex-config>
   <compiler>

       <!-- HaloClassic --><!--
       <theme><filename>/Applications/Adobe Flex Builder 3/sdks/3.0.0/frameworks/themes/HaloClassic/HaloClassic.swc</filename></theme>
       -->

       <!-- Ice --><!--
       <theme><filename>/Applications/Adobe Flex Builder 3/sdks/3.0.0/frameworks/themes/Ice/Ice.css</filename></theme>
       -->

       <!-- Institutional --><!--
       <theme><filename>/Applications/Adobe Flex Builder 3/sdks/3.0.0/frameworks/themes/Institutional/Institutional.css</filename></theme>
       -->

       <!-- Smoke --><!--
       <theme><filename>/Applications/Adobe Flex Builder 3/sdks/3.0.0/frameworks/themes/Smoke/Smoke.css</filename></theme>
       -->

       <!-- Wooden --><!--
       <theme><filename>/Applications/Adobe Flex Builder 3/sdks/3.0.0/frameworks/themes/Wooden/Wooden.css</filename></theme>
       -->

   </compiler>
</flex-config>