Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コントロールの使用 > コントロールについて

コントロールについて

"コントロール" とは、Button、TextArea、ComboBox コントロールなど、ユーザーインターフェイス用のコンポーネントのことです。コントロールは、同じくユーザーインターフェイス用のコンポーネントで、コントロールや他のコンテナに対する階層構造を提供するコンテナに配置されます。コンテナを定義した後で、そこに含めるコントロールや他のコンテナを挿入するのが一般的です。

Flex アプリケーションのルートに位置する <mx:Application> タグは、Flash Player の描画面全体をカバーする基本コンテナを表します。コントロールまたはコンテナは、<mx:Application> タグの直下に配置することも、他のコンテナに配置することもできます。コンテナの詳細については、
コンテナについてを参照してください。

コントロールの多くは、次のような特徴を備えています。

コントロールとそのプロパティやイベントの値を宣言するための MXML API
コントロールのメソッドを呼び出したり、そのプロパティを実行時に設定するための ActionScript API
スタイル、スキン、フォントなどを使用してカスタマイズ可能な外観

次の図では、Form コンテナにいくつかのコントロールが使用されています。

Form コンテナの例

コントロールの作成と設定は、MXML および ActionScript の API を使用して実行できます。次の MXML コードは、Form コンテナに TextInput コントロールを作成する例です。

<?xml version="1.0"?>
<!-- controls\TextInputInForm.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Form width="300" height="100">
        <mx:FormItem label="Card Name">
            <mx:TextInput id="cardName"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>

この例では、次のイメージが作成されます。

Form コンテナの TextInput コントロールの例

Flex アプリケーションを構築するための言語としては MXML が一般的ですが、ActionScript を使用してコントロールを設定することもできます。たとえば、次のコード例では、アイテムの配列を DataGrid コントロールの dataProvider プロパティに設定することにより、DataGrid コントロールにデータを挿入しています。

<?xml version="1.0"?>
<!-- controls\DataGridConfigAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

        private function myGrid_initialize():void {
          myGrid.dataProvider = [
            {Artist:'Steve Goodman', Album:'High and Outside', Price:8.99},
            {Artist:'Carole King', Album:'Tapestry', Price:11.99},
            {Artist:'The Beach Boys', Album:'Pet Sounds', Price:13.99},
            {Artist:'Original Cast', Album:'Camelot', Price:9.99} ];
        }
        ]]>
    </mx:Script>
    
    <mx:DataGrid id="myGrid" 
        width="350" height="150" 
        color="#7B0974"
        creationComplete="myGrid_initialize();"/>
</mx:Application>

この例では、次のイメージが作成されます。

RadioButton コントロールの例

サブトピック

テキストコントロールについて 260

データプロバイダコントロールの使用 260

メニューコントロールの使用 261

Flex のコントロール 261

テキストコントロールについて

次の表に示すように、いくつかの Flex コンポーネントはテキストを表示するか、テキスト入力を受け取ります。

コントロール	テキストの種類
ラベル	編集不可能な単一行のテキストフィールド
Text	編集不可能な複数行のテキストフィールド
TextInput	(オプション) 編集可能な単一行のテキストフィールド
TextArea	(オプション) 編集可能な複数行のテキストフィールド
RichTextEditor	複数行のテキストフィールド、およびフォント、サイズ、太さ、整列などの特性を選択することで、ユーザーにテキストのフォーマットを可能にするコントロールを含む複合コントロール

これらのコントロールは、すべてが同じ外観のプレーンテキストを表示できます。フォーマット用の標準 HTML タグのサブセットを使用してフォーマットした、リッチテキストも表示できます。テキストコントロールの使用方法については、テキストコントロールの使用を参照してください。

データプロバイダコントロールの使用

DataGrid、Tree、ComboBox コントロールなど、いくつかの Flex コンポーネントは、データプロバイダから入力データを受け取ります。データプロバイダは配列と同様、アイテムのコレクションです。たとえば、Tree コントロールはデータプロバイダからデータを読み取ることによって、ツリー構造と各ツリーノードに割り当てられたデータを定義します。

データプロバイダでは、Flex コンポーネントとそのコンポーネントの生成に使用するデータのと間に抽象レベルが作成されます。同じデータプロバイダから複数のコンポーネントを作成できます。また、実行時にコンポーネントに使用するデータプロバイダを切り替えることもできます。さらに、データプロバイダを変更した場合に、そのデータプロバイダを使用するすべてのコンポーネントに変更が反映されるようにすることもできます。

データプロバイダをモデルとすれば、Flex コンポーネントはそのモデルに対するビューと考えることができます。モデルとビューを分離することにより、変更が生じたときに両方を修正するのではなく、どちらか一方だけを修正するだけで済むというメリットが生まれます。

このトピックでは、基本コントロールについて説明します。データプロバイダコントロールの詳細については、データ駆動型コントロールの使用を参照してください。

