Flex Component
» リスト/List (*)
Flex Component
» リスト/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);
}→アイテムを追加し、要素を１つ削除して内容を確認する例
