화면 가이드

UDC로 개발된 화면과 UDC를 사용하는 화면간에 데이터셋 정보를 이용한 연계 방법에 대한 예시 화면이다.

데이터셋을 이용한 UDC 연계 개발 순서는 아래와 같다.

단계1. UDC 화면 - UDC 화면에서, 사용할 데이터 셋 링크 유형을 화면 udc_linkdata_type 속성을 통해 설정
단계2. UDC 사용 화면 - 데이터셋을 정의하고, UDC를 생성하고, UDC의 udc_linkdata 속성을 설정
단계3. UDC 화면 - 화면 on_load이벤트에서 screen.udclinkxdataset/udclinkxdatasetcolumnid 호출하여 UDC 사용 화면에서 지정한 정보를 구함
단계4. UDC 화면- 단계3에서 구한 데이터셋 오브젝트의 addlinkobject API를 호출하여 UDC 화면내 컴포넌트를 UDC 사용 화면 데이터셋에 링크

관련 속성으로 udc_linkdata, udc_linkdata_type가 있다.

관련 API로 udclinkxdataset, udclinkxdatasetid, udclinkxdatasetcolumnid, addlinkobject가 있다.

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

템플릿 파일

// 화면 로드 이벤트
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()
{
	var objXDataSet;

	// UDC 화면에 링크된 데이터셋 ID와 데이터셋 컬럼 ID 로딩
	factory.consoleprint("udclinkxdatasetid = " + screen.udclinkxdatasetid());
	factory.consoleprint("udclinkxdatasetcolumnid = " + screen.udclinkxdatasetcolumnid());

	// UDC 화면에 링크된 데이터셋을 구함
	objXDataSet = screen.udclinkxdataset();
	if (objXDataSet) {
		// UDC 화면에 링크된 데이터셋에 UDC 화면내 컴포넌트를 추가
		objXDataSet.addlinkobject(this.fld_data, screen.udclinkxdatasetcolumnid());
	}
}

// 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());
}

function fld_data_on_change(objInst, event_type)
{
	// event_type
	// 3 : XDataSet에 의한 데이터 변경 이벤트 발생
	factory.consoleprint("event_type = " + event_type);
}

UDC 데이터셋 가이드

예시

화면 스크립트

UDC 화면 스크립트