====== Grid 컴포넌트 가이드 ====== ===== Grid 컴포넌트 개요 ===== 이 장에서는 XFrame 에서 제공하는 Grid 컴포넌트에 대해서 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다. * 그리드 컴포넌트 개요 * 그리드 컴포넌트 아키텍처 ==== Grid 컴포넌트 개요 ==== Grid 컴포넌트는 XFrame 솔루션에서 제공하는 컴포넌트로 다건의 데이터를 표시하기 위한 컴포넌트이다. 아래의 그림처럼 XFrame-DevStudio 의 오브젝트 창에 표시되어 있으며, 좌측부터 일반 그리드, 멀티 라인 그리드, 트리 그리드이다. {{ ..:grid:00.png?nolink |}} 그리드 컴포넌트는 기능 구성에 따라 아래와 같이 세가지 그리드가 제공된다. ^ 구분 ^ 설명 ^ | 일반 그리드 | * 일반 그리드 기능을 제공한다. * 그리드 데이터부의 로우 수는 무조건 1행으로 제한되어 있다. | | 멀티 라인 그리드 | * 그리드의 헤더부 수평 헤더 로우 수에 따라서, 데이터부의 로우수가 설정되는 그리드이다. * 그리드 데이터부의 모양은 헤더부의 모양과 동일한 형태로 구성된다. | | 트리 그리드 | * 그리드의 0번째 인덱스 컬럼을 트리 형태로 구성되고, 나머지 컬럼은 그리드의 일반 컬럼으로 구성된 그리드 컴포넌트이다. | === 그리드 컴포넌트 구성 요소 이름 === 그리그 컴포넌트 구성 요소 이름은 아래의 그림과 같다. 그리드의 각각의 셀은 “Item”이란 이름으로 명명되어 있으며, 속성 및 API 명에 특정 아이템에 대한 속성 및 API 명에는 “Item”이란 이름이 들어간다. {{ ..:grid:01.png?nolink |}} ==== 그리드 컴포넌트 속성 및 이벤트 아키텍처 ==== 그리드 컴포넌트는 아래의 그림과 같이 속성 및 이벤트가 정의되어 있다. {{ ..:grid:02.png?nolink |}} ^ 구분 ^ 설명 ^ | 1 | 그리드 컴포넌트 자체에 대한 속성 및 이벤트를 정의한다. | | 2 | 그리드 컴포넌트의 컬럼별 헤더부에 대한 속성을 정의한다. | | 3 | 그리드 컴포넌트의 컬럼별 데이터부에 대한 속성 및 이벤트를 정의한다. | ===== 그리드 통계 ===== 이 장에서는 XFrame 에서 제공하는 그리드 통계 기능에 대해서 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다. * 그리드 통계 개요 * 그리드 통계 정의 방식 * 그리드 통계 아키텍처 * 통계/소계 관련 API ==== 그리드 통계 개요 ==== 그리드는 조회된 데이터를 기준으로 다양한 통계 기능 및 소계 기능을 속성 지정 방식 및 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” 속성을 통해서 지정된다. {{ ..:grid:03.png?nolink |}} 속성을 선택하면 아래의 그림과 같이 통계 정보를 설정하는 창이 표시된다. {{ ..:grid:04.png?nolink |}} 통계 창에 표시되는 각각의 속성에 대한 설명은 아래의 표와 같다. ^ 순서 ^ 설명 ^ | 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” 속성을 통해서 지정된다. {{ ..:grid:05.png?nolink |}} 속성을 선택하면 아래의 그림과 같이 통계 정보를 설정하는 창이 표시된다. {{ ..:grid:06.png?nolink |}} 통계 창에 표시되는 대부분의 속성은 통계행과 동일하며, 컬럼 통계에만 있는 속성에 대한 설명은 아래의 표와 같다. ^ 순서 ^ 설명 ^ | column_width | 그리드 통계 열이 표시될 컬럼의 너비 (단위: pixel) | | pattern | 그리드 통계 열에 표시될 데이터에 대한 패턴 | | places | 그리드 통계 열에 표시될 데이터에 대한 소수점 위치 | === 소계행 지정 방법 === 통계행 지정 방법은 아래의 그림과 같이 그리드의 “mid_statistics” 속성을 통해서 지정된다. {{ ..:grid:07.png?nolink |}} 속성을 선택하면 아래의 그림과 같이 통계 정보를 설정하는 창이 표시되고, 각각의 속성은 통계행의 정보 설정창에 대한 설명을 참조한다. {{ ..:grid:08.png?nolink |}} === 컬럼별 통계/소계 관련 속성 === 컬럼별 통계/소계 관련 속성은 아래의 그림처럼, 그리드 컬럼의 데이터부 속성에서 정보를 설정하며, 각 속성에 대한 설명은 아래의 표와 같다. {{ ..:grid:09.png?nolink |}} {{ ..:grid:10.png?nolink |}} ^ 속성 ^ 설명 ^ | data_type | * 각 컬럼의 데이터 타입을 지정한다. * 통계/소계 정보가 표시되기 위해서는 데이터 타입이 숫자인 컬럼만 계산된다. | | pattern, places | * 각 컬럼의 패턴 및 소수점 위치 정보를 지정한다. * 통계/소계 정보는 각 컬럼의 패턴 및 소수점 위치 정보에 따라 표시된다. | | statistics_type,\\ midstatistics_type | * 통계/소계 계산 방식 속성이 컬럼별 정의인 경우, 각 컬럼의 통계 정보를 계산하는 방식을 지정한다. | | statistics_show,\\ midstatistics_show | * 각 컬럼에 대한 통계/소계 데이터를 표시할 지 여부를 지정한다 * 숫자 컬럼이지만 통계/소계 정보가 무의미한 컬럼인 경우에 false로 지정하면, 해당 컬럼의 통계/소계 정보가 표시되지 않는다. | | base_midstatistics| * 소계 계산 기준 컬럼 여부를 지정한다. * 소계 계산 기준 컬럼은 여러 컬럼에 설정할 수 있다. * 소계 계산시 속성이 true로 설정된 컬럼의 값을 기준으로 소계 계산이 수행된다. * 모두 false로 지정된 경우, 0번재 컬럼의 값을 기준으로 소계가 계산된다. | ==== 통계 아키텍처 ==== === 그리드 통계 아키텍처 === 그리드 통계/소계에 대한 설정 방식중, 컬럼별 정의 및 사용자 정의 방식에 대한 아키텍처는 아래의 그림과 같다. {{ ..:grid:11.png?nolink |}} ^ 구분 ^ 설명 ^ | 1 | * 그리드의 통계행/소계행 속성 창에서 통계 계산 방식 지정 속성에 의해서 결정된다. * 통계 계산 방식이, 합계, 평균, 개수, 최소값, 최대값으로 지정한 경우, 칼럼별 통계/소계 계산 방식 속성은 무시된다. | | 2 | * 소계행 속성창에는 사용자 정의 기능은 지원하지 않는다. | | 3 | * 그리드의 통계행/소계행 속성창에서 통계 계산 방식인 컬럼별 정의인 경우, 각 컬럼의 통계/소계 계산 방식이 적용되어 화면에 표시된다. | | 4 | * 각 컬럼의 통계/소계 계산 방식이 사용자 정의가 아닌 경우, 각 컬럼에 통계 정보가 표시되기 위해서는 데이터 타입, 통계 표시 여부 속성이 설정돼야 한다 | | 5 | * 사용자 정의 방식으로 설정된 통계행의 데이터는 그리드의 setstatuserrowtext 함수 호출을 통해서 지정된다. | === 그리드 소계 아키텍처 === 그리드 소계는 그리드 데이터 표시부에 함께 표시되며, 소계 기준 컬럼으로 설정된 컬럼의 값(base_midstatistics 속성이 true 인 컬럼)을 기준으로 소계를 계산하는 방식이다. 소계는 통계와 비슷하지만 다음과 같은 특징을 가진다. * 그리드 소계는 API 호출을 통해 동적으로 추가할 수 있다. * 그리드 소계는 API 호출을 통해 동적으로 삭제할 수 있다. * 그리드의 소계를 동적으로 생성/삭제하는 경우에는 그리드 컴포넌트의 refresh 함수를 호출해야 반영된다. * 그리드 소계 계산 기준은 내부적으로 리스트로 관리되며, API 호출을 통해 동적으로 추가/삭제시 추가되거나 삭제된다. * 그리드 소계는 사용자 정의 방식을 지원하지 않는다. === 사용자 정의 통계 아키텍처 === 사용자 정의 통계는 통계 정보를 그리드 내부에서 자동으로 계산하는 표시하는 방식이 아니라, 스크립트 로직에 의해서 계산된 값을 표시하는 방식이다. 사용자 정의 통계 방식을 지정하는 방식을 아래와 같이 통계행 지정 방식 및 컬럼별 지정 방식을 통해서 제공된다. ^ 방식 ^ 설명 ^ | 통계행 지정 방식 | 그리드 통계 행중 특정 통계행 전체를 사용자 지정 방식으로 설정하는 방법 | | 컬럼별 지정 방식 | 그리드 통계 계산 방식을 컬럼별 정의로 설정하고, 그리드 컬럼 데이터부 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 에서 제공하는 그리드의 데이터 및 입력 타입 기능에 대해서 기술합니다. 이 장에서 기술하는 내용은 아래와 같습니다. * 그리드 데이터 및 입력 타입 개요 * 그리드 데이터 타입 * 그리드 입력 타입 * 그리드 데이터 및 입력 타입 관련 API * 그리드 아이템 데이터 및 입력 타입 ==== 그리드 입력 및 데이터 타입 개요 ==== 그리드는 각 컬럼별로 입력 타입 및 데이터 타입을 속성 지정을 통해서 결정한다. 그리드 컬럼의 데이터 타입은 해당 컬럼에 입력될 수 있는 데이터의 종류를 지정하며, 그리드 컬럼의 입력 타입은 해당 컬럼에 데이터 입력시 어떤 방식으로 사용할 것인지를 지정한다. 그리드의 입력 및 데이터 타입은 아래의 그림과 같이 컬럼의 데이터부 속성에서 정의된다. {{ ..:grid:12.png?nolink |}} ==== 그리드 데이터 타입 ==== 그리드 데이터 타입은 아래의 표와 같다. ^ 구분 ^ 설명 ^ | 0:숫자 | 숫자 입력이 가능하다. | | 1:영문 | 영문 및 숫자 입력이 가능하다. | | 2:한글 | 숫자, 영문, 한글 입력이 가능하다. | === 그리드 데이터 타입 속성과 관련된 속성 정보 관계 === 그리드 데이터 타입은 아래와 같이 컬럼의 속성과 연관 관계를 가진다. 컬럼의 특정 속성이 데이터 타입의 속성과 연결되어 있는 것들은 해당 컬럼의 데이터 속성이 매칭이 되야 정상적으로 반영된다. {{ ..:grid:13.png?nolink |}} ==== 그리드 입력 타입 ==== 그리드 입력 타입은 아래의 표와 같다. ^ 구분 ^ 설명 ^ | 0:editbox | * 필드가 표시된다. * 데이터 타입 속성에 따라서 입력할 수 있는 데이터 종류가 제한된다. | | 1:checkbox | * 체크 박스가 표시된다. | | 2:combobox | * 콤보 박스가 표시된다. * 주로 코드용 데이터를 표시하기 위한 용도로 사용된다. | | 3:calendar | * 달력이 표시된다. * 날짜랄 입력하기 위한 용도로 사용된다. | === 그리드 입력 타입 속성과 관련된 속성 정보 관계 === 그리드 입력 타입은 아래와 같이 컬럼의 속성과 연관 관계를 가진다. 컬럼의 특정 속성이 입력 타입의 속성과 연결되어 있는 것들은 해당 컬럼의 입력 타입 속성이 매칭이 되야 정상적으로 반영된다. {{ ..:grid:14.png?nolink |}} ==== 그리드 데이터 및 입력 타입 관련 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 도움말"을 참조한다.