title: "DataGrid 표시 — array 변수를 화면에 연결" chapter: 7 images:

• datagrid-properties.png
• datagrid-columns-editor.png
• datagrid-result.png

DataGrid 표시 — array 변수를 화면에 연결

QMachineStudio 의 DataGrid 컨트롤은 XAML 바인딩을 사용하지 않습니다. 대신 XDesigner 속성창의 DataName 프로퍼티에 스크립트 array 변수의 이름을 적어두면, DataGrid 가 그 변수를 주기적으로 읽어 자동으로 행을 그립니다.

이 한 가지 사실이 화면 표시의 모든 패턴을 단순하게 만듭니다.

동작 방식 한 줄 요약

스크립트가 array DispData[] 에 ‘콤마 구분 문자열 1행’ 씩 채우면, DataGrid 가 자동으로 STR.ParseCommaString 으로 분해해 Column1, Column2, … 에 매핑한다.

스크립트 측                DataGrid 컨트롤
───────────────────────  ────────────────────────────
array DispData[]         DataName  = ViewOH::DispData
   ↓                     Columns   = [ID, OrderNo, ...]
DispData.Add("0001,A,B")
DispData.Add("0002,C,D")  →  자동 렌더 (다음 갱신 주기)

1·2·3 단계로 끝나는 XDesigner 작업

1. 새 View 페이지 만들기

Solution Explorer → Pages → + New Page 로 ViewOrderHistory 를 추가합니다. 자동으로 ViewOrderHistory.xms (스크립트) 와 ViewOrderHistory.xaml (디자인) 한 쌍이 만들어집니다.

2. DataGrid 컨트롤 드래그

XDesigner 툴박스에서 DataGrid 를 화면 위로 드래그합니다.

3. 속성창에서 두 가지만 설정

이게 전부입니다. ItemsSource, {Binding}, DataContext 같은 WPF 식 바인딩은 설정하지 않습니다.

Columns 편집기

[Columns] 우측의 [...] 버튼을 누르면 List 편집기가 열립니다. 행마다 한 컬럼씩 정의합니다.

권장 설정 (order_history 시나리오)

#1 컬럼이 자동으로 Column1, #2 가 Column2 … 로 매핑되며, 스크립트가 DispData[i] = "0001,20260501_001,떡볶이,09:00:05,105.4,OK" 라고 채우면 콤마 분리 결과 ["0001", "20260501_001", "떡볶이", "09:00:05", "105.4", "OK"] 가 그대로 셀에 들어갑니다.

Type 으로 어떤 차이가 나나

• Integer / RealNumber — 우정렬 + Format 적용 (F1, F2, D04, …)
• Text — 그대로 출력
• ComboBox — 미리 정의된 항목 중 하나로 강조 표시 (예: OK, NG)

스크립트 측 — 변수 선언과 갱신

변수 선언

// ViewOrderHistory.xms 모듈 상단
 
// DataGrid 의 DataName 이 가리키는 변수
array  DispData[] = {",,,,,"};
 
// Label / TextBlock 에 직접 연결되는 통계 변수
int    TodayCount;
int    TodayNg;
double TodayAvgWeight;

array 의 초기값을 빈 콤마 6개(컬럼 수만큼) 로 두면, 화면 첫 진입 시점에 DataGrid 가 빈 행을 그리지 않습니다.

화면 진입 즉시 갱신 — OnShow

FUNCTION OnShow(string sender, int tag, array params)
{
   RefreshList();
   UpdateStats();
}

RefreshList · UpdateStats 는 6장에서 만든 함수입니다. OnShow 가 끝나면 DataGrid 와 Label 모두 채워진 상태로 화면이 표시됩니다.

주기 갱신 — OnTimer

FUNCTION OnTimer(string sender, int tag, array params)
{
   // 5초마다 자동 갱신
   if( SYS.SecondCount % 5 == 0 )
   {
      RefreshList();
      UpdateStats();
   }
}

