/*
    제작자 : 지용호(http://blog.jidolstar.com/, jidolstar@gmail.com)
    제작일 : 2007-10-26
   
    본 예제 컴포넌트는
    컴포넌트 위에 마우스를 따라 움직이는 정보창(여기서는 TextArea)을 보여줘야 할때
    어떤방법으로 보여줘야 하는가 보여주는 예제입니다.
   
    단순한 예제이지만 UIComponent를 기반 컴포넌트 만드는 방법, 이벤트 전파방법,
    각종 마우스 관련 위치 속성(stageX, localX, mouseX등..) 에 대해
    정확히 파악하고 있어야 해결할 수 있는 문제입니다.
   
    관련 학습은 http://flexdocs.kr 에서 하시기 바랍니다.
*/
package
{
    import mx.core.UIComponent;
    import flash.text.TextField;
    import flash.text.TextFormat;
    import flash.events.MouseEvent;
    import mx.controls.TextArea;

    public class MyUIComponent extends UIComponent
    {
        //TextField에 사용될 문구
        private var arrText:Array = ["flex","jidolstar.com","flexdocs.kr","astronote.org"];  
       
        //마우스를 쫗아다니며 정보를 보여줄 TextArea
        private var textArea:TextArea;
       
        //생성자
        public function MyUIComponent()
        {
            super();
            addEventListener( MouseEvent.MOUSE_DOWN, mouseEventHandler);
            addEventListener( MouseEvent.MOUSE_MOVE, mouseEventHandler);
            addEventListener( MouseEvent.MOUSE_OVER, mouseEventHandler);
        }

        //UIComponent 라이프 사이클에 의해 자동적으로 호출됨
        //초반에 자식을 등록할려면 이 함수를 오버라이드해서 사용한다.
        override protected function createChildren():void
        {
            var textField:TextField;
            var r:uint;
            var g:uint;
            var b:uint;
            var color:uint;
            var i:int=0;
           
            // TextField를 자식으로 추가한다.
            for each( var text:String in arrText)
            {
                i++;
                r = Math.random() * 0xff;
                g = Math.random() * 0xff;
                b = Math.random() * 0xff;
                color = (r<<16 | g<<8 | b); //랜덤 글자색
                textField = new TextField;
                textField.text = text;
                textField.name = "textField"+i;
                textField.setTextFormat( new TextFormat( null, 18, color ) );
                textField.background = true;    //backgroundColor를 적용할려면 background=true이어야 한다.
                textField.backgroundColor = 0xeeeeee;
                textField.border = true;    //borderColor를 적용할려면 border=true이어야 한다.
                textField.borderColor = 0x1023dd;
                textField.width = textField.textWidth+5;    //폭을 글자폭에 맞춘다.
                textField.height = textField.textHeight+5;  //높이를 글자높이에 맞춘다.
                textField.visible = false;  //초반에는 안보여줌, updateDisplayList에서 true로 설정됨
                textField.selectable = false;   //선택하지 못하게 한다. 커서 I모양이 없어짐
                addChild(textField);
            }
           
            //마우스를 따라 정보를 보여줄 TextArea를 자식으로 추가한다.
            if( textArea == null )
            {
                textArea = new TextArea;
                textArea.setStyle("borderColor", 0xff0000);
                addChild(textArea);
            }
        }
   
        //MXML상에서 명시적으로 width와 height를 정해주면 measure()함수를 호출되지 않는다.
        //크기 변동이 있는 경우가 생길경우 오버라이드 해서 사용한다.
        override protected function measure():void
        {
            super.measure();
            measuredWidth = measuredMinWidth = 500;
            measuredHeight = measuredMinHeight = 500;
        }
       
        //그림을 그리는 함수, 초반에 자동적으로 호출된다.
        //invalidateDisplayList()를 호출하면 자동으로 호출됨
        //자식의 위치와 크기를 조정하여 그림을 그려주는 역할을 함
        //인자로 스케일링이 적용되지 않은 폭과 높이가 넘어옴
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
           
            //정해진 크기에 맡게 직사작형 배경을 그려줌.
            //그려주는 이유는 시각적으로 보여주기 위한 것도 있지만
            //만약 그리지 않으면  MouseEvent를 받을 수 있는 영역이 없게 된다.
            graphics.clear();
            graphics.lineStyle(1, 0x000000, 1.0);
            graphics.beginFill(0xfefefe, 1.0);
            graphics.drawRect(0,0,unscaledWidth, unscaledHeight);
            graphics.endFill();
           
            //자식으로 둔 textField를 random한 위치에 그려준다.
            var i:int;
            var x:Number;
            var y:Number;
            var textField:TextField;
            for( i=0; i < numChildren; i++)
            {
                textField = this.getChildAt(i) as TextField;
                if( textField )
                {
                    x = Math.random() * (unscaledWidth - textField.width);
                    y = Math.random() * (unscaledHeight - textField.height);
                    textField.x = x;
                    textField.y = y;
                    textField.visible = true;
                }
            }
        }
       
        //마우스 핸들러 함수
        private var draging:Boolean=false;
        private function mouseEventHandler( event:MouseEvent ):void
        {
            switch( event.type )
            {
                case MouseEvent.MOUSE_DOWN:
                    //Drag 시작
                    startDrag();
                    draging = true;
                    removeEventListener( MouseEvent.MOUSE_DOWN, mouseEventHandler);
                    addEventListener( MouseEvent.MOUSE_UP, mouseEventHandler);
                    break;
                   
                case MouseEvent.MOUSE_OUT:
                    //Mouse가 Out할경우 정보표시 TextArea를 보여주지 않음
                    if( textArea )
                    {
                        textArea.visible = false;   
                        addEventListener( MouseEvent.MOUSE_OVER, mouseEventHandler);
                        removeEventListener( MouseEvent.MOUSE_OUT, mouseEventHandler);
                    }
                    break;
                   
                case MouseEvent.MOUSE_OVER:
                    //Mouse가 In할경우 정보표시 TextArea를 보여줌
                    if( textArea )
                    {
                        textArea.visible = true;
                        addEventListener( MouseEvent.MOUSE_OUT, mouseEventHandler);
                        removeEventListener( MouseEvent.MOUSE_OVER, mouseEventHandler);
                    }
                    break;
                   
                case MouseEvent.MOUSE_MOVE:
               
                    //드래그 중인데(즉, startDrag()를 호출했음) buttonDown이 안된경우
                    //강제로 MOUSE_UP을 시킴, stopDrag()를 호출시켜주기 위함
                    //이러한 경우는 Drag중 마우스가 화면밖에 나갔다가 다시 들어온 경우를 처리해주기 위함이다.
                    if( event.buttonDown == false && draging == true)
                        dispatchEvent( new MouseEvent(MouseEvent.MOUSE_UP, true, false, event.localX, event.localY));

                    // mouseEventHandler함수는 this에만 event listener를 등록했으므로
                    // event.currentTarget은 무조건 this이다. event.currentTarget == this는 없어도 됨   
                    if( textArea && event.currentTarget == this)
                    {
                        // 영역내에 있을 때에 정보표시 TextArea가 보여져 있을 것이다.
                        if( textArea.visible == true )
                        {
                            var x1:Number;
                            var y1:Number;

                            //_mousePosition값에 따라서 정보표시 TextArea의  위치(x,y)값을 설정한다.
                            switch(_mousePosition)
                            {
                                case MOUSE_EVENT_STAGE_POSITION:
                                    x1 = event.stageX;
                                    y1 = event.stageY;
                                    break;
                                case MOUSE_EVENT_LOCAL_POSITION:
                                    x1 = event.localX;
                                    y1 = event.localY;
                                    break;
                                case MOUSE_COMPONENT_POSITION:
                                    x1 = mouseX;
                                    y1 = mouseY;
                                    break;
                            }
                           
                            //정보를 표시한 내용
                            var text:String;
                            text =  "event.target.name = " + event.target.name +"\r" +
                                    "event.currentTarget.name = " + event.currentTarget.name + "\r" +
                                    "event.localX = " + event.localX + "\r" +
                                    "event.localY = " + event.localY + "\r" +
                                    "event.stageX = " + event.stageX + "\r" +
                                    "event.stageY = " + event.stageY + "\r" +
                                    "this.mouseX = " + mouseX + "\r" +
                                    "this.mouseY = " + mouseY + "\r";
                                   
                            //정보표시 TextArea의 정보와 위치, 크기 조정시킴
                            textArea.text = text;
                            textArea.setActualSize( 300,130 );
                            textArea.move( x1+10, y1+10 );
                        }
                    }
                    break;
                   
                case MouseEvent.MOUSE_UP:
                    //Mouse_UP하는 경우 Drag를 중지시킴
                    removeEventListener( MouseEvent.MOUSE_UP, mouseEventHandler);
                    addEventListener( MouseEvent.MOUSE_DOWN, mouseEventHandler);
                    stopDrag();
                    draging=false;
                    break;
            }
        }
       
        //정보표시 TextArea의 위치를 어떤 마우스 위치 관련 속성을 가지고 참조할 것인가 선택
        public static const MOUSE_EVENT_STAGE_POSITION:String = "stage"; //MouseEvent의 stageX, stageY를 이용
        public static const MOUSE_EVENT_LOCAL_POSITION:String = "local"; //MouseEvent의 localX, localY를 이용
        public static const MOUSE_COMPONENT_POSITION:String = "comp";   //UIComponent의 mouseX, mouseY를 이용
        private var _mousePosition:String = MOUSE_COMPONENT_POSITION;
        public function set mousePosition( value:String ):void
        {
            switch(value)
            {
                case MOUSE_EVENT_STAGE_POSITION:
                case MOUSE_EVENT_LOCAL_POSITION:
                case MOUSE_COMPONENT_POSITION:
                    _mousePosition = value;
                    break;
            }
        }
    }
}

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" name="application">
    <ns1:MyUIComponent id="testComponent" x="10" y="40" width="279" height="213"/>
    <mx:ComboBox id="cbMousePos" x="10" y="10" change="testComponent.mousePosition = cbMousePos.selectedItem.value">
        <mx:Object label="mouseX, mouseY" value="{MyUIComponent.MOUSE_COMPONENT_POSITION}"/>
        <mx:Object label="stageX, stageY" value="{MyUIComponent.MOUSE_EVENT_STAGE_POSITION}"/>
        <mx:Object label="localX, localY" value="{MyUIComponent.MOUSE_EVENT_LOCAL_POSITION}"/>
    </mx:ComboBox>
</mx:Application>