팝업 화면 처리방식

넥사크로를 이용하여 사원관리 화면을 만들어 보면서, 컴포넌트 사용법과 데이터 처리 방식에 대해 알아봅니다.

넥사크로를 이용하여 팝업 형태의 화면을 처리하는 방식에 대해 알아봅니다.

소스참고
nexacro17_Education_Materials\Sample\EduProject\Form\Form_Popup.xfdl
nexacro17_Education_Materials\Sample\EduProject\Form\Form_Popup_Sub.xfdl
nexacro17_Education_Materials\Sample\EduProject\Form\Form_Popup_Sub2.xfdl

모달(Modal) 팝업 처리

모달 형식으로 팝업화면을 띄우고 파라미터 전송과 리턴값을 방식에 대해 알아 봅니다.

모달(Modal) 팝업 - Basic

1 부모 화면에서 모달 팝업 화면으로 파라미터를 전송합니다.
2 모달 팝업 화면에서는 전송된 파라미터를 받습니다.
3 부모 화면에 리턴값을 전달하고 모달 팝업 화면을 종료 합니다.

모달 화면 오픈 스크립트

모달 팝업 화면을 오픈 하기 위한 스크립트를 작성합니다.

var objChildFrame = new ChildFrame();
	objChildFrame.init("chf_popup1"
	                  , 0
					  , 0
					  , 400
					  , 350
					  , null
					  , null
					  , "Form::Form_Popup_Sub.xfdl");

	objChildFrame.set_dragmovetype("all");
	objChildFrame.set_openalign("center middle");
	objChildFrame.set_overlaycolor("RGBA(196,196,196,0.5)")
	
	var objParam = {param1:this.edt_param1.value
	              , param2:this.edt_param2.value
				  , param3:this.ds_parent};
	objChildFrame.showModal(this.getOwnerFrame()
	                      , objParam
						  , this
						  , "fn_popupCallback");

모달 팝업 화면에서 보내주는 리턴값을 받을 콜백함수를 선언합니다.

this.fn_popupCallback = function(strPopupID, strReturn)
{
	if(strReturn == undefined){
		return;
	}

	if(strPopupID == "chf_popup1"){
		this.alert("Return Value: " + strReturn);
	}
};

Object 형식의 인자를 갖는 함수를 생성합니다. 팝업창에서 해당 함수를 호출하여 Object를 전송하는 형식으로 String 이외의 값을 전송 할 수 있습니다.

this.fn_parent = function(pObj)
{
	this.ds_parent.copyData(pObj);
};

팝업창에서 파라미터를 받는 스크립트 입니다. 팝업창의 onload 이벤트에 지정합니다.

this.form_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	var strParam1 = this.parent.param1;
	var strParam2 = this.parent.param2;
	var objParam  = this.parent.param3;

	this.Edit00.set_value(strParam1);
	this.Edit01.set_value(strParam2);	
	
	this.ds_child.copyData(objParam);
	this.Grid00.set_binddataset("ds_child");
	this.Grid00.createFormat();
};

부모창에 리턴값을 전송하면서 팝업창을 종료하는 스크립트를 작성합니다.

• close() 메소드를 실행합니다.

  팝업창을 호출한 부모화면에 넘겨줄 값을 문자열로 설정 할 수 있습니다.

  넘겨주는 값은 부모창의 콜백 함수에서 받습니다.

var strReturn = this.Edit00.value;
this.close(strReturn);

• 팝업창에서 부모 화면의 함수를 호출하여 리턴값을 넘겨줍니다.

  String 이외의 형식, 또는 여러개의 값을 전송해야 하는 경우에 사용 할 수 있습니다.

  "opener"를 이용하여 부모 객체를 접근 할 수 있습니다.

this.opener.fn_parent(this.ds_child);
this.close();

• 팝업창에서 부모 화면의 객체를 직접 제어 합니다.

  "opener"를 이용하여 부모 객체를 접근 할 수 있습니다.

this.opener.ds_parent.clearData();
var nRow = this.opener.ds_parent.addRow();
this.opener.ds_parent.copyRow(nRow, this.ds_child, this.ds_child.rowposition);
this.close();

모달리스(Modeless) 팝업 처리

모달리스 팝업을 실행 하는 방식에 대해 알아 봅니다.

모달리스 화면 오픈 스크립트

모달리스 팝업 화면을 오픈 하기 위한 스크립트를 작성합니다.

var nW = 500;
var nH = 400;

var objApp = nexacro.getApplication();
var nLeft = (objApp.mainframe.width  / 2) - Math.round(nW / 2);
var nTop  = (objApp.mainframe.height / 2) - Math.round(nH / 2) ;		
nLeft = system.clientToScreenX(this, nLeft);
nTop  = system.clientToScreenY(this, nTop);

var objParam = {param1:this.edt_param1.value
              , param2:this.edt_param2.value
			  , param3:this.ds_parent};

var sOpenStyle = "dragmovetype=all"
			 + " resizable=true"
			 + " titletext=Modeless"
			 + " showtitlebar=true"
			 + " showstatusbar=false";

nexacro.open("chf_popup3"
		   , "Form::Form_Popup_Sub.xfdl"
		   , this.getOwnerFrame()
		   , objParam
		   , sOpenStyle
		   , nLeft
		   , nTop
		   , nW
		   , nH
		   , this);

PopupDiv 컴포넌트를 이용한 팝업 처리

PopupDiv 컴포넌트는 하위에 다른 컴포넌트를 가질 수 있어, 여러개의 부분화면을 구성할 때 사용하는 컴포넌트로 포커스를 잃게 되면 자동으로 사라지는 컴포넌트 입니다. 
이러한 특성을 이용하여 팝업 화면과 비슷한 형식으로 구성 할 수 있습니다.

모달리스 화면 오픈 스크립트

PopupDiv 컴포넌트를 생성하고 그 안에 다른 컴포넌트를 생성하여 화면을 구성 합니다.

버튼을 클릭하여 PopupDiv를 특정 위치에 표시하는 스크립트를 작성합니다.

var nX = parseInt(obj.width);	
var nY = parseInt(obj.height);
this.PopupDiv00.trackPopupByComponent(obj
                                    , nX
									, nY
									, null
									, null
									, "fn_pDivCallback");

PopupDiv를 닫는 스크립트를 작성합니다.

this.PopupDiv00.closePopup("Return Value");

리턴값은 PopupDiv의 콜백 함수를 지정하여 받을 수 있습니다.

this.fn_pDivCallback = function(objID, rtnValue)
{
	if(rtnValue == ""){
		return;
	}
	if(objID == "PopupDiv00")
	{
		this.alert("Return Value: " + rtnValue);
	}
};