화면 가이드

팝업샘플 화면의 메인화면이다(팝업화면의 흐름은 popup_basic 템플릿을 참고한다).

팝업화면으로 값을 전달하거나 팝업화면에서 값을 전달받을 수 있다(loadpopup API 호출시 extra_data파라미터 사용).

팝업화면에서 데이터를 전달할때는 필드명이나 함수명, 혹은 부모화면의 on_popupdestroy이벤트를 통해 전달할 수 있다.

일반팝업은 모달 및 모달리스 방식으로 호출 가능하고, 포틀릿팝업은 모달방식으로만 호출 가능하다.

팝업 이름 파라미터 값을 기준으로 팝업 화면을 찾거나, 팝업 중복 로드 방지를 제어한다.

관련 API로 loadpopup, loadportletpopup가 있다.

관련 이벤트로 on_popupload, on_popupdestroy가 있다.

템플릿 위치: /HTML5/SCREEN/POPUP/popup_usage

템플릿 파일

// 팝업화면으로 전달할 파라미터 설정
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 = "";
}

팝업샘플 기본 가이드

예시

화면 스크립트