Frame 소개

독립적인 창 구조를 가지고 동작하는 애플리케이션을 구성할 때 Frame 구조를 가집니다. MainFrame은 그 이름처럼 Frame 구조를 이루는 기본 오브젝트입니다. MainFrame은 하나만 존재할 수 있습니다.

웹브라우저에서 실행하는 경우에는 웹브라우저가 Frame의 역할을 담당합니다. 콘텐츠의 로딩 상태나 화면의 크기, 타이틀바 설정을 웹브라우저에서 처리합니다. 웹브라우저의 특성에 따라 화면에 보이는 모습은 조금씩 다를 수 있습니다.

Frame 형태에 따라 Div 컴포넌트처럼 Container 컴포넌트를 사용하는 것인지 구분이 되지 않을 수 있습니다. Frame은 전체 애플리케이션의 구조를 지정하는 것이라면 Container 컴포넌트는 각 콘텐츠의 구조를 설정합니다. Container 컴포넌트는 스크립트로 그 구조를 변경할 수 있지만, Frame 구조는 쉽게 변경하기 어렵습니다. Frame 구조는 제공하는 콘텐츠의 일관성을 유지하는 역할을 하고 있어 구조를 변경하지 않은 것이 좋습니다.

사용 예

최근에는 메뉴를 다양한 형식으로 표현하고 있지만, 아직도 여전히 상단 메인 메뉴, 왼쪽 서브 메뉴 구조를 유지하는 곳이 많습니다. 특히 콘텐츠의 양이 많은 경우에는 책을 읽는 것처럼 자연스럽게 접근할 수 있는 방식이기도 합니다.

Frame 구성하기

프로젝트 생성 시 Frame 템플릿을 지정합니다. 다른 항목을 선택하지 않고 넘어가는 경우(Frame Template은 "None", "Create Frame" 선택)에는 [MainFrame > ChildFrame] 형식으로 App을 구성합니다. 이때는 Form은 생성되지 않고 App만 생성합니다. Form은 직접 생성해 ChildFrame에 연결해주어야 합니다.

"None" 이외의 다른 Frame 템플릿을 선택하면 해당 Frame 구조와 함께 Form도 생성합니다. 아래 예제는 "MidThree" 템플릿을 선택했을 때 생성된 프로젝트 구조입니다.

프로젝트 생성 시 Frame 구조를 선택하지 않았더라도 프로젝트 생성 후 Frame 구조를 변경할 수 있습니다. 다양한 템플릿을 제공하지만 원하는 형태가 아닌 경우라면 "None"을 선택 후 Frame 편집창에서 원하는 형태로 수정할 수 있습니다.

formurl

Frame 중에서 formurl 속성은 ChildFrame만 가지고 있습니다. 나머지 MainFrame, FrameSet은 ChildFrame과 연결된 Form을 어떻게 보여주고 ChildFrame을 어떻게 배치할 것인지에 대한 기능을 제공하는 것일 뿐 콘텐츠를 연결해 제공하지는 않습니다.

넥사크로 스튜디오에서 메뉴에서 [QuickView]로 Form을 실행한 경우에는 임의의 Frame 설정으로 화면을 보여줍니다. MainFrame 아래 ChildFrame이 있고 formurl로 Form을 연결한 상태로 나타납니다. 하지만 메뉴에서 [Launch]로 실행한 경우에는 설정된 Frame 구조에 따라 실행되고 ChildFrame의 formurl 속성값에 지정된 Form이 화면에 보입니다.

ChildFrame 생성하기

Form 안에 Frame을 생성하는 것은 원칙적으로 추천하지 않는 방법입니다. 다만 팝업창처럼 독립적으로 동작하는 기능을 처리하고자 하는 경우에 사용할 수 있습니다.

예제

ChildFrame을 생성하고 스타일 속성을 변경하거나 드래그 지원 여부를 변경합니다. [Create Frame] 버튼을 클릭하면 팝업창이 표시되고 [Draw Border] 버튼을 클릭하면 팝업창의 경계선이 보여집니다. 이 상태에서는 윈도우 타이틀 영역을 잡고 팝업창을 자유롭게 움직일 수 있는데 [dragmovetype] 버튼을 클릭하면 창이 dragmovetype 속성값이 변경되어 움직이지 않습니다. [dragmovetype] 버튼을 다시 클릭하면 팝업창을 다시 움직일 수 있습니다.

sample_frame_01.xfdl

예제에서 사용한 핵심 기능

