====== 팝업샘플 기본 가이드 ======
팝업샘플 화면의 메인화면이다(팝업화면의 흐름은 popup_basic 템플릿을 참고한다).
팝업화면으로 값을 전달하거나 팝업화면에서 값을 전달받을 수 있다(loadpopup API 호출시 extra_data파라미터 사용).
팝업화면에서 데이터를 전달할때는 필드명이나 함수명, 혹은 부모화면의 on_popupdestroy이벤트를 통해 전달할 수 있다.
일반팝업은 모달 및 모달리스 방식으로 호출 가능하고, 포틀릿팝업은 모달방식으로만 호출 가능하다.
팝업 이름 파라미터 값을 기준으로 팝업 화면을 찾거나, 팝업 중복 로드 방지를 제어한다.
관련 API로 loadpopup, loadportletpopup가 있다.
관련 이벤트로 on_popupload, on_popupdestroy가 있다.
===== 예시 =====
템플릿 위치: /HTML5/SCREEN/POPUP/popup_usage
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/SCREEN/POPUP/popup_usage.xml|popup_usage.xml]]
* [[xf5projecthome>template/screen/HTML5/SCREEN/POPUP/popup_usage.js|popup_usage.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/SCREEN/POPUP/popup_usage|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// 팝업화면으로 전달할 파라미터 설정
var objPopupExtraData = {
POPOP_PARAM_DATA: "", // 팝업화면으로 전달할 데이터
RETURN_FUNCTION_NAME: "", // 팝업화면에서 데이터를 전달받기 위해 사용할 함수명
};
/**
* 일반팝업을 모달방식으로 호출하는 버튼클릭 이벤트를 처리한다.
* (함수명으로 결과 전달방식)
*/
function btn_modal_1_on_mouseup(objInst)
{
objPopupExtraData.POPOP_PARAM_DATA = this.fld_req1.gettext();
objPopupExtraData.RETURN_FUNCTION_NAME = "setFldRes1";
factory.loadpopup("popup_normal", "/HTML5/SCREEN/POPUP/popup_screen", "모달팝업(일반화면)", false,
XFD_BORDER_RESIZE, 0, 0, true, true, screen, objPopupExtraData);
}
/**
* 포틀릿팝업을 모달방식으로 호출하는 버튼클릭 이벤트를 처리한다.
* (부모화면의 on_destroy이벤트로 결과 전달방식)
*/
function btn_modal_2_on_mouseup(objInst)
{
objPopupExtraData.POPOP_PARAM_DATA = this.fld_req1.gettext();
screen.loadportletpopup("popup_normal", "/HTML5/SCREEN/POPUP/popup_screen", "모달팝업(포틀릿화면)", false,
XFD_BORDER_RESIZE, 0, 0, 200, 500, true, true, false, objPopupExtraData);
}
/**
* 포틀릿팝업을 모달방식으로 호출하는 버튼클릭 이벤트를 처리한다.
* (함수명으로 결과 전달방식)
*/
function btn_modal_3_on_mouseup(objInst)
{
objPopupExtraData.POPOP_PARAM_DATA = this.fld_req2.gettext();
objPopupExtraData.RETURN_FUNCTION_NAME = "setFldRes3";
screen.loadportletpopup("popup_screen", "/HTML5/SCREEN/POPUP/popup_screen", "모달팝업(포틀릿화면)", false,
XFD_BORDER_RAISED, 0, 0, 200, 500, true, true, false, objPopupExtraData);
}
/**
* 포틀릿팝업을 모달방식으로 호출하는 버튼클릭 이벤트를 처리한다.
* (부모화면의 on_destroy이벤트로 결과 전달방식)
*/
function btn_modal_4_on_mouseup(objInst)
{
objPopupExtraData.POPOP_PARAM_DATA = this.fld_req2.gettext();
screen.loadportletpopup("popup_screen", "/HTML5/SCREEN/POPUP/popup_screen", "모달팝업(포틀릿화면)", false,
XFD_BORDER_RAISED, 0, 0, 200, 500, true, true, false, objPopupExtraData);
}
/**
* 일반팝업을 모달리스방식으로 버튼클릭 이벤트를 처리한다.
* (함수명으로 결과 전달방식)
*/
function btn_modeless_1_on_mouseup(objInst)
{
objPopupExtraData.POPOP_PARAM_DATA = this.fld_req1.gettext();
objPopupExtraData.RETURN_FUNCTION_NAME = "setFldRes1";
factory.loadpopup("popup_normal", "/HTML5/SCREEN/POPUP/popup_screen", "모달리스팝업(일반화면)", false,
XFD_BORDER_RESIZE, 0, 0, true, false, screen, objPopupExtraData);
}
/**
* 일반팝업을 모달리스방식으로 버튼클릭 이벤트를 처리한다.
* (부모화면의 on_destroy이벤트로 결과 전달방식)
*/
function btn_modeless_2_on_mouseup(objInst)
{
objPopupExtraData.POPOP_PARAM_DATA = this.fld_req1.gettext();
factory.loadpopup("popup_normal", "/HTML5/SCREEN/POPUP/popup_screen", "모달리스팝업(일반화면)", false,
XFD_BORDER_RESIZE, 0, 0, true, false, screen, objPopupExtraData);
}
/**
* 일반 팝업화면에서 호출하여 결과값을 부모화면으로 전달한다.
*/
function setFldRes1(result)
{
this.fld_res1.settext(result);
}
/**
* 포틀릿 팝업화면에서 호출하여 결과값을 부모화면으로 전달한다.
*/
function setFldRes3(result)
{
this.fld_res3.settext(result);
}
/**
* 팝업이 닫힌 후 결과값을 가져오는 화면의 popupdestroy 이벤트를 처리한다.
*/
function screen_on_popupdestroy(popup_screen, popup_name, result)
{
// 팝업화면에서 unloadpopup API로 닫을때 전달할값이 설정되어 있고 함수명을 전달하지 않은 경우 입력
if (result !== undefined && result !== "" && objPopupExtraData.RETURN_FUNCTION_NAME === "") {
// 일반 팝업일 경우
if (popup_name === "popup_normal") {
this.fld_res2.settext(result);
}
// 포틀릿 팝업일 경우
else if (popup_name === "popup_screen") {
this.fld_res4.settext(result);
}
}
// 설정했던 objPopupExtraData값 초기화
objPopupExtraData.POPOP_PARAM_DATA = "";
objPopupExtraData.RETURN_FUNCTION_NAME = "";
}