목차

Grid 컴포넌트 가이드

Grid 컴포넌트 개요

이 장에서는 XFrame 에서 제공하는 Grid 컴포넌트에 대해서 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.

Grid 컴포넌트 개요

Grid 컴포넌트는 XFrame 솔루션에서 제공하는 컴포넌트로 다건의 데이터를 표시하기 위한 컴포넌트이다. 아래의 그림처럼 XFrame-DevStudio 의 오브젝트 창에 표시되어 있으며, 좌측부터 일반 그리드, 멀티 라인 그리드, 트리 그리드이다.

그리드 컴포넌트는 기능 구성에 따라 아래와 같이 세가지 그리드가 제공된다.

구분 설명
일반 그리드
  • 일반 그리드 기능을 제공한다.
  • 그리드 데이터부의 로우 수는 무조건 1행으로 제한되어 있다.
멀티 라인 그리드
  • 그리드의 헤더부 수평 헤더 로우 수에 따라서, 데이터부의 로우수가 설정되는 그리드이다.
  • 그리드 데이터부의 모양은 헤더부의 모양과 동일한 형태로 구성된다.
트리 그리드
  • 그리드의 0번째 인덱스 컬럼을 트리 형태로 구성되고, 나머지 컬럼은 그리드의 일반 컬럼으로 구성된 그리드 컴포넌트이다.

그리드 컴포넌트 구성 요소 이름

그리그 컴포넌트 구성 요소 이름은 아래의 그림과 같다. 그리드의 각각의 셀은 “Item”이란 이름으로 명명되어 있으며, 속성 및 API 명에 특정 아이템에 대한 속성 및 API 명에는 “Item”이란 이름이 들어간다.

그리드 컴포넌트 속성 및 이벤트 아키텍처

그리드 컴포넌트는 아래의 그림과 같이 속성 및 이벤트가 정의되어 있다.

구분 설명
1 그리드 컴포넌트 자체에 대한 속성 및 이벤트를 정의한다.
2 그리드 컴포넌트의 컬럼별 헤더부에 대한 속성을 정의한다.
3 그리드 컴포넌트의 컬럼별 데이터부에 대한 속성 및 이벤트를 정의한다.

그리드 통계

이 장에서는 XFrame 에서 제공하는 그리드 통계 기능에 대해서 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.

그리드 통계 개요

그리드는 조회된 데이터를 기준으로 다양한 통계 기능 및 소계 기능을 속성 지정 방식 및 API 호출 방식을 통해서 제공한다.

그리드 통계 계산 방식

그리드는 아래와 같은 통계 계산 방식을 제공한다

구분 설명
합계 데이터의 합계를 계산한다.
평균 데이터의 평균을 계산한다.
개수 데이터의 개수를 계산한다.
최소값 데이터의 최소값을 계산한다.
최대값 데이터의 최대값을 계산한다.
컬럼별 정의
  • 컬럼별로 데이터의 합계/평균/개수/최소값/최대값을 계산한다.
  • 컬럼별 계산 기준은 그리드 컬럼 데이터부의 “statiscsshow_type” 또는“midstatistics_type” 속성에 의해 결정된다.
사용자 정의 통계 정보를 표현하기 위한 틀만 표시하고, API 호출을 통해서 설정한 값을 표시한다.

그리드 통계 표시 방식

그리드의 통계 표시 방식은 아래의 표와 같다.

구분 설명 속성
통계행
  • 그리드 컬럼별 통계 정보를 그리드 하단에 별도의 영역에 표시한다.
  • 통계행은 여러 행을 지정할 수 있다.
  • 통계행의 데이터는 해당 컬럼의 “pattern” 및 “places” 속성이 반영되어 데이터가 포맷팅된다.
 statistics_row
통계열
  • 그리드 로우별 통계 정보를 그리드 우축에 별도의 영역에 표시한다.
  • 통계열은 여러 열을 지정할 수 있다.
  • 통계열은 통계열 지정 속성의 “pattern” 및 “places” 속성이 반영되어 데이터가 포맷팅된다.
 statistics_column
소계행
  • 그리드 컬럼별 소계 정보를 그리드 데이터부에 포함하여 표시한다.
  • 소계행의 데이터는 해당 컬럼의 “pattern” 및 “places” 속성이 반영되어 데이터가 포맷팅된다. |
 mid_statistics

그리드 통계 데이터 계산 조건

그리드는 통계 정보 계산시 아래와 같은 기준으로 처리된다. 각 기준은 순서를 가지고 있으며, 모든 조건이 만족되어야만 통계 데이터가 표시된다.