dragmovetype

ChildFrame을 마우스 드래그로 이동시키는 기능 활성화 여부를 설정하는 속성입니다. default 값은 "normal"입니다. 타이틀바 영역을 선택해 마우스 드래그로 이동시킬 수 있습니다. 타이틀바 영역을 보이지 않도록 한 경우에는 Form 영역을 드래그할 수 있습니다. Form 영역은 텍스트 선택이나 항목 선택을 마우스 드래그로 처리할 수 있으므로 이벤트가 겹치지 않도록 default 속성에서는 타이틀바 여부에 따라 마우스 드래그 방식이 결정되도록 처리합니다.

replace

String 오브젝트의 메소드입니다. Button 컴포넌트의 text 속성처럼 String 형식을 가지는 속성이라면 해당 메소드를 사용할 수 있습니다. replace는 특정 문자열을 다른 문자열로 바꾸고 바뀐 값을 반환합니다. 주의할 점은 원래의 값 자체를 바꾸는 것이 아니라 바뀐 값을 반환한다는 겁니다. 해당 값을 바꾸고 싶다면 replace 메소드를 사용해 얻은 값으로 다시 지정해주어야 합니다.

예제 구현 방법

Button 컴포넌트를 예제 화면과 같이 배치합니다. ChildFrame은 넥사크로 스튜디오에서 생성하지 않고 버튼 클릭 시 스크립트에서 생성합니다.

첫 번째 버튼 클릭 시 ChildFrame을 생성합니다. ChildFrame을 생성할 위치와 크기만 지정합니다.

this.btnCreate_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objChildFrame = new ChildFrame();  
	objChildFrame.init("childframeNew", 30, 90, 200, 150, null, null);
	this.addChild("childframeNew", objChildFrame);
	objChildFrame.show();
};

ChildFrame의 border 속성값이 0px이기 때문에 타이틀바 영역만 보이고 Form 영역은 보이지 않는 것처럼 보입니다. 실제 Form 영역은 있지만, 배경색이 같으므로 없는 것처럼 보이는 것입니다.

생성된 ChildFrame의 border 속성을 지정합니다. ChildFrame 생성 시 지정한 id 속성값으로 접근합니다.

this.btnBorder_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.childframeNew) {
		this.childframeNew.set_border("1px solid #999999");
	} else {
		trace("childframeNew undefined");
	}
};

조건문을 사용해 ChildFrame이 생성됐는지 확인하고 그렇지 않다면 메시지를 표기합니다.

생성된 ChildFrame의 dragmovetype 속성을 지정합니다. 속성값을 "none"으로 변경하면 마우스 드래그로 ChildFrame을 움직일 수 없습니다. 해당 속성값의 현재값을 비교해 "normal"이면 "none"으로 변경하고 "none"이면 "normal"로 변경해 토글 기능처럼 동작합니다.

this.btnDrag_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.childframeNew.dragmovetype == "normal") {
		this.childframeNew.set_dragmovetype("none");
		obj.set_text(obj.text.replace("normal","none"));
	} else {
		this.childframeNew.set_dragmovetype("normal");
		obj.set_text(obj.text.replace("none","normal"));
	}
};

현재 속성값을 Button 컴포넌트의 text 속성으로 표기하기 위해 replace 메소드를 사용합니다. 표기되는 값에서 dragmovetype 속성값에 해당하는 문자열만 조건에 따라 변경합니다.

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭하거나 마우스 드래그로 동작을 확인합니다. 상황에 따라 스크립트 에러가 발생할 수 있습니다. 스크립트 에러는 런타임으로 실행 시에는 넥사크로 스튜디오 [Output] 창에서 확인할 수 있고 웹브라우저에서는 콘솔창에서 확인할 수 있습니다.

FrameSet 생성하기

FrameSet은 화면 배열을 처리하기 위해 사용하는 오브젝트입니다. 화면을 배열하는 방식에 따라 HFrameSet(가로 방향 배열), VFrameSet(세로 방향 배열), TileFrameSet(타일 형태 배열)으로 세분화됩니다. HFrameSet을 선택한 경우에는 추가된 ChildFrame이 가로 방향으로 배치되고 HFrameSet에 맞게 ChildFrame의 크기가 자동으로 조정됩니다. 또한, 마우스 드래그로 배치 순서를 바꾸더라도 자동으로 맞는 위치에 정렬됩니다.

예제

