소개

팝업 생성

프레임 종류 (options.type) 별 생성

$p.openPopup() 함수를 사용하여 아래와 같이 세 종류(type)의 팝업을 생성할 수 있습니다.

아래 예제와 같이 type을 wframePopup으로 지정하면 WFrame 팝업을 생성할 수 있습니다.

$r_title(WFrame 팝업 생성 예제)
var options = {
    id : "popup1",
    type : "wframePopup",
    popupName : "openPopup1",
    modal : "true",
    ……
};
$p.openPopup("popup1.xml", options);

모달 팝업 (options.modal) 생성

$p.openPopup() 함수를 사용하여 팝업을 생성할 때 options.modal 옵션을 통해 모달 혹은 모달리스 팝업으로 생성할 수 있습니다.

$r_title(모달 팝업 생성 예제)
var options = {
    id: "modal",
    type: “wframePopup", // "iframePopup", "browserPopup"
    width: "400px",
    height: "200px",
    popupName: "Modal Popup",
    modal: "true"
};

$p.openPopup("popUp_content.xml", options);

프레임 모달 팝업 (options.frameModal) 생성

특정 프레임 영역에만 표시되는 팝업을 프레임 모달 팝업이라고 합니다. $p.openPopup() 함수를 통해 팝업 생성 시 options.frameModal 옵션 속성 설정을 통해 팝업을 표시할 프레임을 지정할 수 있습니다.

options.frameModal

"frame" - 팝업이 호출된 프레임

"parent" - 팝업이 호출된 프레임의 부모 프레임

"top" - 최상단 화면

frameId - 팝업을 표시할 프레임의 ID. ($p.getFrame() 등을 통해 해당 프레임에 직접 접근해서 구함.)

$r_title(사용 예)
var frameId = $p.getFrame().getParentFrame().getParentFrame().id;

var options = {
    id: "modal",
    type: "wframePopup", // "iframePopup", "browserPopup"
    width: "400px",
    height: "200px",
    top: "100px",
    left: "200px",
    popupName: "Frame Modal Popup",
    modal: "true",
    frameModal: frameId // "frame" "parent" "top"  framdId
};

$p.openPopup("14_popUp_02A_src.xml", options);

최상단 팝업으로 생성

여러 팝업을 생성하는 경우, 가장 최상단에 표시할 팝업을 지정하고 해당 팝업을 활성화할 수 있습니다.

$r_title(새로 생성하는 팝업을 제일 위에 표시하고 활성화)
var options = {
    type: "browserPopup",
    ...
    modal: true,
    useModalStack: true,
    alwaysOnTop: true
};
$p.openPopup("popup_parent.xml", options);

부모 WFrame의 Scope를 상속하는 팝업으로 생성

WFrame을 포함하는 화면을 wframePopup 타입의 팝업으로 생성할 경우, 팝업 화면이 포함한 WFrame의 소스(src) 화면에서 가장 가까운 부모의 WFrame(즉, wframePopup 타입의 팝업)의 객체 및 영역에 접근하도록 허용할 수 있습니다.

$p.openPopup() 함수로 wframePopup 타입의 팝업을 생성할 때 options.scopeInherit 옵션을 아래와 같이 설정하십시오.

• "none" (기본 값) : 부모 영역의 객체를 자동으로 참조하지 않고, $p.main() 함수는 ($p.top() 함수와 동일하게 실행되어) 최상단 페이지에 접근.

• "api" : 부모 영역의 객체를 자동으로 참조하지 않지만, $p.main() 함수는 부모 영역에 접근.

• "all" : 부모 영역의 객체를 자동으로 참조하고, $p.main() 함수도 부모 영역에 접근.

• "component" : 부모 영역의 객체를 자동으로 참조하지만, $p.main() 함수는 ($p.top() 함수와 동일하게 실행되어) 최상단 페이지에 접근.

$r_title(사용 예)
var options = {
    id: "popup1",
    type: "wframePopup",
    height: "700px",
    width: "700px",
    scopeInherit: "all"
};
$p.openPopup("source.xml", options);

팝업 생성 시 dataObject를 통한 파라미터 전달

$p.openPopup() 함수로 새로 생성하는 팝업으로 dataObject를 통해 파라미터를 전달할 수 있습니다. 생성된 팝업에서는 $p.getParameter() 함수를 통해 전달받은 파라미터 확인 가능합니다.

$r_title($p.openPopup() 함수로 팝업을 생성할 때 파라미터 전달 (예시))
requires("uiplugin.popup");

var rowJSON = {
  "Product Info": {
    "Origin": "Korea",
    "Manufacturer": "Inswave",
    "Type": "Software"
  },
  "Region": "Seoul",
  "Carrier": true
};

var dataObject = {
  "type": "json",
  "name": "param",
  "data": rowJSON
};

var options = {
  id: "popup1",
  type: "wframePopup",
  height: "300px",
  width: "300px",
  dataObject: dataObject
};

