툴바에서 Dataset 오브젝트 아이콘 선택하고 배치하기
1
컴포넌트 툴바에서 Dataset 오브젝트를 선택합니다. 컴포넌트 아이콘 위에 마우스를 가져가면 컴포넌트 이름이 툴팁으로 표시됩니다.
컴포넌트 툴바에서 Dataset 오브젝트를 선택한 상태에서는 디자인 화면 내에서 마우스 포인터가 Dataset 오브젝트 아이콘으로 변경됩니다.
2
디자인 화면 내 아무 곳에나 마우스를 클릭합니다. Dataset 오브젝트는 화면에 표시되지 않기 때문에 배치된 위치는 아무 의미가 없습니다. 마우스를 클릭하면 [Invisible Object] 영역에 Dataset 오브젝트가 추가됩니다.
[Invisible Object] 영역이 보이지 않으면 디자인 화면 위에서 마우스 오른쪽 버튼을 클릭한 후 표시되는 컨텍스트 메뉴에서 [Show Invisible Object Area] 항목을 선택합니다.
Dataset Editor 실행하기
Dataset 오브젝트에서 처리할 데이터 컬럼 형식과 데이터를 지정할 수 있는 도구를 제공합니다. Dataset Editor를 실행해서 적절한 컬럼을 생성하고 데이터를 추가할 수 있습니다.
1
[Invisible Object] 영역에서 Dataset 오브젝트를 더블클릭합니다.
2
속성창 왼쪽에 [Dataset Editor]가 실행됩니다. 사용하지 않을때는 오른쪽 [x] 버튼을 클릭해 창을 닫습니다. [Dataset Editor]는 Dataset 오브젝트를 더블클릭하거나 메뉴[View > Dataset Editor]를 선택하면 다시 창을 표시합니다.
Dataset 오브젝트에 컬럼 추가하기
Dataset 오브젝트에 데이터를 담기 위해서는 어떤 데이터를 담을지에 대한 정보를 설정해주어야 합니다. 이를 컬럼이라 하고 Dataset Editor에서 컬럼을 추가할 수 있습니다.
1
[Invisible Object] 영역에서 Dataset 오브젝트를 더블클릭합니다.
2
속성창 왼쪽에 [Dataset Editor]가 실행됩니다. [Dataset Editor] 중간에 있는 [Columns] 항목에서 컬럼 추가 아이콘을 클릭합니다.
3
[Columns] 항목에 새로운 컬럼이 추가됩니다. 관련된 속성값(id, type, size 등)은 해당하는 셀을 마우스로 클릭한 후 수정할 수 있습니다.
4
2개 컬럼을 추가하고 id값을 "code", "item"으로 수정합니다. 컬럼을 추가하면 아래에 있는 [Rows] 항목에 추가한 컬럼 정보가 표기되는 것을 확인할 수 있습니다.
Dataset 오브젝트에 데이터 추가하기
컬럼 정보가 만들어지면 데이터를 추가할 수 있습니다.
1
[Invisible Object] 영역에서 Dataset 오브젝트를 더블클릭합니다.
2
속성창 왼쪽에 [Dataset Editor]가 실행됩니다. [Dataset Editor] 아래에 있는 [Rows] 항목에서 데이터 추가 아이콘을 클릭합니다.
3
데이터가 추가되면 해당하는 셀을 마우스로 클릭해 원하는 값을 입력합니다.
Grid 컴포넌트에 Dataset 오브젝트 바인딩하기
컴포넌트와 Dataset 오브젝트를 바인딩한다는 것은 데이터를 공유하도록 연결하는 것입니다. 바인딩된 상태에서 Dataset 오브젝트의 데이터가 추가되거나 변경되면 컴포넌트에 표시되는 데이터도 같이 변경됩니다. 반대로 컴포넌트에서 데이터를 추가, 삭제하거나 변경하면 Dataset 오브젝트의 데이터도 같이 변경됩니다.
1
디자인 화면에 Grid 컴포넌트를 배치합니다.
2
[Invisible Object] 영역에서 Dataset 오브젝트를 마우스 왼쪽 버튼을 눌러 선택하고 드래그해서 디자인 화면에 있는 Grid 컴포넌트 위로 가져갑니다.
3
Grid 컴포넌트 위에서 누르고 있던 마우스 왼쪽 버튼을 놓으면 자동으로 데이터 바인딩이 처리됩니다. 아무것도 표시되지 않던 Grid 컴포넌트에는 Dataset 오브젝트에 설정한 컬럼 정보와 데이터가 표시됩니다.
4
변경된 내용을 저장하고 툴바에서 [QuickView] 항목을 선택합니다. 넥사크로 브라우저가 실행되면서 화면에 Grid 컴포넌트가 표시되고 바인딩된 데이터도 확인할 수 있습니다.
Edit 컴포넌트에 Dataset 오브젝트 바인딩하기
Grid 컴포넌트의 경우에는 Dataset 오브젝트의 컬럼 정보와 데이터를 표 형식으로 모두 표시합니다. 하지만 Edit 컴포넌트처럼 하나의 데이터만 표시할 수 있는 경우에는 바인딩한 Dataset 오브젝트의 어떤 정보를 표시할 수 있을까요? 화면에는 보이지 않지만 Dataset 오브젝트 내부에는 선택된 행(Row) 정보를 가지고 있고 Edit 컴포넌트같은 경우에는 선택된 행에서 원하는 컬럼 정보를 선택해서 표시합니다.
1
디자인 화면에 Edit 컴포넌트를 배치합니다.
2
[Invisible Object] 영역에서 Dataset 오브젝트를 마우스 왼쪽 버튼을 눌러 선택하고 드래그해서 디자인 화면에 있는 Edit 컴포넌트 위로 가져갑니다.
3
Edit 컴포넌트 위에서 누르고 있던 마우스 왼쪽 버튼을 놓으면 [Bind Item] 설정창이 표시됩니다. [Bind Item] 설정창에서는 Edit 컴포넌트에서 바인딩할 속성과 Dataset 오브젝트에서 바인딩할 컬럼을 선택합니다.
Edit 컴포넌트는 넥사크로 스튜디오 디자인 화면에서는 바인딩된 값이 표시되지 않습니다. 애플리케이션 실행 시 선택된 행(Row) 정보에 따라 값을 표시합니다.
4
변경된 내용을 저장하고 툴바에서 [QuickView] 항목을 선택합니다. 넥사크로 브라우저가 실행되면서 화면에 Edit 컴포넌트가 표시되고 바인딩된 값을 확인할 수 있습니다. 행(Row) 정보를 건드리지 않았기 때문에 첫 번째 행(Row) 데이터인 "Toy"가 표시됩니다.
Grid 컴포넌트와 Edit 컴포넌트에 Dataset 오브젝트 바인딩하기
Edit 컴포넌트에 Dataset 컴포넌트를 바인딩하는 경우에는 행(Row) 정보에 따라 표시되는 데이터가 달라진다고 했습니다. 이번에는 Grid 컴포넌트와 Edit 컴포넌트에 같은 Dataset 오브젝트를 바인딩해서 Grid 컴포넌트의 행(Row)을 선택할 때마다 Edit 컴포넌트에 표시되는 값이 달라지는 예제를 다룹니다.
Grid 컴포넌트와 Edit 컴포넌트에 Dataset 오브젝트를 바인딩하는 방법은 이전 예제를 참고해주세요.
1
디자인 화면에 Grid 컴포넌트와 Edit 컴포넌트를 배치합니다.
2
Dataset 오브젝트를 선택하고 Grid 컴포넌트와 Edit 컴포넌트에 바인딩합니다.
3
변경된 내용을 저장하고 툴바에서 [QuickView] 항목을 선택합니다. 넥사크로 브라우저가 실행되면서 화면에 Grid 컴포넌트와 Edit 컴포넌트가 표시되고 바인딩된 값을 확인할 수 있습니다. 행(Row) 정보를 건드리지 않았기 때문에 첫 번째 행(Row)이 선택되어 있고 Edit 컴포넌트에는 "Toy"가 표시됩니다.
4
마우스로 Grid 컴포넌트의 두 번째 행(Row)을 클릭합니다. Edit 컴포넌트의 값이 달라지는 것을 확인할 수 있습니다. 다시 첫 번째 행(Row)을 선택하면 Edit 컴포넌트의 값이 달라집니다.