標準コンポーネントのListの使い方の紹介です。

List †

リスト(List)は、複数のアイテムをボックス内に表示し、ユーザーがその内容を閲覧、選択するのに適したコントロールです。標準コンポーネントです。

基本的な使い方 †

コンポーネントを配置するには、以下のようなタグをソースに挿入します。

<mx:List x="10" y="10" width="134"　height="122"/>

初期アイテムを設定するためには、まず、表示するデータを定義し、これを「dataProvider」属性で指定します。

以下では、定食屋のメニューを MXML のタグで定義したものです。そして、<mx:ArrayCollection>タグのid属性に「menu_data」に設定しました。

   <mx:ArrayCollection id="menu_data">
       <mx:String>カレー</mx:String>
       <mx:String>ハンバーグ</mx:String>
       <mx:String>たぬきうどん</mx:String>
       <mx:String>親子丼</mx:String>
   </mx:ArrayCollection>

そして、この id を、List の dataProvider属性に指定します。このとき、id は、ただ文字列を指定するのではなく、 MXML内のデータにバインドするので、「{id名}」のように書きます。

   <mx:List x="39" y="32" id="a_list" height="122" width="134"
       dataProvider="{menu_data}"/>

※参考：ComboBoxでも、同様の方法で表示するデータを指定できます。

また以下のようにして、<mx:List>タグの中に直接データを記述することでも同じように値を設定できます。

   <mx:List x="43" y="8">
       <mx:ArrayCollection>
           <mx:String>カレー</mx:String>
           <mx:String>ハンバーグ</mx:String>
           <mx:String>たぬきうどん</mx:String>
           <mx:String>親子丼</mx:String>
       </mx:ArrayCollection>
   </mx:List>

イベントの記述 †

リスト・コンボボックスを選択したときの動作は「change」イベントとして記述します。

以下のプログラムは、リストとコンボボックスを配置し、定食屋のメニューをそのアイテムとして表示します。そして、アイテムを選択した時に、どのアイテムを選択したのかをダイアログで表示します。

file:TestList.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    backgroundColor="#FFFFFF">
    <!-- 初期データの定義 -->
    <mx:ArrayCollection id="menu_data">
        <mx:String>カレー</mx:String>
        <mx:String>ハンバーグ</mx:String>
        <mx:String>たぬきうどん</mx:String>
        <mx:String>親子丼</mx:String>
    </mx:ArrayCollection>
    <!-- コンポーネントの配置 -->
    <mx:List x="39" y="32" height="122" width="134"
        id="a_list"
        dataProvider="{menu_data}"
        change="list_onChange(event)" />
    <mx:ComboBox x="39" y="162" width="134"
        id="a_cb"
        dataProvider="{menu_data}"
        change="combo_onChange(event)" />
    <!-- スクリプト -->
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function list_onChange(event:Event):void {
                Alert.show(String(a_list.selectedItem));
            }
            private function combo_onChange(event:Event):void {
                Alert.show(String(a_cb.selectedItem));
            }
        ]]>
    </mx:Script>
</mx:Application>

どのアイテムが選択されているか調べるには、「selectedItem」プロパティを参照することで調べることができます。

また「selectedIndex」を参照すると、アイテムの中の何番目が選択されたのかを知ることができます。

リストのアイテムを２色表示したい時 †

リストの項目を見やすく交互に、白、灰色、白、灰色..と色分けして表示したい場合があります。その時には、alternatingItemColors属性を以下のように設定します。

<mx:List alternatingItemColors="[#FFFFFF, #CCCCCC]" /> 

アイテムの追加と削除～アイテムの追加  †

リスト内のアイテムを動的に追加したり削除することもできます。

そもそも、リストの dataProvider に指定する値は、 ArrayCollection 型のオブジェクトになっており、この型のオブジェクトは、追加したり削除したりすることができるようになっています。

以下のプログラムは、リストを選択すると、メニューの値段を表示し、「追加」ボタンを押すと、メニューに「スマイル」を追加するというプログラムです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <!-- データの定義 -->
    <mx:ArrayCollection id="coffee_data">
        <mx:Object label="コーヒー" value="250"/>
        <mx:Object label="アイス" value="300"/>
        <mx:Object label="抹茶" value="280"/>
    </mx:ArrayCollection>
    <!-- コンポーネントの配置 -->
    <mx:List width="159" height="174" x="10" y="10"
        alternatingItemColors="[#FFFFFF, #F0F0F0]"
        id="a_list" dataProvider="{coffee_data}"
        change="showItem()" />
    <mx:Button x="177" y="10" label="追加" click="addItem()"/>
    <mx:TextInput x="10" y="192" id="info_txt"/>
    <!-- スクリプト -->
    <mx:Script>
        <![CDATA[
            private function addItem():void {
                var new_item:Object = {label:"スマイル", value:0};
                coffee_data.addItem(new_item);
            }
            private function showItem():void {
                var sel:Object = a_list.selectedItem;
                info_txt.text = sel.label + ":" + sel.value + "円";
            }
        ]]>
    </mx:Script>
</mx:Application>

スクリプトブロックの addItem() 関数では、既存のリストにアイテムを追加しています。アイテムを追加するには、addItem() メソッドを使います。

var new_item:Object = {label:"スマイル", value:0};
coffee_data.addItem(new_item);

アイテムの追加と削除～アイテムの追加  †

dataProviderに設定した ArrayCollection を操作することでアイテムを編集できることが分かったところで、リストのアイテムを追加・削除・編集できるツールを作ってみたいと思います。

リスト編集ツールの作成にあたって、先にいくつか ArrayCollectionの操作方法について見てみましょう。

はじめに、先ほど見たアイテムの追加です。

// ArrayCollection の生成
var a_data:ArrayCollection = new ArrayCollection();
// アイテムの追加
a_data.addItem({label:"アスパラ", data:150});
a_data.addItem({label:"大根", data:200});
a_data.addItem({label:"にんじん", data:250});
// 内容の簡易表示
for each (var item:Object in a_data) {
    trace(item.label + ":" + item.data);
}

→アイテムを追加し、内容を一覧表示する例

次にアイテムを削除する例です。削除する時は、 removeItemAt() メソッドを使います。この時、削除する要素番号(0が起点)を指定して削除します。

// ArrayCollection の生成
var a_data:ArrayCollection = new ArrayCollection();
// アイテムの追加
a_data.addItem({label:"アスパラ", data:150});
a_data.addItem({label:"大根", data:200});
a_data.addItem({label:"にんじん", data:250});
// アイテムの削除
a_data.removeItemAt(0);
// 内容の簡易表示
for each (var item:Object in a_data) {
    trace(item.label + ":" + item.data);
}

→アイテムを追加し、要素を１つ削除して内容を確認する例