DataObject 오브젝트 소개

오브젝트 형태의 데이터를 직접 작성하거나 서비스를 호출해서 관리할 수 있습니다. Dataset 오브젝트와 바인딩해서 사용하는 경우 기존 Dataset 오브젝트를 사용하는 컴포넌트와 같이 사용할 수 있습니다.

간단한 데이터 표시하기

직원 목록을 JSON으로 받아와서 Grid 컴포넌트에 표시합니다.

예제

특정 서비스에서 제공하는 JSON 데이터를 가져와 Dataset 오브젝트에 바인딩하고 Grid 컴포넌트에 표시합니다.

sample_dataobject_01.xfdl

예제에서 사용한 핵심 기능

binddataobject

Dataset 오브젝트와 바인딩할 DataObject 오브젝트를 선택합니다. 실제 적용되는 값은 dataobjectpath 설정에 따라 달라질 수 있습니다.

dataobjectpath

DataObject 오브젝트 데이터 중에서 실제 반영할 데이터를 필터링하기 위해 설정하는 값입니다. 배열 또는 오브젝트를 선택하면 해당하는 값의 목록을 반환합니다.

예제 구현 방법

데이터를 가져올 url 설정하기

DataObject 오브젝트는 Invisible Object로 추가됩니다.

url: http://demo.nexacro.com/developer_guide/17/FileSample/data_sample_dataobject_01.json

Dataset 오브젝트와 DataObject 오브젝트 연결하기

URL 값은 이전 단계에서 DataObject 오브젝트의 url 속성값으로 설정한 값이 보여집니다. 하단 Json Contents 영역에 서버에서 가져온 JSON 데이터를 보여줍니다.

Grid 컴포넌트에 데이터 표시하기

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.DataObject00.load();
};

다국어로 Button 라벨 표시하기

DataObject 오브젝트의 데이터는 외부 서비스에서 받아올 수도 있지만, 직접 편집할 수도 있습니다. 이번 예제에서는 데이터를 직접 추가하고 추가한 데이터를 2개의 Dataset 오브젝트에 바인딩해서 다른 용도로 사용합니다.

예제

Combo 컴포넌트에서 언어를 선택하면 선택한 언어로 Button 컴포넌트 라벨을 표시합니다.

sample_dataobject_02.xfdl

예제에서 사용한 핵심 기능

data

오브젝트 또는 문자열 값을 받아서 데이터 오브젝트로 처리합니다. 넥사크로 스튜디오에서는 데이터를 편집할 수 있는 도구를 제공합니다.

dataobjectpath

DataObject 오브젝트 데이터 중에서 실제 반영할 데이터를 필터링하기 위해 설정하는 값입니다. 스크립트 내에서 값을 변경하면 즉시 반영되어 처리합니다.

예제 구현 방법

JSON 데이터 작성하기

예제에서는 아래와 같은 코드를 입력합니다.

{
	"code" : [
		{
			"locale" : "ko",
			"label" : "Korean"
		},
		{
			"locale" : "ja",
			"label" : "Japanese"
		},
		{
			"locale" : "en",
			"label" : "English"
		}
	],
	"data" : {
		"ko" : {
			"btn_submit" : "전송",
			"btn_save" : "저장",
			"btn_cancel" : "취소"
		},
		"ja" : {
			"btn_submit" : "送信",
			"btn_save" : "保存",
			"btn_cancel" : "キャンセル"
		},
		"en" : {
			"btn_submit" : "Submit",
			"btn_save" : "Save",
			"btn_cancel" : "Cancel"
		}
	}
}

Contents 탭에서는 아래와 같이 표시됩니다.

Combo 컴포넌트에 표시할 기준 데이터 가져오기

데이터 중에서 code 배열 아래의 오브젝트 값을 Combo 컴포넌트의 innerdataset으로 사용할 겁니다.

codecolumn 속성값은 "locale", datacolumn 속성값은 "label"로 설정합니다.

Button 컴포넌트에 연결되는 라벨 데이터 가져오기

this.Combo00_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	this.Dataset01.set_dataobjectpath("$.data."+e.postvalue);
};

메소드 파라미터 지정해서 request 메소드 실행하기

load 메소드는 GET 메소드 파라미터가 설정한 상태로 동작합니다. 하지만 호출하려는 API에 따라서 POST나 PUT 등의 메소드를 설정해야 하는 경우가 있습니다. 또한 인증을 해야 하거나 데이터를 전송하는 경우 postdata를 설정해야 합니다.

예제