순서 설명
1 그리드 통계 계산 방식이 6(사용자 정의)가 아님
2 그리드 데이터부 “statiscs_show” 속성 또는 “midstatistcis_show” 속성이 true임
3 그리드 데이터부의 “data_type” 속성이 0(숫자)임
4 그리드의 통계 계산 방식이 컬럼별 정의이고, 그리드 컬럼 데이터부 “statisticsshow_type”이 5(사용자 정의)가 아님

그리드 통계/소계 정의 방법

그리드 통계/소계 정보 정의 방법은 그리드 통계 표시 방식에 따라 구분되어 설정된다.

통계행 지정 방법

통계행 지정 방법은 아래의 그림과 같이 그리드의 “statistics_row” 속성을 통해서 지정된다.

속성을 선택하면 아래의 그림과 같이 통계 정보를 설정하는 창이 표시된다.

통계 창에 표시되는 각각의 속성에 대한 설명은 아래의 표와 같다.

순서 설명
operation 그리드 통계 계산 방식을 지정한다.
title
  • 그리드 통계의 제목으로 표시될 타이틀을 지정한다.
  • 공백 문자열이 아닐 경우, 맨 마지막 속성인 “column_showtitle”으로 지정된 컬럼에 타이틀이 표시된다.
fore_color,
back_color

통계행의 전경색과 배경색을 지정한다.

header_forecolor
header_backcolor
  • “Title” 속성에 지정한 문자열이 수직 헤더가 있는 경우, 수직 헤더의 전경색과 배경색을 지정한다.
  • 그리으의 수직 헤더가 없는 경우, 전경색 및 배경색 속성은 반영되지 않는다.
  • 그리드의 “gradient_effect”가 정의되어 있을 경우에는 배경색 속성은 반영되지 않고 전경색 색상만 반영된다.
header_horzalign
header_vertalign

“Title” 속성에 지정한 문자열에 대한 수평/수직 정렬 방식을 지정한다.

column_showtitle
  • “Title” 속성에 지정한 문자열이 표시될 컬럼 인덱스(Zero-Base)로 지정한다.
  • 통계행 타이틀 정보가 표시되는 컬럼에는 통계 데이터가 표시되지 않는다.

통계열 지정 방법

통계행 지정 방법은 아래의 그림과 같이 그리드의 “statistics_column” 속성을 통해서 지정된다.

속성을 선택하면 아래의 그림과 같이 통계 정보를 설정하는 창이 표시된다.

통계 창에 표시되는 대부분의 속성은 통계행과 동일하며, 컬럼 통계에만 있는 속성에 대한 설명은 아래의 표와 같다.

순서 설명
column_width 그리드 통계 열이 표시될 컬럼의 너비 (단위: pixel)
pattern 그리드 통계 열에 표시될 데이터에 대한 패턴
places 그리드 통계 열에 표시될 데이터에 대한 소수점 위치

소계행 지정 방법

통계행 지정 방법은 아래의 그림과 같이 그리드의 “mid_statistics” 속성을 통해서 지정된다.

속성을 선택하면 아래의 그림과 같이 통계 정보를 설정하는 창이 표시되고, 각각의 속성은 통계행의 정보 설정창에 대한 설명을 참조한다.

컬럼별 통계/소계 관련 속성

컬럼별 통계/소계 관련 속성은 아래의 그림처럼, 그리드 컬럼의 데이터부 속성에서 정보를 설정하며, 각 속성에 대한 설명은 아래의 표와 같다.

속성 설명
data_type
  • 각 컬럼의 데이터 타입을 지정한다.
  • 통계/소계 정보가 표시되기 위해서는 데이터 타입이 숫자인 컬럼만 계산된다.
pattern, places
  • 각 컬럼의 패턴 및 소수점 위치 정보를 지정한다.
  • 통계/소계 정보는 각 컬럼의 패턴 및 소수점 위치 정보에 따라 표시된다.
statistics_type,
midstatistics_type
  • 통계/소계 계산 방식 속성이 컬럼별 정의인 경우, 각 컬럼의 통계 정보를 계산하는 방식을 지정한다.
statistics_show,
midstatistics_show
  • 각 컬럼에 대한 통계/소계 데이터를 표시할 지 여부를 지정한다
  • 숫자 컬럼이지만 통계/소계 정보가 무의미한 컬럼인 경우에 false로 지정하면, 해당 컬럼의 통계/소계 정보가 표시되지 않는다.
