|
5th
|
2004-04-27 18:33:44, 조회 : 2,793, 추천 : 318 |
- Download #1 : tree_1.zip (2.8 KB), Download : 71
요즘 curl 에 대해 관심을 가지고 공부하기 시작하였는데요,
다음은 제가 만들어본 파일입니다.
잘 만들진 못했지만 초심자 분들게 도움이 될까해서 ,저도 한번, 강좌로 올려보았습니다.
[트리구조 만들기#1]
간단히 트리를 만들어보는 강좌입니다.
(윈도우 탐색기, 폴더창의 구조라고 생각하시면 됩니다.)
아래 소스는 문제점이 있지만, 이번 강좌에서는 대략적인 구조만 파악하고,
다음 강좌에서 문제점을 고친후, 이미지도 추가해서 사용해보겠습니다.
전체소스 - start.curl
------------------------------------------------------------------------
{curl 3.0 applet}
{curl-file-attributes character-encoding = "euc-kr"}
{applet manifest = "manifest.mcurl"}
||================================================================== (1)
{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
}
{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}
}
}
||================================================================== (2)
{define-class public open TTreeControl {inherits Frame}
field protected fvb : VBox = {VBox}
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}
}
}
{method public open {make-tree tn : #TTreeNode, indent : int} : void
{if tn == null then
{return}
}
let fr : Frame = {Frame width=10px}
{if tn.has-child? then
{fr.add tn.status}
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}
}
}
}
}
{self.fvb.add
{HBox
{Fill width=10px * indent},
fr,
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}
}
}
}
}
||================================================================== (3)
{value
let tn : TTreeNode = {TTreeNode "root"}
let tn2 : TTreeNode = {TTreeNode "CCC"}
{tn.append {TTreeNode "AAA", parent=tn}}
{tn.append {TTreeNode "BBB" }}
{tn.append tn2}
{tn2.append {TTreeNode "111" }}
{tn2.append {TTreeNode "222" }}
{HBox
{TTreeControl tn=tn,
width=100px, height=100px, background="beige"
}
}
}
----------------------------------------------------------------------
<결과>
----------------------------------------------------------------------
이 파일은 크게 3 구조로 이루어졌습니다. (주석의 번호표시 참조)
명확하게 나눠지진 않았지만, 대략 MVC 패턴을 생각하시면 될듯합니다.
(1) TTreeNode class : Model
(2) TTreeControl class : Control
(3) value : View
(1) TTreeNode class
- 설명 편의상, 위 결과 화면의 가로줄 하나를 “노드”라고 표현하겠습니다.
- “노드”를 표현하기위한 클래스라고 생각하시면 됩니다.
- “노드”의 기본 구조, 하위노드에 대한 정보, 이름/사이즈를 반환하는 메소드등을 포함하고 있습니다.
============================================================
우선, 멤버변수들을 선언하겠습니다.
-----------------------------------------------------------
field protected flabel : String
field public parent : #TTreeNode
field public items : {Array-of TTreeNode} = {{Array-of TTreeNode}}
field public status : String
-----------------------------------------------------------
-> flabel : 노드의 텍스트명.
-> parent : 상위 노드. data type인 TTreeNode앞의 #기호는 null값 허용을 의미합니다.
-> items : 하위 노드들의 집합. 배열로 선언.
-> status : 노드의 확장/축소(- / +)된 상태를 설정.
============================================================
다음은 생성자(constructor)입니다.
-----------------------------------------------------------
{constructor public {default
label : String,
parent : #TTreeNode = null,
status : String = "-"
}
set self.flabel = label
set self.parent = parent
set self.status = status
}
-----------------------------------------------------------
생성자의 argument로는 노드의 텍스트명과, 상위노드, 노드의 확장/축소상태를 받아 설정합니다.
items를 설정하는 부분이 없는데 items는 하위 노드들이 배열형태로 들어갈 변수입니다.
자세한 설명은 잠시 뒤에...
※ tip :
curl에서 생성자, 메소드, 프로시져의 선언시,
argument들 중에 초기값이 할당되어있는 argument는 option의 의미를 가집니다.
즉, 호출될때, argument에 값이 넘어오면 그 값이 할당되고,
그렇지 않을 경우에는 default 값이 사용됩니다.
예를들어, 위의 생성자의 경우 parent와 status가 option처럼 동작합니다.
또한, argument에 값을 할당하지 않았을 경우, 반드시 외부에서 값을 할당해줘야 합니다.
argument에 값을 할당하지 않고, 외부에서도 값이 전달되지 않았을 경우는
멤버면수 선언할때 초기화를 해주어야 합니다.
============================================================
Accessor #1
-----------------------------------------------------------
{setter public open {label label:String}:void
set self.flabel = label
}
{getter public open {label}:String
{return self.flabel}
}
-----------------------------------------------------------
setter & getter를 이용하여 노드명을 설정하고 값을 가져옵니다.
setter 의 경우, 이 파일에선 쓰이진 않지만 형식적으로 만들어주었습니다.
getter 를 사용하여 label 값(노드명)을 반환하고 있습니다.
※ tip :
setter와 getter는 같은 이름(이 파일의 경우, label)을 사용하여도 됩니다.
하지만,
이 Accessor를 통해 접근하는 멤버변수 이름과 argument로 사용되는 이름은 반드시 달라야 합니다.
따라서 멤버변수의 이름이 label이 아닌 flabel로 선언이 되었습니다.
============================================================
Accessor #2
-----------------------------------------------------------
{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}
}
}
-----------------------------------------------------------
{size}는 현 노드가 가지고있는 하위 노드 개수를 구하여 반환해줍니다.
items의 data type은 Array입니다.
Array class의 “size” Accessor를 사용하여, 이 배열이 몇 개를 가지고 있는지 값을 구해줍니다.
{has-child?}는 현 노드가 child를 가지고 있는지 없는지,
size를 통해 판별하여 true/false를 반환시켜주고 있습니다.
※ tip :
setter, getter가 일반 메소드와 비교하여 다른 점은 메소드가 아니라 Accessor라는 점입니다.
표기 방식이 조금 다르다는점 외에 메소드와 크게 다른 점은 없다는 생각이 듭니다. 아직은……
============================================================
method
-----------------------------------------------------------
{method public open {append tn:TTreeNode}:void
set tn.parent = self
{self.items.append tn}
}
-----------------------------------------------------------
현 노드에 하위 노드를 추가시키는 메소드입니다. 노드를 추가하여 items에 배열로 저장합니다.
현 노드는 argument로 받아들인 노드(tn)의 상위노드가 되고,
argument로 받아들인 노드(tn)는 현 노드의 하위 노드가 됩니다.
언뜻 보면 같은 말이고, 실제로 set tn.parent = self 를 주석 처리하여도 결과 화면은 같게 나옵니다.
하지만,
내부적으로 상위노드와 하위노드간에 서로 참조되고 있어야 하기 때문에,
두 문장은 모두 기술되어야 합니다.
(2) TTreeControl class
- 노드의 생성과 화면 출력을 하는 메소드들이 있습니다.
============================================================
생성자(constructor)
-----------------------------------------------------------
{constructor public {default
tn : #TTreeNode = null,
...
}
set self.ftn = tn
{construct-super ...}
{self.refresh-controls}
{self.add self.fvb}
}
-----------------------------------------------------------
노드를 받아 할당시키고,
상위의 Frame 생성자를 호출하여 Frame의 모든 기능들을 사용할 수 있게합니다.
그리고 refresh-controls 메소드를 호출하여 화면 출력을 합니다.
============================================================
화면 출력 메소드
-----------------------------------------------------------
{method public open {refresh-controls}:void
{self.fvb.clear}
{if self.ftn != null then
{self.make-tree self.ftn, 0}
}
}
-----------------------------------------------------------
이 메소드가 호출되면 현재 화면을 지웁니다.
그리고, 노드가 Null이 아니면,
make-tree 메소드를 호출, 현재 노드와 들여쓰기값 0을 주어, 노드를 다시 만듭니다.
============================================================
노드 생성 메소드 (소스가 먼저, 그 아래가 설명입니다.)
-----------------------------------------------------------
{method public open {make-tree tn : #TTreeNode, indent : int} : void
{if tn == null then
{return}
}
-----------------------------------------------------------
argument로 받은 노드가 Null 이면, 노드를 더이상 만들지 않고, 이 이후는 실행하지 않습니다.
-----------------------------------------------------------
let fr : Frame = {Frame width=10px}
{if tn.has-child? then
{fr.add tn.status}
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}
}
}
}
}
-----------------------------------------------------------
fr 은 "+ / - "를 출력하기 위한 프레임입니다.
하위 노드를 가진 경우에만, 다음을 수행합니다.
프레임(fr)에 “+ / -“를 추가합니다.
프레임에 마우스 포인터를 올렸을 때, 화살표 모양에서 손가락 모양으로 바꾸기 위한 설정을 합니다.
프레임을 클릭했을 때, 즉, “+ / -“를 클릭했을때,
트리 모양이 바뀌기 위해, 프레임에 이벤트를 추가합니다.
“+” 상태일때 클릭을 하면, status를 “-“로 바꾸고,
화면을 다시 출력하기 위해, refresh-controls 메소드를 호출합니다.
반대로, “-” 상태일때 클릭을 하면, status를 “+“로 바꾸고,
화면을 다시 출력하기 위해, refresh-controls 메소드를 호출합니다.
-----------------------------------------------------------
{self.fvb.add
{HBox
{Fill width=10px * indent},
fr,
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}
}
}
}
-----------------------------------------------------------
노드가 확장된 "-" 상태이면 하위 노드를 만들고, "+" 상태이면 만들 필요가 없습니다.
즉, “+” 상태일때는 화면상에 하위 노드를 출력하지 않습니다.
“-“인 경우에만 그 하위 노드를 만들고, 화면에 하위 노드까지 모두 출력하게 됩니다.
화면상에 보이느냐, 안 보이느냐만 생각합니다.
“-“인 확장된 상태일경우, 하위 노드를 하나씩 가져와 임시변수에 할당하고,
이 노드에 대해서 다시 make-tree 메소드를 호출합니다.(재귀호출)
(3) value
- 노드들을 생성하여 화면에 보여주는 부분입니다.
============================================================
{value
let tn : TTreeNode = {TTreeNode "root"}
let tn2 : TTreeNode = {TTreeNode "CCC"}
{tn.append {TTreeNode "AAA" }}
{tn.append {TTreeNode "BBB" }}
{tn.append tn2}|| {TTreeNode "CCC" }
{tn2.append {TTreeNode "111" }}
{tn2.append {TTreeNode "222" }}
{HBox
{TTreeControl tn=tn,
width=100px, height=100px, background="beige"
}
}
}
-----------------------------------------------------------
노드를 생성하는데,
root 아래 첫번째 노드까지는 append 메소드를 호출하여 추가하지만,
“CCC”의 경우처럼 그 아래 또 노드가 있는 경우, 다시 객체를 생성하여 추가하고 있습니다.
다소 불편한 방법이지만, 이 부분은 다음 강좌에서 고쳐집니다.
HBox 안에는 생성된 노드를 TreeControl에 넘겨주고 있습니다.
-----------------------------------------------------------
실행되는 순서는 (3)Value 부분부터 시작하여 다음과 같이 됩니다.
TTreeNode를 생성 -> TTreeControl에 넘겨주고 -> TTreeControl 생성자 실행 -> …호출되는 메소드….
그럼, 다음 강좌에서 계속하겠습니다.
- 5th -
|
|
|
