Flex2基礎講座（第4章　コントロール）3/4

第4章　コントロール

2.データバインドを使ったコントロールの利用（続き）

データバインディングができるコントロールは、バインドするデータを切り替えることにより、表示するものを変更することができます。
それでは次のようなサンプルを作成してみましょう。

初期表示

デスクトップPCをクリックした場合

ComboBoxにデスクトップパソコンのリストが表示されます。

ノートPCをクリックした場合

ComboBoxにノートパソコンのリストが表示されます。

では、作成してみましょう。

1. まず最初に
   
   サンプルを作成するために、FlexBuilderで新規のMXMLアプリケーションを選択します。
   
   
   
   File→New→MXML Applicationを選択します。または「ファイル」→「新規」→「MXMLアプリケーション」を選択します。
   
   次に以下の画面において、新規MXMLアプリケーションを格納するプロジェクトを選択します。ここでは、最初に作成した「Sample」プロジェクトを選択し、Filenameに「Sample4」を指定します。
   
   
   それぞれの選択、指定が完了した後「Finish」をクリックします。左上の「Navigatorビュー」にSample4.mxmlファイルが追加されています。
   
   
   これで新規のFlexアプリケーションを作成する環境が完了しました。
   
   
   
2. Flexアプリケーションの開発を始めましょう
   
   デザインキャンバスをデザインモードにします。
   次に、ComponentsのControlsからRadioButtonをデザインキャンバスへDrag&Dropします。(2つ)
   これらのRadioButtonにプロパティビューで以下のように設定します。
   
   
   これらのRadioButtonはどちらかしか選択できないようにするため、Group nameをつけて、1つのグループにします。On clickに指定されているのはイベントハンドラです。
   
   これにより以下のような画面が作成されます。
   
   
   次に、ComponentsのControlsからComboBoxをデザインキャンバスへDrag&Dropします。
   ComboBoxにプロパティビューで以下のような設定をします。
   
   
   ComboBoxへRadioButtonの状況に応じてデータをバインドするため、Data Providerにはなにも設定しません。
   以上で、以下のような画面が完成しました。
   
   
   次にRadioButtonのクリックに対応して、ComboBoxの表示内容を変更するための、イベントとイベントハンドラを設定します。
   RadioButtonのクリックに対応させるために、RadioButtonのクリックイベントにイベントハンドラを記述します。これは上記のRadioButtonの作成のところで On clickにsetData(event)を設定することで完了しています。
   引数にイベントオブジェクトを指定しています。これをソースコードで確認すると、以下のようになっています。
   
   
   イベントハンドラ、setData( )を作成するために、ソースモードへ移行します。
   イベントハンドラを記述するために、<mx:Application>タグの直後に<mx:Script>タグを挿入します。
   
   次に、ComboBoxのdataProviderに設定する配列の要素を以下のように定義します。
   
   
   次に、イベントハンドラを作成します。イベントオブジェクトの内容をチェックし、どちらのRadioButtonがクリックされたのかを判断し、ComboBoxのdataProviderに配列を設定します。
   
   
   
   このソースでは、直接ComboBoxのdataProviderにデータを設定しています。直接dataProviderのデータを書き換えるのではなく、データバインドを使用した方法もあります。
   
   ComboBoxのdataProviderにあらかじめダミーのデータをバインドします。
   
   
   dataProviderにバインドするデータを作成します。バインドにて使用するため[Bindable]記述が必要となります。
   
   
   このdummy_list配列の内容を置き換えることにより、ComboBoxの内容を変更します。
   
   
   ActionScript内の // 記述は一行コメントを意味します。

データバインド切り替えのサンプルです。

右クリックでソースを表示します。

ページの先頭へ戻る