−목차

UDC 사용 가이드

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

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

관련 속성으로udc_mode가 있다.

관련 API로 udcprop, udcevent가 있다.

예시

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

템플릿 파일

화면 스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 화면 로드 이벤트
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 화면 스크립트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 화면 로드 이벤트
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());
}