guide Data Model

RealGrid-Touch 컨트롤은 (대량의) 업무 데이터를 표시하는 UI 컨트롤이므로, 명확한 화면을 구성하는 것 외에 데이터 관리가 중요한 요소이다. 가능한 데이터에 집중해서 앱을 개발 및 관리할 수 있도록 데이터 소스는 화면을 구현하는 리스트 컨트롤과 별도 계층으로 분리된다.
RealGrid-Touch 라이브러리는 전형적인 UI 구현 방식인 MVC 패턴으로서, Model(데이터소스), View(컨트롤 내부에 구현된 리스트뷰), Controller(리스트 컨트롤)가 각각 다른 레이어로 구현된다. 컨트롤러가 데이터와 뷰를 연결하고 관리한다.
데이터는 추가/삭제/수정할 수 있는데, 데이터의 변경은 바로 화면 view에 반영된다. 또, 화면에서 사용자 등을 통해 값이 변경되면 데이터 레이어에 바로 저장된다.

데이터소스는 실제 데이터행들을 보관하고 행들을 추가/수정/삭제 할 수 있는 RtListData, 정렬/필터링을 통해 RtListData 데이터행들을 다르게 배치하는 RtDataView, 둘 이상의 RtListData나 RtDataView를 마스터/디테일로 연결해서 데이터행들을 배치하는 RtDataLinkView가 있다.

RtListData

데이터필드 목록이 생성되고, 필드 값들이 저장된 실제 데이터행들을 보관하는 기본 데이터소스이다. 다양한 method들을 통해 데이터를 검색하고 수정/추가/삭제할 수 있다.

const data = RealTouch.createListData('data');

// 리스트 컨트롤에 연결
realtouch.data = data;

Data Field

데이터행은 데이터소스 생성 시 지정된 데이터필드 개수와 동일한 값 목록을 갖게 되고, 각 필드의 값은 데이터필드의 자료형에 맞게 저장된다. RtDataType 열겨형으로 설정할 수 있는 자료형은 아래와 같다. 모든 자료형의 기본값은 undefined이다. 또, 필드 생성 지 자료형이 지정되지 않으면 RtDataType.TEXT로 설정된다.

Type	RtDataType	값	설명
'text'	TEXT	문자열
'`number`'	NUMBER	숫자
'`bigint`'	BIGINT	큰 숫자	2^53 - 1보다 큰 정수가 필요할 때 사용한다.
'bool'	BOOL	Boolean 값
'date'	DATE	Date 객체	Date 객체가 아닌경우 new Date()의 매개변수로 가능한 숫자나 문자열이어야한다. 데이터로 읽어들일 때 Date 객체로 변환한다.
'`any`'	ANY	Json `object`	여러 속성을 포함한 객체. view에 개별 속성에 접근할 수 있다.

필드 생성 시 [IRtDataField]에 선언된 필드 속성들을 지정할 수 있는데, 자료형외에 표시 label, 기본값, 필수 여부 등을 지정할 수 있다.

Any 필드

RtDataType.ANY 자료형 필드에는 JSON 객체를 저장할 수 있고, 데이터를 표시할 때 객체의 속성별로 접근할 수 있다.

const data = RealTouch.createListData('main', {
    fields: [
        { name: 'NAME', label: '이름' },
        { name: 'JOB', label: '직장', type: 'any' }
    ]
});
const template = {
    template: {
        layout: 'vlinear',
        children: [{
            field: 'NAME'
        }, {
            field: 'JOB.DEPT'
        }]
    }
}

파생 필드(Derived Field)

기본 필드들의 조합 연산으로 값이 결정되는 필드이다.

const data = RealTouch.create('main', {
    title: '판매 정보',
    fields: [
        { name: 'QTY', label: '수량', type: 'number' },
        { name: 'LAT', label: '위도', type: 'number' },
        { name: 'LOGT', label: '경도', type: 'number' }
    ],
    derivedFields: [
        { name: 'SUM', label: '합', extractor: values => values.LAT + values.LOGT },
    ]
});

Data Load

데이터소스 생성 시 외부 데이터로 부터 데이터행을 생성하는 몇가지 방법을 제공한다. RealTouch.[createListData] 호출로 데이터를 생성하는 시점이나 RtListData.loadData 호출로 읽어 들이며, IRtDataValueSource 설정 모델에 저장 방식을 지정할 수 있다.

JSON Array

Json 배열 객체로 변환될 수 있는 텍스트, 혹은 Json 배열로부터 데이터행들을 구성한다.

CSV

Comman로 분리된 행들로 구성된 텍스트로부터 데이터행들을 구성한다.

TSV

const options = {
    fields: [...],
    ...
}
const source = '...';
const info = {
    type: 'tsv',        // tsv text
    values: source,     // tsv lines
    multiTabs: true,    // true면 연결된 중복 tab을 하나로 간주한다.
    skipBlank: true,    // true면 빈 줄은 무시한다.
    fieldHeader: 1,
    startRow: 2,
    reader: (prop, value) => {
        if (prop === '매출액' || prop === '관객수' || prop === '스크린수') {
            return +value;
        }
        return value;
    }
};
const data = RealTouch.createListData('main', options, info);

Tab으로 분리된 행들로 구성된 텍스트로부터 데이터행들을 구성한다.

RtDataView

RtListData로부터 정렬 혹은 필터링된 데이터행 목록을 새로 구축(build)해서 보관한다.
하나 이상의 필드룰 기준으로 필드 값 혹은 정렬 콜백을 지정해서 정렬할 수 있다. 데이터뷰 생성 후에도 정렬을 개별적으로 추가하거나 제거할 수 있고, 전체적으로 새로 설정할 수도 있다.
필터링은 정렬을 기준으로 적용된 순서에 따라 pre/post 필터로 지정할 수 있다. 필터는 개별 필터이거나 둘 이상의 필터를 and/or로 묶은 필터셋일 수 있디.

const data = RealTouch.createListData('data');
const dv = RealTouch.createDataView('dv', data, {});

// 리스트 컨트롤에 연결
realtouch.data = dv;

데이터뷰에 설정된 필터들은 개별적으로 활성 혹은 비활성 시킬수 있다. 비활성된 필터는 데이터행을 구축할 때 적용되지 않는다.

Filtering

Dedupe

Slicing

Filter Set

Sorting

RtDataLinkView

둘 이상의 단순 데이터소스 즉, RtListData나 RtDataView를 master/detail 관계로 연결하고 거기에 포함된 행들을 자신의 데이터행들로 배치한다. 연결 계층은 깊어질 수 있다. 즉, 디테일 데이터가 다른 것들의 마스터가 될 수 있다.

const master = RealTouch.createListData('master');
const detail = RealTouch.createListData('detail');
const data = RealTouch.createDataLink('dsLink', master, {});

// 리스트 컨트롤에 연결
realtouch.data = data;

Home

Demo

Docs

FAQ