[Flex TIP] 변수 위에 [Bindable] 의 의미!

오늘 HDividedBox 를 이용해서 마우스 드래그시 이동하는 작업을 하였다

하지만! 전혀 동작 하지 않았다

이유는

내가 써준 변수 위에 [Bindable]을 쓰지 않아서이다.

Bindable은 변수의 값이 변경될시에, 그 값을 참조하는 객체들에게 Event형식으로 값을 전달한다.
(UIComponent 참조)

아주 중요하니 참고 하자

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
  <![CDATA[
   import mx.events.DividerEvent;
   private function moveChart(event:MouseEvent):void
   {
    trace("start : " + leftBoundary + " /  " + rightBoundary );
    leftBoundary +=10;
    rightBoundary +=-10;
    trace("end : " + leftBoundary + " /  " + rightBoundary );
   }
   [Bindable]
   public var leftBoundary:Number = 100;
   [Bindable]
   public var rightBoundary:Number = 100;
   
   private var staticLeftBoundary:Number;
   private var staticRightBoundary:Number;
   public var mouseXRef:Number;
   
   private function setMouseDown(e:Event):void
   {
    this.systemManager.addEventListener(MouseEvent.MOUSE_MOVE, moveChart);
    this.systemManager.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
   }
   
   private function stopDragging(event:MouseEvent):void
   {
    this.systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, moveChart);
    this.systemManager.removeEventListener(MouseEvent.MOUSE_UP, stopDragging);
   }
   
   private function updateBoundariesFromDivider(event:DividerEvent):void{
    leftBoundary +=10;
    rightBoundary +=-10;
    trace("drag : "  + leftBoundary + " /  " + rightBoundary );
   }
  ]]>
 </mx:Script>
  <mx:HDividedBox id="hdivided" width="100%" height="30%"
  alpha="1"
  borderThickness="1" borderColor="#999999" borderStyle="solid"
  dividerAffordance="5" liveDragging="true"
  horizontalGap="10" verticalGap="0"
  horizontalScrollPolicy="off"
   >
   <mx:Canvas id="leftBox" height="100%" backgroundAlpha="0.5" backgroundColor="#808080"
      borderThickness="1" borderColor="#999999" borderStyle="solid"
    width="{leftBoundary}">
   </mx:Canvas>   
   <mx:Canvas id="visibleBox" height="100%" mouseDown="setMouseDown(event)" width="100%" buttonMode="true" >
   </mx:Canvas>   
   <mx:Canvas id="rightBox" height="100%" backgroundAlpha="0.5" backgroundColor="#808080"
      borderThickness="1" borderColor="#999999" borderStyle="solid"
    width="{rightBoundary}">
   </mx:Canvas>   
  </mx:HDividedBox> 
</mx:Application>