Contetual 메뉴 사용하기

*그림과 예제는 첨부파일을 다운로드 받으시면 됩니다...^^;;

안녕하세요? 미쉐린 김성준 입니다.
이번에는 리얼베이직에서 Contextual Menu 를 사용하는 방법에 대해서 알아보도록 하겠습니다.
Contextual 는 프로그램에서 Control + Click 을 하면 나오는 별도의 팝업 메뉴 입니다. 이를 적절히 이용하면 메뉴를 좀 더 효율적으로 이용할 수 있습니다. 그럼 Contextual Menu 에 대해서 알아보도록 하겠습니다.

1. Contextual Menu 란?
Contextual Menu 는 원래는 초창기 Mac OS 에선 없었던 것 입니다. 이를 먼저 채용한 것은 Windows 에서 먼저 채용이 되었죠. 여튼 Mac OS 8인가 9인가 부터 채용이 되었죠. 보통 이 메뉴를 사용할 경우에는 Control + Click 을 하거나 마우스 클릭을 꾸욱 오래 누르고 있거나 마우스의 오른쪽 버튼을 이용하면 되겠죠. 최는 맥 프로그램에서도 대부분의 프로그램에서 이러한 Contextual Menu 를 지원하여 효율적으로 메뉴를 이용할 수 있도록 해줍니다.
Contextual Menu는 프로그램을 해당 기능에 맞게 적절한 메뉴를 빠르고 편리하게 이용해줄 수 있다는 장점은 있지만 너무 남발하거나 효율적이지 못한 메뉴를 적용하게 되거나 메뉴수가 너무 많으면 사용자에게 오히려 더 큰 불편을 주게 됩니다. 따라서 해당 작업과 상황에 맞는 적절한 메뉴를 추가해서 사용하게 하는것이 좋습니다. Contextual Menu 를 잘 만들어보려면 다른 프로램에서는 어느때에 어떤 메뉴들을 적용했는지 보고 사용해보면 Contextual Menu 를 만드는데 큰 도움이 될 것 입니다.

2. 리얼베이직에서 Contextual Menu 사용하기
리얼베이직에서는 2가지의 Contextual Menu 사용하는 방법이 있습니다.
한가지는 처음부터 제공해주던 ContextualMenu 콘트롤을 이용하는 방법이 있구요.
또 한가지 방법은 2005버젼부터 제공해주기 시작한(아마도 그럴겁니다.^^;;) ConstructCointextualMenu 이벤트와 ContextualMenuAction 이벤트를 이용하여 Contextual Menu 를 이용하는 방법이 있습니다.
첫번째 방법은 이제는 툴바에서 기본적으로 지원되지 않습니다. 하지만 별도의 ㅒbject 를 드래그하여 셋팅하는 방법으로 구현이 가능한데요. 간단하게 사용하기는 좋습니다.
첫번째 방법이 툴바에서 제거된 이유는 이제는 새로운 방법을 사용하라는 것이겠죠.
여튼 2가지 모두 장단점이 있지만 개인적으로는 새로운 방법을 저도 추천합니다.
따라서 여기에서도 새로운 방법에 대해서만 공부해보도록 하겠습니다.

뭐 사용법은 대단히 간단합니다. 그리고 랭귀지 레퍼런스에도 그대로 사용법이 나와있습니다.
먼저 윈도우나 Listbox 콘트롤, EditField 콘트롤 등 원하는 콘트롤을 드래그 하거나 윈도우 자체의 이벤트를 오픈합니다. 그러면 ConstructCointextualMenu 이벤트와 ContextualMenuAction 이벤트가 상단에 있는 것을 확인할 수 있을 것입니다.


- Window 의 이벤트에서 확인할 수 있는 화면 -

이곳에 각각의 코드를 작성하면 됩니다.
먼저 ConstructContextualMenu 이벤트에 다음의 코드를 작성합니다.

base.append( New MenuItem("Import"))
base.append( New MenuItem("Export"))
base.append( New MenuItem(MenuItem.TextSeparator))
??
base.append( New MenuItem("Cut"))
base.append( New MenuItem("Copy"))
base.append( New MenuItem("Paste"))

Return True??//display the contextual menu


위의 코드는 LanguageReference 에 나와있는 코드를 그대로 가져온 것 입니다. 참조하세요..^^
그리고 그 다음에는 ContextualMenuAction 이벤트에 다음의 코드를 넣어줍니다.

Select Case hititem.text
case "Import"
?? MsgBox "You chose Import"
case "Export"
?? MsgBox "You chose export"
case "Cut"
?? MsgBox "You chose Cut"
case "Copy"
?? MsgBox "You chose Copy"
case "Paste"
?? MsgBox "You chose Paste"
End select
??
Return True


간단하죠? 이렇게 하면 우선 가능합니다. 먼저 프로그램을 실행시켜서 확인해 보도록 합니다.
다음과 같은 화면의 결과를 얻을 수 있을 것 입니다.


- 기본 예제 코드를 이용하여 구현한 ContextualMenu 화면 -


그럼 이제 코드에 대해서 설명을 해보도록 하겠습니다. 먼저 ConstructCointextualMenu 이벤트의 내용입니다.

base.append(New MenuItem("Import"))