값을 입력하고 [Create] 버튼 클릭 시 입력한 값을 설정한 메소드 파라미터로 호출합니다. 정상적으로 실행된 경우 Grid 컴포넌트에 데이터를 표시하고 그렇지 않은 경우에는 TextArea 컴포넌트에 에러 메시지를 표시합니다.

예제에서 사용한 핵심 기능

request

메소드 파라미터를 지정할 수 있습니다. header, postdata, async 정보를 저장한 JSON 오브젝트를 추가로 설정할 수 있습니다. 예제에서는 postdata만 전송합니다.

예제 구현 방법

화면 구성하기

request 메소드 준비하기

[Create] 버튼 클릭 시에는 입력한 값과 메소드 파라미터를 설정해서 처리합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var strPostdata = JSON.stringify({"name":this.Edit_name.value,"salary":this.Edit_salary.value,"age":this.Edit_age.value});
	this.DataObject00.request("CREATE", this.Edit_method.value, "http://dummy.restapiexample.com/api/v1/create", {"postdata":strPostdata});
};

[Search] 버튼 클릭시에는 "GET" 메소드 파라미터값을 설정합니다.

this.Button00_00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.DataObject00.request("SEARCH", "GET", "http://dummy.restapiexample.com/api/v1/employees");	
};

이벤트 처리하기

request 메소드 실행 시에는 onsuccess 이벤트가 먼저 발생하고 그 다음에 data 속성값에 데이터가 설정되고 onload 이벤트가 발생합니다.

onsuccess 이벤트 함수 내에서는 실행된 serviceid 값을 확인하고 변수에 저장합니다.

var serviceid;
this.DataObject00_onsuccess = function(obj:nexacro.DataObject,e:nexacro.DataObjectEventInfo)
{
	var strStatus = JSON.parse(e.response).status;
	serviceid = e.serviceid;
	trace(e.serviceid + ":" + strStatus);
};

onload 이벤트 함수 내에서는 바인딩할 Dataset 오브젝트의 컬럼 정보를 생성하고 binddataobject, dataobjectpath 속성을 설정합니다. Grid 컴포넌트의 binddataset 속성값을 설정하고 createFormat 메소드를 실행합니다.

this.DataObject00_onload = function(obj:nexacro.DataObject,e:nexacro.DataObjectLoadEventInfo)
{
	if(e.reason == 2)
	{
		this.Dataset00.clear();
		var objData;
		var strDataobjectpath;
		if(serviceid == "CREATE")
		{
			objData = obj.data.data;
			strDataobjectpath = "$.data";
		} 
		else if(serviceid == "SEARCH")
		{
			objData = obj.data.data[0];
			strDataobjectpath = "$.data[*]";
		}
		for(var key in objData)
		{
			var objColinfo = new ColumnInfo();
			objColinfo.set_type("String");
			objColinfo.set_datapath("@."+key);
			this.Dataset00.addColumnInfo(key, objColinfo);
		}
		this.Dataset00.set_binddataobject(obj.id);
		this.Dataset00.set_dataobjectpath(strDataobjectpath);
		this.Grid00.set_binddataset(this.Dataset00.name);
		this.Grid00.createFormat();
		this.TextArea00.set_value("");
	}
};

오류가 발생한 경우에는 onerror 이벤트 함수에서 에러 메시지를 TextArea 컴포넌트에 표시해줍니다.

this.DataObject00_onerror = function(obj:nexacro.DataObject,e:nexacro.DataObjectErrorEventInfo)
{
	trace(e.statuscode +":"+e.errormsg);
	this.TextArea00.set_value(e.statuscode +":"+e.errormsg);
};

실행 결과 확인하기

QuickView(Ctrl + F6)로 실행한 후 실행 결과를 확인합니다.

[Search] 버튼 클릭 시에는 전체 데이터를 조회합니다. 간단한 데이터 표시하기 예제와 같은 결과지만, 이번 예제에서는 request 메소드를 사용했고, Dataset 오브젝트와 Grid 컴포넌트 설정을 동적으로 처리했습니다.

[Create] 버튼 클릭 시에는 입력한 값과 메소드 파라미터를 사용합니다. 데이터를 요청하면 생성된 id 값을 포함한 결과값을 반환합니다.

[Create] 버튼 클릭 시 잘못된 메소드 파라미터를 입력하면 에러 처리됩니다. 요청하는 서비스는 Create 요청 시에는 "POST" 메소드 파라미터만 허용하기 때문에 오류로 처리됩니다.