안녕하세요 ^^ 2부에서는 ContextMenu 를 활용해보도록 하겠습니다.
오늘은 제가 예제로 만든 소스코드를 보고 한 줄마다 설명해드리도록 하겠습니다.
길어보이지만 별거 아닌 소스입니다. 위 소스코드를 실행해보면 아래와 같은 예제가 나옵니다.
아주 심플한 기능만을 수행합니다. 자 이제 한 줄 한 줄 살펴볼텐데요. 1부에 설명했던 코드는 그냥 넘어가도록 하겠습니다. 1부를 읽지 않으신 분은 먼저 읽어주세요.
1부 바로가기: http://blog.saberre.kr/265/
7번째 줄을 먼저 살펴봅시다.
cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, test_select);이게 무엇을 뜻할까요? 아마도 “구분선 만들기” 메뉴 아이템에 대한 것 같은데…….
addEventListener 메소드는 아시죠? 어떤 이벤트가 발생했을 때 어떤 함수가 실행되도록 하라고 이벤트 처리 목록에 추가하는 메소드입니다.
새로 등장한 ContextMenuEvent와 MENU_ITEM_SELECT 에 대해서 살펴봅시다.
메뉴 아이템을 클릭하면 menuItemSelect 이벤트가 발생하는데요. 이 이벤트에 대해서 살펴봅시다.
menuItemSelect 이벤트
속성 ContextMenuEvent.type = flash.events.ContextMenuEvent.MENU_ITEM_SELECT
사용자가 컨텍스트 메뉴에서 항목을 선택할 때 전달됩니다. 사용자는 포인팅 장치의 보조 버튼을 클릭하여 컨텍스트 메뉴를 생성합니다.
Ref: http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/flash/ui/ContextMenuItem.html#event:menuItemSelect
MENU_ITEM_SELECT 상수
public static const MENU_ITEM_SELECT:String = “menuItemSelect”
Ref: http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/flash/events/ContextMenuEvent.html#MENU_ITEM_SELECT
따라서 우리가 위처럼 addEventListener 메서드를 통해서 메뉴 아이템이 선택되었을 때 menuItemSelect 이벤트가 발생하는 것을 감지하여 함수가 실행될 수 있도록 하는 것입니다.
따라서 어떤 메뉴 아이템이 선택되었을 때 함수가 실행되도록 하려면
(ContextMenuItem 객체).addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, (Function 객체));위 처럼 코드를 작성하면 됩니다.
11~19줄은 이벤트가 발생하였을 때 실행되는 함수입니다.
11줄에서 함수에 꼭! 이벤트를 받는 매개 변수를 넣어주셔야 합니다. 들어오는 이벤트 객체는 ContextMenuEvent 이니 매개 변수로 받아주시면 됩니다.
12줄에서 if 안에 조건문에 들어있는 separatorBefore 속성. 어디서 많이 보지 않으셨나요? (못보셨다면 1부에서 ContextMenuItem 생성자 부분을 참조하세요)
네, 바로 구분선을 추가할지 말지 결정하는 속성입니다. 이 속성에 대해서 Adobe 도움말을 살펴봅시다.
separatorBefore 속성
separatorBefore:Boolean
지정된 메뉴 항목 위에 구분 표시줄을 표시할지 여부를 나타냅니다. 기본값은 false 입니다.
Ref: http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/flash/ui/ContextMenuItem.html#separatorBefore
그리고 14줄에는 caption 이라는 속성도 보입니다. 역시 Adobe 도움말을 살펴봅시다.
caption 속성
caption:String
컨텍스트 메뉴에 표시될 메뉴 항목 캡션 텍스트를 지정합니다. caption 값에 대한 제한 사항은 ContextMenuItem 클래스 개요를 참조하십시오.
Ref: http://help.adobe.com/ko_KR/AS3LCR/Flash_10.0/flash/ui/ContextMenuItem.html#caption
바로 메뉴에 보여질 메뉴 아이템의 캡션 텍스트를 가지고 있는 속성입니다. 이를 수정하면 메뉴를 바꿀 수 있습니다.
이제 소스 코드 이해가 다 되셨나요?
어… 아직 안되셨다구요? 어디가요?
이미 메뉴 아이템은 ContextMenu 에 포함되었고 ContextMenu 는 메인에 Attach 되었는데 수정해도 되냐구요?
물론 됩니다! 우리가 push 를 통해서 ContextMenuItem 객체를 포함시켰는데 이는 객체를 복사해서 넣는 것이 아니라 단지 ‘연결’ 시키는 것 뿐입니다. 따라서 연결된 ContextMenuItem 객체를 편집해도 수정된 내용이 실시간으로 반영됩니다.
그리고 ContextMenu 객체 역시 메인에 연결시킨 것이기 때문에 수정해도 실시간으로 반영됩니다.
이해가 되셨나요?
3부에서는 객체별로 다른 ContextMenu 를 띄워보도록 하겠습니다.
3부 바로가기: http://blog.saberre.kr/311/
Leave a comment