첫번째 줄을 보면 위와 같이 나와있습니다. 여기에서 맨앞에 있는 base 라는 것은 ConstructContextualMenu 이벤트의 MenuItem 인수값입니다. 이 곳에 해당 메뉴 아이템을 넣어주면 되구요. 이 Base 라는 값은 배열 처럼 append 함수를 통해서 별도의 MenuItem 값을 넣을 수 있는 것 입니다. 즉 각각의 메뉴는 메뉴아이템 객체라는 것을 코드를 보면 알 수가 있는 것 입니다.
메뉴의 구분자 역할을 하는 중간 라인은 코드에 나와있는 것 처럼 다음과 같이 해주면 됩니다.

base.append(New MenuItem(MenuItem.TextSeparator))

위와 같은 표현은 그냥 외워서 사용하시거나 도움말 찾아서 사용하시면 됩니다..^^;;
위와 같은 식으로 필요한 메뉴아이템을 계속해서 추가를 해주면 Contextual 메뉴가 만들어지는 것입니다. 간단합니다..^&^;;
그럼 이제는 ContextualMenuAction 이벤트에 있는 코드를 확인해 보도록 하겠습니다.
여기는 앞서 추가한 메뉴 아이템의 이름을 이용해서 메뉴를 구분해주고 해당 메뉴의 기능을 구행하도록 코드를 작성한 것을 확인할 수 있는데요. 그 역할로 Select Case ~ End Select 문을 이용했습니다. Select 문은 다들 사용하실 줄 아실 것 입니다. 해당 값의 조건에 따라서 Case 조건문을 나누어서 해당 부분의 코드를 실행해 주도록 해주는 조건문이지요. 여기에서 구분을 해주는 구분값은 hititem 이라는 메뉴아이템 인수입니다. 이 hititem 의 text 값을 확인하면 Contextual 메뉴에서 어떤 메뉴를 선택했는지 메뉴 명으로 확인할 수 있습니다.
또한 위의 코드는 if 문으로 대체할 수 있습니다. 다음과 같이요..^^;;

If hititem.text = "Import" then
?? MsgBox "You chose Import"
elseif hititem.text = "Export" then
?? MsgBox "You chose export"
elseif hititem.text = "Cut" then
?? MsgBox "You chose Cut"
elseif hititem.text = "Copy" then
?? MsgBox "You chose Copy"
elseif hititem.text = "Paste" then
?? MsgBox "You chose Paste"
End If

똑같은 조건문이기 때문에 표현의 차이일 뿐이지 같은 결과를 가져다 줍니다. 여튼 실행은 더 간단한 것을 알 수 있습니다. 그냥 메뉴 명만 확인해서 해당 메뉴의 코드를 실행해주면 되니까요.
그럼 이제 앞서 작성했었던 ConstructCointextualMenu 이벤트에 있는 코드를 약간 수정해보도록 하겠습니다.
다음과 같이요.

base.append( New MenuItem("Import"))
base.append( New MenuItem("Export"))

if y > 150 then
base.append( New MenuItem(MenuItem.TextSeparator))
base.append( New MenuItem("Cut"))
base.append( New MenuItem("Copy"))
base.append( New MenuItem("Paste"))
end if

Return True //display the contextual menu

뭐 많은 부분을 고친것은 아니지만 딱 2줄 고쳤습니다.
ConstructCointextualMenu 이벤트에는 x, y 좌표도 인수로 받는데요. 이 값을 이용해서 윈도우 화면의 y 좌표중 딱 반을 가리키는 150 값이 이하이면 Import 와 Export 메뉴만 Contextual 메뉴로 나타나게 하고 그 이상이면 모든 메뉴를 다 나타나게 하는 것이죠. 즉 화면의 상단은 2개의 메뉴만, 하단에서는 Cut, Copy, Paste 메뉴까지 모두 나타나게 하는 것 입니다. 실행해보면 다음의 화면처럼 바로 확인 가능 합니다.



화면 상단을 눌렀을 때 나타내는 Contextual 메뉴

화면 하단을 눌렀을 때 나타내는 Contextual 메뉴

어떤가요? 확인하셨나요? 간단하게 조건문을 이용해서 위의 코드를 바꿔본 이유는 몇가지 상황에 따라서 Contextual 메뉴의 내용이 바뀌는 경우가 많이 생기는데요. 이럴 때 이렇게 조건문을 이용해서 사용하면 편리하다는 것이죠.머
여튼 Contextual 메뉴는 여기까지입니다. 간단하죠?..^^;;


마치며..
Contextual 메뉴는 앞서 말씀드린 것 처럼 없어도 되지만 요즘에는 없어서는 안될...그리고 메인 메뉴는 아니지만 많은 기능을 부여해주는 기능키로서 약방의 감초보다는 좀 더 큰 기능을 갖고 활용이 됩니다. 따라서 좀 더 깔끔한 메뉴를 유지하면서 많은 기능을 넣어줄 때에는 Contextual 메뉴를 적극 활용하시기 바랍니다.
그럼 좋은 하루 되세요...^^;;
그럼 이만.휘릭~!

PS. 오타, 오류, 질문에 대해서는 게시판에 여지없이 리플 달아주세요.


from michelin