Dataset 소개

Dataset은 데이터베이스 자원을 효율적으로 활용하고자 도입된 개념입니다. 한정적인 데이터베이스 자원에 다수 사용자의 지속적인 연결로 인해 발생하는 오버헤드는 전체 응용 프로그램의 성능을 저하하는 주된 요인이었습니다. 이를 해결하고자 데이터베이스에 대한 지속적 연결없이 데이터 작업이 가능한 비연결지향 방식의 Dataset을 도입하게 되었습니다.

Dataset은 데이터를 다루는 기본 단위로 넥사크로 내부적으로 데이터를 관리하거나 서버와 통신할 때 주고받는 데이터 형식으로 사용합니다. 데이터를 추가, 수정, 삭제하거나 연산하는 메소드를 제공하며 다른 Dataset과 병합, 복사하는 등의 기능을 제공합니다.

Dataset은 비연결형 방식으로 데이터베이스에 대한 부하를 줄여주고 시스템 가용성을 높여 더 많은 응용 프로그램 서비스를 제공할 수 있게 해줍니다. 또한, 코드량을 줄여주고 데이터 유지 관리를 편하게 해준다는 장점이 있습니다. 그러나 원본 데이터를 로컬의 Dataset으로 복사하여 사용하므로 대량의 데이터 작업에서는 클라이언트측 메모리 사용률이 높아져 응용 프로그램에서의 적절한 데이터 관리가 필요합니다.

일반적으로 Dataset은 독자적으로 사용하지 않고 데이터를 시각적으로 표현하는 컴포넌트에 바인딩하는 형태로 사용합니다. Grid, Combo, ListBox 등의 컴포넌트는 화면에 보여주기 위한 형태만 가지고 있을 뿐 실제로 의미있는 데이터는 Dataset이 갖고 있습니다.

데이터 바인딩(Data Binding)

데이터 바인딩은 데이터 정보를 담고 있는 Dataset 오브젝트와 시각적으로 표현되는 컴포넌트 간에 데이터와 정보를 연결하고 상호 동기화하는 기법입니다. 바인딩 기법은 그 사용 방법에 따라 다음의 네 가지로 정도로 나눠볼 수 있습니다.

Full Binding

Grid는 그 형태가 Dataset과 논리적으로 같은 컴포넌트입니다. 따라서 Grid는 Dataset과 완전히 맵핑되는데 이런 식으로 Dataset과 컴포넌트가 1대1로 완전히 맵핑될 수 있는 바인딩을 Full binding이라고 합니다. 여러 컴포넌트 중 Grid만이 Full binding이 가능합니다.

바인딩_1_full_binding

Master & Detail Binding

Grid와 단일 데이터를 표시하는 컴포넌트 사이의 binding입니다. 아래 그림처럼 Grid의 레코드를 선택했을 때 Edit 컴포넌트에 선택된 레코드의 특정 Column을 입/출력하는 경우가 이에 해당합니다.

바인딩_2_master-detail_binding

Lookup Binding

단일 데이터를 입/출력하는 컴포넌트가 내부에 또 다른 Dataset을 가지는 형태의 바인딩입니다. 아래 그림처럼 Grid의 레코드를 선택했을 때 Combo 컴포넌트에 선택된 레코드의 특정 Column을 연결하고 Combo에 바인딩되어 있는 Dataset에서 그에 해당하는 값을 찾아 Combo에 출력하는 경우가 이에 해당합니다.

바인딩_3_lookup_binding

Presentation Binding

컴포넌트에 출력하는 데이터에 스타일을 주는 용도의 바인딩 기법입니다. 아래 그림의 왼쪽과 같이 Dataset에 컴포넌트의 스타일 속성값을 입력해 놓고 이를 컴포넌트의 스타일 속성에 바인딩하는 경우가 이에 해당합니다.

바인딩_4_presentation_binding_2

바인딩_4_presentation_binding

조건에 따라 데이터 평균, 합계 계산하기

getSum 메소드는 지정된 만큼의 합계를 구하는 것이라면 getCaseSum 메소드는 조건을 추가할 수 있습니다. 특정 조건에 해당하는 데이터만 계산하는 것입니다.

