탭 화면 동기 로드
텝에 화면을 비동기/동기 방식으로 로드하는 기능에 대한 샘플화면이다.
자바스크립의 Promise 오브젝트를 사용하는 방법인 async, await 문법(ECMAScript (ECMA-262)을 사용한다.
동기 방식 API 함수를 호출하는 함수는 async function이어야하며, await 문법을 이용해서 동기 방식 API를 호출해야 한다.
동기 방식 API는 IE에서는 지원되지 않는다.
비동기 방식 화면 로드 API는 화면 로드를 시작하고 바로 리턴한다. (화면 로드 완료는 탭의 on_itemcreate 이벤트를 통해서 확인해야 한다.)
동기 방식 화면 로드 API는 화면 로드가 완료되면 리턴한다.
관련 API로 addtab, addtabsync, addportlettab, addportlettabsync가 있다.
관련 이벤트로 on_itemcreate가 있다.
예시
화면 스크립트
var SCREEN_BASE_DIR = "/HTML5/SCREEN/SYNC/";
// 화면 로드 이벤트
function screen_on_load()
{
factory.showconsoletrace(true);
}
// 탭 아이템 생성 완료 이벤트 처리
function tab_link_on_itemcreate(objInst, itemindex)
{
var log_prefix, link_screen;
log_prefix = "mainscreen:tab_on_itemcreate> ";
factory.consoleprint(log_prefix + "start");
factory.consoleprint(log_prefix + "itemindex = " + itemindex);
// 링크된 화면 인스턴스를 구하여 화면 URL 로깅
link_screen = this.tab_link.getchildscreeninstance(itemindex);
if (factory.isobject(link_screen) == true) {
factory.consoleprint(log_prefix + "screen = " + link_screen.getscreenurl());
}
factory.consoleprint(log_prefix + "end");
}
////////////////////////////////////////////////////////////////////////
// 버튼 이벤트
////////////////////////////////////////////////////////////////////////
// "addtab" 버튼 이벤트 (일반 화면 비동기 로드)
function btn_addtab_on_mouseup(objInst)
{
var log_prefix, tab_index;
log_prefix = "mainscreen:addtab> ";
// 일반 화면을 비동기 방식 로드
factory.consoleprint(log_prefix + "before addtab");
tab_index = this.tab_link.addtab("ASYNC_SCREEN", 1, 160,
SCREEN_BASE_DIR + "business_screen", true);
factory.consoleprint(log_prefix + "after addtab");
factory.consoleprint(log_prefix + "tab_index = " + tab_index);
}
// "addtabsync screen" 버튼 이벤트 (일반 화면 동기식 로드)
async function btn_addtabsync_on_mouseup(objInst)
{
var tab_index, link_screen, log_prefix;
log_prefix = "mainscreen:addtabsync> ";
// 화면을 SYNC 방식으로 로드
factory.consoleprint(log_prefix + "before addtabsync");
tab_index = await this.tab_link.addtabsync("SYNC_SCREEN", 1, 160,
SCREEN_BASE_DIR + "business_screen", true);
factory.consoleprint(log_prefix + "after addtabsync");
factory.consoleprint(log_prefix + "tab_index = " + tab_index);
// addtabsync 함수가 동기식으로 화면으로 로드하기 때문에,
// 함수가 리턴되는 시점 화면의 오브젝트 인스턴스를 구할 수 있다.
link_screen = this.tab_link.getchildscreeninstance(tab_index);
if (factory.isobject(link_screen)) {
factory.consoleprint(log_prefix + "screen = " + link_screen.getscreenurl());
}
}
// "addportlettab portlet" 버튼 이벤트 (포틀릿 화면 비동기 로드)
function btn_addportlettab_on_mouseup(objInst)
{
var log_prefix, tab_index;
log_prefix = "mainscreen:addportlettab> ";
// 포틀릿 화면 ASYNC 방식 로드
factory.consoleprint(log_prefix + "before addportlettab");
tab_index = this.tab_link.addportlettab("ASYNC_PORTLET", 1, 160,
SCREEN_BASE_DIR + "business_screen", "", true);
factory.consoleprint(log_prefix + "after addportlettab");
factory.consoleprint(log_prefix + "tab_index = " + tab_index);
}
// "addportlettabsync portlet" 버튼 이벤트 (포틀릿 화면 동기식 로드)
async function btn_addportlettabsync_on_mouseup(objInst)
{
var log_prefix, tab_index, link_screen;
log_prefix = "mainscreen:addportlettabsync> ";
// 포틀릿 화면 SYNC 방식 로드
factory.consoleprint(log_prefix + "before addportlettabsync");
tab_index = await this.tab_link.addportlettabsync("SYNC_PORTLET", 1, 160,
SCREEN_BASE_DIR + "business_screen", "", true);
factory.consoleprint(log_prefix + "after addportlettabsync");
factory.consoleprint(log_prefix + "tab_index = " + tab_index);
// addportlettabsync 함수가 동기식으로 화면으로 로드하기 때문에,
// 함수가 리턴되는 시점에는, 화면의 오브젝트 인스턴스를 구할 수 있다.
link_screen = this.tab_link.getchildscreeninstance(tab_index);
if (factory.isobject(link_screen)) {
factory.consoleprint(log_prefix + "screen = " + link_screen.getscreenurl());
}
}
////////////////////////////////////////////////////////////////////////
// 프레임 화면 버튼 이벤트
////////////////////////////////////////////////////////////////////////
// "addportlettab portlet frame" 버튼 이벤트 (포틀릿 프레임 화면 비동기식 로드)
function btn_addportlettab_portletframe_on_mouseup(objInst)
{
var log_prefix, tab_index;
log_prefix = "mainscreen:addportlettab_portletframe> ";
factory.consoleprint(log_prefix + "before l");
tab_index = this.LoadTabFramePortletAsync(this.tab_link,
SCREEN_BASE_DIR + "tab_frame_screen", "frame_screen_extra_data",
SCREEN_BASE_DIR + "business_screen", "business_screen_extra_data");
factory.consoleprint(log_prefix + "after l");
factory.consoleprint(log_prefix + "tab_index = " + tab_index);
}
// "addportlettabsync portlet frame" 버튼 이벤트 (포틀릿 프레임 화면 동기식 로드)
async function btn_addportlettabsync_portletframe_on_mouseup(objInst)
{
var log_prefix, tab_index;
log_prefix = "mainscreen:addportlettabsync_portletframe> ";
factory.consoleprint(log_prefix + "before LoadTabFramePortletSync");
tab_index = await this.LoadTabFramePortletSync(this.tab_link,
SCREEN_BASE_DIR + "tab_frame_screen", "frame_screen_extra_data",
SCREEN_BASE_DIR + "business_screen", "business_screen_extra_data");
factory.consoleprint(log_prefix + "after LoadTabFramePortletSync");
factory.consoleprint(log_prefix + "tab_index = " + tab_index);
}
// "addtab screen frame" 버튼 이벤트 (일반 프레임 화면 비동기식 로드)
function btn_addtab_screenframe_on_mouseup(objInst)
{
var log_prefix, tab_index;
log_prefix = "mainscreen:addportlettab_screenframe> ";
factory.consoleprint(log_prefix + "before LoadTabFrameScreenAsync");
tab_index = this.LoadTabFrameScreenAsync(this.tab_link,
SCREEN_BASE_DIR + "tab_frame_screen", "frame_screen_extra_data",
SCREEN_BASE_DIR + "business_screen", "business_screen_extra_data");
factory.consoleprint(log_prefix + "after LoadTabFrameScreenAsync");
factory.consoleprint(log_prefix + "tab_index = " + tab_index);
}
// "addtabsync screen frame" 버튼 이벤트 (일반 프레임 화면 동기식 로드)
async function btn_addtabsync_screenframe_on_mouseup(objInst)
{
var log_prefix, tab_index;
log_prefix = "mainscreen:addportlettabsync_screenframe> ";
factory.consoleprint(log_prefix + "before LoadTabFrameScreenSync");
tab_index = await this.LoadTabFrameScreenSync(this.tab_link,
SCREEN_BASE_DIR + "tab_frame_screen", "frame_screen_extra_data",
SCREEN_BASE_DIR + "business_screen", "business_screen_extra_data");
factory.consoleprint(log_prefix + "after LoadTabFrameScreenSync");
factory.consoleprint(log_prefix + "tab_index = " + tab_index);
return tab_index;
}
// "addtab container frame" 버튼 이벤트 (컨테이너 화면 비동기 방식 로드)
function btn_addtab_containerframe_on_mouseup(objInst)
{
var log_prefix, tab_index;
log_prefix = "mainscreen:addtab_containerframe> ";
factory.consoleprint(log_prefix + "before LoadTabFrameContainerAsync");
tab_index = this.LoadTabFrameContainerAsync(this.tab_link,
SCREEN_BASE_DIR + "tab_frame_container", "container_screen_extra_data",
SCREEN_BASE_DIR + "business_screen", "business_screen_extra_data");
factory.consoleprint(log_prefix + "after LoadTabFrameContainerAsync");
factory.consoleprint(log_prefix + "tab_index = " + tab_index);
return tab_index;
}
// "addtabsync container frame" 버튼 이벤트 (컨테이너 화면 동기 방식 로드)
async function btn_addtabsync_containerframe_on_mouseup(objInst)
{
var log_prefix, tab_index;
log_prefix = "mainscreen:addtabsync_container> ";
factory.consoleprint(log_prefix + "before LoadTabFrameContainerSync");
tab_index = await this.LoadTabFrameContainerSync(this.tab_link,
SCREEN_BASE_DIR + "tab_frame_container", "container_screen_extra_data",
SCREEN_BASE_DIR + "business_screen", "business_screen_extra_data");
factory.consoleprint(log_prefix + "after LoadTabFrameContainerSync");
factory.consoleprint(log_prefix + "tab_index = " + tab_index);
return tab_index;
}
/////////////////////////////////////////////////////////////////////////////
// 내부 함수 구현부 시작
// 실제 프로젝트 구축시에는 공통 모듈에 정의해서 사용하는 것을 권고
/////////////////////////////////////////////////////////////////////////////
/**
* 포틀릿 프레임 화면을 통한 일반/포틀릿 업무 화면을 비동기 방식 로드
*
* @param tab_frame 프레임 화면 로드 대상 탭 컴포넌트
* @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 frame_tab_index 추가된 탭 인덱스, 오류 발생시 -1
*/
function LoadTabFramePortletAsync(tab_frame,
frame_screeen_url, frame_screen_extra_data,
business_screen_url, business_screen_extra_data)
{
var log_prefix, obj_extra_data, frame_tab_index;
log_prefix = "mainscreen:LoadTabFramePortletAsync> ";
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
};
// 비동기 방식 로드
factory.consoleprint(log_prefix + "before addportlettab framescreen");
frame_tab_index = tab_frame.addportlettab("ASYNC_PORTLET", 1, 160,
frame_screeen_url, "", true, obj_extra_data);
factory.consoleprint(log_prefix + "after addportlettab framescreen");
factory.consoleprint(log_prefix + "frame_tab_index = " + frame_tab_index);
return frame_tab_index;
}
/**
* 포틀릿 프레임 화면을 통한 일반/포틀릿 업무 화면을 동기 방식 로드
*
* @param tab_frame 프레임 화면 로드 대상 탭 컴포넌트
* @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 frame_tab_index 추가된 탭 인덱스, 오류 발생시 -1
*/
async function LoadTabFramePortletSync(tab_frame,
frame_screeen_url, frame_screen_extra_data,
business_screen_url, business_screen_extra_data)
{
var log_prefix, obj_extra_data, frame_tab_index, business_tab_index,
frame_screen, frame_screen_member;
log_prefix = "mainscreen:LoadTabFramePortletSync> ";
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
};
// Frame 화면을 포틀릿 형식으로 동기 방식 로드
factory.consoleprint(log_prefix + "before addportlettabsync framescreen");
frame_tab_index = await tab_frame.addportlettabsync("SYNC_PORTLET", 1, 160,
frame_screeen_url, "", true, obj_extra_data);
factory.consoleprint(log_prefix + "after addportlettabsync framescreen");
factory.consoleprint(log_prefix + "frame_tab_index = " + frame_tab_index);
if (frame_tab_index < 0) { return frame_tab_index; }
// 로드된 프레임 화면 인스턴스를 구함
frame_screen = tab_frame.getchildscreeninstance(frame_tab_index);
if (!factory.isobject(frame_screen)) { return frame_tab_index; }
frame_screen_member = frame_screen.getmembers();
if (!factory.isobject(frame_screen_member)) { return frame_tab_index; }
// 프레임 화면의 LoadBusinessScreen 함수도 async 함수로 정의되어 있어야 한다.
factory.consoleprint(log_prefix + "before SyncLoadBusinessScreen");
await frame_screen_member.SyncLoadBusinessScreen(obj_extra_data);
factory.consoleprint(log_prefix + "after SyncLoadBusinessScreen");
return frame_tab_index;
}
/**
* 일반 프레임 화면을 통한 일반 업무 화면을 비동기 방식 로드
*
* @param tab_frame 프레임 화면 로드 대상 탭 컴포넌트
* @param frame_screen_url 프레임 화면 URL
* @param frame_screen_extra_data 프레임 화면 Extra Data
* @param business_screen_url 업무 화면 URL
* @param business_screen_extra_data 업무 화면 Extra Data
*
* @returns frame_tab_index 추가된 탭 인덱스, 오류 발생시 -1
*/
function LoadTabFrameScreenAsync(tab_frame,
frame_screen_url, frame_screen_extra_data,
business_screen_url, business_screen_extra_data)
{
var log_prefix, obj_extra_data, frame_tab_index;
log_prefix = "mainscreen:LoadTabFrameScreenAsync> ";
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
};
// 컨테이너 화면을 비동기 방식 로드
factory.consoleprint(log_prefix + "before addtab");
frame_tab_index = this.tab_link.addtab("ASYNC_CONTAINER", 1, 160,
frame_screen_url, true, obj_extra_data);
factory.consoleprint(log_prefix + "after addtab");
factory.consoleprint(log_prefix + "frame_tab_index = " + frame_tab_index);
return frame_tab_index;
}
/**
* 포틀릿 프레임 화면을 통한 일반/포틀릿 업무 화면을 동기 방식 로드
*
* @param tab_frame 프레임 화면 로드 대상 탭 컴포넌트
* @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 frame_tab_index 추가된 탭 인덱스, 오류 발생시 -1
*/
async function LoadTabFrameScreenSync(tab_frame,
frame_screeen_url, frame_screen_extra_data,
business_screen_url, business_screen_extra_data)
{
var log_prefix, obj_extra_data, frame_tab_index, business_tab_index,
frame_screen, frame_screen_member;
log_prefix = "mainscreen:LoadTabFrameScreenSync> ";
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
};
// Frame 화면을 포틀릿 형식으로 동기 방식 로드
factory.consoleprint(log_prefix + "before addtabsync framescreen");
frame_tab_index = await this.tab_link.addtabsync("SYNC_CONAINER", 1, 160,
frame_screeen_url, true, obj_extra_data);
factory.consoleprint(log_prefix + "after addtabsync framescreen");
factory.consoleprint(log_prefix + "frame_tab_index = " + frame_tab_index);
if (frame_tab_index < 0) { return frame_tab_index; }
// 프레임 화면 인스턴스를 구함
frame_screen = tab_frame.getchildscreeninstance(frame_tab_index);
if (!factory.isobject(frame_screen)) { return frame_tab_index; }
// 프레임 화면 멤벌를 구함
frame_screen_member = frame_screen.getmembers();
if (!factory.isobject(frame_screen_member)) { return frame_tab_index; }
// 프레임 화면의 LoadBusinessScreen 함수를 await 방식으로 호출
factory.consoleprint(log_prefix + "before SyncLoadBusinessScreen");
await frame_screen_member.SyncLoadBusinessScreen(obj_extra_data);
factory.consoleprint(log_prefix + "after SyncLoadBusinessScreen");
return frame_tab_index;
}
/**
* 컨테이너 프레임 화면을 통한 일반 업무 화면을 비동기 방식 로드
*
* @param tab_frame 프레임 화면 로드 대상 탭 컴포넌트
* @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 frame_tab_index 추가된 탭 인덱스, 오류 발생시 -1
*/
function LoadTabFrameContainerAsync(tab_frame,
container_screeen_url, container_screen_extra_data,
business_screen_url, business_screen_extra_data)
{
var log_prefix, obj_extra_data, frame_tab_index;
log_prefix = "mainscreen:LoadTabFrameContainerAsync> ";
obj_extra_data = {
is_async_load: true,
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 addtab");
frame_tab_index = this.tab_link.addtab("ASYNC_CONTAINER", 1, 160,
container_screeen_url, true, obj_extra_data);
factory.consoleprint(log_prefix + "after addtab");
factory.consoleprint(log_prefix + "frame_tab_index = " + frame_tab_index);
return frame_tab_index;
}
/**
* 컨테이너 프레임 화면을 통한 일반 업무 화면을 동기 방식 로드
*
* @param tab_frame 프레임 화면 로드 대상 탭 컴포넌트
* @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 frame_tab_index 추가된 탭 인덱스, 오류 발생시 -1
*/
async function LoadTabFrameContainerSync(tab_frame,
container_screeen_url, container_screen_extra_data,
business_screen_url, business_screen_extra_data)
{
var log_prefix, obj_extra_data, frame_tab_index, business_screen;
log_prefix = "mainscreen:LoadTabFrameContainerSync> ";
obj_extra_data = {
is_async_load: true,
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 addtabsync");
frame_tab_index = await this.tab_link.addtabsync("SYNC_CONAINER", 1, 160,
container_screeen_url, true, obj_extra_data);
factory.consoleprint(log_prefix + "after addtabsync");
factory.consoleprint(log_prefix + "frame_tab_index = " + frame_tab_index);
// addtabsync 함수가 동기식으로 화면으로 로드하기 때문에,
// 함수가 리턴되는 시점에는, 화면의 오브젝트 인스턴스를 구할 수 있다.
business_screen = this.tab_link.getchildscreeninstance(frame_tab_index);
if (factory.isobject(business_screen)) {
factory.consoleprint(log_prefix + "screen = " + business_screen.getscreenurl());
}
return frame_tab_index;
}