데이터 바인딩

Dataset 오브젝트의 데이터를 컴포넌트에 연결해 텍스트를 표시하거나 컴포넌트의 속성값을 설정할 수 있습니다. 그리고 컴포넌트에서 편집한 값은 Dataset 오브젝트의 데이터로 반영됩니다. 데이터를 컴포넌트에 연결하는 작업을 데이터 바인딩이라고 합니다. Grid 컴포넌트처럼 Dataset 오브젝트의 데이터를 모두 연결하거나 Edit 컴포넌트처럼 선택한 Row에 해당하는 특정 컬럼 데이터만 연결할 수 있습니다.

데이터 바인딩 설정하기

폼 디자인 시 생성한 Dataset 오브젝트를 컴포넌트에 끌어다 놓거나 속성창에서 바인딩 관련 속성을 선택해 데이터를 바인딩할 수 있습니다.

Dataset 오브젝트를 컴포넌트에 끌어다 놓을 때 컴포넌트의 종류에 따라 formats 속성값 설정, Bind InnerDataset 또는 Bind Item Editor 기능이 호출됩니다. 각 설정창에서 연결할 속성과 컬럼 정보를 지정할 수 있습니다.

Bind Global Dataset

formats 속성값 설정

Grid, ListView 컴포넌트처럼 binddataset, formats 속성을 가진 컴포넌트는 Dataset 오브젝트를 끌어다놓거나 속성창에서 binddataset 속성값 설정 시 Dataset 오브젝트의 데이터에 따라 formats 속성값을 자동으로 설정합니다.

formats 속성값은 Grid Contents Editor 또는 ListView Contents Editor에서 원하는 형태로 수정할 수 있습니다.

Bind InnerDataset

ListBox나 Combo와 같이 목록 형식으로 데이터를 표현할 수 있는 컴포넌트에 Dataset을 바인딩하는 경우에 Dataset의 칼럼을 지정할 수 있는 Bind InnerDataset 기능이 호출됩니다.

Inner Bind Dataset
속성	설명
codecolumn	내부에서 코드로 사용되는 칼럼을 지정
datacolumn	컴포넌트에 보이는 칼럼을 지정

컴포넌트에 따라 설정할 수 있는 컬럼은 달라질 수 있습니다. 아래 표를 참고하세요.

Inner Bind Dataset
컴포넌트	컬럼과 연결되는 속성
Combo, ListBox, Radio	codecolumn, datacolumn
Calendar	backgroundcolumn, bordercolumn, datecolumn, textcolorcolumn
Menu, PopupMenu, TrayPopupMenu	captioncolumn, checkboxcolumn, enablecolumn, hotkeycolumn, iconcolumn, idcolumn, levelcolumn, userdatacolumn

TrayPopupMenu는 Bind InnerDataset 창을 사용하지 않고 Tray 설정 화면에서 innerdataset을 설정하고 각 컬럼 연결 속성을 설정합니다.

Bind Item Editor

Dataset 오브젝트를 끌어다 놓을 때 innerdataset 속성을 가지고 있는 컴포넌트의 경우에는 Bind InnerDataset 또는 Bind Item을 선택할 수 있습니다. innerdataset 속성이 없는 컴포넌트는 Bind Item Editor가 바로 실행됩니다.

Bind Item Editor

Bind Item Editor
	속성	설명
1	Bind ID	사용자 분류 ID
2	Object	Dataset이 바인딩 되는 컴포넌트 ID
3	Property	Dataset이 바인딩 되는 컴포넌트 속성
4	Dataset	컴포넌트에 바인딩하는 Dataset
5	Column ID	컴포넌트에 바인딩하는 Dataset의 칼럼 ID

Dataset 오브젝트가 폼이나 컴포넌트에 바인딩되면 Project Explorer의 해당 아이템에 다른 컴포넌트와 다르게 표시가 되어 쉽게 확인할 수 있습니다.

Dataset 오브젝트가 innerdataset 속성을 가지고 있는 컴포넌트의 innerdataset 속성으로 바인딩된 경우에는 Project Explorer에서 해당 컴포넌트의 아이콘을 다르게 표시하지 않습니다. 바인딩 상태 아이콘 표시는 Bind Item Editor로 설정한 경우에만 해당합니다.

Bind Mark