base_midstatistics
  • 소계 계산 기준 컬럼 여부를 지정한다.
  • 소계 계산 기준 컬럼은 여러 컬럼에 설정할 수 있다.
  • 소계 계산시 속성이 true로 설정된 컬럼의 값을 기준으로 소계 계산이 수행된다.
  • 모두 false로 지정된 경우, 0번재 컬럼의 값을 기준으로 소계가 계산된다.

통계 아키텍처

그리드 통계 아키텍처

그리드 통계/소계에 대한 설정 방식중, 컬럼별 정의 및 사용자 정의 방식에 대한 아키텍처는 아래의 그림과 같다.

구분 설명
1
  • 그리드의 통계행/소계행 속성 창에서 통계 계산 방식 지정 속성에 의해서 결정된다.
  • 통계 계산 방식이, 합계, 평균, 개수, 최소값, 최대값으로 지정한 경우, 칼럼별 통계/소계 계산 방식 속성은 무시된다.
2
  • 소계행 속성창에는 사용자 정의 기능은 지원하지 않는다.
3
  • 그리드의 통계행/소계행 속성창에서 통계 계산 방식인 컬럼별 정의인 경우, 각 컬럼의 통계/소계 계산 방식이 적용되어 화면에 표시된다.
4
  • 각 컬럼의 통계/소계 계산 방식이 사용자 정의가 아닌 경우, 각 컬럼에 통계 정보가 표시되기 위해서는 데이터 타입, 통계 표시 여부 속성이 설정돼야 한다
5
  • 사용자 정의 방식으로 설정된 통계행의 데이터는 그리드의 setstatuserrowtext 함수 호출을 통해서 지정된다.

그리드 소계 아키텍처

그리드 소계는 그리드 데이터 표시부에 함께 표시되며, 소계 기준 컬럼으로 설정된 컬럼의 값(base_midstatistics 속성이 true 인 컬럼)을 기준으로 소계를 계산하는 방식이다. 소계는 통계와 비슷하지만 다음과 같은 특징을 가진다.

사용자 정의 통계 아키텍처

사용자 정의 통계는 통계 정보를 그리드 내부에서 자동으로 계산하는 표시하는 방식이 아니라, 스크립트 로직에 의해서 계산된 값을 표시하는 방식이다. 사용자 정의 통계 방식을 지정하는 방식을 아래와 같이 통계행 지정 방식 및 컬럼별 지정 방식을 통해서 제공된다.

방식 설명
통계행 지정 방식 그리드 통계 행중 특정 통계행 전체를 사용자 지정 방식으로 설정하는 방법
컬럼별 지정 방식 그리드 통계 계산 방식을 컬럼별 정의로 설정하고, 그리드 컬럼 데이터부 statisticsshow_type 속성을 5(사용자 정의)로 지정하는 방식

통계/소계 관련 API

통계 및 소계 정보를 동적으로 설정하고, 관리하기 위한 API 는 아래의 표와 같다. 각 API 에 대한 자세한 설명은 xFrameDevStudio 에서 “도움말” → “xFrame@DevStudio 도움말”을 참조한다.

통계 관련 API

방식 설명
clearallstatuserrow 그리드 통계행 중 '사용자 정의'로 설정된 로우들의 내용을 모두 지운다.
clearstatuserrow 그리드 '사용자 정의'로 설정된 통계행의 특정 로우의 내용을 삭제한다.
getcolumnstatrowtype 해당 컬럼의 통계 타입 값을 반환한다.
getstatcolumncount 그리드에서 통계열의 개수를 반환한다.
getstatisticscoltext 그리드 통계열 중 특정 아이템의 데이터를 반환한다.
getstatisticsrowtext 그리드 통계행 중 특정 아이템의 데이터를 반환한다.
getstatrowcount 그리드에서 통계행의 개수를 반환한다.
setcolumnstatrowtype 해당 컬럼의 통계 타입 값을 설정한다.
setstatcolumntitle 통계열의 제목을 설정한다.
setstatrowtitle 통계행의 제목을 설정한다.
setstatrowtitlecolumn 통계행의 타이틀을 보여줄 컬럼을 지정한다.
setstatuserrowtext 그리드 통계 정보중 사용자 정의로 설정된 특정 아이템의 데이터를 설정한다.

소계 관련 API

