Flex Context Menu 에 원하는 메뉴 추가하기

Flex 에서 마우스 오른쪽 버튼을 누르면 나오는 컨텍스트 메뉴이다.
이놈은 플레시 플레이어가 기본으로 탑재 하고 있고 메뉴 자체를 삭제 할수가 없다.

따라서 플랙스에서 마우스 오른쪽 버튼을 눌렀을때 뭔가 행동을 해주고 싶다면 기본 컨텍스트 메뉴에 새로운 메뉴를 추가 해서 작업을 할수밖에 없는데 요걸 만들어 보도록 하자.

간단하기 때문에 한방에 소스 코드 가고 결과 화면 보고 중요한거만 설명하도록 한다.

new ContextMenu() 로 새로운 메뉴를 생성하고 new ContextMenuItem('text Alert') 으로 메뉴에 들어갈 아이템을 만든다.

이후에 customItems 라는 배열 property에 만든 menuItem을 push 해주면 보이게 된다.

this.container.contextMenu = menu;

를 통해서 원하는 컨테이너에서만 해당 메뉴가 보이도록 만들 수 있다.

이벤트는 두가지이다.

컨텍스트 메뉴 자체가 열리는 것을 확인 하는 ContextMenuEvent.MENU_SELECT 와 해당 메뉴가 눌렸음을 감지 하는 ContextMenuEvent.MENU_ITEM_SELECT가 있다.

메뉴가 열렸을때 해당 메뉴의 활성화 비활성화를 구별해줄수 있고.
메뉴 아이템이 선택되었을때 할일을 해주면 된다.

텍스트 필드와 버튼을 싸고 있는 컨테이너에 커스텀 메뉴를 추가 했기 때문에 바깥에서는 나타나지 않는다.

컨테이너에 클릭했지만 textField의 selectedText 값이 없기 때문에 역시 활성화 되지 않는다.

모든 조건이 맞을때 textAlert 이라는 메뉴를 사용할 수 있게 된다.

이하 소스와 실제 SWF 파일...

import mx.controls.Alert;
import mx.core.UITextField;

private function init():void
{
	var menu:ContextMenu = new ContextMenu();
	menu.addEventListener(ContextMenuEvent.MENU_SELECT, selectContextMenu);
	var menuItem:ContextMenuItem = new ContextMenuItem('text Alert');
	menuItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, selectContextMenuItem);
	
	menu.customItems.push(menuItem);
	menu.hideBuiltInItems();
	this.container.contextMenu = menu;
}

private function selectContextMenu(e:ContextMenuEvent):void
{
	trace(e.target);
	var tmp:ContextMenu = e.target as ContextMenu;
	if(e.mouseTarget is UITextField)
	{
		var tmpText:UITextField = e.mouseTarget as UITextField;
		if(tmpText.selectedText == "")
			tmp.customItems[0].enabled = false;
		else
			tmp.customItems[0].enabled = true;
	}
	else
	{
		tmp.customItems[0].enabled = false;
	}
}

private function selectContextMenuItem(e:ContextMenuEvent):void
{
	Alert.show((e.mouseTarget as UITextField).selectedText);
}