Bind Dataset Editor

디자인 화면에서 Form 오브젝트 또는 컴포넌트를 선택하고 컨텍스트 메뉴에서 "Bind Dataset" 항목을 선택하면 여러 Dataset 오브젝트와 바인딩 설정을 할 수 있습니다.

Bind Item Editor
	속성	설명
1	Target Component	컴포넌트를 선택하고 Bind Dataset 기능을 실행한 경우에는 선택한 컴포넌트가 표시됩니다. 다른 컴포넌트를 선택하거나 "Create Component"를 선택하고 새로운 컴포넌트를 생성할 수 있습니다.
2	Dataset	사용할 수 있는 Datset 오브젝트 목록입니다. Form 내에 있는 Dataset 오브젝트와 Global Dataset으로 설정한 Dataset 오브젝트를 표시합니다.
3	Bind Type	Target Component에 따라 선택할 수 있는 Bind Type이 활성화됩니다.
4	Property	Bind Type에 따라 설정할 수 있는 속성 목록이 표시됩니다. 현재 선택한 상태의 Dataset 오브젝트와 바인딩된 경우에는 검은색으로 컬럼 id가 표시되고 선택하지 않은 Dataset 오브젝트와 바인딩된 항목은 빨간색으로 표시됩니다.

Bind Item 추가, 편집하기

Create Component & Bind Item Editor

Bind Item Editor와 마찬가지로 컴포넌트에 Dataset을 바인딩하는 경우에 사용합니다. 차이점은 Bind Item Editor의 경우 미리 생성된 컴포넌트에 바인딩하지만, Create Component & Bind Item Editor는 컴포넌트 생성과 동시에 바인딩할 수 있도록 하는 기능을 제공합니다.

Ctrl키를 누른 상태에서 Dataset 오브젝트를 Form영역으로 끌어다 놓으면 편집창을 띄울 수 있습니다.

Bind Item List는 Bind Item Editor에서 추가한 값입니다. 해당 목록에서 직접 편집할 수는 없으며 정보만 확인합니다.

Bind State 아이콘 표시하고 편집하기

Form에서 오른쪽 마우스를 클릭했을 때 나타나는 메뉴에서 [State View]를 선택하고 [Bind] 항목을 선택하면 Bind State 상태가 되고 바인딩된 컴포넌트를 확인할 수 있습니다.

바인딩된 컴포넌트는 오른쪽 하단에 Dataset 아이콘이 표시되고 아이콘을 클릭하면 Bind Item Editor가 표시됩니다.

속성창에서 편집하기

컴포넌트를 선택하고 속성창에서 [Bindable] 아이콘을 클릭하면 각 속성별로 Bind Item을 추가하거나 편집할 수 있습니다.

데이터 바인딩 정보 확인하기

Invisible Objects 창

앱 개발 시 사용하지만, 화면에 보이지 않는 오브젝트는 별도로 관리할 수 있는 Invisible Objects 영역이 제공됩니다. 해당 창은 도킹창 형태로 제공합니다.

Invisible Object창이 표시되지 않는다면 메뉴[Design] 항목 중에서 "Show Invisible Object Area"를 선택하면 Invisible Object창을 열 수 있습니다.

Invisible Object창에서 컨텍스트 메뉴를 호출하면 Icon 표시 방법을 변경할 수 있습니다.

Invisible Object창에 항목이 많을 경우 바로 원하는 항목을 찾을 수 있는 필터링 기능을 제공합니다. 필터링을 위해 입력한 텍스트와 id가 일치하는 부분이 있는 오브젝트를 드롭다운 목록으로 표시합니다. 목록은 id 속성값 알파벳 순서로 정렬해 표시합니다.

목록에서 원하는 오브젝트를 선택하면 해당 오브젝트가 선택한 상태가 됩니다.

구분자(스페이스, 콤마, 세미콜론)를 사용해 필터링 항목을 여러 개 사용할 수 있습니다.

Binding Components List 창

Invisible Objects 창에서 선택한 Dataset 오브젝트와 바인딩된 컴포넌트 목록을 표시합니다. 목록으로 표시된 컴포넌트 항목 위로 마우스 커서를 가져가면 바인딩 정보를 표시하고 컴포넌트 항목을 더블클릭하거나 컨텍스트 메뉴에서 "Edit"를 선택하면 Bind Dataset 에디터를 실행합니다.