예제

Edit 컴포넌트에 숫자를 입력하고 Button 컴포넌트를 클릭하면 해당 숫자보다 큰 값의 합계, 평균, 개수를 표시합니다.

sample_dataset_01.xfdl

예제에서 사용한 핵심 기능

getCaseSum: getSum 메소드와 지정하는 파라미터는 비슷합니다. getCase~로 시작하는 메소드는 첫번째 파라미터로 조건표현식을 추가할 수 있는 점이 다른 점입니다.

예제 구현 방법

화면 구성하기

Grid 컴포넌트를 배치합니다. Dataset 오브젝트를 생성하고 아래와 같이 데이터를 설정합니다. 생성된 Dataset 오브젝트를 Grid 컴포넌트에 바인딩합니다. Grid 컴포넌트는 데이터를 표시하는 도구로만 사용합니다. 데이터의 합계나 평균을 구하기 위해 type 속성값은 "INT"와 같은 숫자 형식으로 지정합니다.

조건식에 들어갈 값을 입력할 Edit 컴포넌트와 Button 컴포넌트, 결과를 표시할 TextArea 컴포넌트를 배치합니다.

onclick 이벤트 함수 작성하기

Button 컴포넌트 클릭 시 연산 결과값을 TextArea 컴포넌트에 표시합니다. getCaseAvg 메소드는 소수점 처리를 위해 nexacro.round 메소드를 추가로 실행합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var strCmpExpr = "Column0 > "+this.Edit00.value;
	var casesum = this.Dataset00.getCaseSum(strCmpExpr, "Column0");
	var caseavg = nexacro.round(this.Dataset00.getCaseAvg(strCmpExpr, "Column0"), 1);
	var casecount = this.Dataset00.getCaseCount(strCmpExpr, "Column0");
	this.TextArea00.set_value("getCaseSum: "+casesum+"\n"
		+"getCaseAvg: "+caseavg+"\n"
		+"getCaseCount: "+casecount);
};

칼럼 type 속성값이 "String"인 경우에는 연산을 처리하기 전에 숫자 형태로 바꾸어주어야 합니다. 위 예제에서 Column0 칼럼의 type 속성값이 "String"인 경우에는 getCaseSum 구문은 아래와 같이 변경할 수 있습니다.

var casesum = this.Dataset00.getCaseSum(strCmpExpr, "parseInt(Column0)");

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 데이터 범위 내 숫자를 입력하고 버튼 클릭 시 결과값을 확인합니다.

칼럼 정보 확인하고 type 속성값 변경하기

칼럼 정보를 확인하고 원하는 칼럼의 속성값을 변경할 수 있습니다. 예제에서는 type 속성값을 변경하는 방법을 보여줍니다.

예제

[getColumnInfo] 버튼을 클릭하면 Dataset 오브젝트의 칼럼 정보를 TextArea 컴포넌트에 표시합니다. 변경하고자 하는 칼럼 인덱스를 선택하고 type 속성값을 선택한 후 [set_type] 버튼을 클릭하면 해당 칼럼 type 속성값을 변경합니다. [getColumnInfo] 버튼을 클릭하면 변경된 정보를 확인할 수 있습니다.

sample_dataset_03.xfdl

예제에서 사용한 핵심 기능

getColumnInfo: ColumnInfo 오브젝트를 반환합니다. name, prop, size, sumtext, type 속성값을 확인할 수 있습니다. name 속성값은 readonly이므로 변경할 수 없습니다.

예제 구현 방법

화면 구성하기

Dataset 오브젝트를 생성하고 아래와 같이 데이터를 설정합니다. 칼럼 속성 정보만 확인하는 용도이므로 데이터를 추가하지는 않습니다. Button, Spin, Combo, TextArea 컴포넌트를 적절히 배치합니다.

Combo 컴포넌트의 innerdataset 속성값으로는 type 속성값에 사용할 수 있는 목록을 입력합니다.

onload 이벤트 함수 작성하기

Spin 컴포넌트에서는 변경할 칼럼 인덱스를 지정합니다. max 속성값을 onload 이벤트 함수에서 지정합니다.