メニューコントロールの使用

次の表に示すように、いくつかの Flex コントロールはメニューを作成するか、操作します。

コントロール	説明
Menu	カスケーディングサブメニューを設定できるビジュアルメニュー
MenuBar	複数のサブメニューを持つ水平バー
PopUpMenuButton	ボタンをクリックすると開くメニューコントロール

メニューコントロールの詳細については、メニューベースのコントロールの使用を参照してください。

Flex のコントロール

次の表に、Flex で使用できるすべてのコントロールを示します。

コントロール	説明	詳細情報
Alert	警告のポップアップを表示します。	Alert コントロール
ボタン	可変サイズのボタンを表示します。ラベルやアイコンイメージを追加できます。	Button コントロール
ButtonBar	共通の外観を持つ関連するボタンの列を表示します。	ButtonBar コントロールと ToggleButtonBar コントロール
CheckBox	特定の Boolean 値が `true` (チェックがオンの状態) であるか、`false` (チェックがオフの状態) であるかを示します。	CheckBox コントロール
ComboBox	一連の値を保持するテキストフィールドに関連付けられたドロップダウンリストを表示します。	ComboBox コントロール
ColorPicker	選択可能なドロップダウンカラー色見本パネル (パレット) を表示します。	DateChooser コントロールと DateField コントロール
DataGrid	データを表形式で表示します。	DataGrid コントロール
DateChooser	日付を選択できるような 1 か月単位のカレンダーを表示します。	DateChooser コントロールと DateField コントロール
DateField	日付を表示します。右側にカレンダーアイコンが表示されます。このコントロール内の任意の場所をクリックすると、DateChooser コントロールの 1 か月単位のカレンダーがポップアップ表示されます。	DateChooser コントロールと DateField コントロール
HorizontalList	アイテムの一覧を水平方向に並べて表示します。	HorizontalList コントロール
HRule/VRule	水平方向 (HRule) または垂直方向 (VRule) の罫線を 1 本表示します。	HRule コントロールと VRule コントロール
HSlider/VSlider	スライダトラックのいずれかの方向にサムを移動することによって値を選択できます。	HSlider コントロールと VSlider コントロール
イメージ	GIF、JPEG、PNG、SVG、および SWF ファイルをインポートします。	Image コントロール
Label	単一行のフィールドラベルを表示します。編集することはできません。	LinkButton コントロール
LinkBar	一連のリンク先を指定する LinkButton コントロールの水平行を表示します。	LinkBar コントロール
LinkButton	シンプルなハイパーリンクを表示します。	LinkButton コントロール
List	スクロール可能な一連の選択肢を表示します。	List コントロール
Menu	ほとんどのソフトウェアに実装されたファイルメニューや編集メニューと同様の、選択肢を含むポップアップメニューを表示します。	Menu コントロールのイベントの処理
MenuBar	1 つまたは複数の Menu コントロールを含む水平メニューバーを表示します。	MenuBar コントロール
NumericStepper	値を増減させるための 2 つのボタンが一体となったコントロールを表示します。	NumericStepper コントロール
ProgressBar	現在の操作に要する残り時間を視覚的に表示します。	ProgressBar コントロール
RadioButton	常にいずれか 1 つだけが選択状態になる複数のボタンを表示します。	RadioButton コントロール
RadioButton Group	click イベントリスナーを 1 つだけ実装した RadioButton コントロールのグループを表示します。	<mx:RadioButtonGroup> タグを使用したグループの作成
RichTextEditor	複数行に対応した編集可能なテキストフィールド、およびテキストフォーマットを指定するコントロールがあります。	RichTextEditor コントロール
ScrollBar (HScrollBar および VScrollBar)	水平スクロールバーおよび垂直スクロールバーを表示します。	ScrollBar コントロール
SWFLoader	指定された SWF ファイルまたは JPEG ファイルのコンテンツを表示します。	SWFLoader コントロール
TabBar	タブを水平方向に並べて表示します。	TabBar コントロール
Text	複数行のテキストフィールドを表示します。編集することはできません。	TextInput コントロール
TextArea	ユーザー入力用の編集可能なテキストフィールドを表示します。複数の行を入力することもできます。	テキストコントロールの使用
TextInput	ユーザー入力用の編集可能なテキストフィールドを表示します。単一行のみ入力できます。英数字データを保持することもできますが、入力データは String データ型として解釈されます。	TextInput コントロール
TileList	アイテムの一覧をタイル状に並べて表示します。アイテムは垂直列または水平行の向きで順に配置されます。	TileList コントロール
ToggleButtonBar	共通の外観を持つ関連するボタンの列を表示します。	ButtonBar コントロールと ToggleButtonBar コントロール
Tree	展開可能なツリーとして配置された階層データを表示します。	Tree コントロール
VideoDisplay	ストリーミングメディアを Flex アプリケーションに組み込みます。	VideoDisplay コントロール

Flex 2.01