Flex Tips(6) - Listにデータを表示する

今回から2回にわたり、Listコントロールの使用方法を紹介します。ListコントロールはHTMLのSELECTタグに似ていて、ユーザに複数の項目から選択させる場合などに使用できます。また、Listコントロールの各項目は、表示だけでなく編集可能にすることもできます。

1回目の今回はListコントロールにデータを表示し、選択状態が変わった場合に発生するイベントを処理するところまでを説明します。2回目ではListコントロールから項目を削除する方法、項目を追加、または変更する方法を紹介します。説明に使用するサンプルは以下です。

ソースを見る

「ID」、「氏」、「名」を持つユーザ情報をリストに表示しています。また、Listの項目を選択した状態で、削除ボタンをクリックするとその項目が削除されます。

Listの下にあるテキストボックスにはリストで選択されているユーザの情報が表示されます。既に登録されているユーザの氏と名を変更して、「登録/更新｣ボタンをクリックするとListに表示されている情報が更新されます。まだ使用されていないユーザＩＤを入力し、「登録/更新｣ボタンをクリックすると新規に項目が追加されます。

Listに項目を表示する

Listに表示するデータは配列やXMLなどいくつかの形式で作成し、それをListコントロールのdataProviderプロパティに設定します。サンプルでは、以下のように多次元配列を使用しています。

「ListSample.mxml(一部抜粋)」

      <mx:Script>
            <![CDATA[

                  //Listに表示するデータを保持する配列
                  private var userData:Array = new Array(
                                    {userId:"taro",lastName:"山田",firstName:"太郎"},
                                    {userId:"jiro",lastName:"田中",firstName:"二郎"},
                                    {userId:"saburo",lastName:"佐藤",firstName:"三郎"}
                              )
            ]]>
      </mx:Script>

      <mx:List id="userList" x="10" y="10" width="279" height="148" dataProvider="{userData}"/>

ActionScript内でListコントロールのデータとして設定する多次元配列「userData」を宣言、初期化し、それをmx:ListタグのdataProvider属性に指定しています。(※MXML内でActionSctipt内の変数や関数を指定する場合、中括弧で囲みます。)

入れ子になっている配列には「結合配列」を使用しています。Listコントロールはデフォルトでは「label」というキーを持つ、要素をList項目のラベルとして表示します。この表示する項目は、labelFieldプロパティに他の項目の項目名を設定することで変更することができます。(例えば「userId」をラベルとして表示する場合は、labelFieldプロパティに「userId」を設定します。)

しかし、上記サンプルはそのいずれの方法でもなく、ラベルとして表示するデータを編集する関数を使用して「ユーザID」と「氏」と「名」を連結した値をラベルにしています。

「ListSample.mxml(一部抜粋)」

      <mx:Script>
            <![CDATA[
・・・・・・・・・・・・・・・・
                  //Listに表示するデータを返す
                  private function modifyDisplay(item:Object):String
                  {
                        //ユーザＩＤと氏名を連結した文字列を返す
                        return item.userId + " " + item.lastName + item.firstName;
                  }
・・・・・・・・・・・・・・・・
            ]]>
      </mx:Script>

      <mx:List id="userList" x="10" y="10" width="279" height="148"
          dataProvider="{userData}" labelFunction="{modifyDisplay}"/>

ListコントロールのlabelFunctionプロパティには表示するラベルを編集する関数を指定することができます。指定した関数の引数にはListコントロールの各Itemとなるオブジェクト(上記サンプルでは、ユーザ情報を持つ結合配列の要素)が渡されます。サンプルでは引数のオブジェクトから「ユーザID」、「氏」、「名」を取得し、それらを連結した文字列を返却しています。そして、ここで返却された値がListコントロールのラベルとして表示されています。

選択されている項目が変わった場合の処理

Listコントロール上の項目がクリックされたり、キーボードの↑↓ボタンが押されたことにより、選択されている項目が変わった場合、changeイベントが発生します。サンプルではchangeイベントを利用して、選択されている項目が変わるたびにアプリケーションの下部のテキストボックスに選択されているユーザの情報を設定しています。

「ListSample.mxml(一部抜粋)」

      <mx:Script>
            <![CDATA[
・・・・・・・・・・・・・・・・
                  //Listで選択されている項目が変わった場合の処理
                  private function onChange():void
                  {
                        //現在選択されている項目を取得する
                        var item:Object = userList.selectedItem;

                        //選択されている項目の情報を各入力ボックスに設定する
                        userId.text = item.userId;
                        lastName.text = item.lastName;
                        firstName.text = item.firstName;
                  }
・・・・・・・・・・・・・・・・
            ]]>
      </mx:Script>

      <mx:List id="userList" x="10" y="10" width="279" height="148"
          dataProvider="{userData}" labelFunction="{modifyDisplay}" change="onChange()"/>

ListコントロールのselectedItemプロパティから現在選択されている項目をObjectとして取得しています。ユーザの情報を取得するところでいきなり「item.userId」していることに違和感を感じる方がいるかもしれませんが、ActionScriptの結合配列はObjectクラスのインスタンスなのです。これはJavaScriptの連想配列の仕組みと同じです。ActionScriptでは動的クラスというものがあり、実行時にプロパティやメソッドを追加することができます。Objectクラスはその動的クラスの1つなのです。

次回はListコントロールから項目を削除する方法、項目を追加する方法、登録されている項目の情報を変更する方法を紹介します。

(2008年1月14日)

ちょっと一休み. Javaキーワード並び替えゲーム