<? xml version="1. 0"? >
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="mycomponents. *">

    <MyComp:ModalText textPlacement="left"/>

</mx:Application>

    <mx:Script>
        <! [CDATA[
            import flash.events.Event;
    
            private function placementChangedListener(event:Event) :void {
                myEvent.text="placementChanged event occurred. ";
            }
        ]]>
    </mx:Script>

    <MyComp:ModalText textPlacement="left" 
        placementChanged="placementChangedListener(event) ;"/>
    <mx:TextArea id="myEvent"/>

package myComponents
{ 
    // 필요한 클래스를 모두 읽어들인다
    import mx.core.UIComponent;
    import mx.controls.Button;
    import mx.controls.TextArea;
    import flash.events.Event;
    import flash.text.TextLineMetrics;

    // ModalText 는, 자식 (child) TextArea 컨트롤의 텍스트가 변경되었을 때에
    // change 이벤트를 송출(Dispatch), ModalText 의 텍스트  properties 가
    // 설정되었을 때에 textChanged 이벤트를 송출(Dispatch), ModalText 의 textPlacement  properties 가
    // 변경되었을 때에 placementChanged 이벤트를 송출(Dispatch)한다 
    [Event(name="change", type="flash.events.Event")]
    [Event(name="textChanged", type="flash.events.Event")]
    [Event(name="placementChanged", type="flash.events.Event")]

    /*** UIComponent 를 확장한다 ***/
    public class ModalText extends UIComponent {

        /*** class constructor　 　 을 구현한다 ***/
        public function ModalText() {
            super();
        }


        /*** 2 살의 자식 (child) 컴퍼넌트의 변수를 정의한다 ***/    
        // 컴퍼넌트의 아이의 2 살의 변수를 선언한다
        private var text_mc:TextArea;
        private var mode_mc:Button;

        
        /*** Button 컴퍼넌트가 사용하는 새로운 스킨을 포함하는다 ***/
        // ModalUpSkin, ModalOverSkin, ModalDownSkinYou 라는 이름의 심볼을 포함한다
        // SWF 파일을 작성할 수 있다         
        // 스킨이 없는 경우는, 다음으로부터의 행을 comment out 한다
        [Embed(source="Modal2.swf", symbol="upskin")]
        public var modeUpSkinName:Class;
    
        [Embed(source="Modal2.swf", symbol="overskin")]
        public var modeOverSkinName:Class;

        [Embed(source="Modal2.swf", symbol="downskin")]
        public var modeDownSkinName:Class;


        /*** createChildren() 메소드를 구현한다 ***/
        // 아이를 작성하기 전에, 아이가 존재할지 어떨지를 테스트한다
        // 이것은 필수는 아니지만, 서브 클래스가 다른 아이를
        // 작성할 수 있도록(듯이) 확인한다
        override protected function createChildren() :void {
            super.createChildren();

            // TextArea 컨트롤을 작성해, 초기화한다        
            if (! text_mc)             {
                text_mc = new TextArea();
                text_mc.explicitWidth = 80;
                text_mc.editable = false;
                text_mc.text= _text;
                text_mc.addEventListener("change", handleChangeEvent);
                addChild(text_mc);
            }

            // Button 컨트롤을 작성해, 초기화한다        
            if (! mode_mc)             {
                mode_mc = new Button();
                mode_mc.label = "Toggle Editing Mode";
                // 이용할 수 있는 스킨이 없는 경우는, 다음으로부터의 행을 comment out 한다
                mode_mc.setStyle('overSkin', modeOverSkinName); 
                mode_mc.setStyle('upSkin', modeUpSkinName); 
                mode_mc.setStyle('downSkin', modeDownSkinName); 
                mode_mc.addEventListener("click", handleClickEvent);
                addChild(mode_mc);
            }
        }
        

        /*** commitProperties() 메소드를 구현한다 ***/
        override protected function commitProperties() :void {
            super.commitProperties();
            
            if (bTextChanged) {
                bTextChanged = false;
                text_mc.text = _text;
                invalidateDisplayList();
            }
        }        


        /*** measure() 메소드를 구현한다 ***/
        // 디폴트의 폭은 텍스트와 버튼의 크기
        // 높이는 버튼에 의해 정해진다
        override protected function measure() :void {
            super.measure();

            // Button 컨트롤은 스킨을 사용하므로,
            // Button 컨트롤의 측정 크기를 취득한다 
            var buttonWidth:Number = mode_mc.getExplicitOrMeasuredWidth();
            var buttonHeight:Number = mode_mc.getExplicitOrMeasuredHeight();

            // 디폴트폭과 최소폭은, TextArea 컨트롤의
            // measuredWidth + Button 컨트롤의
            // measuredWidth 
            measuredWidth = measuredMinWidth = text_mc.measuredWidth +
                buttonWidth;
            
            // 디폴트 높이와 최소 높이는, TextArea 컨트롤의 높이인가
            // Button 컨트롤의 measuredWidth 의 쳐 큰 편
            // + 텍스트의 주위의 10 픽셀의 경계선 
            measuredHeight = measuredMinHeight =
                Math.max(mode_mc.measuredHeight, buttonHeight) + 10;
        }
        
        
        /*** updateDisplayList() 메소드를 구현한다 ***/
        // Button 컨트롤을, label 텍스트의 크기 
        // + 10 픽셀의 경계선 area로 설정한다 
        // TextArea 의 크기를, 컴퍼넌트의 나머지의 area로 설정한다
        // textPlacement  properties 의 설정에 근거해
        // 아이를 배치한다 
        override protected function updateDisplayList(unscaledWidth:Number,
                unscaledHeight:Number) :void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);            

            // 좌우의 경계선용으로 1 픽셀을 당겨,
            // 좌우에 3 픽셀의 마진을 사용한다
            var usableWidth:Number = unscaledWidth - 8;

            // 상하의 경계선용으로 1 픽셀을 당겨,
            // 상하에 3 픽셀의 마진을 사용한다
            var usableHeight:Number = unscaledHeight - 8;
            
            // Button 컨트롤의 크기를 텍스트에 근거해 계산한다
            var lineMetrics:TextLineMetrics = measureText(mode_mc.label);
            // 10 픽셀의 경계선 area를 텍스트의 주위에 추가한다
            var buttonWidth:Number = lineMetrics.width + 10;
            var buttonHeight:Number = lineMetrics.height + 10;
            mode_mc.setActualSize(buttonWidth, buttonHeight);        
            
            // 텍스트의 크기를 계산한다
            // Button 컨트롤과 TextArea 컨트롤의 간격을
            // 5 픽셀로 한다 
            var textWidth:Number = usableWidth - buttonWidth - 5;
            var textHeight:Number = usableHeight;
            text_mc.setActualSize(textWidth, textHeight);
            
            // textPlacement  properties 에 근거해 컨트롤을 배치한다
            if (textPlacement == "left") {
                text_mc.move(4, 4);
                mode_mc.move(4 + textWidth + 5, 4);
            }
            else {
                mode_mc.move(4, 4);
                text_mc.move(4 + buttonWidth + 5, 4);
            }            
            
            // 자식 (child) 컴퍼넌트의 주위에 단순한 경계선을 묘화 한다
            graphics.lineStyle(1, 0x000000, 1.0);
            graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);            
        }
        

        /*** 메소드,  properties , metadata를 추가한다 ***/    
        //  properties 의 일반적인 패턴에 따라, 사적인
        // 홀더 변수를 지정한다
        private var _textPlacement:String = "left";
        
        // textPlacement  properties 의 getter/setter 의 페어를 작성한다
        public function set textPlacement(p:String) :void {
            _textPlacement = p;
            invalidateDisplayList();
            dispatchEvent(new Event("placementChanged"));
        }
        
        // textPlacement  properties 로 데이터 바인딩을 지원(support)한다
        [Bindable(event="placementChanged")]
        public function get textPlacement() :String {
            return _textPlacement;
        }
        
        private var _text:String = "ModalText";
        private var bTextChanged:Boolean = false;
        
        // text  properties 의 getter/setter 의 페어를 작성한다
        public function set text(t:String) :void {
            _text = t;
            bTextChanged = true;
            invalidateProperties();
            dispatchEvent(new Event("textChanged"));
        }
        
        [Bindable(event="textChanged")]
        public function get text() :String {
                return text_mc.text;
        }
        
        // 아이에 의해 송출(Dispatch)된 이벤트를 처리한다
        private function handleChangeEvent(eventObj:Event) :void {
                dispatchEvent(new Event("change"));
        }

        // 아이에 의해 송출(Dispatch)된 이벤트를 처리한다
        private function handleClickEvent(eventObj:Event) :void {
                text_mc.editable = ! text_mc.editable;
        }
    }
}