this.sample_dataset_03_onload = function(obj:nexacro.Form,e:nexacro.LoadEventInfo)
{
	this.Spin00.set_max(this.Dataset00.getColCount()-1);
};

onclick 이벤트 함수 작성하기

[getColumnInfo] 버튼 클릭 시에는 Dataset 오브젝트의 칼럼 수만큼 반복하면서 칼럼 정보를 확인합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var strText = new String();
	for (var i = 0; i < this.Dataset00.getColCount(); i++) 
	{
		var objColInfo = this.Dataset00.getColumnInfo(i);
		strText += "ID = " + objColInfo.name;
		strText += " SIZE = " + objColInfo.size;
		strText += " type = " + objColInfo.type;
		strText += "\n";
	}
	this.TextArea00.set_value(strText);
};

[set_type] 버튼 클릭 시에는 지정된 칼럼 인덱스의 type 속성값을 변경합니다.

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objColInfo = this.Dataset00.getColumnInfo(this.Spin00.value);
	objColInfo.set_type(this.Combo00.value);
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 칼럼 인덱스를 지정하고 type 속성 변경 후 결과값을 확인합니다.

삭제된 Row 정보 확인하기

Dataset 오브젝트에서 삭제된 정보는 바인딩된 컴포넌트(Grid 컴포넌트 또는 다른 컴포넌트)에서 확인할 수 없습니다. 하지만 Dataset 오브젝트에서는 삭제된 정보를 관리하고 있으며 특정 메소드를 통해 확인할 수 있습니다.

예제

[delete] 버튼을 클릭하면 Row 정보를 삭제합니다. [add] 버튼을 클릭하면 Row를 추가할 수 있습니다. 각 셀을 선택해서 내용을 수정할 수 있습니다. 이렇게 추가, 삭제, 수정된 정보는 [execute] 버튼을 클릭하면 아래에 있는 Grid 컴포넌트에 표시합니다.

sample_dataset_04.xfdl

예제에서 사용한 핵심 기능

getRowType: 지정된 Row에 해당하는 타입을 반환합니다. 삭제된 Row는 확인할 수 없습니다. 예제에서는 추가(2), 변경(4)에 해당하는 정보를 확인하고 처리합니다.

getOrgColumn: 지정된 Row, Column에 해당하는 초기값을 반환합니다. 값이 변경된 경우 원래의 값을 확인할 수 있습니다.

getDeletedRowCount: 삭제된 Row 갯수를 확인할 수 있습니다. 삭제된 Row 정보는 배열 형태로 처리됩니다. getDeletedRowset 메소드를 사용해서 배열 정보를 확인할 수 있습니다. getDeletedRowCount 메소드의 실행결과는 getDeletedRowset 메소드를 실행해서 얻은 배열의 length 속성값과 같습니다.

getDeletedColumn: 삭제된 Row 정보에서 지정된 칼럼과 Row(인덱스)에 해당하는 값을 반환합니다.

예제 구현 방법

화면 구성하기

Grid 컴포넌트와 Button 컴포넌트를 예제와 같이 배치합니다. 그리고 2개의 Dataset 오브젝트를 생성합니다. 하나(Dataset00)는 아래와 같이 데이터를 지정하고 첫번째 Grid 컴포넌트에 바인딩합니다. 그리고 다른 Dataset(Dataset01)은 데이터 지정없이 두번째 Grid 컴포넌트에 바인딩합니다.

Grid Contents Editor 실행하기

데이터를 수정할 수 있도록 첫번째 Grid 컴포넌트의 edittype 속성값을 "normal"로 수정합니다.

onclick 이벤트 함수 작성하기

각 버튼 클릭 시 처리할 스크립트를 onclick 이벤트 함수 내에 작성합니다. [execute] 버튼 클릭 시 칼럼 정보를 추가하고 삭제되거나 수정, 추가된 데이터를 확인하기 위해 fn_orgDataset 함수를 실행합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.deleteRow(this.Dataset00.rowposition)
};

this.Button02_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
		this.Dataset00.addRow();
};

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset01.addColumn("COL_TYPE", "STRING");
	for(var i=0;i<this.Dataset00.colcount;i++)
	{
		this.Dataset01.addColumn(this.Dataset00.getColID(i), "STRING");
	}
	this.fn_orgDataset();
};

