실습 예제 ｜MX-GRID를 이용한 생산 작업 일지 화면


실습 Template 다운로드 위 실습 예제를 학습하기 위한 실습 Template은 아래의 파일을 다운받아 사용합니다. MX-GRID_Sample.xlsx

Step 1. 정형보고서 양식 만들기

MX-Grid의 디자인 속성으로 i-MATRIX 디자이너를 실행해 Excel 파일을 활용하여 정형 보고서 양식 작성

1.1 MX-Grid 생성 및 실행

MX-Grid 컨트롤을 생성하기 위해 UI Bot > MX-Grid를 선택합니다.
생성한 MX-Grid 컨트롤에서 마우스 우 클릭하여 디자인을 실행합니다.

참고 ｜ MX-Grid 디자이너 실행 시

MX-Grid 실행하려면 화면을 저장해야 하므로 제작 전 저장 후 시작합니다.

엑셀로 화면을 만들 수 있는 편집 화면이 나타납니다.

MX-Grid 디자이너(i-MATRIX)

시트 이름 명령 규칙

MX-Grid 디자이너는 저장 시 Excel의 시트명을 예약어로 사용하고 있습니다.

시트명	역할	비고
V1	MX-Grid 컨트롤의 최종 출력할 대상 시트	MX-Grid는 V1 시트를 화면에 출력합니다. (엑셀과 같이 시트탭을 지원하진 않지만 시트 이동 동작을 설정할 수 있습니다.)
D + Number	데이터 시트	SQL 실행 결과를 출력할 시트로 계산을 위한 임시 데이터 저장소로 사용합니다. 이름이 알파벳 "D"로 시작하는 모든 시트를 지칭합니다. 해당 시트는 서버에서 쿼리 실행 시점에 동적으로 시트가 생성되므로 수식 및 서식 등은 유지되지 않습니다.
P1	파라미터 정의 시트	SQL 실행 시 쿼리의 필터 조건으로 사용할 변수 값들을 관리하는 시트로, 실제 엑셀의 이름 정의를 설정한 경우만 파라미터 값으로 인식합니다.
T + Number	템플릿 시트	데이터 출력 시 출력 디자인 및 필드 매핑을 위해 사용하며, 현재는 서버 스크립트를 통해 템플릿 바인딩 규칙을 지정해야 합니다.
V + Number V_ + *	출력 대상 시트 eg. V2, V3, V4, V_메인, V_상세	다중 시트 지원 기능을 사용하거나 ActiveSheet를 지정 한 경우 해당 이름 규칙을 사용하여 적용됩니다.

1.2 보고서 양식 불러오기

MX-Grid 디자이너 창이 실행되면 i-MATRIX 메뉴의 [Open] 버튼을 눌러 파일 열기 창을 실행합니다.
보고서 양식 파일이 있는 위치를 선택하고 파일 확장자 목록을 [All files(*,*)]로 변경합니다.
양식 파일을 선택하고 [열기] 버튼을 클릭하여 엑셀 파일을 불러옵니다.
i-MATRIX 메뉴의 [Save] 버튼을 눌러 MX-Grid 컨트롤에 적용합니다.
기존에 열려있던 [새문서1] 창은 종료합니다.
참고 : 템플릿 양식 파일 설명
- V1 시트
  
  화면에 출력할 대상 시트입니다.
- D1 시트
  
  보고서에서 사용할 쿼리가 작성되어 있습니다.
- P1 시트
  
  SQL문에서 사용할 변수인 VS_DATE, VS_JO가 이름 정의되어 있습니다.
참고 : MX-Grid에서 변수 정의 방법
엑셀의 [이름 정의] 기능을 사용합니다.
이름에 변수명으로 사용할 텍스트를 입력합니다.
변수명을 입력한 셀과 이름정의(변수값) 셀 영역을 동시에 선택합니다.
Ctrl+Shift+F3 단축키 입력 또는 선택 영역에서 만들기를 눌러서 이름 정의 창을 실행합니다.
왼쪽 열 항목만 체크한 후 확인 버튼을 눌러 이름 정의를 완료합니다.

변수 확인 및 수정 방법
Ctrl+F3 단축키 입력 또는 수식 리본 메뉴에서 이름 관리자를 선택합니다.
이름 관리자에서 변수의 이름, 값, 참조 대상 등을 확인하거나 수정할 수 있습니다.
i-AUD 디자이너에서 [실행] 버튼을 눌러 MX-Grid 컨트롤에 양식이 정상적으로 적용되었는지 확인합니다.

Step 2. 데이터 연결하기