$p.openPopup("src.xml", options);

$r_title(팝업창에서 전달받은 파라미터 확인 (예시))
var paramData = $p.getParameter("param");
var data = JSON.stringify(paramData);
alert(data);

팝업 생성 후 서브미션 상태 창 표시

options.processMsgFrame="true" 옵션으로 $p.openPopup() 함수를 실행하여 팝업을 생성할 때, 팝업 페이지 로딩 후에 즉시 $p.executeSubmission() 함수를 실행할 경우 (예: 팝업 페이지의 onpageload 이벤트를 사용), 서브미션 상태창을 팝업 내부 혹은 외부에 표시할 수 있습니다.

• "true" : 서브미션 상태 창이 팝업 외부에 표시됨.

• "false" (기본 값) : 서브미션 상태 창이 팝업 내부에 표시됨.

$r_title(사용 예)
var options = {
    id: "popup1",
    type: "wframePopup",
   ....
    processMsgFrame: "true"
};
$p.openPopup("popup_src.xml", options);

팝업 간 참조

WFrame으로 생성한 팝업은 $p.getPopupWindow() 및 $p.parent() API를 통해 참조할 수 있습니다.

메인 화면

팝업

이중 팝업

자식 → 부모

$r_title(사용 예)
$p.parent().$p.parent().input1.getValue();
$p.main().input1.getValue();

부모 → 자식

$r_title(사용 예)
$p.getPopupWindow("popup1").$p.getPopupWindow("popup11").scwin.test();

형제

$r_title(사용 예)
$p.main().$p.getPopupWindow("popup2").$p.getPopupWindow("popup2-1").scwin.test();

팝업 여부

WFrame 팝업

$p.isWFramePopup() 함수를 사용하여 현재 화면 혹은 부모 화면이 WFrame 팝업인지 여부를 확인할 수 있습니다.

$r_title(사용 예)
// Case (1)
// 현재 화면이 팝업인지 여부를 반환. true/false 반환.
var isWFrame = $p.isWFramePopup();

// Case (2) 
// WFrame 팝업 혹은 브라우저 팝업 내에 WFrame이 있는 경우, 
// 부모의 WFrame 팝업 여부를 자식 WFrame에서 확인. 
var isWFrame = $p.isWFramePopup(true);

WFrame 팝업 및 브라우저 팝업

$p.isPopup() 함수를 사용하여 현재 화면 혹은 부모 화면의 팝업 여부를 확인할 수 있습니다. (단, 팝업이 wframePopup 혹은 browserPopup인 경우에 한합니다.)

$r_title(사용 예)
// Case (1)
// 현재 화면이 팝업인지 여부를 반환. true/false 반환.
var ispopup = $p.isPopup();

// Case (2) 
// WFrame 팝업 혹은 브라우저 팝업 내에 WFrame이 있는 경우, 
// 부모의 팝업 여부를 자식 WFrame에서 확인. 
var ispopup = $p.isPopup(true);

팝업 윈도우

WFrame 팝업

$p.getPopupWindow() 함수를 사용하여, 주어진 ID에 해당하는 type="wframePopup" 팝업 윈도우를 객체로 반환할 수 있습니다.

$r_title(사용 예)
// 팝업 윈도우 반환. Return the popup. 
var window = $p.getPopupWindow("popup1");

// 팝업 내의 "text1" 컴포넌트에 접근. Access "text1" component in the popup. 
var textValue = window.text1.getValue();

alert(textValue);

전체 팝업

getAllPopupWindowList() 함수를 사용하면 type="iframePopup" 및 type="browserPopup" 그리고 type="wframePopup" 팝업을 포함한 현재 열려 있는 모든 팝업 객체를 반환하고 해당 팝업 객체에 접근할 수 있습니다.

$r_title(사용 예)
var popWinList = $p.getAllPopupWindowList(true);
for (var i = 0; i < popWinList.length; i++ ) {
    console.log(popWinList[i].text1.getValue());
}

팝업 목록

WFrame 팝업 목록

현재 열려 있는 WFrame으로 팝업은 $p.getPopupWindowList() 함수를 통해 확인한 후 각 type="wframePopup" 팝업에 접근할 수 있습니다.

$r_title(사용 예)
var popUps = $p.getPopupWindowList();
var eachValue;
var allValues = "";
var i;
for (i = 0; i < popUps.length; i++) {
	eachValue = popUps[i].text1.getValue();
	allValues += eachValue + " ";
}
alert(allValues);

전체 팝업 목록

getAllPopupList() 함수를 사용하면 type="iframePopup" 및 type="browserPopup" 그리고 type="wframePopup" 팝업을 포함한 현재 열려 있는 모든 팝업 객체를 반환할 수 있습니다.

팝업 닫기

팝업을 닫을 때 실행할 함수 지정