this.fn_orgDataset = function()
{
	var sOrgCol = "";
	var sOrgVal = "";
	this.Dataset01.clearData(); 
	
	for (var i = 0; i < this.Dataset00.rowcount; i++) 
	{
		var nRowType = this.Dataset00.getRowType(i);
		if (nRowType == Dataset.ROWTYPE_INSERT || nRowType == Dataset.ROWTYPE_UPDATE)
		{
			this.Dataset01.addRow();
			this.Dataset01.setColumn(this.Dataset01.rowposition, "COL_TYPE", nRowType);
			for (var j = 0; j < this.Dataset00.colcount; j++) 
			{
				sOrgCol = this.Dataset00.getColID(j);
				sOrgVal = this.Dataset00.getOrgColumn(i, sOrgCol);

				this.Dataset01.setColumn(this.Dataset01.rowposition, sOrgCol, sOrgVal);
			}
		}
	}
	
	trace(this.Dataset00.getDeletedRowset().length);
	for (var i = 0; i < this.Dataset00.getDeletedRowCount(); i++) 
	{
		this.Dataset01.addRow();
		this.Dataset01.setColumn(this.Dataset01.rowposition, "COL_TYPE", Dataset.ROWTYPE_DELETE);
		for (var j = 0; j < this.Dataset00.colcount; j++) 
		{
			sOrgCol = this.Dataset00.getColID(j);
			sOrgVal = this.Dataset00.getDeletedColumn(i, sOrgCol);
			this.Dataset01.setColumn(this.Dataset01.rowposition, sOrgCol, sOrgVal);
		}
	}
	
	this.Grid01.createFormat();
};

Row 타입을 표시하는 상수는 아래의 값으로 처리됩니다.

Dataset.ROWTYPE_INSERT: 2

Dataset.ROWTYPE_UPDATE: 4

Dataset.ROWTYPE_DELETE: 8

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 데이터를 삭제, 변경, 추가한 후 [execute] 버튼을 클릭해 Row 정보를 확인합니다.

스크립트로 Dataset 생성하기

스크립트로 Dataset 오브젝트를 생성하고 Grid 컴포넌트에 바인딩할 수 있습니다. AppVariables로 Dataset 오브젝트를 추가하고 활용하는 방법도 같이 살펴봅니다.

예제

버튼을 클릭하면 AppVariables의 변수로 Dataset 오브젝트를 생성하고 Form 오브젝트의 자식으로 Dataset 오브젝트를 생성합니다. 생성된 Dataset 오브젝트는 Grid 컴포넌트에 바인딩되어서 표시됩니다.

sample_dataset_05.xfdl

예제에서 사용한 핵심 기능

addVariable: AppVariables 영역에 변수를 추가합니다. Dataset 오브젝트를 생성하고 생성된 오브젝트를 변수로 지정할 수 있습니다. 설정된 변수는 nexacro.getApplication().[변수명] 으로 접근할 수 있습니다.

예제 구현 방법

화면 구성하기

Grid 컴포넌트와 Button 컴포넌트, TextArea 컴포넌트를 예제와 같이 배치합니다. Dataset 오브젝트는 스크립트에서 생성하고 처리하기 때문에 화면 구성 시 작업하지 않습니다.

onclick 이벤트 함수 작성하기