SQL을 작성하여 “EDU_DEV_UIBOT_DATA” 테이블의 데이터를 출력하여 양식과 연결합니다.

2.1 데이터셋 생성 및 출력

D1 시트에 미리 작성돼있는 SQL문을 복사합니다.
i-MATRIX > DB Bot > Dataset Manager를 선택하여 데이터셋 관리자 창을 실행합니다.
좌측 데이터셋 목록에서 마우스 우 클릭 후 "신규"를 선택합니다.
데이터베이스 연결 창에서 [EDU]를 선택한 후 [연결] 버튼을 눌러 데이터베이스를 연결합니다.
쿼리 입력 창에 복사한 쿼리를 붙여넣고, [데이터 미리보기 버튼]을 눌러 데이터가 조회되는지 확인합니다.
데이터를 보고서에 출력하기 위해 출력 유형과 출력 위치를 설정합니다,
(1) 출력 유형 : 표
(2) 출력 위치 설정 아이콘( ) 클릭
D1 시트에서 데이터를 출력할 첫 번째 셀을 선택합니다.
출력 위치가 설정된 것을 확인한 후 [닫기] 버튼을 눌러 데이터셋 관리자 창을 저장하고 닫습니다.

2.2 데이터 연결

출력한 데이터를 [=] 연산자를 이용해 V1 시트의 양식과 연결합니다.

Description
MX-GRID를 통해 보여주고자 하는 화면의 시트 명은 반드시 ‘V1’ 으로 설정해야 합니다.
[Svae] 버튼을 눌러 MX-Grid 디자이너를 저장한 후 i-AUD 디자이너에서 실행합니다.
i-AUD 디자이너의 [실행] 버튼을 눌러 데이터 연결이 정상적으로 되었는지 확인합니다.

Step 3. 조회 조건 설정하기

i-AUD 디자이너에서 조회 조건 컨트롤을 생성하여 데이터의 조회 조건을 설정합니다.

3.1 Calendar 생성

상단 메뉴 영역에서 UI Bot > Calendar > Month를 클릭해 Calendar 컨트롤을 생성합니다.
생성된 Calendar 컨트롤을 원하는 위치로 배치한 후, 화면 우측 속성 편집 영역에서 다음과 같이 속성을 설정합니다.
조회조건 명 변수 명 Control Type 초기 값 Data Format
년월 VS_DATE Month Calendar NOW() yyyy-MM
참고 : Calendar의 InitDate 설정
InitDate를 설정하여 캘린더 컨트롤의 초기값을 세팅합니다.
- 숫자
  20230101 또는 2023-01-01 등의 숫자 형식으로 입력합니다.
- NOW 함수
  NOW()를 입력하면 현재 날짜로 설정됩니다.
- DATE 함수
  DATE(0,0,0) = NOW()
  함수 안의 인자가 각각 DATE(년, 월, 일)을 뜻하며, 현재 날짜 기준으로 증감이 가능합니다.
  Ex) 현재 날짜보다 1년 전 날짜를 입력하고 싶을 때
  : DATE(-1,0,0)
- - DATE 함수에 사용할 수 있는 예약어 : F, L
    F(First) : 1900년, 1월, 1일
    L(Last) : 2999년, 12월, 해당 월의 마지막 날짜(28일~31일)
    Ex) 현재 년도의 1월 1일을 입력하고 싶을 때
    : DATE(0,F,F)
    현재 년월의 말일을 입력하고 싶을 때
    : DATE(0,0,L)
- FromTo 캘린더의 InitDate 설정 방법
  From Date와 To Date를 ;(세미콜론)으로 구분하여 작성합니다.
  Ex) DATE(-1,0,0);NOW()
참고 : DataFormat 설정

DataFormat 설정을 실제 데이터 타입과 동일하게 설정해야 정상적으로 조회가 가능합니다.

3.2 ComboBox 생성

상단 메뉴 영역에서 UI Bot > ComboBox > Combo를 클릭해 ComboBox 컨트롤을 생성합니다.
생성된 ComboBox 컨트롤을 원하는 위치로 배치한 후, 화면 우측 속성 편집 영역에서 다음과 같은 속성을 설정합니다.
조회조건 명 변수 명 Control Type DataSource Event
조 VS_JO ComboBox CB_JO(공통 데이터소스 사용) AutoRefresh 활성화

3.3 조회 Button 생성

상단 메뉴 영역에서 Button > Button을 클릭해 Button 컨트롤을 생성합니다.
생성한 Button 컨트롤을 원하는 위치로 배치한 후, 화면 우측 속성 편집 영역에서 다음과 같은 속성을 설정합니다.
컨트롤 명 Control Type Text
조회 버튼 Button 조회