|
5th
|
2004-04-30 15:23:50, 조회 : 2,409, 추천 : 295 |
- Download #1 : TMenu_2.zip (4.0 KB), Download : 94
[기초강좌 #4] 메뉴 만들기 #1
(전체 소스는 첨부된 파일을 참조해주세요. 부분적으로만 발췌해서 설명합니다.)
========================================================================
[결과]
: 클릭된 항목은 파란색으로 표시되고, 마우스로 가리키는 항목은 검정색으로 표시됩니다.
========================================================================
이 강좌는 3개의 파일로 구성되었습니다.
1. start.curl
- 항목명을 TMnuItem에 String으로 넘겨주고, 만들어진 TMnuItem들을 TMenu에 보냅니다.
2. TMenuItem.scurl (Frame 클래스 상속)
- 전체 메뉴중 한 항목입니다.(예: “공지사항”, “설치”...)
- 하나의 항목은 하나의 Frame으로 만들어집니다.
위 결과화면을 보면, 그림에 7개의 항목이 있죠? 모두 7개의 Frame, 즉, 7개의 TMenuItem이 생성되어집니다.
- 마우스 이벤트가 발생할때마다 항목의 색을 관리합니다.
3. TMenu.scurl (VBox 클래스 상속)
- 모든 항목을 관리하는 역할입니다.
- 생성된 TMenuItem(=Frame)들을 붙여서 TMenu(=VBox)에 올려놓습니다.
- 메뉴가 선택되었을때와 선택되지 않았을때의 이벤트를 관리합니다.
[그림]
========================================================================
TMenuItem.scurl
-----------------------------------------------------------
{constructor public {default
menu_item : String,
...
}
set self.menu_item = menu_item
{construct-super
width=100px, height=20px,
background="beige",
border-color="white", border-style="raised", border-width=1px,
valign="center", halign="left",
font-size=9pt,
cursor=cursor-hand,
...
}
-----------------------------------------------------------
메뉴에 들어갈 항목명을 받습니다.
상속받은 Frame 클래스의 모든 기능들을 사용하기 위해,
default에 “...”(rest-argument) 과 {construct-super ...}를 적어주어야 합니다.
{construct-super} 안에서 옵션의 값을 적당히 바꾸어 프레임 모양을 만듭니다.
cursor = cursor-hand 옵션은 프레임에 마우스포인터를 올려놓았을 때,
화살표를 손가락 모양으로 바꿔줍니다.
-----------------------------------------------------------
{self.event}
{self.add
{HBox
{Fill width=10px},
self.menu_item
}
}
-----------------------------------------------------------
생성된 프레임에 이벤트를 달아주기 위해 event 메소드를 호출하고, 프레임에 글자를 추가합니다.
이렇게해서 한 개의 프레임이 생성되고, 아래는 이벤트에 관련된 메소드입니다.
마우스가 메뉴에 올려져 있을때는 검정색으로, 메뉴에서 나갔을때는 원래색으로,
클릭을 했을때는 파란색으로 표시하려고 합니다.
-----------------------------------------------------------
{method public open{event}:void
{self.add-event-handler
{on PointerEnter do
{self.entered}
}
}
{self.add-event-handler
{on PointerLeave do
{if self.select? == true then
{self.selected}
else
{self.unselected}
}
}
}
-----------------------------------------------------------
self.add-event-handler : 현재(self) 프레임에 이벤트를 추가한다는 메소드입니다.
마우스 포인터가 들어왔을 때 검정색이 되야하고(entered 메소드 호출),
마우스 포인터가 떠났을 때는 메뉴가 원래 색으로 돌아와야 하는데,
선택된 메뉴였다면 파란색으로 남아야하고(selected 메소드 호출),
선택이 안되었다면 기본색인 베이지색으로 남아야 합니다.(unselected 메소드 호출)
-----------------------------------------------------------
|| *** entered 메소드 ***
{method public open{entered}:void
set self.background = "black"
set self.color = "beige"
set self.font-weight = "bold"
}
-----------------------------------------------------------
|| *** selected 메소드 ***
{method public open{selected}:void
set self.select?=true
set self.background = "blue"
set self.color = "white"
set self.font-weight = "bold"
}
-----------------------------------------------------------
|| *** unselected 메소드 ***
{method public open{unselected}:void
set self.select?=false
set self.background = "beige"
set self.color = "black"
set self.font-weight = "normal"
}
-----------------------------------------------------------
위 3개의 메소드는 마우스 동작에 따른 항목 색을 바꾸는 내용입니다.
위의 옵션 말고도 여러 옵션들을 사용하여보세요.
주의 할 점으로는 selected / unselected 메소드의 경우,
호출될때마다 select? 변수에 true / false 값을 주어, PointerLeave 이벤트에서 구별될수있게 합니다.
========================================================================
TMenu.scurl
-----------------------------------------------------------
field protected frame_array : {Array-of TMenuItem} = {{Array-of TMenuItem}}
field protected frame_index : int = -1
{constructor public {default
...
}
let i:int=0
{for element : any in ... do
{if element isa TMenuItem then
set element.user-data = i
set i = i+1
{self.frame_array.append element}
}
}
{self.event}
{construct-super ...}
}
-----------------------------------------------------------
VBox 클래스를 상속받아 모든 기능을 사용하기 위해
“...”(rest-argument) 과 {construct-super ...}를 적어줍니다.
생성된 TMenuItem 들을 받아서 배열로 저장합니다.
Frame 옵션 중에 user-data라는게 있는데, Frame에 고유 번호를 할당해주는 옵션입니다
생성된 TMenuItem 마다 번호를 주어 구별하기 위해 이 옵션을 사용합니다.
TMenuItem은 Frame을 상속받았기 때문에 가능합니다.
-----------------------------------------------------------
|| *** event 메소드 ***
{method public open{event}:void
{for i:int=0 below self.frame_array.size do
{self.frame_array[i].add-event-handler
{on PointerPress at this : TMenuItem do
{if (self.frame_index != -1) then
{self.frame_array[self.frame_index].unselected}
}
set self.frame_index = this.user-data
{this.selected}
}
}
}
}
-----------------------------------------------------------
각각의 항목(=TMenuItem)에는 마우스를 클릭했을때의 이벤트를 추가하는데
클릭을 하면 선택된 항목의 user-data 값은 frame_index에 넣어둘 예정입니다.
따라서, frame_index 의 값이 -1이 아니라면, 어떤 항목이 선택되어 있다는 뜻입니다.
클릭을 할 때,
전에 선택된 항목의 색은 기본색으로 바꿔주기 위해, unselected 메소드를 호출합니다.
그리고, 현재 선택되는 항목의 user-data 값을 다시 frame_index에 넣어두고,
파란색으로 표시하기 위해 selected 메소드를 호출합니다.
========================================================================
짧게 설명하려고 했는데 또 길어지고 말았네요.
...조금씩 나아지겠죠...
그럼, 다음 강좌에서 계속....
- 5th -
|
|
|