AppVariables에 추가되는 Dataset 오브젝트와 Form 오브젝트의 자식으로 추가되는 Dataset 오브젝트의 차이는 생성된 Dataset 오브젝트를 처리해주는 메소드(addVariable, addChild)만 다르고 나머지 과정은 같습니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var objApp = nexacro.getApplication();
	var objGdS = new Dataset;	
	objApp.addVariable("gds_data", objGdS);
	objApp.gds_data.addColumn("COL0","String");
	objApp.gds_data.addColumn("COL1","String");
	objApp.gds_data.addRow();
	objApp.gds_data.setColumn(objApp.gds_data.rowposition,"COL0","global COL0");
	objApp.gds_data.setColumn(objApp.gds_data.rowposition,"COL1","global COL1");
	this.Grid00.set_binddataset("gds_data");
	this.Grid00.createFormat();
	
	var objLdS = new Dataset;
	objLdS.set_name("ds_data");
	this.addChild("ds_data", objLdS);  
	this.ds_data.addColumn("COL0","String");
	this.ds_data.addColumn("COL1","String");
	this.ds_data.addRow();
	this.ds_data.setColumn(this.ds_data.rowposition,"COL0","1");
	this.ds_data.setColumn(this.ds_data.rowposition,"COL1","first");
	this.ds_data.addRow();
	this.ds_data.setColumn(this.ds_data.rowposition,"COL0","2");
	this.ds_data.setColumn(this.ds_data.rowposition,"COL1","second");
	this.Grid01.set_binddataset("ds_data");	
	this.Grid01.createFormat();
	
    this.TextArea00.set_value('global dataset rowcount : ' + objApp.all["gds_data"].rowcount+'\n'
		+'local  dataset rowcount : ' + this.all["ds_data"].rowcount);
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭하고 Dataset이 정상적으로 생성되고 바인딩되는지 확인합니다.

변경된 칼럼정보 원복하기

Dataset 오브젝트의 값을 변경한 경우에는 변경된 상태 정보를 관리합니다. 때문에 필요한 경우 원본 데이터로 원복할 수 있습니다.

예제

Grid 컴포넌트에 바인딩된 Dataset 오브젝트의 값을 변경한 후 버튼을 클릭하면 원래 데이터로 원복합니다.

sample_dataset_06.xfdl

예제에서 사용한 핵심 기능

getColCount: 전체 칼럼 갯수를 반환합니다. 예제에서는 getRowType 메소드로 변경된 데이터가 있는지 확인하고 변경된 데이터가 있는 Row의 모든 칼럼의 getColumn 메소드 반환값과 getOrgColumn 메소드 반환값이 다른 경우 값을 원복합니다.

예제 구현 방법

화면 구성하기

Grid 컴포넌트와 Button 컴포넌트를 예제와 같이 배치합니다. Dataset 오브젝트를 아래와 같이 생성하고 Grid 컴포넌트에 바인딩합니다.

Grid Contents Editor 실행하기

Grid Contents Editor를 실행하고 첫번째 칼럼의 Body 셀을 선택해서 displaytype, edittype 속성값을 "checkboxcontrol", "checkbox"로 수정합니다. 나머지 칼럼의 Body 셀은 edittype 속성값을 "normal"로 수정합니다. 그리고 칼럼 하나를 추가하고 Body 셀의 text 속성값을 아래와 같이 수정합니다.

onclick 이벤트 함수 작성하기

값이 변경된 Row가 있는지 확인하고 변경된 값을 원복합니다. 삭제된 Row를 원복하는 코드는 포함하지 않았습니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var iRowCount = this.Dataset00.getRowCount();
	var iColCount = this.Dataset00.getColCount();
	
	for (var i = 0; i < iRowCount; i++)
	{
        if (this.Dataset00.getRowType(i) != "1")
        {
            for (var j = 0; j < iColCount; j++)
            {   
                if (this.Dataset00.getColumn(i, j) != this.Dataset00.getOrgColumn(i, j))
                {
                    this.Dataset00.setColumn(i, j, this.Dataset00.getOrgColumn(i, j));
                }
            }
        }
	}
}

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭하고 값을 수정한 상태에서 버튼 클릭 시 원래의 값으로 원복되는지 확인합니다.

RowType 변경하기

Dataset 오브젝트의 RowType은 값이 변경되거나 삭제되는 등의 변경이 생겼을때 자동으로 업데이트됩니다. RowType에 따라 원본값도 같이 관리하게 됩니다. 이번 예제에서는 변경된 RowType을 강제적으로 수정해서 변경된 값을 확정하는 방법을 살펴봅니다.

예제

Grid 컴포넌트에 바인딩된 Dataset 오브젝트의 값을 변경한 후 버튼을 클릭하면 RowType 값을 변경하고 변경된 상태를 TextArea 컴포넌트에 표시합니다. 아래 그림에서 원래의 값(1)을 12로 수정한 후 RowType을 ROWTYPE_NORMAL로 변경하면 원래의 값이 12로 변경되는 것을 확인할 수 있습니다.

