エントリー

※注意:このエントリーは、旧日記「Mio Diary Code:P」からデータを移管したものです。

Flex におけるスタイルの利用について・パート1
 まずは、Flex 3 での、スタイルの利用方法のおさらいから。

 

Flex 3 でのスタイルの利用

HTML 4 / XHTML 1 でのスタイルの利用方法が、(1)タグ要素に直接HTML属性で指定する(2)要素に直接CSSを適用する(3)外部CSSを適用する、などなどがありますが、Flex 3 にもいくつかの方法があります。

 

(1)タイプ要素に直接MXML属性でスタイルを指定する

最もシンプルで簡単な方法。でも、mxmlファイル中のMXMLコーディング部分がぐちゃぐちゃして読みにくくなってしまうのが、難点。ちなみに、Flex Builder 3 のデザインビューでスタイルをビジュアルに編集すると、この(1)の方法になる。

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]">
3     
4    <mx:Button x="10" y="10" label="ボタン"
5               color="#CC0000"
6               font-size="24" />
7     
8</mx:Application>

 

(2)動的にスタイルを適用する

ActionScript 3.0 を使って、動的に Flex 3 コンポーネント のスタイルを変更してしまう方法。 mx.core.UIComponent クラス の setStyle() メソッド を使用。
ロジックにスタイルを書き込むことになるので、プログラムとデザインの分離が出来ない形になってしまう。

  • Hoge.MXML
  • Hoge_logic.AS
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()">
3     
4    <mx:Script source="Hoge_logic.as" />
5     
6    <mx:Button x="10" y="10" label="ボタン" id="btn1" />
7     
8</mx:Application>

 

(3)CSSを使用する

Flex 3 CSS を使用する方法。下記の例では、タイプセレクタを使っています。ユーザインターフェイスとデザインとロジックの分離ができて便利。その分、やや手間はかかりますが…。

  • Hoge.MXML
  • style.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]">
3     
4    <mx:Style source="style.css" />
5     
6    <mx:Button x="10" y="10" label="ボタン" />
7     
8</mx:Application>

 

Flex 3 で使用可能なCSSのセレクタ

HTML 4 / XHTML 1 などで使用可能な CSS のセレクタの種類は、非常にたくさんありますが、Flex 3 CSS で使用可能なセレクタの種類は以下の2種類のみ。

 

タイプセレクタ (Type selector)

最も単純なセレクタ。タイプ名を指定することで、そのタイプすべてに対してスタイルを適用できる。

  • Hoge.MXML
  • style.CSS
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]">
03     
04    <mx:Style source="style.css" />
05     
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" />
10    </mx:VBox>
11     
12</mx:Application>

 

クラスセレクタ (Class selector)

お馴染みのclass属性の値でスタイルを指定する。

  • Hoge.MXML
  • style.CSS
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]">
03     
04    <mx:Style source="style.css" />
05     
06    <mx:VBox x="10" y="10" width="100%">
07        <mx:Button id="btn1" label="ボタン1"
08                   styleName="style1" />
09        <mx:Button id="btn2" label="ボタン2"
10                   styleName="style1" />
11        <mx:Button id="btn3" label="ボタン3" />
12    </mx:VBox>
13     
14</mx:Application>

 

Flex 3 では、小孫セレクタは対応していない

Flex 3 では、小孫セレクタが対応されていないので、次のような CSS を定義しても、反映されない。また、Flex Builder 3 で次のような警告が発せられる:「CSSセレクタタイプはサポートされていません:'Button *.strongStyle'」。

  • Hoge.MXML
  • style.CSS
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]">
03     
04    <mx:Style source="style.css" />
05     
06    <mx:VBox x="10" y="10" width="100%">
07        <mx:Button id="btn1" label="ボタン1"
08                   styleName="style1" />
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" />
15    </mx:VBox>
16     
17</mx:Application>

ページ移動

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
登録フォーム
名前 *
URL
コメント *
閲覧制限 *
【スパム対策】 2 × 2 × 2 = ? (半角数字で)

ユーティリティ

user profile

calendar

052025/0607
S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 - - - - -

tag cloud