5.팝업화면 처리 방식

5.1팝업 화면 처리방식

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

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

소스참고
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

5.1.1모달(Modal) 팝업 처리

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

모달(Modal) 팝업 - Basic

그림 5-101_화면예

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");

line 1~9:

ChildFrame 오브젝트를 생성하고 초기값을 설정합니다. ChildFrame은 Form을 실행 할 수 있는 기본 단위 입니다.


line 11:

ChildFrame을 마우스 드래그로 이동시, 드래그가 가능한 영역을 설정합니다.


line 12:

팝업창으로 실행할 때의 위치를 지정합니다. 가로, 세로 위치를 중앙에 표시합니다.


line 13:

모달로 팝업창을 실행한 경우 부모 Frame에 적용한 색을 설정합니다. 모달로 실행되면 부모 Frame을 사용할 수 없다는 의미로 사용 합니다.

RGBA를 이용하여 투명 색상을 지정 할 수 있습니다.


line 15~17:

팝업창에 전송 할 파라미터를 {변수명:변수값, 변수명:변수값} 형식으로 설정 합니다.

부모창의 Edit 컴포넌트에 입력한 값과 ds_parent 데이터셋을 파라미터로 전송합니다.


line 18~21:

동적으로 생성한 ChildFrame을 모달 형식으로 표시 하는 showModal 메소드를 실행합니다.


line 21:

모달 팝업창이 종료될때 호출 할 콜백 함수를 지정합니다.

모달 팝업 화면에서 보내주는 리턴값을 받을 콜백함수를 선언합니다.
this.fn_popupCallback = function(strPopupID, strReturn)
{
    if(strReturn == undefined){
        return;
    }

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

line 1~9:

팝업창에서 리턴값을 받을 콜백함수를 지정합니다. 팝업 아이디와 리턴값을 인자로 갖습니다.

리턴값은 String 형식으로만 받을 수 있습니다.

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();
};

line 3~5:

부모창에서 보내주는 파라미터를 받습니다.


line 7~8:

String 형식의 파라미터는 팝업창의 Edit 컴포넌트에 표현합니다.


line 10~12:

Datatset 형식의 파라미터(Object) 는 팝업창에 있는 ds_child 데이터셋에 데이터를 복사하여 팝업창의 그리드에 바인드하여 표현합니다.

부모창에 리턴값을 전송하면서 팝업창을 종료하는 스크립트를 작성합니다.
var strReturn = this.Edit00.value;
this.close(strReturn);
this.opener.fn_parent(this.ds_child);
this.close();
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();

팝업을 띄울 ChildFrame의 배경 색상과 팝업 Form을 투명 색상으로 지정하여

아래와 같은 투명 형태로 팝업창을 오픈 할 수 있습니다.


var objChildFrame = new ChildFrame();

...

objChildFrame.set_showtitlebar(false);

objChildFrame.set_background("transparent");

objChildFrame.set_overlaycolor("RGBA(38,38,38,0.7)");



5.1.2모달리스(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);

line 1~2:

팝업창의 사이즈를 지정합니다.


line 4~8:

팝업창을 중앙에 띄우기 위한 좌표를 계산합니다.


line 10~12:

팝업창에 전송 할 파라미터를 {변수명:변수값, 변수명:변수값} 형식으로 설정 합니다.


line 14~18:

팝업창에 적용할 속성값을 지정 합니다. "속성1=속성값1 속성2=속성값2" 형식으로 지정합니다. 속성을 ChildFrame의 속성을 지정할 수 있으며, 스타일 관련 속성은 지정 할 수 없습니다.


line 20~29:

모달리스(Modeless) 창으로 표시하는 open() 메소드를 실행합니다.

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

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

그림 5-202_컴포넌트

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

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

그림 5-302_컴포넌트

버튼을 클릭하여 PopupDiv를 특정 위치에 표시하는 스크립트를 작성합니다.
var nX = parseInt(obj.width);    
var nY = parseInt(obj.height);
this.PopupDiv00.trackPopupByComponent(obj
                                    , nX
                                    , nY
                                    , null
                                    , null
                                    , "fn_pDivCallback");

line 1~2:

PopupDiv 컴포넌트를 표현할 위치를 지정합니다.


line 3~8:

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

trackPopupByComponent 메소드는 인수로 전달된 컴포넌트 기준으로 PopupDiv를 표시합니다.

6번째 인수에는 PopupDiv가 닫힐때 호출할 콜백 함수 입니다.

PopupDiv를 닫는 스크립트를 작성합니다.
this.PopupDiv00.closePopup("Return Value");
리턴값은 PopupDiv의 콜백 함수를 지정하여 받을 수 있습니다.
this.fn_pDivCallback = function(objID, rtnValue)
{
    if(rtnValue == ""){
        return;
    }
    if(objID == "PopupDiv00")
    {
        this.alert("Return Value: " + rtnValue);
    }
};