sample_dataset_07.xfdl

예제에서 사용한 핵심 기능

updatecontrol: Dataset 오브젝트의 데이터가 변경됐을때 RowType을 자동으로 변경할지 설정하는 속성입니다. 기본값은 true로 설정되기 때문에 자동으로 값이 변경됩니다. setRowType 메소드를 사용해 값을 변경하고자 할 경우에는 먼저 updatecontrol 속성값을 false로 변경한 후에 setRowType 메소드를 사용해야 합니다.

예제 구현 방법

화면 구성하기

Grid 컴포넌트와 Button 컴포넌트, TextArea 컴포넌트를 예제와 같이 배치합니다. Dataset 오브젝트를 아래와 같이 생성하고 Grid 컴포넌트에 바인딩합니다.

Grid Contents Editor 실행하기

Grid Contents Editor를 실행하고 첫번째 칼럼의 Body 셀을 선택해서 edittype 속성값을 "normal"로 수정합니다.

onclick 이벤트 함수 작성하기

값이 변경된 Row가 있는지 확인하고 변경된값(getColumn)과 원본값(getOrgColumn)을 출력합니다. 그리고 RowType을 변경한 후 원본값(ROWTYPE_NORMAL_getOrgColumn)을 출력합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var rowcnt = this.Dataset00.getRowCount();
	for(var i=0;i<rowcnt;i++)
	{
		if(this.Dataset00.getRowType(i)==4)
		{
			this.fn_addvalue("index:"+i+" getOrgColumn: "+this.Dataset00.getOrgColumn(i,0));
			this.fn_addvalue("index:"+i+" getColumn: "+this.Dataset00.getColumn(i,0));
			this.Dataset00.set_updatecontrol(false);
			this.Dataset00.setRowType(i,Dataset.ROWTYPE_NORMAL);
			this.Dataset00.set_updatecontrol(true);
			this.fn_addvalue("index:"+i+" ROWTYPE_NORMAL_getOrgColumn: "+this.Dataset00.getOrgColumn(i,0));	
		}
	}
}

this.fn_addvalue = function(str:String)
{
	if(this.TextArea00.value)
	{
		this.TextArea00.set_value(this.TextArea00.value+"\n"+str);
	} else {
		this.TextArea00.set_value(str);
	}
}

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 버튼을 클릭하고 값을 수정한 상태에서 버튼 클릭 시 출력되는 값을 확인합니다.

대소문자 구분 없이 필터링하기

filter 메소드를 사용할때 영문 텍스트로 필터링하는 경우 대소문자 구분없이 처리하는 방식을 살펴봅니다.

예제

입력된 텍스트로 필터링을 처리합니다. [uppercase] 버튼 클릭 시에는 대소문자 구분없이 필터링하고, [sensitive case] 버튼 클릭 시에는 입력된 영문 텍스트 그대로 필터링합니다.

sample_dataset_08.xfdl

예제에서 사용한 핵심 기능

filter: 조건에 따라 필터링을 처리합니다. 조건이 없는 경우(빈문자열)는 조건이 해제되어 원본 데이터를 표시합니다.

예제 구현 방법

화면 구성하기

Grid 컴포넌트와 Button 컴포넌트, Edit 컴포넌트를 예제와 같이 배치합니다. Dataset 오브젝트를 아래와 같이 생성하고 Grid 컴포넌트에 바인딩합니다.

onclick 이벤트 함수 작성하기

대소문자 구분 없이 처리하기 위해서는 비교할 문자열 모두를 대문자 또는 소문자로 맞추어주어야 합니다. 예제에서는 toUpperCase를 사용해 Dataset 오브젝트 데이터와 Edit 컴포넌트에 입력된 텍스트를 모두 대문자로 변환해 비교합니다.

this.Button00_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.filter();
    var sFilter = "Column1.toString().toUpperCase().indexOf('" + this.Edit00.value.toUpperCase() + "') >= 0";
    this.Dataset00.filter(sFilter);
}

