UDC 사용 가이드

UDC로 개발된 화면을 사용하는 기본적인 방법에 대한 예시 화면이다.

UDC란 User-Defined Component의 약자이며, 개발자가 구현한 화면을 다른 화면에서 하나의 컴포넌트처럼 사용하는 기능이다.

관련 속성으로udc_mode가 있다.

관련 API로 udcprop, udcevent가 있다.

템플릿 위치: /HTML5/SCREEN/UDC/udc_usage_basic

템플릿 파일

• udc_usage_basic.xml
• udc_usage_basic.js
• 새창으로 실행
• udc_comp_basic.xml
• udc_comp_basic.js

// 화면 로드 이벤트
function screen_on_load()
{
}

// "UDC API 호출" 버튼 이벤트
function btn_calludcapi_on_click(objInst)
{
	// 링크된 UDC 화면의 udc_api에 정의된 API 호출
	this.udc_comp_basic.innerctrl.api_a("api_param_a", "api_param_b");

	// 탭 0번째 아이템에 링크된 화면 오브젝트 API 호출 가능
	// this.udc_comp_basic.screen[0].

	// 탭 0번째 아이템에 링크된 화면 멤버 오브젝트 API 호출 가능
	// this.udc_comp_basic.member[0].
}

// 링크된 UDC 화면의 udc_event에 정의된 "event_a" 이벤트 처리 함수
function udc_comp_basic_event_a(objInst, param_a, param_b)
{
	console.log("event_a> objInst = " + objInst.getname());
	console.log("event_a> param_a = " + param_a);
	console.log("event_a> param_a = " + param_b);

	return 1;
}

// 링크된 UDC 화면의 udc_event에 정의된 "event_b" 이벤트 처리 함수
function udc_comp_basic_event_b(objInst, param_a, param_b)
{
	console.log("_event_b> objInst = " + objInst.getname());
	console.log("_event_b> param_a = " + param_a);
	console.log("_event_b> param_a = " + param_b);
}

// 화면 로드 이벤트
function screen_on_load()
{
	// UDC 사용 화면에서 설정한 UDC 속성을 구함
	console.log("prop_str = " + screen.udcprop("prop_str"));
	console.log("prop_int = " + screen.udcprop("prop_int"));
	console.log("prop_cbo = " + screen.udcprop("prop_cbo"));
	console.log("prop_bool = " + screen.udcprop("prop_bool"));
}

// UDC 제공 API
function api_a(param_a, param_b)
{
	console.log("api_a> param_a = " + param_a);
	console.log("api_a> param_b = " + param_b);
	this.fld_data.value = param_a;
}

// "UDC 이벤트 발생" 버튼 이벤트
function btn_fireevent_on_click(objInst)
{
	// UDC 화면 udc_event 속성 값중에, UDC 사용 화면에서 정의한 UDC 이벤트 처리 함수 호출
	screen.udcevent(true, "event_a", this.fld_data.value, this.fld_data.getname());
}