PopupMenu 소개

PopupMenu 컴포넌트는 웹브라우저에서 오른쪽 마우스를 눌렀을 때 표시되는 컨텍스트 메뉴와 비슷한 기능을 수행합니다. 평소에는 화면에 보이지 않다가 필요할 때 나타납니다. Menu 컴포넌트에서도 대메뉴 선택 시 나타나는 하위 메뉴 영역은 PopupMenu 컴포넌트를 사용하고 있습니다.

사용 예

웹브라우저나 개발도구 등에서 특정 기능이 필요할 때 처리할 수 있도록 PopupMenu 컴포넌트를 사용합니다. 컨텍스트 메뉴, 팝업 메뉴, 팝업 등의 이름으로 불리기도 합니다. 사용자의 현재 상태에 따라 메뉴 항목을 다르게 표기할 수 있습니다. 예를 들어 웹브라우저에서 특정 문자열을 선택하고 메뉴를 호출하면 복사, 검색, 인쇄 등의 기능을 보여주고 그렇지 않은 경우에는 페이지 이동, 소스보기 등의 기능을 표시합니다.

PopupMenu 만들기

PopupMenu 컴포넌트는 초기 상태에서는 아무런 동작도 하지 않습니다. 심지어는 화면에 보이지도 않습니다 (넥사크로 스튜디오에서는 사각형 모양으로 보이는데 실제 실행해보면 아무것도 보이지 않습니다). 다른 컴포넌트와 다르게 실제 화면에 PopupMenu 컴포넌트를 보이게 하려면 한 가지 추가적인 단계가 필요합니다.

툴바에서 PopupMenu 항목을 선택한 후, Form 위에 드래그 앤 드롭해 생성합니다. 빈 흰색 상자가 화면에 표시됩니다.

속성창에서 innerdataset 항목을 찾아 innerDataset 편집창을 실행합니다. 화면에 A, B, C 3개의 메뉴 항목을 표시하고 A 항목을 선택하면 A-1, A-2 2개의 메뉴 항목이 표시되도록 하겠습니다. innerDataset 편집창을 실행하면 입력할 항목이 많은데 이 중에서 captioncolumn, levelcolumn 2개 속성값만 지정합니다.

captioncolumn 속성값은 화면에 표시되는 메뉴 항목입니다. levelcolumn 속성값이 0인 경우에는 Menu 컴포넌트가 화면에 보이면서 먼저 보이는 항목입니다. levelcolumn 속성값이 1 이상인 경우에는 속성값이 0인 항목을 선택했을때 세부 메뉴 항목으로 보이는 항목을 지정합니다.

QuickView(Ctrl + F6)로 실행합니다. 화면에 아무것도 나타나지 않습니다.

마우스 오른쪽 마우스를 클릭하면 PopupMenu 컴포넌트가 화면에 나타나도록 onrbuttondown 이벤트 함수를 추가합니다. PopupMenu 컴포넌트의 trackPopupByComponent 메소드를 사용합니다.

this.Form_onrbuttondown = function(obj:nexacro.Form,e:nexacro.MouseEventInfo)
{
	this.PopupMenu00.trackPopupByComponent(this, e.clientx, e.clienty);
};

다시 QuickView(Ctrl + F6)로 실행합니다. 화면에 아무것도 나타나지 않지만 오른쪽 마우스를 클릭하면 메뉴가 나타납니다.

팝업 위치 변경하기

일반적인 팝업 메뉴는 마우스 클릭 시 마우스 포인터의 오른쪽 아래쪽에 팝업 메뉴가 위치하도록 처리합니다. 하지만 사용하는 화면의 기능에 따라 팝업 위치를 다른 곳에 배치해야 하는 경우도 있습니다. 이럴 때 팝업 위치를 어떻게 변경할 수 있는지 살펴봅니다.

예제

화면에 보이는 Div 컴포넌트 클릭 시 Div 컴포넌트의 오른쪽 하단 꼭지점을 기준으로 PopupMenu 컴포넌트가 배치됩니다. Radio 컴포넌트로 설정한 정렬 조건을 선택하면 해당 조건에 따라 PopupMenu 컴포넌트의 위치가 변경됩니다.

sample_popupmenu_01.xfdl

예제에서 사용한 핵심 기능

trackPopupByComponent (objComp, nXpos, nYpos...)