this.Button01_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.Dataset00.filter();
    var sFilter = "Column1.toString().indexOf('" + this.Edit00.value + "') >= 0";
    this.Dataset00.filter(sFilter);
};

QuickView로 확인하기

QuickView(Ctrl + F6)로 실행한 후 필터링할 데이터를 입력하고 두 개의 버튼을 클릭해 결과를 비교합니다.

그룹화된 데이터와 관련된 계산값 구하기

keystring 속성을 지정해서 데이터를 그룹화한 경우 그룹화된 데이터에 대한 값을 확인합니다. ColumnInfo 오브젝트의 prop 속성값을 지정해서 원하는 값을 표시할 수 있지만, 선택한 그룹화된 데이터에 대한 여러 데이터를 한번에 확인하는 방법을 살펴봅니다.

예제

SUBTOTAL에 해당하는 Row를 클릭하면 해당 그룹화된 데이터와 관련된 평균값, 최대값 등을 표시합니다.

sample_dataset_09.xfdl

예제에서 사용한 핵심 기능

getGroupRangeStart: 그룹정보를 포함하고 있는 Row가 참조하는 시작 인덱스값을 반환합니다. 예제에서는 A, B 두 개의 값으로 그룹화된 데이터의 시작 인덱스값(A는 0, B는 5)를 반환합니다.

getGroupRangeCount: 그룹정보를 포함하고 있는 Row가 참조하는 Row의 개수를 반환합니다. 예제에서는 A, B 두 개의 값으로 그룹화된 데이터의 Count값(A는 4, B는 3)를 반환합니다. getGroupRangeStart 메소드에서 얻은 값에 getGroupRangeCount 메소드에서 얻은 값을 더하면 마지막 인덱스값을 구할 수 있습니다.

예제 구현 방법

Grid 컴포넌트를 화면에 배치합니다.

Dataset 오브젝트를 아래와 같이 생성하고 Grid 컴포넌트에 바인딩합니다. Dataset 오브젝트의 keystring 속성값은 "Column0"으로 지정합니다.

Grid Contents Editor에서 첫 번째 칼럼의 expr 속성값을 아래와 같이 지정합니다.

그룹화된 데이터의 합계값을 표시하는 Row에 "SUBTOTAL"이라는 텍스트를 표시합니다.

Grid 컴포넌트 옆에 TextArea 컴포넌트를 배치합니다.

oncellclick 이벤트 함수를 아래와 같이 작성합니다.

getRowLevel 메소드로 선택한 ROW가 그룹정보를 포함하는 Row인지 확인합니다. getGroupRangeStart, getGroupRangeCount 메소드로 그룹화된 데이터의 시작 인덱스와 끝 인덱스를 확인한 후 원하는 메소드를 호출합니다.

this.Grid00_oncellclick = function(obj:nexacro.Grid,e:nexacro.GridClickEventInfo)
{
	var temp_str;
	var nStartIdx ;
	var nEndIdx ;
	if(this.Dataset00.getRowLevel(e.row)==0)
	{
		temp_str = "CLICK SUBTOTAL ROW";
	}
	else
	{
		nStartIdx = this.Dataset00.getGroupRangeStart(e.row);
		nEndIdx = this.Dataset00.getGroupRangeStart(e.row)+this.Dataset00.getGroupRangeCount(e.row);
		temp_str = "keystring: "+this.Dataset00.getColumn(e.row, "Column0")+"\n";
		temp_str += "getAvg: "+nexacro.round(this.Dataset00.getAvg("Column1", nStartIdx, nEndIdx),2)+"\n";
		temp_str += "getMax: "+this.Dataset00.getMax("Column1", nStartIdx, nEndIdx)+"\n";
		temp_str += "getMin: "+this.Dataset00.getMin("Column1", nStartIdx, nEndIdx)+"\n";
		temp_str += "getSum: "+this.Dataset00.getSum("Column1", nStartIdx, nEndIdx)+"\n";
		temp_str += "getCount: "+this.Dataset00.getCount("Column1", nStartIdx, nEndIdx);
	}
	this.TextArea00.set_value(temp_str);
};