버튼을 클릭하면 HFrameSet을 생성하고 3개의 ChildFrame을 생성해 HFrameSet에 추가합니다. ChildFrame의 크기는 자동으로 설정되는데 Radio 컴포넌트 항목을 선택하면 크기 비율이 변경됩니다.

sample_frame_02.xfdl

예제에서 사용한 핵심 기능

addChild

동적으로 자식 컴포넌트나 오브젝트를 추가하는 메소드입니다. Div 컴포넌트와 같은 컨테이너 컴포넌트나 Form은 컴포넌트나 오브젝트를 추가할 수 있고 FrameSet은 FrameSet 또는 ChildFrame을 추가할 수 있습니다.

separatesize

콤마(,)로 구분해 FrameSet 내 포함된 ChildFrame의 너비를 지정합니다. 속성값을 지정하지 않았다면 같은 너비로 처리합니다.

예제 구현 방법

Button 컴포넌트와 Radio 컴포넌트를 예제 화면과 같이 배치합니다. Radio 컴포넌트의 항목값은 separatesize 속성값으로 지정할 때 사용합니다. innerdataset 값은 아래와 같습니다.

Form 오브젝트의 onload 이벤트 함수 내에서 HFrameSet을 생성합니다.

this.sample_frame_02_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var objHFrameset = new HFrameSet();  
	objHFrameset.init("hframesetNew", 30, 90, 400, 200);
	this.addChild("hframesetNew", objHFrameset);
	objHFrameset.set_border("1px solid #999999");
	objHFrameset.show();
};

그리고 버튼 클릭 시 ChildFrame 생성, 추가합니다. 화면에 보일 수 있도록 border 속성값을 추가로 지정했습니다.

this.btnCreate_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.addChildFrame(this.hframesetNew, "childFrame00");
	this.addChildFrame(this.hframesetNew, "childFrame01");
	this.addChildFrame(this.hframesetNew, "childFrame02");
};

ChildFrame은 같은 형식을 3번 반복하기 때문에 addChildFrame이라는 함수를 만들어 사용했습니다. ChildFrame은 Form이 아닌 HFrameSet의 자식으로 추가합니다.

this.addChildFrame = function(obj, strId:String)
{
	var objChildFrame = new ChildFrame();  
	objChildFrame.init(strId, 0, 0, 0, 0);
	obj.addChild(strId, objChildFrame);
	objChildFrame.set_border("1px solid #999999");
	objChildFrame.show();
}

버튼을 클릭해보면 아래와 같이 배치된 3개의 ChildFrame을 볼 수 있습니다.

Radio 컴포넌트의 항목을 선택하면 배치된 ChildFrame의 너비가 변경됩니다. 숫자로 값을 지정한 경우에는 px 단위로 너비가 수정되고 * 문자로 지정된 경우에는 숫자로 지정된 너비를 제외한 나머지를 계산해 처리합니다. 예를 들어 HFrameSet 너비가 400이고 separatesize 속성값을 "250, *, *"로 지정했다면 첫 번째 ChildFrame의 너비는 250이 되고 나머지 ChildFrame의 너비는 (400-250)/2가 됩니다. 실제 값을 계산할 때는 border 속성이나 다른 속성도 고려되어야 하므로 수치는 달라질 수 있습니다.

this.radioSeparate_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.hframesetNew.set_separatesize(obj.value);
};

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭하거나 마우스 드래그로 동작을 확인합니다.

ChildFrame 정렬하기

문서 편집 소프트웨어는 아래 그림처럼 창을 여러 개 띄어놓은 상태에서 정렬하는 기능을 제공합니다. 가로나 세로, 계단식, 바둑판식으로 창을 정렬하는 기능을 제공합니다. 넥사크로플랫폼도 FrameSet에 ChildFrame을 추가한 경우 창 정렬방식을 지정할 수 있습니다.

예제

첫 번째 버튼을 클릭하면 FrameSet을 생성하고 두 번째 버튼을 클릭하면 ChildFrame을 생성하고 FrameSet에 추가합니다. FrameSet은 강제로 ChildFrame의 위치나 크기를 조정하지 않기 때문에 지정한 위치와 크기에 ChildFrame이 생성됩니다. Radio 컴포넌트의 항목을 설정하면 지정한 정렬 방식이 적용됩니다.

sample_frame_03.xfdl

예제에서 사용한 핵심 기능

arrange

