초보 프로그래머의 하루

Flex Framework에서 가장 많이 사용되는 컴포넌트 중 하나가 이 Tree일 것이다.
이 Tree에서는 기본적으로 지원하는 Drag&Drop이 있는데 이를 가능케 하는 것이
dragEnabled이라는 프로퍼티이다.

tree.dragEnabled = true

이런 식으로 사용하면 해당 Tree는 기본적으로 드래그가 가능하게 된다.

이럴 때! 몇 가지 문제가 있다. 그 중 해결하려는 하나의 문제를 이 포스트에서 다루려고 한다.

문제
Tree에서 기본으로 지원되는 Drag & Drop에서는 DragSource에 포함되는 format을 "treeItems"라고 사용한다. 이를 변경할 수 있는 Property는 없다.

그러므로 Tree의 기본 Drag & Drop을 사용할 때는 반드시 format이 "treeItems"이기 때문에 Tree1에서는 Drop을 받아야 하고, Tree2에서는 Drop을 받지 말아야 할 때를 알 수 없다.
[ 물론 우회적으로 해결하는 방법이야 많지만.. 확실하게 간단하게 고치진 못 한다. ]

해결방법

addDragData 메소드를 override 하여 사용한다.
API에 다 나와 있는 내용이다. API에 있는데 이런 포스트 써봐야 뭐하나.. 라고 생각이 되지만.. 안 잊어버릴려고 쓴다.
[ 사실 본인은 API를 보고 이 방법을 찾은 게 아니라 Tree 소스를 보다가 알게된 방법인.. 젠장 ]

실제 Tree 소스에 보면 이렇게 되어 있다.

자 우리는 저 부분을 C&P하여 "treeItems" 부분만 고쳐서 사용하면 된다. 예를 들어

override protected function addDragData( ds :Object ) :void {
    ds.addData( this.selectedItems, dragFormat );
}

이런 식으로 사용하면 된다. 그러면 dragEnter 등의 이벤트를 받을 때 그 컴포넌트가 받아야 할 DragSource가 맞는지에 대한 판단을 format으로 해도 문제가 없을 것이다.


결론
Flex Framework를 사용하는데 있어서 가장 중요한 것은 "앎"인 듯 싶다.
그 컴포넌트에 대해서 얼마나 더 잘 아느냐가 Flex를 잘할 수 있는 방법이라 생각된다. 정말 간단하게 해결할 수 있는 문제를 우회적으로 해결하려고 든다면 그건 시간과 노력이 다른 곳으로 소비되는 것이다. 조금만 더 똑똑해져보자. 나도 마찬가지 ㅋㅋㅋ




아참. 글을 다 쓰고 생각 났는데... ListBase를 상속받는 모든 컴포넌트의 Drag & Drop은 이런 식으로 동작한다. 그렇기 때문에 Tree 뿐만 아니라 DataGrid, List, TileList 등의 컴포넌트들의 format을 변경하려면 이와 똑같이 사용하면 된다.

Posted by secondMemory

오랜만에 Tree 컴포넌트를 사용습니다아.

<Units>
    <Dir name="가나다">
        <Unit name="Unit1" />
    </Dir>
</Units>

대충 이런 식의 XML을 dataProvider에 넣고 사용했습니다.

<Units/>라는 root가 포함하기 때문에 showRoot를 false로 세팅하고 사용했는데

model을 변경해도 Tree에 업데이트가 안 되는 겁니다;;

Bindable도 했고 MVC 패턴에 의해서 Model 부분도 따로 뺐습니다.

dataProvider={ Model.getInstance().unitXML }

오타도 없었고 잘 못된 부분도 없었는데 업데이트를 해도 안 되네요;

그래서 혹시나 하고 showRoot를 true로 하니까 업데이트가 잘 되네요;;;

원래 showRoot를 변경하면 그런 건가요? 당혹스럽네요;;;

Posted by secondMemory

TitleWindow를 띄우기 좀 귀찮기도하고 창의 크기를 작게 만들 때!

Alert을 확장해 사용하면 편리하다.

extends까지 해서 Class로 만들어도 상관 없고

나는 귀찮으므로 Alert을 하나 생성해서 편집해 사용하였다.

밑의 소스를 보면 알겠지만 Alert.show() 메소드는 보여주는 Alert의 인스턴스를 리턴해준다.

그래서 그 메소드를 이용해 보여주고 편집하면 된다.

궁금한 건 댓글로-



var alert :Alert = Alert.show( "", "부서 정보 입력", Alert.OK | Alert.CANCEL, null,
              eventBtnAddDeptClick, null, Alert.OK );
alert.height = 120;
( alert.getChildAt( 0 ) as DisplayObjectContainer ).removeChildAt( 0 );

var vBox :VBox = new VBox();
vBox.setStyle( "horizontalAlign", "center" );
vBox.width = 144;
vBox.height = 50;

latxName = new LabelTextInput();
latxName.label = "Name"

latxName.width = 142;
latxName.height = 20;
latxName.setStyle( "backgroundColor", 0x869CA7 );
latxName.setStyle( "textAlign", "center" );
latxName.setStyle( "letterSpacing", 1 );

vBox.addChildAt( latxName, 0 );


latxDescription = new LabelTextInput();
latxDescription.label = "Description";

latxDescription.width = 142;
latxDescription.height = 20;
latxDescription.setStyle( "backgroundColor", 0x869CA7 );
latxDescription.setStyle( "textAlign", "center" );
latxDescription.setStyle( "letterSpacing", 1 );

vBox.addChildAt( latxDescription, 1 );
( alert.getChildAt( 0 ) as DisplayObjectContainer ).addChildAt( vBox, 0 );

Posted by secondMemory