<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="406" height="340">
    <mx:Panel x="10" y="10" width="379" height="315" layout="absolute" title="Listサンプル">
        <mx:List id="userList" x="10" y="10" width="279" height="148" dataProvider="{userData}" change="onChange()" labelFunction="{modifyDisplay}"/>
        <mx:Button id="delBtn" x="297" y="73" label="削除" click="onDelete()"/>
                
        <mx:Label x="10" y="179" text="ユーザID"/>    
        <mx:TextInput id="userId" x="79" y="175" width="91"/>
                
        <mx:Label x="10" y="210" text="氏"/>
        <mx:TextInput id="lastName" x="79" y="208" width="91"/>
                
        <mx:Label x="178" y="210" text="名"/>
        <mx:TextInput id="firstName" x="198" y="208" width="91"/>
        
        <mx:Button id="updateBtn" x="212" y="243" label="登録/更新" click="onUpdate()"/>        

    </mx:Panel>
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            //Listに表示するデータを保持する配列
            private var userData:Array = new Array(
                        {userId:"taro",lastName:"山田",firstName:"太郎"},
                        {userId:"jiro",lastName:"田中",firstName:"二郎"},
                        {userId:"saburo",lastName:"佐藤",firstName:"三郎"}
                    )
                
            //Listに表示するデータを返す
            private function modifyDisplay(item:Object):String
            {
                //ユーザＩＤと氏名を連結した文字列を返す
                return item.userId + " " + item.lastName + item.firstName;
            }
                
            //削除ボタンがクリックされた場合の処理
            private function onDelete():void
            {                
                
                //削除対象が選択されている場合
                if(userList.selectedIndex != -1)
                {                    
                    //削除処理を行うために、ArrayCollection型でデータを取得する
                    var arrayC:ArrayCollection = ArrayCollection(userList.dataProvider);                    
                
                    //選択されたユーザを配列から削除する
                    arrayC.removeItemAt(userList.selectedIndex);
                    
                    //入力ボックスをクリアする
                    userId.text = null;
                    lastName.text = null;
                    firstName.text = null;
                }
            }
            
            //Listで選択されている項目が変わった場合の処理
            private function onChange():void
            {
                //現在選択されている項目を取得する
                var item:Object = userList.selectedItem;
                
                //選択されている項目の情報を各入力ボックスに設定する
                userId.text = item.userId;
                lastName.text = item.lastName;
                firstName.text = item.firstName;
            }
            
            //登録/更新ボタンがクリックされた場合の処理
            private function onUpdate():void
            {
                //更新処理を行うために、ArrayCollection型でデータを取得する
                var arrayC:ArrayCollection = ArrayCollection(userList.dataProvider);
                
                /* ユーザIDのテキストボックスに
                   入力されたユーザＩＤが既にコレクションに
                   存在しているかチェックを行う */
                for(var i:String in arrayC)
                {
                    if(arrayC[i].userId == userId.text)
                    {
                        /* 存在していた場合はデータを入力された
                          内容に更新する */
                        arrayC[i].lastName = lastName.text;
                        arrayC[i].firstName = firstName.text;
                        
                        //データの更新をListの表示に反映させる
                        arrayC.itemUpdated(arrayC[i]);
                        return;
                    }
                }
                
                //新規ユーザ登録の処理
                var user:Object = new Object();
                user.userId = userId.text;
                user.lastName = lastName.text;
                user.firstName = firstName.text;
                arrayC.addItem(user);                
            }            
            
        ]]>
    </mx:Script>
    
    <mx:Style>
        
        List  { font-size:14; border-color:gray;}
        Label { font-size:14; }
        TextInput { font-size:14; }
        
    </mx:Style>
    
</mx:Application>