오늘 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>