PopupDiv 소개

PopupDiv는 하나의 화면을 여러 개의 부분 화면으로 나눠 구성할 때 사용하는 컴포넌트입니다. 특정 메시지나 추가적인 정보와 같이 필요할 때 한 번씩 확인하는 경우에 사용하면 유용합니다.

기본적으로는 Div와 동일하나 팝업으로 동작하기 때문에 화면상에서 다른 UI 요소들보다 상위에 위치합니다. 그리고 포커스를 잃으면 자동으로 사라지기 때문에 여러 개를 동시에 화면에 출력할 수 없다는 특징이 있습니다. 화면에 PopupDiv를 여러 개 생성해 배치해도 한 번에 보여줄 수 있는 건 한 개뿐입니다.

PopupDiv는 화면의 구성을 수월하게 하고 화면을 분할해서 폼에 대한 재사용성을 높입니다. 그러나 중첩해서 사용하는 경우 단계가 깊어질수록 초기화 시간과 화면 로딩이 느려집니다. 예를 들어, 1개 화면에 2~3단계로 구성된 PopupDiv를 여러 개 사용하는 것이 4~5단계로 구성된 PopupDiv를 1개 사용하는 것보다 빠릅니다. 따라서 PopupDiv는 보통 2~3단계 정도로만 중첩하여 구성하는 것이 좋습니다.

PopupDiv는 화면 디자인 시 미리 생성해 놓고 배치할 수도 있고 실행중에 스크립트로 생성해 보여줄 수도 있습니다. 다른 컴포넌트와 달리 폼에 생성해서 배치해도 화면에서 보이지 않습니다. 실제로 화면에 출력하기 위해서는 trackPopup, trackPopupComponent 메소드를 사용해서 화면에 배치하는 작업을 별도로 해줘야 합니다.

PopupDiv는 팝업으로 동작하지만 실제 팝업 창과는 다르게 UI 영역 내에서만 동작합니다. 폼의 영역 내에서만 보이며 그 영역을 벗어나는 부분은 잘려서 보이게 되므로 사용 시 유의해야 합니다.

사용 예

다음은 대표적인 검색 엔진인 구글의 검색 페이지입니다. 구글의 검색 페이지에서는 사용자 입력을 돕기 위해 키보드 형태의 입력 도구를 지원하는데 이 키보드와 같은 UI를 PopupDiv로 만들 수 있습니다.

PopupDiv 만들기

다음은 마우스로 폼을 클릭하면 PopupDiv가 나타나는 예제입니다. PopupDiv를 생성해 놓은 상태에서 trackPopup, trackPopupByComponent 메소드를 사용해 화면에 출력합니다.

툴바에서 PopupDiv 를 선택한 후, Form 위에 적당한 크기로 드래그하여 생성합니다. 그냥 폼에 대고 클릭하면 기본 크기로 생성됩니다.

폼을 클릭하면 PopupDiv가 화면에 출력되도록 onclick 이벤트 핸들러를 생성한 후 다음과 같이 trackPopup 메소드를 호출합니다.

this.Form_onclick = function(obj:nexacro.Form,e:nexacro.ClickEventInfo)
{
	this.PopupDiv00.trackPopup(40, 32, 200, 200);
	
};

QuickView(Ctrl + F6)로 실행합니다.

폼을 클릭하면 PopupDiv가 화면에 나타나며 다시 클릭하면 사라집니다.

PopupDiv 배치하기

생성한 PopupDiv 컴포넌트를 화면에 출력하려면 trackPopup, trackPopupByComponent 메소드를 사용해서 좌표와 크기를 설정해야 합니다. 두 메소드는 같은 기능을 하는데 trackPopup 메소드는 UI 화면의 좌상단을 기준으로 좌표를 결정하고 trackPopupByComponent 메소드는 인수한 컴포넌트를 기준으로 좌표를 결정한다는 차이가 있습니다. 두 메소드중 어떤 것을 사용해도 상관없으며 상황에 맞게 메소드를 사용하면 됩니다.

예제

다음은 trackPopupByComponent 메소드를 사용하여 PopupDiv 컴포넌트를 화면에 배치한 예제입니다. trackPopupByComponent 메소드는 다른 컴포넌트를 기준으로 좌표를 설정하는 메소드로 예제에서는 Button00을 기준으로 PopupDiv00을 화면에 배치하였습니다.

sample_popupdiv_02.xfdl

예제에서 사용한 핵심 기능

trackPopupByComponent

인수로 전달된 컴포넌트를 기준으로 PopupDiv를 특정 위치에 배치하는 메소드입니다.

this.PopupDiv00.trackPopupByComponent( this.Button00, 10, 10 );
this.PopupDiv00.trackPopupByComponent( this.Button00, 10 ,10 ,200 ,200 ,"fn_Callback" );

getOffsetHeight

컴포넌트의 height 속성값을 픽셀 단위로 반환하는 메소드입니다.

getOffsetWidth

컴포넌트의 width 속성값을 픽셀 단위로 반환하는 메소드입니다.

예제 구현 방법

툴바에서 Button 과 PopupDiv 를 선택한 후, Form 위에 적당한 크기로 드래그하여 생성합니다. 그냥 폼에 대고 클릭하면 기본 크기로 생성됩니다.

PopupDiv는 trackPopupByComponent 메소드에 의해 애플리케이션 실행 시 재배치 되므로 넥사크로스튜디오의 디자인 화면에서는 배치에 신경쓰지 않아도 됩니다.

버튼 클릭 시 PopupDiv가 정해진 위치에 배치되도록 trackPopupByComponent 메소드를 호출합니다.

• Button00 버튼의 onclick 이벤트 핸들러

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.PopupDiv00.trackPopupByComponent(obj, obj.getOffsetWidth(), obj.getOffsetHeight(), 160, 240);

};

QuickView(Ctrl + F6)로 실행합니다.

Button00을 클릭하여 PopupDiv가 설정한 위치에 출력되는지 확인합니다.