FrameSet을 사용하는 경우 정렬 방식을 지정합니다. 해당 메소드를 실행하는 순간 적용되며 다른 ChildFrame이 추가되는 경우에는 영향을 받지 않습니다. 필요하다면 한 번 더 메소드를 실행해야 합니다. HFrameSet처럼 정렬 방향이 지정된 경우에는 arrange 메소드를 사용할 수 없으며 FrameSet만 가지고 있는 메소드입니다.

showtitlebar

예제에서는 창 정렬 방식을 잘 보여주기 위해 타이틀바 영역을 보이지 않도록 처리했습니다.

예제 구현 방법

Button 컴포넌트와 Radio 컴포넌트를 예제 화면과 같이 배치합니다. Radio 컴포넌트의 항목값은 separatesize 속성값으로 지정할 때 사용합니다. innerdataset 값은 아래와 같습니다.

버튼 클릭 시 FrameSet을 생성합니다. 화면에 보일 수 있도록 border 속성값을 추가로 지정했습니다.

this.btnCreate_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objFrameset = new FrameSet();  
	objFrameset.init("framesetNew", 30, 90, 400, 400);
	this.addChild("framesetNew", objFrameset);
	objFrameset.set_border("1px solid #999999");
	objFrameset.show();
};

버튼 클릭 시 ChildFrame을 생성합니다. 여러 개 ChildFrame을 생성할 수 있도록 클릭할 때마다 늘어나는 인덱스 변수를 정의하고 id 값과 위치값을 설정합니다. 타이틀바가 보이지 않도록 showtitlebar 속성값을 지정합니다. 또한 배경색도 매번 다른 색으로 지정합니다.

var frameIdx = 0;

this.btnAddChild_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objChildFrame = new ChildFrame();  
	objChildFrame.init("childframe"+frameIdx, frameIdx, frameIdx, 40, 40);
	this.framesetNew.addChild("childframe"+frameIdx, objChildFrame);
	objChildFrame.set_border("1px solid #999999");
	objChildFrame.set_showtitlebar(false);
	objChildFrame.set_background('#'+Math.random().toString(16).slice(-6));
	objChildFrame.show();
	frameIdx = frameIdx + 10;
};

Radio 컴포넌트의 항목을 선택하면 배치된 ChildFrame의 정렬 방식이 변경됩니다.

this.radioArrange_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.framesetNew.arrange(obj.value);
};

QuickView(Ctrl + F6)로 실행한 후 FrameSet과 ChildFrame을 생성한 후 정렬 방식을 변경해봅니다.

모달창으로 ChildFrame 생성하기

웹사이트에서 로그인 버튼을 클릭하면 로그인창이 팝업 형태로 보이는 경우가 있습니다. 이런 경우 열린 로그인창 외에 다른 영역은 뿌옇게 처리되는 경우를 본적이 있을 겁니다. 아니면 이메일을 등록하면 10% 할인 쿠폰을 준다는 광고창도 마찬가지입니다.

모달창은 팝업창과 비슷하지만 간단한 정보를 보여주거나 입력받은 정보를 처리하는 용도로 사용합니다. 해당 작업에 집중하기 위해 다른 영역은 뿌옇게 비활성화 상태처럼 보여줍니다.

예제

버튼을 클릭하면 ChildFrame을 생성하고 모달창으로 화면 가운데 띄웁니다.

sample_frame_04.xfdl

예제에서 사용한 핵심 기능

openalign

ChildFrame 초기화 단계에서 위치를 지정하지만 openalign 속성을 지정하면 원하는 위치에 정렬해 표시할 수 있습니다. showModal 메소드와 같이 사용할 때만 적용되는 속성입니다.

resizable

ChildFrame의 창 크기를 조절할 수 있도록 허용할 것인지 여부를 설정합니다. default 값은 false로 크기를 조절할 수 없습니다. 해당 속성값을 true로 설정하면 창 경계선 영역에 마우스를 가져가면 크기를 조절할 수 있는 상태로 마우스 커서가 변경됩니다. 창에 상태바를 보이도록 허용한 경우에는 창 왼쪽 하단에 크기를 조정할 수 있는 컨트롤 영역이 추가됩니다.

overlaycolor

팝업창으로 ChildFrame을 띄울 때 나머지 영역 배경색을 지정하는 속성입니다. 색상값만 지정할 수도 있고 투명도를 같이 지정할 수 있습니다. 투명도를 지정하려면 RGBA() 형식으로 값을 지정합니다.

예제 구현 방법

Button 컴포넌트를 예제 화면과 같이 배치합니다.

