팝업 화면 동기 로드

화면을 모달/모달리스 팝업 형태로 비동기/동기 방식으로 로드하는 기능에 대한 샘플화면이다.

자바스크립의 Promise 오브젝트를 사용하는 방법인 async, await 문법(ECMAScript (ECMA-262)을 사용한다.

동기 방식 API 함수를 호출하는 함수는 async function이어야하며, await 문법을 이용해서 동기 방식 API를 호출해야 한다.

동기 방식 API는 IE에서는 지원되지 않는다.

비동기 방식 화면 로드 API는 화면 로드를 시작하고 바로 리턴한다. (팝업 로드 완료는 탭의 on_popupload 이벤트를 통해서 확인해야 한다.)

동기 방식 화면 로드 API는 화면 로드가 완료되면 리턴한다.

관련 API로 loadpopup, loadpopupsync, loadportletpopup, loadportletpopupsync가 있다.

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

템플릿 위치: /HTML5/SCREEN/SYNC/sync_loadpopup

템플릿 파일

• sync_loadpopup.xml
• sync_loadpopup.js
• 새창으로 실행

var SCREEN_BASE_DIR = "/HTML5/SCREEN/SYNC/";

// 화면 로드 이벤트
function screen_on_load()
{
	factory.showconsoletrace(true);
}

/**
 * factory.loadpopup API로 로드한 팝업 화면이 로드가 완료되면 발생하는 이벤트
 *
 * @param popup_screen 팝업 화면 인스턴스 오브젝트
 * @param popup_name factory.loadpopup API 호출시 지정한 팝업 이름
 */
function screen_on_popupload(popup_screen, popup_name)
{
	var log_prefix;

	log_prefix = "mainscreen:screen_on_popupload> ";

	factory.consoleprint(log_prefix + "start");

	factory.consoleprint(log_prefix + "popup_name = " + popup_name);
	if (factory.isobject(popup_screen)) {
		factory.consoleprint(log_prefix + "screen = " + popup_screen.getscreenurl());
	}

	factory.consoleprint(log_prefix + "end");
}

/**
 * 로드된 팝업 화면에서 unloadpopup API 호출로 인해서 팝업이 닫힐때 발생하는 이벤트
 *
 * @param popup_screen 팝업 화면 인스턴스 오브젝트
 * @param popup_name factory.loadpopup API 호출시 지정한 팝업 이름
 * @param result 로드된 팝업 화면에서 unloadpopup API 호출시 전달한 파라미터 값
 */
function screen_on_popupdestroy(popup_screen, popup_name, result)
{
	var log_prefix;

	log_prefix = "mainscreen:screen_on_popupdestroy> ";

	factory.consoleprint(log_prefix + "start");
	factory.consoleprint(log_prefix + "popup_name = " + popup_name);
	factory.consoleprint(log_prefix + "result = " + result);
	factory.consoleprint(log_prefix + "end");
}

// "loadpopup" 버튼 이벤트
function btn_loadpopup_on_mouseup(objInst)
{
	var log_prefix, ret, is_modal;

	log_prefix = "mainscreen:loadpopup> ";

	is_modal = this.chk_modalpopup.getcheck();

	// 일반 화면을 모달/모달리스 팝업으로 비동기 방식 로드
	factory.consoleprint(log_prefix + "before loadpopup");
	ret = factory.loadpopupex("POPUP_SCREEN_ASYNC",
		SCREEN_BASE_DIR + "business_screen", "POPUP SCREEN ASYNC",
		false, XFD_BORDER_RESIZE, 0, 0, 200, 500, true, true, is_modal,
		screen, "POPUPSCREEN_EXTRADATA");
	factory.consoleprint(log_prefix + "after loadpopup");
	factory.consoleprint(log_prefix + "ret = " + ret);
}

// "loadpopupsync" 버튼 이벤트
async function btn_loadpopupsync_on_mouseup(objInst)
{
	var log_prefix, popup_screen, ret, is_modal;

	log_prefix = "mainscreen:loadpopupsync_modal> ";

	is_modal = this.chk_modalpopup.getcheck();

	// 일반 화면을 모달/모달리스 팝업으로 동기 방식 로드
	factory.consoleprint(log_prefix + "before loadpopupsync");
	ret = await factory.loadpopupsync("POPUP_SCREEN_SYNC",
		SCREEN_BASE_DIR + "business_screen", "POPUP SCREEN SYNC",
		false, XFD_BORDER_RESIZE, 0, 0, 200, 500, true, true, is_modal,
		screen, "POPUPSCREEN_EXTRADATA");
	factory.consoleprint(log_prefix + "after loadpopupsync");
	factory.consoleprint(log_prefix + "return = " + ret);

	// 팝업 이름을 기준으로 팝업 화면 인스터스를 구하여 화면 URL 로깅
	popup_screen = factory.findpopup("POPUP_SCREEN_SYNC");
	if (factory.isobject(popup_screen)) {
		factory.consoleprint(log_prefix + "screen = " + popup_screen.getscreenurl());
	}
}

// "loadportletpopup 버튼 이벤트
function btn_loadportletpopup_on_mouseup(objInst)
{
	var log_prefix, ret;

	log_prefix = "mainscreen:loadportletpopup> ";

	// 포틀릿 화면을 모달 팝업으로 비동기 방식 로드
	factory.consoleprint(log_prefix + "before loadportletpopup");
	ret = screen.loadportletpopup("POPUP_PORTLET_ASYNC",
		SCREEN_BASE_DIR + "business_screen", " POPUP PORTLET ASYNC",
		false, XFD_BORDER_RESIZE, 0, 0, 200, 500, true, true, false,
		"POPUPSCREEN_EXTRADATA");
	factory.consoleprint(log_prefix + "after loadportletpopup");
	factory.consoleprint(log_prefix + "ret = " + ret);
}

// "loadportletpopupsync" 버튼 이벤트
async function btn_loadportletpopupsync_on_mouseup(objInst)
{
	var log_prefix, popup_screen, ret;

	log_prefix = "mainscreen:loadportletpopupsync> ";

	// 포틀릿 화면을 모달 팝업으로 동기 방식 로드
	factory.consoleprint(log_prefix + "before loadportletpopupsync");
	ret = await screen.loadportletpopupsync("POPUP_PORTLET_SYNC",
		SCREEN_BASE_DIR + "business_screen", "POPUP PORTLET SYNC",
		false, XFD_BORDER_RESIZE, 0, 0, 200, 500, true, true, false,
		"POPUPSCREEN_EXTRADATA");
	factory.consoleprint(log_prefix + "after loadportletpopupsync");
	factory.consoleprint(log_prefix + "return = " + ret);

	// 팝업 이름을 기준으로 팝업 화면 인스터스를 구하여 화면 URL 로깅
	popup_screen = screen.findportletpopup("POPUP_PORTLET_SYNC");
	if (factory.isobject(popup_screen)) {
		factory.consoleprint(log_prefix + "screen = " + popup_screen.getscreenurl());
	}
}

// "loadpopup (screen frame)" 버튼 이벤트
function btn_loadpopup_screenframe_on_mouseup(objInst)
{
	var log_prefix, ret;

	log_prefix = "mainscreen:loadpopup_screenframe> ";

	factory.consoleprint(log_prefix + "before LoadPopupFrameScreenAsync");
	ret = this.LoadPopupFrameScreenAsync(this.chk_modalscreenframe.getcheck(),
		SCREEN_BASE_DIR + "popup_frame_screen", "frame_screen_extra_data",
		SCREEN_BASE_DIR + "business_screen", "business_screen_extra_data");
	factory.consoleprint(log_prefix + "after LoadPopupFrameScreenAsync");
	factory.consoleprint(log_prefix + "ret = " + ret);
}

// "loadpopupsync (screen frame)" 버튼 이벤트
async function btn_loadpopupsync_screenframe_on_mouseup(objInst)
{
	var log_prefix, ret;

	log_prefix = "mainscreen:loadpopupsync_screenframe> ";

	factory.consoleprint(log_prefix + "before LoadPopupFrameScreenSync");
	ret = await this.LoadPopupFrameScreenSync(this.chk_modalscreenframe.getcheck(),
		SCREEN_BASE_DIR + "popup_frame_screen", "frame_screen_extra_data",
		SCREEN_BASE_DIR + "business_screen", "business_screen_extra_data");
	factory.consoleprint(log_prefix + "after LoadPopupFrameScreenSync");
	factory.consoleprint(log_prefix + "ret = " + ret);
}

// "loadportletpopup (portlet frame modal)" 버튼 이벤트
function btn_loadportletpopup_portletframe_modal_on_mouseup(objInst)
{
	var log_prefix, ret;

	log_prefix = "mainscreen:loadportletpopup_portletframe> ";

	factory.consoleprint(log_prefix + "before LoadPopupFramePortletAsync");
	ret = this.LoadPopupFramePortletAsync(
		SCREEN_BASE_DIR + "popup_frame_screen", "frame_screen_extra_data",
		SCREEN_BASE_DIR + "business_screen", "business_screen_extra_data");
	factory.consoleprint(log_prefix + "after LoadPopupFramePortletAsync");
	factory.consoleprint(log_prefix + "ret = " + ret);

	return ret;
}

// "loadportletpopupsync (portlet frame modal)" 버튼 이벤트
async function btn_loadportletpopupsync_portletframe_modal_on_mouseup(objInst)
{
	var log_prefix, ret;

	log_prefix = "mainscreen:loadportletpopupsync_portletframe> ";

	factory.consoleprint(log_prefix + "before LoadPopupFramePortletSync");
	ret = await this.LoadPopupFramePortletSync(
		SCREEN_BASE_DIR + "popup_frame_screen", "frame_screen_extra_data",
		SCREEN_BASE_DIR + "business_screen", "business_screen_extra_data");
	factory.consoleprint(log_prefix + "after LoadPopupFramePortletSync");
	factory.consoleprint(log_prefix + "ret = " + ret);

	return ret;
}

// "loadpopup (container frame)" 버튼 이벤트
function btn_loadpopup_containerframe_on_mouseup(objInst)
{
	var log_prefix, ret;

	log_prefix = "mainscreen:loadpopup_containerframe> ";

	factory.consoleprint(log_prefix + "before LoadPopupFrameContainerAsync");
	ret = this.LoadPopupFrameContainerAsync(this.chk_modalcontainerframe.getcheck(),
		SCREEN_BASE_DIR + "popup_frame_container", "container_screen_extra_data",
		SCREEN_BASE_DIR + "business_screen", "business_screen_extra_data");
	factory.consoleprint(log_prefix + "after LoadPopupFrameContainerAsync");
	factory.consoleprint(log_prefix + "ret = " + ret);
}

// "loadpopupsync (container frame)" 버튼 이벤트
async function btn_loadpopupsync_containerframe_on_mouseup(objInst)
{
	var log_prefix, ret;

	log_prefix = "mainscreen:loadpopupsync_containerframe> ";

	factory.consoleprint(log_prefix + "before LoadPopupFrameContainerSync");
	ret = await this.LoadPopupFrameContainerSync(this.chk_modalcontainerframe.getcheck(),
		SCREEN_BASE_DIR + "popup_frame_container", "container_screen_extra_data",
		SCREEN_BASE_DIR + "business_screen", "business_screen_extra_data");
	factory.consoleprint(log_prefix + "after LoadPopupFrameContainerSync");
	factory.consoleprint(log_prefix + "ret = " + ret);
}

/////////////////////////////////////////////////////////////////////////////
// 내부 함수 구현부 시작
// 실제 프로젝트 구축시에는 공통 모듈에 정의해서 사용하는 것을 권고
/////////////////////////////////////////////////////////////////////////////

/**
 * 일반 프레임 화면을 통한 업무 화면을 모달/모달리스 팝업으로 비동기 방식 로드
 *
 * @param is_modal 모달 팝업 여부
 * @param frame_screeen_url 프레임 화면 URL
 * @param frame_screen_extra_data 프레임 화면 Extra Data
 * @param business_screen_url 업무 화면 URL
 * @param business_screen_extra_data 업무 화면 Extra Data
 *
 * @returns 정상 처리 여부
 */
function LoadPopupFrameScreenAsync(is_modal,
								   frame_screeen_url, frame_screen_extra_data,
							  	 business_screen_url, business_screen_extra_data)
{
	var log_prefix, obj_extra_data, frame_screen, ret;

	log_prefix = "mainscreen:LoadPopupFrameScreenAsync> ";

	obj_extra_data = {
		is_async_load: true,
		frame_screen_extra_data: frame_screen_extra_data,
		business_screen_url: business_screen_url,
		business_screen_extra_data: business_screen_extra_data
	};

	// 모달 팝업 화면을 SYNC 방식으로 로드
	factory.consoleprint(log_prefix + "before loadpopup");
	ret = factory.loadpopupex("POPUP_FRAME_SCREEN_ASYNC",
		frame_screeen_url, "POPUP FRAME SCREEN ASYNC",
		false, XFD_BORDER_RESIZE, 0, 0, 200, 500, true, true, is_modal,
		screen, obj_extra_data);
	factory.consoleprint(log_prefix + "after loadpopup");
	factory.consoleprint(log_prefix + "return = " + ret);

	return ret;
}

/**
 * 일반 프레임 화면을 통한 업무 화면을 모달/모달리스 팝업으로 동기 방식 로드
 *
 * @param is_modal 모달 팝업 여부
 * @param frame_screeen_url 프레임 화면 URL
 * @param frame_screen_extra_data 프레임 화면 Extra Data
 * @param business_screen_url 업무 화면 URL
 * @param business_screen_extra_data 업무 화면 Extra Data
 *
 * @returns 정상 처리 여부
 */
async function LoadPopupFrameScreenSync(is_modal,
									    frame_screeen_url, frame_screen_extra_data,
							  		  business_screen_url, business_screen_extra_data)
{
	var log_prefix, obj_extra_data, frame_screen, ret;

	log_prefix = "mainscreen:LoadPopupFrameScreenSync> ";

	obj_extra_data = {
		is_async_load: false,
		frame_screen_extra_data: frame_screen_extra_data,
		business_screen_url: business_screen_url,
		business_screen_extra_data: business_screen_extra_data
	};

	// 모달 팝업 화면을 SYNC 방식으로 로드
	factory.consoleprint(log_prefix + "before loadpopupsync");
	ret = await factory.loadpopupsync("POPUP_FRAME_SCREEN_SYNC",
		frame_screeen_url, "POPUP FRAME SCREEN SYNC",
		false, XFD_BORDER_RESIZE, 0, 0, 200, 500, true, true, is_modal,
		screen, obj_extra_data);
	factory.consoleprint(log_prefix + "after loadpopupsync");
	factory.consoleprint(log_prefix + "return = " + ret);

	if (!ret) { return ret; }

	// 팝업 이름을 기준으로 프레임 팝업 화면 인스턴스를 찾음
	frame_screen = factory.findpopup("POPUP_FRAME_SCREEN_SYNC");
	if (!factory.isobject(frame_screen)) { return ret; }

	// 프레임 화면의 멤버 오브젝트를 구함
	frame_screen_member = frame_screen.getmembers();
	if (!factory.isobject(frame_screen_member)) { return ret; }

	// 프레임 화면의 LoadBusinessScreen 함수를 async 방식으로 호출하여
	factory.consoleprint(log_prefix + "before SyncLoadBusinessScreen");
	await frame_screen_member.SyncLoadBusinessScreen(obj_extra_data);
	factory.consoleprint(log_prefix + "after SyncLoadBusinessScreen");

	return ret;
}

/**
 * 포틀릿 프레임 화면을 통한 포틀릿/일반 화면을 모달 팝업으로 비동기 방식 로드
 *
 * @param frame_screeen_url 프레임 화면 URL
 * @param frame_screen_extra_data 프레임 화면 Extra Data
 * @param business_screen_url 업무 화면 URL
 * @param business_screen_extra_data 업무 화면 Extra Data
 *
 * @returns 정상 처리 여부
 */
function LoadPopupFramePortletAsync(frame_screeen_url, frame_screen_extra_data,
							  	  business_screen_url, business_screen_extra_data)
{
	var log_prefix, obj_extra_data, frame_screen, ret,
		is_center, is_autosize, is_maximize;

	log_prefix = "mainscreen:LoadPopupFramePortletAsync> ";

	obj_extra_data = {
		is_async_load: true,
		frame_screen_extra_data: frame_screen_extra_data,
		business_screen_url: business_screen_url,
		business_screen_extra_data: business_screen_extra_data
	};

	is_center = true;
	is_autosize = true;
	is_maximize = false;

	// 포틀릿 프레임 화면을 모달 팝업으로 비동기 방식 로드
	factory.consoleprint(log_prefix + "before loadportletpopup");
	ret = screen.loadportletpopup("POPUP_FRAME_PORTLET_ASYNC",
		frame_screeen_url, "POPUP FRAME PORTLET ASYNC",
		false, XFD_BORDER_RESIZE, 0, 0, 200, 500,
		is_center, is_autosize, is_maximize,
		obj_extra_data);
	factory.consoleprint(log_prefix + "after loadportletpopup");
	factory.consoleprint(log_prefix + "ret = " + ret);


	factory.consoleprint(log_prefix + "return = " + ret);

	return ret;
}

/**
 * 포틀릿 프레임 화면을 통한 포틀릿 화면을 모달 팝업으로 동기 방식 로드
 *
 * @param frame_screeen_url 프레임 화면 URL
 * @param frame_screen_extra_data 프레임 화면 Extra Data
 * @param business_screen_url 업무 화면 URL
 * @param business_screen_extra_data 업무 화면 Extra Data
 *
 * @returns 정상 처리 여부
 */
async function LoadPopupFramePortletSync(frame_screeen_url, frame_screen_extra_data,
							  		   business_screen_url, business_screen_extra_data)
{
	var log_prefix, obj_extra_data, frame_screen, ret,
		is_center, is_autosize, is_maximize;

	log_prefix = "mainscreen:LoadPopupFramePortletSync> ";

	obj_extra_data = {
		is_async_load: false,
		frame_screen_extra_data: frame_screen_extra_data,
		business_screen_url: business_screen_url,
		business_screen_extra_data: business_screen_extra_data
	};

	is_center = true;
	is_autosize = true;
	is_maximize = false;

	// 포틀릿 프레임 화면을 모달 팝업으로 동기 방식 로드
	factory.consoleprint(log_prefix + "before loadportletpopupsync");
	ret = await screen.loadportletpopupsync("POPUP_FRAME_PORTLET_SYNC",
		frame_screeen_url, "POPUP FRAME PORTLET SYNC",
		false, XFD_BORDER_RESIZE, 0, 0, 200, 500,
		is_center, is_autosize, is_maximize,
		obj_extra_data);
	factory.consoleprint(log_prefix + "after loadportletpopupsync");
	factory.consoleprint(log_prefix + "return = " + ret);

	if (!ret) { return ret; }

	// 팝업 이름을 기준으로 포틀릿 프레임 화면 인스턴스를 찾음
	frame_screen = factory.findpopup("POPUP_FRAME_PORTLET_SYNC");
	if (!factory.isobject(frame_screen)) { return ret; }

	// 포틀릿 프레임 화면의 멤버를 구함
	frame_screen_member = frame_screen.getmembers();
	if (!factory.isobject(frame_screen_member)) { return ret; }

	// 포틀릿 프레임 화면의 LoadBusinessScreen 함수를 await 방식 호출
	factory.consoleprint(log_prefix + "before SyncLoadBusinessScreen");
	await frame_screen_member.SyncLoadBusinessScreen(obj_extra_data);
	factory.consoleprint(log_prefix + "after SyncLoadBusinessScreen");

	return ret;
}

/**
 * 컨테이터 프레임 화면을 통한 일반 업무 화면을 모달/모달리스 팝업으로 비동기 방식 로드
 *
 * @param is_modal 모달 팝업 여부
 * @param container_screeen_url 컨테이너 화면 URL
 * @param container_screen_extra_data 컨테이너 화면 Extra Data
 * @param business_screen_url 업무 화면 URL
 * @param business_screen_extra_data 업무 화면 Extra Data
 *
 * @returns 정상 처리 여부
 */
function LoadPopupFrameContainerAsync(is_modal,
									  container_screeen_url, container_screen_extra_data,
									  business_screen_url, business_screen_extra_data)
{
	var log_prefix, obj_extra_data, ret;

	log_prefix = "mainscreen:LoadPopupFrameContainerAsync> ";

	obj_extra_data = {
		container_screen_extra_data: container_screen_extra_data,
		business_screen_url: business_screen_url,
		business_screen_extra_data: business_screen_extra_data
	};

	// 컨테이너 화면 모달/모달리스 팝업 비동기 방식 로드
	factory.consoleprint(log_prefix + "before loadpopup");
	ret = factory.loadpopupex("POPUP_FRAME_CONTAINER_ASYNC",
		container_screeen_url, "POPUP FRAME CONTAINER ASYNC",
		false, XFD_BORDER_RESIZE, 0, 0, 200, 500, true, true, is_modal,
		screen, obj_extra_data);
	factory.consoleprint(log_prefix + "after loadpopup");
	factory.consoleprint(log_prefix + "ret = " + ret);

	return ret;
}

/**
 * 컨테이터 프레임 화면을 통한 일반 업무 화면을 모달/모달리스 팝업으로 동기 방식 로드
 *
 * @param is_modal 모달 팝업 여부
 * @param container_screeen_url 컨테이너 화면 URL
 * @param container_screen_extra_data 컨테이너 화면 Extra Data
 * @param business_screen_url 업무 화면 URL
 * @param business_screen_extra_data 업무 화면 Extra Data
 *
 * @returns 정상 처리 여부
 */
async function LoadPopupFrameContainerSync(is_modal,
										   container_screeen_url, container_screen_extra_data,
				   						business_screen_url, business_screen_extra_data)
{
	var log_prefix, obj_extra_data, popup_screen;

	log_prefix = "mainscreen:LoadPopupFrameContainerSync> ";

	obj_extra_data = {
		container_screen_extra_data: container_screen_extra_data,
		business_screen_url: business_screen_url,
		business_screen_extra_data: business_screen_extra_data
	};

	// 컨테이너 화면을 모달/모달리스 팝업으로 동기 방식 로드
	// 컨네이터 화면내에서 일반 업무 화면을 addcontenttab API를 호출하여 로딩을 완료할 때 까지 대기
	factory.consoleprint(log_prefix + "before loadpopupsync");
	ret = await factory.loadpopupsync("POPUP_FRAME_CONTAINER_SYNC",
		container_screeen_url, "POPUP FRAME CONTAINER SYNC",
		false, XFD_BORDER_RESIZE, 0, 0, 200, 500, true, true, is_modal,
		screen, obj_extra_data);
	factory.consoleprint(log_prefix + "after loadpopupsync");
	factory.consoleprint(log_prefix + "return = " + ret);

	// 팝업 이름을 기준으로 팝업 화면 인스터스를 구하여 화면 URL 로깅
	popup_screen = factory.findpopup("POPUP_FRAME_CONTAINER_SYNC");
	if (factory.isobject(popup_screen)) {
		factory.consoleprint(log_prefix + "screen = " + popup_screen.getscreenurl());
	}

	return ret;
}