====== UDC 사용 가이드 ======
UDC로 개발된 화면을 사용하는 기본적인 방법에 대한 예시 화면이다.
UDC란 User-Defined Component의 약자이며, 개발자가 구현한 화면을 다른 화면에서 하나의 컴포넌트처럼 사용하는 기능이다.
관련 속성으로udc_mode가 있다.
관련 API로 udcprop, udcevent가 있다.
===== 예시 =====
템플릿 위치: /HTML5/SCREEN/UDC/udc_usage_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/SCREEN/UDC/udc_usage_basic.xml|udc_usage_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/SCREEN/UDC/udc_usage_basic.js|udc_usage_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/SCREEN/UDC/udc_usage_basic|새창으로 실행]]
* [[xf5projecthome>template/screen/HTML5/SCREEN/UDC/udc_comp_basic.xml|udc_comp_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/SCREEN/UDC/udc_comp_basic.js|udc_comp_basic.js]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
// 화면 로드 이벤트
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);
}
==== UDC 화면 스크립트 ====
// 화면 로드 이벤트
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());
}