$p.openPopup() 함수를 사용하여 팝업을 생성하고, 해당 팝업을 닫기 (X) 버튼을 클릭하여 닫을 때, 팝업을 닫기 전에 호출할 사용자 정의 함수를 options.closeAction 옵션을 통해 지정할 수 있습니다.

$r_title(팝업 생성 예)
requires("uiplugin.popup");

var options = {
  id: "popup1",
  type: "wframePopup",
  closeAction: "scwin.closeAction"
};

$p.openPopup("popup1.xml", options);

$r_title(options.closeAction 옵션으로 지정한 함수 정의)
scwin.closeAction = function(id, info) {
  if (!info.isCloseButtonClick) {
    return true;
  }
  console.log("scwin.closeAction is about to be run.");
  return true;
};

// info.isCloseButtonClick : 팝업의 닫기 버튼을 클릭한 경우 true 값을 반환.

부모 – 자식 팝업 함께 닫기

WFrame, WindowContainer, TabControl 내에서 이중으로 팝업을 생성할 경우, 모든 자식 팝업을 부모 팝업과 함께 닫을 수 있습니다. 좀 더 자세한 설명은 각 컴포넌트의 해당 항목을 참고하십시오.

• WFrame – 팝업 생성 및 팝업 닫기

• TabControl – 부모 – 자식 팝업 닫기

• WindowContainer – 부모 – 자식 팝업 닫기

부모 팝업만 닫기

$p.openPopup() 함수를 통해 wframePopup 타입의 부모 팝업을 생성할 때 options.popupAutoCloseSkip 옵션을 "true"로 설정하십시오. 그리고, 부모 팝업에서 wframePopup 혹은 browserPopup 타입의 자식 팝업을 다시 생성하십시오. 이 경우, 부모 팝업의 닫기 버튼을 클릭하여 자식 팝업은 열려 있는 상태로 유지하고 부모 팝업만 닫을 수 있습니다.

$r_title(부모 팝업 생성 예제)
var options = {
    id: "popup1",
    type: "wframePopup",
    height: "400px",
    width: "400px",
    left: "200px",
    popupName: "Parent Popup",
    popupAutoCloseSkip: true
};
$p.openPopup("source.xml", options);

팝업 제어

전체 화면에 팝업 표시

아래와 같이 fullscreen: true옵션을 사용하여 화면 전체에 팝업을 표시할 수 있습니다.

$r_title(사용 예)
$p.openPopup( 'popup.xml', { id:'popup1', fullscreen:true } );

팝업창 버튼

$p.openPopup()으로 팝업을 생성할 경우, 아래의 옵션을 사용하여 팝업창의 크기를 조절하는 버튼을 제어할 수 있습니다.

• useControl: 버튼의 표시 여부 결정.

• controls: 표시할 버튼의 종류를 결정. (최대화, 최소화, 복원)

$r_title(사용 예)
$p.openPopup("Popup.xml", {
    ...

    useControl: true,
    controls: {
        minimize: true,
        maximize: true,
        close: true,
    },
    foldOnMinimized: true,
    foldSize: {
        width: 100
    }
});

팝업창 최소화

관련 옵션

options.foldOnMinimized: true 최소화 버튼을 누를 경우 바디를 접음

options.foldSize: {width: 300} 접은 바디의 폭

$r_title(사용 예)
$p.openPopup("./popup.xml", {
    ...

    foldOnMinimized: true,
    foldSize: {
        width: 500
    }
});

팝업 위치 고정

$p.openPopup() 함수를 사용하여 팝업을 생성할 때 options.fixPosition 옵션을 true로 지정하여 팝업의 위치를 고정할 수 있습니다.

$r_title(사용 예)
var options = {
    id: "popup1",
    type: "wframePopup",
    width: "230px",
    height: "250px",
    top: "130px",
    left: "200px",
    popupName: "testPopup",
    modal: true,
    resizable: true,
    fixPosition: true
};
$p.openPopup("sub_popup.xml", options);

팝업 크기에 따른 적응형 디자인 적용

$p.openPopup() 함수를 사용하여 팝업을 생성할 때 팝업의 타입(type)이 WFrame이고 팝업의 소스(src) 화면이 적응형 디자인을 사용하는 경우, options.adaptiveFrame 옵션을 true로 지정하면 팝업의 크기에 따라 소스 화면에 적응형 디자인을 적용할 수 있습니다. 즉, 팝업의 크기를 변경할 경우, 팝업의 크기에 따라 팝업에 포함된 화면을 적응형으로 표시할 수 있습니다. 별도로 adaptiveFrame 옵션을 설정하지 않을 경우, 팝업에 포함된 화면은 브라우저 크기에 따라 적응형으로 표시됩니다.

$r_title(사용 예)
var options = {
    id: "popup1",
    type: "wframePopup",
    height: "400px",
    width: "1100px",
    resizable: true,
    adaptiveFrame: "true"
};
$p.openPopup("adaptive_adaptiveThreshold_TableLayout.xml", options);