버튼 클릭 시 ChildFrame을 생성합니다. 화면에 보일 수 있도록 border 속성값을 추가로 지정하고 상태바가 보이도록 showstatusbar 속성값을 지정했습니다. 모달창으로 화면에 보일 때 가운데 위치할 수 있도록 openalign 속성값을 지정하고 모달창 주변의 배경색을 수정했습니다.

this.btnPopup_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objChildFrame = new ChildFrame();  
	objChildFrame.init("childframe00", 0, 0, 300, 300, null, null);
	objChildFrame.set_border("1px solid #999999");
	objChildFrame.set_showstatusbar(true);
	objChildFrame.set_openalign('center middle');
	objChildFrame.set_resizable(true);
	objChildFrame.set_overlaycolor("rgba(255,0,0,0.3)");
	objChildFrame.set_background("#ffffff");
	objChildFrame.showModal(this.getOwnerFrame());
};

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 모달창으로 ChildFrame을 생성해봅니다.

open 메소드로 속성값 전달하기

Div 컴포넌트 같은 컨테이너 컴포넌트는 팝업창으로 나타나지만 같은 브라우저 내에서 동작하기 때문에 서로 접근할 수 있습니다. 하지만 open 메소드를 사용하는 경우에는 브라우저 자체를 새 창으로 처리합니다. 이런 경우에는 서로 접근할 수 있는 방법이 없습니다. 그래서 open 메소드 실행 시 필요한 속성값을 전달할 수 있도록 준비되어 있습니다.

open 메소드로 전달된 속성값은 실행되는 Form의 상위 프레임인 ChildFrame의 속성으로 전달됩니다. 새로운 속성값을 사용자 속성처럼 전달할 수 있으며 기존 속성값을 덮어 쓸 수 있습니다.

예제

"Create Popup" 버튼을 클릭하면 새 창이 열립니다. 새 창에서 "Show property" 버튼을 클릭하면 전달된 속성값을 확인할 수 있습니다.

sample_frame_05.xfdl

예제에서 사용한 핵심 기능

open

open 메소드는 동적으로 ChildFrame을 생성하고 modeless 창으로 표시합니다. 파라미터 중 objArgumentList 항목을 지정해 원하는 속성값을 전달할 수 있습니다. 속성값은 "{속성명:속성값, 속성명:속성값}" 형식으로 전달합니다.

예제 구현 방법

Button 컴포넌트를 예제 화면과 같이 배치합니다.

"Create Popup" 버튼 클릭 시 open 메소드를 실행합니다. 따로 Form을 생성하지 않고 같은 Form을 재활용합니다. 4번째 파라미터로 속성값 목록을 전달합니다. 전달되는 속성값 중 name 속성은 ChildFrame 오브젝트가 원래 가지고 있는 속성값을 덮어쓰게 되고 uname 속성은 새로운 속성을 만들고 속성값을 설정합니다.

this.btnPopup_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	nexacro.open("POPUP FRAME", "Sample::sample_frame_05.xfdl", 
		nexacro.getApplication().getActiveFrame(), 
		{name:"POPUP FRAME RENAME", uname:"TEST"});
};

"Show property" 버튼 클릭 시 전달된 속상값을 제대로 처리하는지 확인합니다. 속성값은 Form의 parent인 ChildFrame의 속성값이기 때문에 "this.parent.속성값" 형식으로 접근합니다.

this.btnShow_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
		this.alert(this.parent.name + "\n" + this.parent.uname);
};

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭해 모달창으로 ChildFrame을 생성하고 전달된 속성값을 확인합니다.

타이틀바 영역 변경하기

타이틀바 영역은 별도 컨트롤로 구성되어 있으며 각 컨트롤 별로 접근할 수 있습니다. 도움말에서는 TitleBarControl 항목을 찾으면 해당 구조를 확인할 수 있습니다.

예제

"Create Frame" 버튼을 클릭하면 Button 컴포넌트 아래에 프레임이 생성되고 생성된 창에서 "Set TitleBar" 버튼을 클릭하면 타이틀바 영역의 일부 속성을 변경합니다.

sample_frame_08.xfdl

예제에서 사용한 핵심 기능

titlebar

프레임의 타이틀바 오브젝트 속성입니다. TitleBarControl 오브젝트에서 하위 속성을 확인할 수 있습니다.

titleicon

타이틀바 영역에서 텍스트와 아이콘이 표시되는 영역입니다. 아이콘 이미지와 텍스트 속성을 변경할 수 있습니다. TitleBarIconTextControl 오브젝트에서 하위 속성을 확인할 수 있습니다.