QuickView(Ctrl + F6)로 실행한 후 SUBTOTAL에 해당하는 Row를 선택하면 해당 그룹화된 데이터에 대한 정보를 TextArea 컴포넌트에 출력합니다.

정렬 옵션 설정하기

keystring 속성 설정 시 정렬 옵션을 설정할 수 있습니다.

예제

locale code, caseFirst, numeric 옵션을 선택하면 선택값을 keystring 속성값으로 설정합니다.

sample_dataset_10.xfdl

예제에서 사용한 핵심 기능

keystring: "O" 옵션을 사용해 정렬 방식을 선택할 수 있습니다. 예제에서는 caseFirst, numeric 옵션만 사용했고 sensitivity, ignorePunctuation은 사용하지 않았습니다. JSON 형식에 key, value 값만 반영하면 추가로 설정할 수 있습니다.

예제 구현 방법

Grid 컴포넌트와 Combo, Edit 컴포넌트를 화면에 배치합니다.

Dataset 오브젝트를 아래와 같이 생성하고 Grid 컴포넌트에 바인딩합니다.

<ColumnInfo>
  <Column id="Column0" type="STRING" size="256"/>
</ColumnInfo>
<Rows>
  <Row>
    <Col id="Column0">aaaa</Col>
  </Row>
  <Row>
    <Col id="Column0">äaaa</Col>
  </Row>
  <Row>
    <Col id="Column0">aabb</Col>
  </Row>
  <Row>
    <Col id="Column0">AaAa</Col>
  </Row>
  <Row>
    <Col id="Column0">AABB</Col>
  </Row>
  <Row>
    <Col id="Column0">AAAb</Col>
  </Row>
  <Row>
    <Col id="Column0">bbAA</Col>
  </Row>
  <Row>
    <Col id="Column0">zBAA</Col>
  </Row>
  <Row>
    <Col id="Column0">25</Col>
  </Row>
  <Row>
    <Col id="Column0">120</Col>
  </Row>
</Rows>

Dataset 오브젝트의 keystring 속성값을 아래와 같이 설정합니다.

S:Column0,O:Column0[en-US]

2번 단계에서 만든 Dataset 오브젝트를 복사해서 새로운 Dataset 오브젝트를 생성하고 Grid 컴포넌트에 바인딩합니다.

Combo 컴포넌트에서 옵션 항목 선택 시 이번 단계에서 만든 Dataset 오브젝트의 keystring 속성값에 반영할 겁니다.

Combo 컴포넌트의 innerdataset 속성값을 아래와 같이 설정합니다.

codecolumn	datacolumn
locale code
none	none
en-US	English - United States (en-US)
de-DE	German - Germany (de-DE)
sv-FI	Swedish - Finland (sv-FI)
caseFirst
none	none
upper	upper
lower	lower
false	false (default)
numeric
none	none
true	true
	false (default)

caseFirst에서는 false 항목이 문자열로 처리되어야 하고 numeric에서는 Boolean으로 처리되어야 해서 codeColumn 값은 다르게 설정했습니다.

Combo 컴포넌트의 onitemchanged 속성값을 "Combo_onitemchanged"로 설정하고 이벤트 핸들러 함수를 아래와 같이 작성합니다.

this.Combo_onitemchanged = function(obj:nexacro.Combo,e:nexacro.ItemChangeEventInfo)
{
	if(this.Combo_localeCode.value!="none")
	{
		//S:Column0,O:Column0[en-US]
		var localeOption = {};
		if(this.Combo_caseFirst.value!="none")
			localeOption["caseFirst"] = this.Combo_caseFirst.value;
		if(this.Combo_numeric.value!="none")
			localeOption["numeric"] = Boolean(this.Combo_numeric.value);
			
		var strKeyString = "S:Column0,O:Column0["+this.Combo_localeCode.value+"]"+JSON.stringify(localeOption);
		this.Dataset00.set_keystring(strKeyString);
		this.Edit00.set_value(strKeyString);
	}
};

QuickView(Ctrl + F6)로 실행한 후 옵션을 선택하면 선택한 값에 따라 정렬 순서가 달라지는 것을 확인할 수 있습니다.