콘텐츠 에디터

Grid Contents Editor

Grid 컴포넌트는 속성창에서 볼 수 있는 속성 외에 Grid를 구성하는 각 Cell 단위별로 추가적인 속성을 가지고 있습니다. Grid Contents Editor는 Grid의 추가적인 속성을 편집할 수 있는 기능을 제공합니다.

디자인 창에서 Grid 컴포넌트를 더블 클릭하면 Grid Contents Editor를 호출할 수 있습니다.

Grid Contents Editor는 기본 편집 창, 속성 창 및 Design Source로 구성되어 있습니다. 기본 편집 창에서는 컨텍스트 메뉴와 단축키를 사용하여 Cell을 추가/삭제하거나 속성을 편집할 수 있습니다. 기본 편집 창의 최상단에는 Column Index가 표시되고 아래로는 Head, Body, Summary로 구분되어 표시됩니다. 속성 창에는 Cell 구분, 해당 Cell의 속성 목록, 각각의 속성값이 표시됩니다.

기본 편집 창

Grid Contents Editor[Formats]

Grid Contents Editor 상단 툴바 또는 오른쪽 마우스 클릭 후 나타나는 메뉴에서 필요한 기능을 선택할 수 있습니다.

Bind Item Editor
	속성	설명
1	Format	Format을 추가하거나 삭제할 수 있습니다.
2	Add Column	Column을 추가합니다. 기본 기능은 Body Column을 추가하며 선택에 따라 Left, Right Column을 추가할 수 있습니다.
3	Add Head Row	Head Row를 추가합니다.
4	Add Body Row	Body Row를 추가합니다.
5	Add Summary Row	Summary Row를 추가합니다.
6	Add	선택한 Row나 Column 항목을 마지막 항목으로 추가합니다. Cell을 선택한 경우에는 Columns, Rows 중 하나를 선택합니다.
7	Insert	선택한 Row나 Column 항목을 이전 항목으로 추가합니다. Cell을 선택한 경우에는 Columns, Rows 중 하나를 선택합니다.
8	Delete	선택한 Row나 Column 항목을 삭제합니다. Cell을 선택한 경우에는 Columns, Rows 중 하나를 선택합니다.
9	Merge Cells	2개 이상의 셀을 선택한 경우 셀을 합칩니다. 기본 기능은 선택한 셀을 하나로 합치며 선택에 따라 개별셀 속성은 유지한 상태로 합치는 기능을 사용할 수 있습니다.
10	Split Cell	합쳐진 셀을 해제합니다.
11	Same Width	선택한 Column 너비를 조정합니다. 마지막에 선택된 Column 기준으로 조정하거나 직접 값을 지정할 수 있습니다.
12	Same Height	선택한 Row 높이를 조정합니다. 마지막에 선택된 Row 기준으로 조정하거나 직접 값을 지정할 수 있습니다.
13	속성창	선택한 항목의 속성창 head, body, summary Row의 셀 선택 시에는 컨텍스트 메뉴에서 사용자 속성을 추가하거나 삭제할 수 있습니다.

head 또는 Body 영역의 Row가 많은 경우 에디터 왼쪽에 있는 제목 영역을 더블클릭하면 해당 영역만 보이거나 전체 영역이 보이도록 선택할 수 있습니다.

Format

같은 데이터를 다양한 관점에서 살펴보거나 사용권한에 따라 데이터 일부를 감추어야 하는 경우 하나의 Grid에서 여러 Format을 사용해 데이터를 처리할 수 있습니다.

새로 Format을 추가하거나 기존 Format을 복사한 후 일부 항목을 수정할 수 있습니다. Grid에서 Format을 적용할 때는 formatid 속성값을 지정해 원하는 Format을 선택합니다.

Design Source

Design Source 창에서는 편집된 내용을 XML 형태로 표시되며 원하는 항목을 직접 수정할 수 있습니다.

Grid Contents Editor[Design Source]

ListView Contents Editor

ListView 컴포넌트는 속성창에서 볼 수 있는 속성 외에 ListView를 구성하는 각 Band, Cell 단위별로 추가적인 속성을 가지고 있습니다. ListView Contents Editor는 ListView의 추가적인 속성을 편집할 수 있는 기능을 제공합니다.

