Flex クイックスタート： 簡単なユーザインタフェースの作成
目次
コンポーネントへのスタイルの適用
スタイルは、Adobe® Flex™ アプリケーションの使い勝手（外観）を決めるために役立ちます。 スタイルを使用して 1 つのコンポーネントの外観を変更したり、すべてのコンポーネントにスタイルを適用したりすることができます。
Flex ではさまざまな方法でスタイルを適用することができます。 細かい制御が可能で、プログラムのように実行できるものがあります。 柔軟性は低いが、計算がそれほど必要でないものもあります。 Flex では、次のような方法でコントロールにスタイルを適用できます。
Flex では、すべてのコンポーネントの外観を CSS （Cascading Style Sheets）で制御することはできません。 ■訳を後の文節にまとめました■ x, y, width および height などのプロパティは、スタイルではなく UIComponent クラスのプロパティなので、CSS で設定することはできません。 また、使用するテーマでは、どのプロパティがサポートされるか注意する必要があります。 Flex のデフォルトテーマでは、すべてのスタイルプロパティはサポートされません。
テーマは、Flex アプリケーションの外観を定義するスタイルのセットです。 テーマを使って、アプリケーションのカラースキームや一般的フォントなど簡単なものを定義したり、アプリケーションで使用するすべてのコンポーネントの外観を変更したりすることができます。 テーマは通常 SWC ファイルの形式です。 ただし、CSS ファイルおよび SWF ファイルのシンボルなどの埋め込みグラフィカルリソースにすることもできます。
テーマに適用可能なスタイルプロパティについて詳しくは、『Flex 2 Developer's Guide』の「About supported styles」を参照してください。
特定のビジュアルコンポーネントに適用可能なスタイルについては、『Adobe Flex 2 Language Reference』のコンポーネントのスタイルの節を参照してください。
ローカルスタイル定義の使用
■訳を後の文節にまとめました■ <mx:Style> タグを使用して、 MXML ファイルでローカルスタイル定義を作成することができます。 このタグには CSS 2.0 構文に従ったスタイルシート定義が含まれます。 これらの定義は現在のドキュメントとそのすべての子ドキュメントに適用されます。
次の例では、 .solidBorder および .solidBorderPaddedVertically の 2 つのクラスセレクタを作成し、これらを使用して 2 つの VBox コンテナにスタイルを適用します。その際に styleName プロパティを使用します。■タグのみの部分を開けません■ styleName CSS の編集作業がより快適に行えます。この例では、クラスセレクタを使用することで、同じコンポーネントの複数のインスタンスに異なるスタイルを適用しています。
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="140" viewSourceURL="src/StylesStyleTag/index.html" > <mx:Style> .solidBorder { border-style: solid; } .solidBorderPaddedVertically { padding-top: 12; padding-bottom: 12; border-style: solid;
} </mx:Style> <mx:VBox styleName="solidBorder"> <mx:Button label="Submit"/> </mx:VBox> <mx:VBox styleName="solidBorderPaddedVertically" > <mx:Button label="Submit"/> </mx:VBox> </mx:Application>
ヒント：特定のコンポーネントのすべてのインスタンス間で同じスタイルを共有する場合は、CSS 型のスタイルセレクタを使用します。 たとえば、次の型セレクタを使用して、アプリケーションのすべての VBox インスタンスに実線のボーダーを適用することができます。
VBox { border-style: solid; }
結果
このコンテンツを視聴するには Flash が必要です
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
外部スタイルシートの使用
Flex では外部 CSS スタイルシートを使用できます。 現在のドキュメントとその子ドキュメントにスタイルシートを適用するには、 source プロパティ（ <mx:Style> タグ）を使用します。
注意：1 つのアプリケーションで使用するスタイルシートの数を制限し、アプリケーションのトップレベルのドキュメントのみでスタイルシートを設定してください。 <mx:Application> タグが含まれているのがトップレベルのドキュメントです。 子ドキュメントでスタイルシートを設定すると、予期しない結果が発生することがあります。
次の例では、external.css という外部 CSS ファイルで 2 つの CSS クラスセレクタを定義しています。 Flex アプリケーションで外部 CSS ファイルを使用するには、パスとファイル名を <mx:Style> タグの source プロパティで指定します。
例:
外部 CSS ファイル
/* An external CSS file */ .solidBorder { borderStyle: "solid"; } .solidBorderPaddedVertically { borderStyle: "solid"; paddingTop: 12px; paddingBottom: 12px; }
MXML ファイル
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="140" viewSourceURL="src/StylesExternal/index.html" > <mx:Style source="styles/external.css" /> <mx:VBox styleName="solidBorder"> <mx:Button label="Submit"/> </mx:VBox> <mx:VBox styleName="solidBorderPaddedVertically"> <mx:Button label="Submit"/> </mx:VBox> </mx:Application>
結果
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
インラインスタイルの使用
MXML タグのコンポーネントのプロパティとしてスタイルプロパティを設定することができます。 インラインスタイル定義は他のすべてのスタイル定義より優先されます。ただし、 setStyle() タグを使用して定義した実行時のスタイル変更は除きます。 たとえば、Box コンテナとそのコンテンツ間のボーダーのパディングを設定するには、 paddingTop および paddingBottom プロパティ（ <mx:VBox> タグ）を使用します。 同様に borderStyle プロパティを使用して、コンポーネントのボーダーの外観を定義することができます。
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="140" viewSourceURL="src/StylesTagAttributes/index.html" > <mx:VBox id="myVBox1" borderStyle="solid"> <mx:Button label="Submit"/> </mx:VBox> <mx:VBox id="myVBox2" borderStyle="solid" paddingTop="12" paddingBottom="12" > <mx:Button label="Submit"/> </mx:VBox> </mx:Application>
結果
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
setStyle() メソッドの使用
■訳を後の文節にまとめました■ setStyle() メソッドを使用して ActionScript のコントロールのインスタンスのスタイルプロパティを操作することができます。 このメソッドを使用してスタイルを適用するには、スタイルシートを使用する場合に比べてクライアントに大きな処理能力が必要ですが、スタイルの適用方法を細かく制御することができます。
この setStyle() メソッドではスタイル名とスタイル値の 2 つの引数が使用されます。
ヒント：初めてオブジェクトからインスタンスを作成してスタイルを設定するときには、 setStyle() メソッドを使用せずにスタイルシートを使用してみることをお勧めします。このメソッドは大量の計算を必要とするからです。 このメソッドは、実行時にオブジェクトのスタイルを変更する場合にのみ使用します。
例
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="150" height="140" viewSourceURL="src/StylesSetStyle/index.html" > <mx:Script> <![CDATA[ private function initVBox():void { myVBox2.setStyle("paddingTop", 12); myVBox2.setStyle("paddingBottom", 12); } ]]> </mx:Script> <mx:VBox borderStyle="solid"> <mx:Button label="Submit"/> </mx:VBox> <mx:VBox id="myVBox2" borderStyle="solid" paddingTop="12" paddingBottom="12" initialize="initVBox();" > <mx:Button label="Submit"/> </mx:VBox> </mx:Application>
結果
ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。
詳細情報
スタイルコンポーネントについて詳しくは、『Flex 2 Developer's Guide』の「Using Styles」を参照してください。
著者について
Aral Balkan 氏は開発チームの指揮、ユーザインタフェースの設計、リッチインターネットアプリケーションの構築、ロンドンの Macromedia ユーザグループ OSFlash.org* の運営、自らの会社 Ariaware* の経営に加えて、演技と歌も得意とする。 設計について積極的に語り、著書や記事も多数。 Flash プラットフォーム用オープンソース RIA フレームワーク Arp* の作者でもある。 常に強固な意見を持ち、活気にあふれ情熱的。 いつも笑顔を絶やさず、ガムをかみながら歩くこともある。
