수안이의 컴퓨터 연구실

김인덕

트리 컨트롤
이번에는 그룹 관리의 핵심인 오른쪽의 TTreeConrol을 살펴보자. TTreeControl의 핵심은 mtree(VBox)로 각 트리의 한 행을 child로 갖는다. 그 child는 HBox로 <그림 5>에서 화살표가 가리키는 오른쪽 레이아웃이다. 처음에는 Fill 객체로 트리 레벨에 따라 들여쓰기를 해주고 그 다음은 +/- 그림이고 마지막으로 TTreeControlItem이 들어간다. TTreeControlItem은 HBox에서 상속을 받았으며 폴더 이미지와 TTreeItem을 child로 갖는다. 트리 컨트롤에서 TTreeItem을 드래그해서 TTreeControlItem 위에 드롭할 수 있도록 하기 위해 TTreeControlItem에는 Drop 이벤트를 주고 TTreeItem은 드래그 이벤트를 주었다. 물론 TTreeControlItem은 TCustomerTable의 셀인 TTableCell 객체도 받을 수 있다.
TTreeControl에 넘겨질 트리 정보는 TTreeNode로 구성되어 있다. TTreeNode는 child를 배열로 관리하고 있으며 status 필드는 현재 노드의 상태를 나타내는데 +/-는 폴더인 경우 펼쳐진 것인지, 아닌지를 나타내며 *인 경우는 폴더가 아닌 아이템, 즉 고객을 말한다.
이번엔 TTreeControl에서 TTreeNode 객체를 받아서 어떻게 트리를 구성하는지 알아보자. TTreeControl은 한 개의 TTreeNode를 받는다. 물론 TTreeNode는 루트 노드로 하위 노드들을 child로 갖고 있다. 이 루트 노드를 써서 트리 구성을 하는 메쏘드가 {TTreeControl. refresh-controls} 메쏘드이다.



<리스트 7>을 보면 mtree(VBox)를 클리어한 후에 {make-tree} 메쏘드를 호출한다. {make-tree} 메쏘드가 하는 일은 현재 넘겨진 TTreeNode를 레벨에 맞게 mtree에 추가해 주는 것이다. 그리고 TTreeNode.status가 -인 경우는 펼쳐진 경우이므로 하위 노드를 {make-tree} 메쏘드에 넘겨 재귀 호출을 한다. +는 하위 노드를 그릴 필요가 없으므로 넘어가고 *인 경우는 폴더가 아니기 때문에 역시 넘어간다. {make-tree}가 전체 TreeNode를 따라 실행되면 마지막에 mtree에는 화면에 표시돼야 할 트리 노드 모두가 child로 추가된다. 아주 간단한 방식으로 트리를 생성하지만 제대로 동작한다.
그럼 각 노드에서 +/-가 눌린 경우는 어떻게 해야 될까? 만약 이벤트가 발생한다면 {TTreeControl.refresh-controls}를 다시 호출해서 트리를 다시 생성한다. 물론 이벤트가 발생한 노드의 status는 변경을 해줘야 한다. 다음은 TManageGroup 클래스에서 TTreeControl 생성하는 과정을 보여주고 있다.



처음에 {TManageGroup.get-recordset-group} 메쏘드를 이용해서 서버로부터 트리 데이터를 받는다. 트리 데이터는 다음과 같이 서버에서 php가 <레벨, 이름(아이디), 상태>의 형태로 컬에 넘겨주게 된다(꼭 이렇게 해야 하는 것은 아니고 서버 측과 원하는 방식대로 정의하면 된다).



그럼 컬 쪽에서는 그것을 파싱해서 RecordSet에 넣으면 된다. 그리고 그 RecordSet을 {TManageGroup.recordset-to-treenode} 메쏘드를 이용해서 TTreeNode 객체로 만들어 준다. 마지막으로 TTreeControl를 생성한다.
이번엔 컬의 가장 큰 장점 중의 하나인 드래그 앤드 드롭 부분을 살펴보자. 앞에서 설명했듯이 드롭 이벤트를 받을 수 있는 클래스는 TTreeControlItem이고 드래그될 수 있는 클래스는 TTreeItem과 TTableCell 클래스이다. 드래그 이벤트는 간단히 드래그할 객체에 다음과 같이 해주면 된다.





그럼 핵심 부분인 드롭 이벤트를 받기 위한 부분을 보자. <리스트 8>에서 {on-drag-over} 메쏘드는 드래그 상태에서 TTreeControlItem 위로 마우스 커서가 들어온 경우 드롭할 수 있는지 아닌지를 결정하기 위해서 실행되며 {on-drop} 메쏘드는 드롭이 된 경우에 실행된다. TTreeControlItem 클래스의 경우는 드롭된 객체의 클래스 Type을 보고 결정하게 되는데 TTableCell인 경우는 추가가 되고 TTreeItem인 경우는 이동을 하게 된다.
이것으로 TTreeControl의 핵심 부분을 모두 설명했다. 이 트리 컨트롤의 단점은 표시할 데이터가 굉장히 많아지면 느려질 수 있다는 것이다. 속도를 중요시해야 한다면 좀 더 낮은 레벨 프로그래밍을 해야 되는데 그 부분에 대해서는 기회가 된다면 다뤄보도록 하겠다. 대부분의 웹에서 동작하는 데이터를 표시하는 데에는 앞의 두 클래스로도 충분히 잘 동작할 것이다.

뛰어난 유연성으로 개발 생산성 향상
이번 연재를 통해서 독자들에게 전달하고자 했던 내용은 기존 웹 방식의 업무 틀을 벗어날 수 있다는 점과 컬을 사용하면 개발자가 만들고자 하는 컨트롤을 쉽게 만들 수 있다는 점이다. 우선 드래그 앤드 드롭과 트리 컨트롤의 사용은 분명 기존의 웹 페이지 기획 방식의 한계를 넘어섰다. 윈도우용 CS 프로그램에서는 한 화면으로 구현 가능하던 것을 억지로 2~3화면으로 나눌 필요 없이 그대로 한 화면으로 구성 가능하다는 것이다. 두 번째로 트리 컨트롤을 구성하는데, 컬만으로 쉽게 구현했으며 어떠한 고객의 요구라도 확장이 쉽다는 것이다. 만약 각 트리 노드에 그림을 3개씩 넣는다거나 두 줄로 만든다거나 아니면 메모장 같은 에디터를 넣는 경우가 생긴다면 컬은 아주 쉽게 확장할 수 있다.
컬의 도입 효과는 단지 ‘화면이 예쁘다’뿐 아니라 웹 화면을 기획하는 데 더 많은 유연성을 제공할 것이다. 그리고 웹 프로그래밍에 지친 개발자에게는 컴포넌트를 만드는 재미도 느끼게 해줄 것이다. 컴포넌트가 늘어감에 따라 개발 생산성의 비약적인 향상을 기대할 수 있다. 이번 연재에서는 아쉽게도 소스의 양은 많고 지면은 한정되어 있어 소스의 핵심 부분과 동작 방식, 레이아웃만을 설명했다. 소스를 보는 것만으로 이해하기 어려운 부분은 www.fullsource.net에 질문하거나 자료를 참조하기 바란다.

정리 | 김세미 | semsem@korea.cnet.com