디자인 창에서 ListView 컴포넌트를 더블 클릭하면 ListView Contents Editor를 호출할 수 있습니다.

ListView Contents Editor는 기본 편집 창, 밴드 편집 창, 속성 창 및 Design Source로 구성되어 있습니다. 기본 편집 창에서는 컨텍스트 메뉴와 단축키를 사용하여 Body, Detail 밴드를 추가/삭제하거나 속성을 편집할 수 있습니다. 기본 편집 창의 왼쪽은 Body, Detail 로 구분되어 표시됩니다. 속성 창에는 밴드 또는 셀 속성값이 표시됩니다.

기본 편집 창

Grid Contents Editor[Formats]

ListView Contents Editor 상단 툴바 또는 오른쪽 마우스 클릭 후 나타나는 메뉴에서 필요한 기능을 선택할 수 있습니다.

Bind Item Editor
	속성	설명
1	Format	Format을 추가하거나 삭제할 수 있습니다.
2	툴바	Body, Detail 밴드를 추가, 삭제하거나 밴드 편집 창으로 전환합니다. 컨텍스트 메뉴에서도 선택할 수 있습니다. Append Body(Detail): Body(Detail) 밴드를 추가합니다. 이미 추가된 경우에는 비활성화됩니다. Delete Body(Detail): Body(Detail) 밴드를 삭제합니다. Edit Body(Detail): Body(Detail) 밴드 편집 창으로 전환합니다. 밴드 영역 내 각 셀을 편집할 수 있습니다.
3	속성창	선택한 Body(Detail) 밴드의 속성을 표시하고 편집할 수 있습니다.

밴드 편집 창

기본 편집 창에서 [Edit Body] 또는 [Edit Detail] 메뉴 선택 시 밴드 편집 모드로 전환됩니다.

Bind Item Editor
	속성	설명
1	툴바 (셀)	셀을 선택하거나 편집 영역의 위치를 수정할 수 있으며 새로운 셀을 추가할 수 있습니다. Select: 하나 이상의 셀을 선택할 수 있습니다. Move: 화면이 그려지는 캔버스 영역의 위치를 이동합니다. Cell: 새로운 셀을 추가합니다. Exit Editor: 기본 편집 모드로 전환합니다.
2	툴바 (Align)	배치된 셀의 위치를 정렬하거나 크기를 맞출 수 있습니다. Align 항목의 설명을 참고하세요.
3	편집창	컴포넌트를 Form 편집창에 배치하는 것처럼 캔버스 위에 셀을 배치하고 위치와 크기를 지정할 수 있습니다. Form 편집 시 사용하는 Position 속성, 트래커, Fit to Content, PositionBase, 가이드 기능을 사용할 수 있습니다. Form 디자인 \| 포지션, 가이드 항목의 설명을 참고하세요.
4	속성창	선택한 셀의 속성을 표시하고 편집할 수 있습니다. 컨텍스트 메뉴에서 사용자 속성을 추가하거나 삭제할 수 있습니다.

Format

같은 데이터를 다양한 관점에서 살펴보거나 사용권한에 따라 데이터 일부를 감추어야 하는 경우 하나의 ListView에서 여러 Format을 사용해 데이터를 처리할 수 있습니다.

새로 Format을 추가하거나 기존 Format을 복사한 후 일부 항목을 수정할 수 있습니다. ListView에서 Format을 적용할 때는 formatid 속성값을 지정해 원하는 Format을 선택합니다.

Design Source

Design Source 창에서는 편집된 내용을 XML 형태로 표시되며 원하는 항목을 직접 수정할 수 있습니다.

Grid Contents Editor[Design Source]

Json Contents Editor

DataObject 오브젝트처럼 contents 속성값이 true이고 메타인포에서 ContentsInfo 태그 contentsformat 설정값이 "json"인 오브젝트의 관련 속성 선택 시 편집할 수 있습니다.

Bind Item Editor
	속성	설명
1	URL	URL 입력 후 [Get] 버튼을 클릭하면 해당 JSON 리소스를 받아와 표시합니다.
2	Json Contents	JSON 리소스를 편집합니다. type 설정값에 따라 하위 아이템을 추가할 수 있습니다.
3	보기 모드	Contents 탭 선택 시 트리 형태로 데이터를 표시합니다. Source 탭 선택 시 코드 형태로 데이터를 표시합니다.

