Flex におけるスタイルの利用について・パート1
まずは、Flex 3 での、スタイルの利用方法のおさらいから。
Flex 3 でのスタイルの利用
HTML 4 / XHTML 1 でのスタイルの利用方法が、（１）タグ要素に直接HTML属性で指定する、（２）要素に直接CSSを適用する、（３）外部CSSを適用する、などなどがありますが、Flex 3 にもいくつかの方法があります。
（１）タイプ要素に直接MXML属性でスタイルを指定する
最もシンプルで簡単な方法。でも、mxmlファイル中のMXMLコーディング部分がぐちゃぐちゃして読みにくくなってしまうのが、難点。ちなみに、Flex Builder 3 のデザインビューでスタイルをビジュアルに編集すると、この（１）の方法になる。
1 | <?xml version="1.0" encoding="utf-8"?> |
2 | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="120" backgroundColor="#FFFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]"> |
4 | <mx:Button x="10" y="10" label="ボタン" |
（２）動的にスタイルを適用する
ActionScript 3.0 を使って、動的に Flex 3 コンポーネント のスタイルを変更してしまう方法。 mx.core.UIComponent クラス の setStyle() メソッド を使用。
ロジックにスタイルを書き込むことになるので、プログラムとデザインの分離が出来ない形になってしまう。
1 | <?xml version="1.0" encoding="utf-8"?> |
2 | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="120" backgroundColor="#FFFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]" initialize="init()"> |
4 | <mx:Script source="Hoge_logic.as" /> |
6 | <mx:Button x="10" y="10" label="ボタン" id="btn1" /> |
1 | private function init():void { |
2 | btn1.setStyle( "color", "0xCC0000" ); |
3 | btn1.setStyle( "font-size", "24" ); |
（３）CSSを使用する
Flex 3 CSS を使用する方法。下記の例では、タイプセレクタを使っています。ユーザインターフェイスとデザインとロジックの分離ができて便利。その分、やや手間はかかりますが…。
1 | <?xml version="1.0" encoding="utf-8"?> |
2 | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="120" backgroundColor="#FFFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]"> |
4 | <mx:Style source="style.css" /> |
6 | <mx:Button x="10" y="10" label="ボタン" /> |
Flex 3 で使用可能なCSSのセレクタ
HTML 4 / XHTML 1 などで使用可能な CSS のセレクタの種類は、非常にたくさんありますが、Flex 3 CSS で使用可能なセレクタの種類は以下の2種類のみ。
タイプセレクタ (Type selector)
最も単純なセレクタ。タイプ名を指定することで、そのタイプすべてに対してスタイルを適用できる。
01 | <?xml version="1.0" encoding="utf-8"?> |
02 | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="120" backgroundColor="#FFFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]"> |
04 | <mx:Style source="style.css" /> |
06 | <mx:VBox x="10" y="10" width="100%"> |
07 | <mx:Button id="btn1" label="ボタン1" /> |
08 | <mx:Button id="btn2" label="ボタン2" /> |
09 | <mx:Button id="btn3" label="ボタン3" /> |
クラスセレクタ (Class selector)
お馴染みのclass属性の値でスタイルを指定する。
01 | <?xml version="1.0" encoding="utf-8"?> |
02 | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="120" backgroundColor="#FFFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]"> |
04 | <mx:Style source="style.css" /> |
06 | <mx:VBox x="10" y="10" width="100%"> |
07 | <mx:Button id="btn1" label="ボタン1" |
09 | <mx:Button id="btn2" label="ボタン2" |
11 | <mx:Button id="btn3" label="ボタン3" /> |
Flex 3 では、小孫セレクタは対応していない
Flex 3 では、小孫セレクタが対応されていないので、次のような CSS を定義しても、反映されない。また、Flex Builder 3 で次のような警告が発せられる：「CSSセレクタタイプはサポートされていません：'Button *.strongStyle'」。
01 | <?xml version="1.0" encoding="utf-8"?> |
02 | <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="200" height="120" backgroundColor="#FFFFFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]"> |
04 | <mx:Style source="style.css" /> |
06 | <mx:VBox x="10" y="10" width="100%"> |
07 | <mx:Button id="btn1" label="ボタン1" |
09 | <mx:Button id="btn2" label="ボタン2" |
10 | styleName="strongStyle" /> |
11 | <mx:Button id="btn3" label="ボタン3" /> |
12 | <mx:Label id="lb1" text="ラベル1" |
13 | styleName="strongStyle" /> |
14 | <mx:Label id="lb2" text="ラベル2" /> |
comment