5.팝업화면 처리 방식

Edit

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