표는 여러 데이터를 한 눈에 볼 수 있게 표시하고 편집하는 기능을 제공합니다. 이번 장에서는 표에 데이터를 표시하고 다루는 방법을 살펴봅니다.
표에 데이터 표시하기
Grid 컴포넌트를 사용해 표에 데이터를 표시하는 방법을 살펴봅니다.
실제 업무에서는 원격에 있는 데이터베이스에서 가져온 데이터를 사용하겠지만 이번 장에서는 임의의 데이터를 넥사크로 스튜디오에서 입력하고 이를 사용합니다.
1
화면에 Dataset 오브젝트를 배치합니다.
컴포넌트 툴바에서 원통 모양의 아이콘을 찾아주세요.
Button 컴포넌트와 다르게 Dataset 오브젝트는 화면에 표시되지 않습니다. Dataset 오브젝트는 데이터를 관리하는 보이지 않는 형태이기 때문입니다. 이런 오브젝트는 Invisible Object 창에 따로 표시합니다.
2
Invisible Object 창 목록에서 Dataset 오브젝트 아이콘을 더블 클릭합니다.
편집 화면과 속성창 사이에 Dataset Editor가 표시됩니다.
3
Dataset Editor의 Columns 툴바에서 "+" 모양의 아이콘(Add column to the dataset)을 클릭합니다.
첫 번째 컬럼 항목이 "Column0"이라는 id로 추가됩니다.
4
id 값이 표시된 부분을 클릭하고 "Column0"에서 "Name"으로 수정합니다.
Columns 항목에서 id는 표에서 제목줄에 표시되는 이름 역할을 합니다.
5
Dataset Editor의 Columns 툴바에서 "+" 모양의 아이콘(Add column to the dataset)을 클릭합니다.
6
추가된 두 번째 컬럼 항목의 id 값을 "City"로 수정합니다.
7
Dataset Editor의 Rows 툴바에서 "+" 모양의 아이콘(Add row to the dataset)을 5번 클릭합니다.
5개의 빈 Row가 만들어집니다.
8
Name, City 항목의 데이터를 입력합니다.
9
화면에 Grid 컴포넌트를 배치합니다.
10
Invisible Object 창 목록에서 Dataset 오브젝트 아이콘를 마우스 왼쪽 버튼을 누른 상태에서 Grid 컴포넌트로 드래그합니다.
11
Grid 컴포넌트의 경계선이 굵게 바뀌면 마우스 왼쪽 버튼을 놓습니다.
12
Dataset 오브젝트에 입력한 데이터가 Grid 컴포넌트에 표시되는 것을 확인합니다.
표에서 선택한 데이터를 Edit 컴포넌트에서 수정하기
Grid 컴포넌트에 Dataset 오브젝트를 연결해서 데이터를 표시하는 것을 데이터 바인딩이라고 합니다. 이번에는 Grid 컴포넌트에서 선택한 Row에 해당하는 값을 Edit 컴포넌트에 표시하고 수정하는 방법을 살펴봅니다.
이번 실습은 "표에 데이터 표시하기"에서 만든 결과물에서 이어서 진행합니다.
1
Grid 컴포넌트를 선택하고 속성창에서 autofittype 속성값을 "col"로 변경합니다.
Grid 크기에 맞게 컬럼 너비를 자동 조정합니다.
2
Edit 컴포넌트를 화면에 배치합니다.
3
Invisible Object 창 목록에서 Dataset 오브젝트 아이콘를 마우스 왼쪽 버튼을 누른 상태에서 Edit 컴포넌트로 드래그합니다.
4
Edit 컴포넌트의 경계선이 굵게 바뀌면 마우스 왼쪽 버튼을 놓습니다.
5
Bind Item 창이 뜨면 Column ID 항목값을 "Name"으로 선택하고 [OK] 버튼을 클릭합니다.
6
넥사크로 스튜디오 상단에 있는 툴바 중에서 돋보기 모양 아이콘(QuickView)을 클릭합니다.
7
Grid 컴포넌트에 첫 번째 Row가 선택된 상태이고 Edit 컴포넌트에 첫 번째 Row의 Name 데이터가 표시되는지 확인합니다.
8
다른 Row 선택 시 선택한 Row의 데이터가 표시되는지 확인합니다.
9
Edit 컴포넌트에서 다른 값을 입력하고 Enter 키 입력 시 Grid 컴포넌트의 데이터가 바뀌는 것을 확인합니다.
10
다시 넥사크로 스튜디오로 돌아와서 화면에 Edit 컴포넌트를 하나 더 배치합니다.
11
Invisible Object 창 목록에서 Dataset 오브젝트 아이콘를 마우스 왼쪽 버튼을 누른 상태에서 두 번째 Edit 컴포넌트로 드래그합니다.
12
Edit 컴포넌트의 경계선이 굵게 바뀌면 마우스 왼쪽 버튼을 놓습니다.
13
Bind Item 창이 뜨면 Column ID 항목값을 "City"로 선택하고 [OK] 버튼을 클릭합니다.
14
넥사크로 스튜디오 상단에 있는 툴바 중에서 돋보기 모양 아이콘(QuickView)을 클릭합니다.
15
Grid 컴포넌트에 첫 번째 Row가 선택된 상태이고 Edit 컴포넌트에 첫 번째 Row의 Name, City 데이터가 표시되는지 확인합니다.
표에서 데이터 수정하기
Grid 컴포넌트에서 선택한 Row에 해당하는 값을 Edit 컴포넌트에 연결해서(데이터 아이템 바인딩) 데이터를 표시하고 수정해보았습니다. 이번에는 Grid 컴포넌트에서 직접 데이터를 수정하는 방법을 살펴보겠습니다.
이번 실습은 "표에 데이터 표시하기"에서 만든 결과물에서 이어서 진행합니다.
1
Grid 컴포넌트를 더블클릭합니다.
2
Grid Contents Editor가 새 창으로 표시되는 것을 확인합니다.
3
Name 컬럼 아래에 row1 항목을 클릭합니다.
4
Grid Contents Editor 속성창에서 editype 속성 항목을 찾고 속성값을 "text"로 변경합니다.
5
[OK] 버튼을 클릭하고 Grid Contents Editor를 닫습니다.
6
넥사크로 스튜디오 상단에 있는 툴바 중에서 돋보기 모양 아이콘(QuickView)을 클릭합니다.
7
수정할 Row의 Name 컬럼 항목을 더블클릭하면 편집 상태로 전환됩니다. 변경할 값을 입력하고 Enter 키를 입력합니다.
8
변경한 값이 Grid 컴포넌트와 Edit 컴포넌트에 반영된 것을 확인합니다.
더 많은 내용 찾아보기
Grid 컴포넌트는 다양한 기능을 지원합니다. 컴포넌트 활용 워크북에서 다양한 사용 방법을 살펴보세요.
Grid 컴포넌트와 비슷하지만 좀 더 자유로운 형식으로 편집할 수 있는 ListView 컴포넌트도 같이 살펴보세요.
컴포넌트 활용 워크북
Grid 컴포넌트에 표시된 데이터를 스프레드시트 파일로 내보내거나 스프레드시트 파일의 데이터를 Grid 컴포넌트로 가져올 수 있습니다.
컴포넌트 활용 워크북