방식 설명
addstatmid 그리드에 소계를 동적으로 추가한다.
deleteallstatmid 해당 그리드에 설정된 소계 정보 모두를 삭제한다.
getcolumnmidstattype 해당 컬럼의 midstatistics_type의 값을 반환한다.
getstatmidcount 해당 그리드에 설정되어 있는 소계 정보의 갯수를 반환한다.
getstatmidrowfirst 그리드 데이터중 소계행의 첫번째를 구한다.
getstatmidrownext 그리드 데이터중 기준소계행의 다음에 나타나는 소계행을 구한다.
ismidstatrow 그리드의 특정 로우가 소계행으로 사용되고 있는지를 체크한다.
setcolumnmidstattype 해당 컬럼의 소계 타입(midstatistics_type)을 설정한다.
setmidstatbackcolor 소계행의 배경색상을 지정한다.
setmidstatistics 그리드에 소계행의 종류를 설정한다.

데이터 및 입력 타입

이 장에서는 XFrame 에서 제공하는 그리드의 데이터 및 입력 타입 기능에 대해서 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다.

그리드 입력 및 데이터 타입 개요

그리드는 각 컬럼별로 입력 타입 및 데이터 타입을 속성 지정을 통해서 결정한다. 그리드 컬럼의 데이터 타입은 해당 컬럼에 입력될 수 있는 데이터의 종류를 지정하며, 그리드 컬럼의 입력 타입은 해당 컬럼에 데이터 입력시 어떤 방식으로 사용할 것인지를 지정한다.

그리드의 입력 및 데이터 타입은 아래의 그림과 같이 컬럼의 데이터부 속성에서 정의된다.

그리드 데이터 타입

그리드 데이터 타입은 아래의 표와 같다.

구분 설명
0:숫자 숫자 입력이 가능하다.
1:영문 영문 및 숫자 입력이 가능하다.
2:한글 숫자, 영문, 한글 입력이 가능하다.

그리드 데이터 타입 속성과 관련된 속성 정보 관계

그리드 데이터 타입은 아래와 같이 컬럼의 속성과 연관 관계를 가진다.

컬럼의 특정 속성이 데이터 타입의 속성과 연결되어 있는 것들은 해당 컬럼의 데이터 속성이 매칭이 되야 정상적으로 반영된다.

그리드 입력 타입

그리드 입력 타입은 아래의 표와 같다.

구분 설명
0:editbox
  • 필드가 표시된다.
  • 데이터 타입 속성에 따라서 입력할 수 있는 데이터 종류가 제한된다.
1:checkbox
  • 체크 박스가 표시된다.
2:combobox
  • 콤보 박스가 표시된다.
  • 주로 코드용 데이터를 표시하기 위한 용도로 사용된다.
3:calendar
  • 달력이 표시된다.
  • 날짜랄 입력하기 위한 용도로 사용된다.

그리드 입력 타입 속성과 관련된 속성 정보 관계

그리드 입력 타입은 아래와 같이 컬럼의 속성과 연관 관계를 가진다.

컬럼의 특정 속성이 입력 타입의 속성과 연결되어 있는 것들은 해당 컬럼의 입력 타입 속성이 매칭이 되야 정상적으로 반영된다.

그리드 데이터 및 입력 타입 관련 API

그리드의 각 컬럼에 관련된 데이터 타입 및 입력 타입은 아래의 표와 같이 getcolumn~, setcolumn~으로 시작되는 API 를 통해서 현재 설정 상태를 조회하거나, 동적으로 변경할 수 있다. 각 API 에 대한 자세한 설명은 xFrameDevStudio 에서 “도움말” → “xFrame@DevStudio 도움말”을 참조한다.

함수명 설명
getcolumn~ 각각의 컬럼에 설정되어 있는 상태를 반환한다.
setcolumn~ 각가의 컬럼에 대한 속성을 변경한다.

그리드 아이템 데이터 및 입력 타입

그리드의 각 셀을 의미하는 그리드 아이템은 기본적으로 아이템이 속한 컬럼의 속성을 기준으로 데이터 타입 및 입력 타입이 결정된다.

XFrame 은 그리드의 각 아이템별로 컬럼 속성과 다른 속성을 동적으로 변경할 수 있도록 API 를 제공하며, API 호출을 통해서 동적으로 변경할 수 있는 주요 속성은 아래와 같다.

속성 API
체크 박스 타이틀 setitemcheckboxtitle
색상 setitembackcolor, setitembackcolorrange
setitemforecolor, setitemforecolorrange
폰트 및 이미지 경로 seitemfont, setitemimage
입력 타입 setiteminputtype
최대 길이 및 패턴 setitemmaxlength, setitempattern
코드 정보 setitempicklist
소수점 위치 setitemplaces

각 API 에 대한 자세한 설명은 xFrameDevStudio 에서 “도움말” → “xFrame@DevStudio 도움말”을 참조한다.