|
5th
|
2004-04-27 18:36:34, 조회 : 2,701, 추천 : 280 |
- Download #1 : tree_2.zip (9.8 KB), Download : 94
[트리구조 만들기#2]
이번 강좌에서는,
1. 각 클래스들을 파일로 분리.
– 이전 강좌 파일의 세 부분을 그대로 파일 하나씩 분리하였습니다.
- (1) TTreeNode class --> TTreeNode.scurl
- (2) TTreeCotrol class --> TTreeControl.scurl
- (3) value --> start.curl
2. TTreeNode 객체 생성시, 중첩된 TTreeNode를 사용.
3. “+ / -“ 기호 대신 그림을 삽입.
등을 알아보겠습니다.
------------------------------------------------------------------------
<결과>
========================================================================
소스 #1 – start.curl
------------------------------------------------------------------------
{curl 3.0 applet}
{curl-file-attributes character-encoding = "euc-kr"}
{applet manifest = "manifest.mcurl"}
{document-style PlainDocument}
{include "TTreeNode.scurl"}
{include "TTreeControl.scurl"}
{value
let tn : TTreeNode =
{TTreeNode "root",
{TTreeNode "AAA",
{TTreeNode "aaa"},
{TTreeNode "bbb"}
},
{TTreeNode "BBB"},
{TTreeNode "CCC",
{TTreeNode "111"},
{TTreeNode "222"},
{TTreeNode "333"}
}
}
{VBox
{Fill height=3px},
{TTreeControl tn=tn,
width={make-elastic}, height={make-elastic}
}
}
}
------------------------------------------------------------------------
{document-style PlainDocument} :
VBox에서 make-elastic을 사용할 경우, make-elastic은 전체화면 모두 그 영역을 차지하려고 하는데,
VBox 특성상 전체화면 크기를 알수 없어 무한대에 빠져버립니다.
결국, 화면에 아무것도 나타나지 않기 때문에 현재 화면만을 전체 크기로 잡는다는 설정이 필요합니다.
{include "TTreeNode.scurl"}, {include "TTreeControl.scurl"} :
두 클래스를 각각 파일로 분리 했기 때문에, 이 파일들을 현재 실행되는 파일에 포함시켜줘야 합니다.
TTreeNode 객체 안에, 여러 개의 TTreeNode를 계속 중첩시켜 객체를 생성하였습니다.
이렇게 객체를 생성시키면 소스 코드 보기가 편해지므로, 후에 노드의 수정이 쉬워집니다.
하지만, 이러한 중첩된 TTreeNode를 관리할수 있는 코드가 TTreeNode에 추가로 필요합니다.
========================================================================
소스 #2 – TTreeNode.scurl
------------------------------------------------------------------------
{curl-file-attributes character-encoding = "euc-kr"}
{define-class public open TTreeNode
field protected flabel : String
field public parent : #TTreeNode
field public items : {Array-of TTreeNode} = {{Array-of TTreeNode}}
field public status : String
{constructor public {default
label : String,
parent : #TTreeNode = null,
status : String = "+",
...
}
set self.flabel = label
set self.parent = parent
set self.status = status
{for element : any in ... do
{if element isa TTreeNode then
{self.append element}
}
}
{construct-super ...}
}
{setter public open {label label:String}:void
set self.flabel = label
}
{getter public open {label}:String
{return self.flabel}
}
{getter public open {size}:int
{return self.items.size}
}
{getter public open {has-child?}:bool
{if (self.items.size>0) then
{return true}
else
{return false}
}
}
{method public open {append tn:TTreeNode}:void
set tn.parent = self
{self.items.append tn}
}
}
------------------------------------------------------------------------
위에서 언급했듯이, start.curl에서 TTreeNode를 중첩시켜 객체를 발생시켰습니다.
이 중첩된 객체를 생성자에서 받아들이기 위해,
여러가지 경우에 대해 상관없이 받아들이는 rest argument로 “...”을 사용하였습니다.
{for element : any in ... do
{if element isa TTreeNode then
{self.append element}
}
}
“...”으로 받아들인 객체의 data type을 알수 없으므로 for 문에서 element를 any로 선언하고,
받아들인 객체들을 element에 하나씩 할당합니다.
들어온 객체가 TTreeNode 타입이면 element를 현 노드의 하위노드로 추가시킵니다.
========================================================================
소스 #3 – TTreeControl.scurl
------------------------------------------------------------------------
{curl-file-attributes character-encoding = "euc-kr"}
{define-class public open TTreeControl {inherits Frame}
field protected fvb : VBox = {VBox width={make-elastic}, height={make-elastic},
spacing=2px}
field protected ftn : #TTreeNode
{constructor public {default
tn : #TTreeNode = null,
...
}
set self.ftn = tn
{construct-super ...}
{self.refresh-controls}
{self.add self.fvb}
}
{method public open {refresh-controls}:void
{self.fvb.clear}
{if self.ftn != null then
{self.make-tree self.ftn, 0}
}
{self.fvb.add {Fill}}
}
{method public open {make-tree tn : #TTreeNode, indent : int} : void
{if tn == null then
{return}
}
let fr : Frame = {Frame width=17px, halign="center"}
{if tn.has-child? then
||-- {fr.add tn.status}
{if tn.status=="+" then
{fr.add {image source={url "images/plus.gif"}}}
elseif tn.status=="-" then
{fr.add {image source={url "images/minus.gif"}}}
}
set fr.cursor=cursor-hand
{fr.add-event-handler
{on PointerPress do
{if tn.status=="+" then
set tn.status="-"
{self.refresh-controls}
elseif tn.status=="-" then
set tn.status="+"
{self.refresh-controls}
}
}
}
}
let fr2 : Frame = {Frame width=17px}
{if tn.status=="+" then
{fr2.add {image source={url "images/folder-close.gif"}}}
elseif tn.status=="-" then
{fr2.add {image source={url "images/folder-open.gif"}}}
}
{self.fvb.add
{HBox valign="center", font-size=9pt,
{Fill width=17px * indent},
fr,
fr2,
tn.label
}
}
{if tn.status == "-" then
{for i:int = 0 below tn.size do
let tn_temp:TTreeNode=tn.items[i]
{self.make-tree tn_temp, indent+1}
}
}
}
}
------------------------------------------------------------------------
“+ / -“ 기호를 그림으로 삽입하는 코드는 비교적 간단합니다.
우선, 프레임에 “+ / -“를 추가하는 코드 {fr.add tn.status}는 주석처리하고,
그 자리에 다음의 코드를 삽입합니다.
{if tn.status=="+" then
{fr.add {image source={url "images/plus.gif"}}}
elseif tn.status=="-" then
{fr.add {image source={url "images/minus.gif"}}}
}
status에 따라 삽입되는 그림도 다르므로, 조건문 if가 사용되었습니다.
다음에, “+ / -“와 똑같이 동작하므로 큰 의미는 없지만, 폴더 모양의 그림을 추가하였습니다.
let fr2 : Frame = {Frame width=17px}
{if tn.status=="+" then
{fr2.add {image source={url "images/folder-close.gif"}}}
elseif tn.status=="-" then
{fr2.add {image source={url "images/folder-open.gif"}}}
}
폴더 모양 그림을 담기위한 프레임 fr2를 만들고,
마찬가지로 status에 따라 삽입되는 그림도 다르므로, 조건문 if를 사용하여 판별하여 줍니니다.
------------------------------------------------------------------------
이 외에도 이전 강좌와는 다르게 {Fill}이라든지 {make-elastic}등 여러 옵션이 사용되었는데,
이 부분은 모두 직접 하나씩 체크해보시면 좋을 것 같습니다.
좀더 깔끔한 화면을 만들기 위해서는 직접 부딪쳐서 해보는게 가장 좋은 방법이라고 생각됩니다.
너무 자세하게 쓰느라 글이 길어져서 좀 지루하셨을것 같네요..
그럼, 이상으로 트리구조 만들기 강좌를 마치겠습니다.
- 5th - |
|
|