maxbutton, minbutton

최소화, 최대화 버튼입니다. 예제에서는 해당 버튼을 보이지 않도록 설정했습니다. TitleBarButtonControl 오브젝트에서 하위 속성을 확인할 수 있습니다.

예제 구현 방법

HFrameSet을 배치하고 그 안에 ChildFrame을 배치합니다. ChildFrame의 formurl 속성은 같은 Form으로 지정합니다.

this.btnCreate_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objHFrameset = new HFrameSet();  
	objHFrameset.init("hframesetNew", 30, 90, 400, 200);
	this.addChild("hframesetNew", objHFrameset);
	objHFrameset.set_border("1px solid #999999");
	objHFrameset.show();
		
	var objChildFrame = new ChildFrame();  
	objChildFrame.init("TEST", 0, 0, 0, 0);
	objHFrameset.addChild("TEST", objChildFrame);
	objChildFrame.set_border("1px solid #999999");
	objChildFrame.set_formurl("Sample::sample_frame_08.xfdl");
	objChildFrame.show();
};

버튼을 클릭하면 같은 Form이 화면에 표시됩니다. 하지만, 버튼을 클릭했을 때 다른 동작을 처리하도록 코드를 수정합니다. parent.id 속성값이 ChildFrame의 id 속성값인 "TEST"인 경우에는 타이틀바 영역을 변경하는 동작을 처리하도록 합니다.

this.btnCreate_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	if(this.parent.id=="TEST")
	{
		this.parent.titlebar.titleicon.set_font("20pt 'Arial'");
		this.parent.titlebar.titleicon.set_color("pink");
		this.parent.titlebar.minbutton.set_visible(false);
		this.parent.titlebar.maxbutton.set_visible(false);
		this.parent.set_titlebarheight(40);	
	}
	else
	{
		...
	}
};

this.sample_frame_08_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	if(this.parent.id=="TEST")
	{
		this.btnCreate.set_text('Set TitleBar');
	}
};

팝업창 크기 제한하기

팝업창으로 띄운 창 크기를 사용자가 변경할 수 있지만, 지정된 범위는 벗어나지 않게 합니다.

예제

"Create Popup" 버튼을 클릭하면 Button 컴포넌트 아래에 프레임이 생성되고 생성된 팝업창 크기 변경 시 특정 크기보다 작거나 크게 만들 수 없습니다.

sample_frame_09.xfdl

예제에서 사용한 핵심 기능

cx, cy

SizeEventInfo 오브젝트에서 반환하는 값으로 컴포넌트의 크기가 변경될 때 변경된 너비, 높이 값을 반환합니다.

예제 구현 방법

ChildFrame 오브젝트를 배치하고 addEventHandler 메소드를 사용해 onsize 이벤트 발생 시 크기를 제한하는 스크립트가 동작하도록 합니다. showModal 메소드 실행 시 최소, 최대 크기값을 같이 전달합니다.

this.btnPopup_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objChildFrame = new ChildFrame();  
	objChildFrame.init("childframe00", 0, 0, 300, 300, null, null);
	objChildFrame.set_border("1px solid #999999");
	objChildFrame.set_showstatusbar(true);
	objChildFrame.set_openalign('center middle');
	objChildFrame.set_resizable(true);
	objChildFrame.set_background("#ffffff");
	objChildFrame.set_titletext(objChildFrame.width+"*"+objChildFrame.height);	
	objChildFrame.addEventHandler( "onsize", this.ChildFrame00_onsize, this);
	objChildFrame.showModal(this.getOwnerFrame(), {minsize:'150', maxsize:'400'});
};

사용자가 팝업창 크기를 변경할 때마다 onsize 이벤트가 발생하며 현재 팝업창의 크기와 변경하려는 크기를 비교해서 범위를 벗어나는 경우 최소 또는 최대 크기값으로 변경합니다.

this.ChildFrame00_onsize = function(obj:nexacro.ChildFrame, e:nexacro.SizeEventInfo)
{
	obj.set_titletext(obj.width+"*"+obj.height);	
	if(e.cx < obj.minsize) {
		obj.set_width(obj.minsize);
	}
	if(e.cx > obj.maxsize) {
		obj.set_width(obj.maxsize);
	}
	
	if(e.cy < obj.minsize){
		obj.set_height(obj.minsize);
	}
	if(e.cy > obj.maxsize){
		obj.set_height(obj.maxsize);
	}	
}