첫 번째 인자로 지정한 컴포넌트 또는 오브젝트를 기준으로 팝업 메뉴를 보여줄 위치를 지정합니다. 예제에서는 Div 컴포넌트를 인자로 지정했기 때문에 Div 컴포넌트의 top, left 좌표값을 (0, 0)으로 설정하고 지정된 좌표값에 팝업 메뉴를 표시합니다.

trackPopupByComponent (...strAlign...)

팝업 메뉴를 보여주는 좌표점에서 팝업 메뉴의 가로, 세로 정렬 방식을 지정합니다. default 값은 "right bottom"입니다. 이때 사용하는 방향은 좌표점을 기준으로 생각해야 합니다. 좌표점이 Div 컴포넌트의 오른쪽 아래 꼭지점이라면 default 정렬값을 적용해 해당 꼭지점 오른쪽 아래에 팝업 메뉴가 나타납니다. 반대로 정렬값을 "left top"이라고 설정한다면 아래 그림과 같이 Div 컴포넌트 안쪽에 팝업 메뉴가 나타납니다.

예제 구현 방법

Radio, Div, PopupMenu 컴포넌트를 예제 화면과 같이 배치합니다. Radio 컴포넌트의 innerdataset 속성값은 아래와 같이 지정합니다. Div 컴포넌트는 눈에 잘 보이도록 border 속성값을 "2px solid red"로 지정했습니다.

PopupMenu 컴포넌트의 innerdataset 속성값은 아래와 같이 지정합니다. 입력해야 하는 값은 captioncolumn, levelcolumn 값입니다.

Radio 컴포넌트를 선택한 후 onitemchanged 이벤트 함수를 작성합니다. Radio 컴포넌트에서 항목 선택 시 align이라는 변수에 정렬 조건값을 저장합니다. 저장된 값은 Div 컴포넌트의 onclick 이벤트에서 사용합니다.

var align;
this.radioAlign_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
		align = obj.value;
};

Div 컴포넌트를 선택한 후 onclick 이벤트 함수를 작성합니다. 팝업 메뉴가 표시되는 기준점은 Div 컴포넌트이고 Div 컴포넌트의 너비와 높이를 X, Y 좌표값으로 지정하면 Div 컴포넌트의 좌표값을 기준으로 X, Y 좌표값만큼 이동해서 오른쪽 아래 꼭지점을 기준으로 팝업 메뉴가 표시됩니다. 여기에 정렬 조건을 선택한 경우 해당 조건이 반영될 수 있도록 조건식을 추가합니다.

this.divClick_onclick = function(obj:nexacro.Div,e:nexacro.ClickEventInfo)
{
	var targetX = obj.width;
	var targetY = obj.height;
	if(align) {
		this.popupmenuABC.trackPopupByComponent(obj, targetX, targetY, align);
	} else {
		this.popupmenuABC.trackPopupByComponent(obj, targetX, targetY);
	}
};

QuickView(Ctrl + F6)로 실행한 후 Div 컴포넌트 영역을 오른쪽 마우스로 클릭해 팝업 메뉴가 나타나는 것을 확인합니다.

구분선 추가하기

넥사크로 스튜디오 메뉴를 열어보면 특정 메뉴 항목들을 묶어서 표시하고 중간에 구분선을 표시합니다. 구분선 자체는 기능을 가지고 있지 않지만, 메뉴 항목이 많은 경우 사용자가 쉽게 인지할 수 있게 구분해줍니다.

예제

버튼 클릭 시 팝업 메뉴가 표시되며 구분선이 표시된 상태를 확인할 수 있습니다. [New] 항목 선택 시 하위 메뉴에는 지정한 아이콘이 표시됩니다.

sample_popupmenu_02.xfdl

예제에서 사용한 핵심 기능

iconcolumn

메뉴 앞에 아이콘을 표시합니다. 첫 번째 레벨에서는 아이콘을 표시하지 않으며 두 번째 이하 레벨에서만 표시합니다. 예제에서는 테마에서 사용하는 파일을 사용했습니다.

예제 구현 방법

captioncolumn 항목은 화면에 표시되는 메뉴명입니다. 이 항목에 "-"를 입력하면 구분선으로 처리합니다. 예제에서는 4, 8, 10번째 Row에 "-"를 입력했습니다.

넥사크로 스튜디오 Form 화면에서는 "-" 입력값이 그대로 표시되지만, 실제 애플리케이션 실행 시에는 구분선으로 표시됩니다.

버튼 클릭 시 팝업 메뉴가 표시되도록 합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.popupmenu00.trackPopupByComponent(this, e.clientx, e.clienty);
};