동적으로 버튼을 추가 / 삭제하는 방법

 <mx:Button label="추가" click="addComponent()" />
 <mx:Button label="삭제" click="removeComponent()" />
 
// 추가 버튼을 누르면 VBOX에 버튼을 생성하여 추가한다.
 <mx:VBox id="vb" width="100%" height="100%" />


1. 우선 추가 버튼을 눌렀을 때 버튼이 생성되게 해보자.

   private var cnt:int;
   private function addComponent():void{
    if(vb.getChildren().length < 5){
     cnt++;
     
     /**
      * 사용자가 추가 버튼을 클릭하면 실행되는 함수.
      * 버튼 객체를 하나 생성하여 속성값을 지정한 다음
      * 이벤트 리스너를 등록하여 준다.
      * vBox에 버튼 객체를 추가한다.
      *
      */
     var btn:Button = new Button();
     btn.label = "동적버튼" + cnt;
     
     /**
      *
      *  flex 이벤트란..? 플렉스 컴포넌트에서 호출되는 이벤트..??
      *  ADD이벤트와 REMOVE이벤트를 등록하여 버튼이 추가되거나 삭제될때
      *  메시지를 보여주기 위해 eventHandler라는 함수를 하나 만든다.
     */
     btn.addEventListener(MouseEvent.CLICK, onClick);
     
     
     btn.addEventListener(FlexEvent.ADD, eventHandler);
     btn.addEventListener(FlexEvent.REMOVE, eventHandler);
     
    // 버튼 생성
     vb.addChild(btn);    
    }else{
     mx.controls.Alert.show("5개 이상은 만드실 수 없습니다!!!!!!!");
    }
   
   }


// 컴포넌트에서 실행된(?) 이벤트를 받아와서 어떤 타입의 이벤트인지 Console창에 출력.
   private function eventHandler(e:FlexEvent):void{
    var btn:Button = e.currentTarget as Button;
    trace(e.type + ":" + btn.label);
   }

private function onClick(e:MouseEvent):void{
    // as 키워드를 이용하여 형변환을 할 수 있다.
    // 아래 소스는 e.currentTarget이라는 객체를 DisplayObject형으로 형변환을 한 것이다.
    // 사용자가 클릭한 currentTarget을 삭제 하는 소스이다.
    var btn:Button = e.currentTarget as Button;
   
    // 이벤트 리스너가 포함된 객체를 remove 하였기 때문에 이벤트 리스너가 더 이상 존재할 필요가 없으므로
    // 해당 이벤트 리스너를 삭제 해 주는 작업이 필요하다
    // 아래 코드는 그런 작업을 해주는 녀석이다-0-
   
    btn.removeEventListener(MouseEvent.CLICK, onClick);
   
    vb.removeChild(e.currentTarget as DisplayObject);
   }
   
   // 부모 노드를 죽일때 자식노드를 모두 없애고 죽이는게 좋다
   // removeAllChildren(); 을 이용하면 된다.
   private function removeComponent():void{
   
    if(vb.getChildren().length <= 0){
     mx.controls.Alert.show("지울 버튼이 없어요!!!!!!");
    }else{
     vb.removeAllChildren();
    }
   }