Source 탭에서 코드 수정 시 오류가 발생한 경우 오류 발생 위치를 표시합니다.

Data Path Editor

Dataset 오브젝트에서 binddataobject 속성값으로 DataObject 오브젝트를 선택하고 속성창에서 dataobjectpath 속성 선택 시 편집할 수 있습니다.

Bind Item Editor
	속성	설명
1	Target Source	binddataobject 속성값으로 선택한 DataObject를 표시합니다. DataObject 오브젝트가 contents 속성값을 가진 경우에는 해당 contents를 표시하고 그렇지 않은 경우에는 URL 항목값을 입력하고 데이터를 가져올 수 있습니다.
2	DataObject Path	Dataobject Root Path를 설정합니다. Json Contents 결과에서 항목을 선택해 지정할 수 있습니다. Path 설정 후 [Refresh] 버튼을 클릭하면 [Filtered Contents] 탭에 필터링한 결과값을 표시합니다.
3	Json Contents	[Contents] 탭 선택 시 트리 형태로 데이터를 표시합니다. [Filtered Contents] 탭 선택 시 트리 형태로 필터링한 데이터를 표시합니다.
4	Columns	Json Contents 데이터에서 항목을 선택해 컬럼 datapath 값으로 설정합니다.

XML Contents Editor

기본적인 XML 코드를 추가할 수 있는 콘텐트 에디터입니다. Plugin 컴포넌트처럼 contents 속성값이 true이고 메타인포에서 ContentsInfo 태그 contentsformat 설정값이 "xml"인 오브젝트의 관련 속성 선택 시 편집할 수 있습니다.

Basic Contents Editor

지정한 형식에 따라 XML 코드를 생성할 수 있는 콘텐트 에디터입니다. 오브젝트의 contents 속성값이 true이고 메타인포에서 ContentsInfo 태그 contentsformat 설정값이 "ObjectItem"인 오브젝트의 관련 속성 선택 시 편집할 수 있습니다.

오브젝트에서 정의한 typename, maxoccurs, minoccurs 설정값에 따라 추가할 수 있는 아이템의 종류나 개수가 정해집니다.

Bind Item Editor
	속성	설명
1	Object Tree	maxoccurs, minoccurs 설정값에 따라 하위 아이템을 추가할 수 있습니다.
2	속성창	선택한 아이템에서 설정할 수 있는 속성을 표시하고 편집할 수 있습니다. typename으로 설정한 클래스에 해당하는 속성을 표시합니다.
3	보기 모드	Contents 탭 선택 시 트리 형태로 데이터를 표시합니다. Source 탭 선택 시 코드 형태로 데이터를 표시합니다.

이벤트 생성

이벤트를 편집할 컴포넌트를 선택하고 속성창의 이벤트 편집 모드를 선택하여, 컴포넌트의 이벤트를 작성할 수 있습니다. 이벤트는 사용자가 직접 스크립트로 작성할 수도 있지만 속성창에서 해당 이벤트를 더블 클릭하면 자동으로 이벤트 함수를 생성할 수 있습니다.

Create Event Function

폼에 배치된 컴포넌트를 더블 클릭하면, 해당 컴포넌트의 특정 이벤트가 자동으로 생성됩니다. onclick 이벤트를 가지고 있는 경우에는 onclick 이벤트가 생성되며 그 외의 경우에는 지정된 이벤트가 생성됩니다.

컴포넌트를 선택하고 이벤트 함수를 생성하는 경우에는 아래와 같은 규칙에 따라 생성합니다.

컴포넌트 선택 조건	이벤트 함수명 생성 규칙
하나의 컴포넌트 선택	[컴포넌트 ID]_[이벤트명]
두 개 이상의 같은 종류 컴포넌트 선택	[컴포넌트 TYPE]_[이벤트명]
두 개 이상의 다른 종류 컴포넌트 선택	Common_[이벤트명]

예를 들어 Button 컴포넌트 2개를 선택하고 디자인 화면에서 마우스를 더블클릭하거나 속성창에서 이벤트를 선택하고 마우스를 더블클릭하면 아래와 같이 이벤트 함수명이 생성됩니다.