운영 모니터링 화면에 적합합니다. SYS.SecondCount 는 1초마다 1씩 증가하는 시스템 카운터입니다. % 5 == 0 으로 5초 주기를 만들 수 있습니다.

이벤트 즉시 갱신 — 버튼 / 다이얼로그 후

FUNCTION OnEndOrderClick(string sender, int tag, array params)
{
   if( EndOrder(/*orderNo*/DispOrderNo,
                /*weightG*/DispWeight,
                /*result*/DispResult,
                /*isError*/false) )
   {
      RefreshList();   // 저장 직후 즉시 화면 반영
      UpdateStats();
   }
}

저장 직후 사용자가 결과를 즉시 확인할 수 있어야 하는 화면이라면, 5초를 기다릴 필요가 없습니다.

스칼라 → Label 직접 연결

DataGrid 와 별개로, 통계 셀은 Label 한 개당 변수 한 개 로 연결합니다.

XDesigner 측:

스크립트의 UpdateStats() 가 변수를 갱신하면 Label 도 자동으로 다시 그려집니다.

결과 미리보기

상단 Label : 오늘 처리 3건 · NG 0건 · 평균 무게 234.4 g

자주 하는 실수

1. DataName 에 모듈 접두를 빠뜨림 DispData 만 적으면 어느 모듈의 변수인지 알 수 없습니다. 항상 모듈명::변수명 형식.

✗  DataName = DispData
✓  DataName = ViewOrderHistory::DispData

2. 콤마 구분 문자열의 컬럼 수가 안 맞음 Columns 6개로 정의해 두고 스크립트에서 콤마 5개짜리 문자열을 넣으면 마지막 컬럼이 빈 셀로 표시됩니다. 컬럼 수와 콤마 분리 결과 수를 항상 일치시키십시오.

3. 값 안에 콤마가 들어감 menu_name 이 "불고기, 추가" 처럼 콤마를 포함하면 DataGrid 가 잘못 분해합니다. 사전에 STR.Replace(name, ",", "·") 등으로 치환하거나, 별도 구분자(|) 사용 후 컬럼 분리도 직접 처리해야 합니다.

4. 갱신 시점이 너무 잦음 OnTimer 가 1초마다 도는 화면에서 매번 RefreshList 를 호출하면 DB 잠금/CPU 가 부담됩니다. 5초 주기 (% 5 == 0) 가 권장 기본값입니다.

디자인 시점에 미리보기

XDesigner 는 디자인 시간에 array 변수 값을 모르므로, DataGrid 는 처음에 빈 상태로 보입니다. array DispData[] = {",,,,,", "0001,test,...,..."} 처럼 샘플 행을 넣어두면 디자인 화면에서도 미리보기 가 가능합니다. 운영 시점에는 DispData.Clear() 가 첫 줄에 있으니 자동으로 비워집니다.

학습 포인트

• DataName 한 줄이 핵심. 스크립트가 array 를 채우면 화면이 자동으로 갱신됩니다.
• 콤마 구분 문자열 한 행 — 컬럼 수와 정확히 맞추는 것이 운영 안정성의 절반입니다.
• 세 가지 갱신 트리거 — OnShow (즉시) / OnTimer (주기) / 이벤트 (직후) 를 조합합니다.
• DataGrid + Label 은 별개 로 연결합니다. DataGrid 는 array, Label 은 스칼라.

체크포인트

1. XDesigner 에서 DataGrid 의 속성창에 DataName = ViewOrderHistory::DispData 가 보인다.
2. 화면 진입 즉시 행이 보인다 (OnShow → RefreshList).
3. 5초 후 새 INSERT 가 자동으로 추가된다 (OnTimer → RefreshList).
4. [End Order] 버튼 클릭 직후 행 결과가 갱신된다 (이벤트 즉시 갱신).

다음 단계

8장 — Database Events 이벤트 후킹