컴포넌트

배치

폼을 디자인할 때 컴포넌트 툴바에서 선택한 컴포넌트를 배치할 수 있습니다.

Button component

Form 디자인 시 빈 곳에 마우스로 드래그하게 되면 러버밴드(Rubber Band)가 사각형으로 표시되며, 사각형의 시작과 끝 포인터 위치 및 너비와 높이 정보를 표시하여 생성될 컴포넌트의 크기를 조절할 때 사용자가 미리 가늠할 수 있도록 도와줍니다.

최종적으로 마우스로 드래그한 영역의 크기로 컴포넌트가 생성됩니다. 만약 마우스 드래그를 하지 않은 상태로 클릭만 하게 된다면, Type Definition에 정의된 컴포넌트의 기본 크기로 생성하게 됩니다.

앱 개발 시 사용하지만, 화면에 보이지 않는 컴포넌트들을 별도로 관리할 수 있는 Invisible Objects 영역이 제공되어 폼 디자인 작업 시 각 컴포넌트의 속성을 조정할 수 있습니다.

Invisible Layout

선택

Form 디자인 시 조합 키를 사용해 다양한 방식으로 컴포넌트를 선택할 수 있습니다.

조합키	설명
`Tab`	taborder 순서에 따라 현재 선택한 컴포넌트의 다음 순서 컴포넌트를 선택합니다. Form을 선택한 상태면 첫 번째 taborder로 지정된 컴포넌트를 선택합니다.
`Shift` + `Tab`	taborder 순서에 따라 현재 선택한 컴포넌트의 이전 순서 컴포넌트를 선택합니다. Form을 선택한 상태면 마지막 taborder로 지정된 컴포넌트를 선택합니다.
`Ctrl` 또는 `Shift`	해당 키를 누른 상태에서 마우스 클릭으로 여러 항목을 선택할 수 있습니다.
`Esc`	현재 선택한 컴포넌트의 상위 컴포넌트를 선택합니다.
`Ctrl` + `a`	Form을 제외한 모든 항목을 선택합니다.
`Alt`	해당 키를 누른 상태에서 마우스 클릭으로 특정 컴포넌트 선택 시 같은 종류의 컴포넌트를 모두 선택합니다.

taborder 순서는 Form을 포함하지 않습니다. 컴포넌트를 선택한 상태에서 Tab키를 입력해서 Form을 선택할 수 없습니다.

Select Type

[Options > Form Design > General > Select Type] 설정에 따라 Form 디자인에서 마우스로 드래그 시 컴포넌트가 선택되는 방식이 달라집니다.

Select All: 선택 영역이 컴포넌트 전체를 포함해야 선택되는 옵션

Select Part: 선택 영역이 컴포넌트 일부를 포함해도 선택되는 옵션

상위 컴포넌트 선택

컨테이너 컴포넌트 내 배치된 컴포넌트는 컴포넌트 선택 시 상위 컴포넌트를 선택할 수 있는 추가 UI를 제공합니다. 컴포넌트 선택 시 컴포넌트 상단 영역에 "▲" 버튼이 표시됩니다. "▲" 버튼 위에 마우스 포인터를 가져가면 상위 컴포넌트 영역이 파란색 테두리로 표시됩니다.

"▲" 클릭 시 상위 컴포넌트를 선택한 상태로 전환됩니다. 컨테이너 컴포넌트 중 Div, PopupDiv, View 컴포넌트인 경우에는 컴포넌트를 이동하거나 컨텍스트 메뉴를 실행하기 위한 UI를 제공합니다.

	설명
1	컴포넌트 id 속성값이 표시됩니다. 해당 영역 위에 마우스 포인터를 이동하면 컴포넌트를 이동할 수 있는 상태가 되며 드래그해서 위치를 변경할 수 있습니다. 컨테이너 컴포넌트 상위에 다른 컨테이너 컴포넌트가 있는 경우 "▲" 버튼이 표시되고 옆에 표시됩니다.
2	컨텍스트 메뉴를 실행합니다. 마우스 버튼 클릭 시 컨텍스트 메뉴를 실행합니다.

설명

컴포넌트 id 속성값이 표시됩니다.

해당 영역 위에 마우스 포인터를 이동하면 컴포넌트를 이동할 수 있는 상태가 되며 드래그해서 위치를 변경할 수 있습니다.

컨테이너 컴포넌트 상위에 다른 컨테이너 컴포넌트가 있는 경우 "▲" 버튼이 표시되고 옆에 표시됩니다.

컨텍스트 메뉴를 실행합니다.

마우스 버튼 클릭 시 컨텍스트 메뉴를 실행합니다.

겹쳐있는 컴포넌트 선택

컴포넌트의 크기와 위치값이 같은 경우 겹쳐져 표시됩니다. 디자인 화면에서는 겹쳐있는 컴포넌트 위로 마우스 포인터 이동 시 겹쳐있는 컴포넌트를 펼쳐서 표시하고 원하는 컴포넌트를 클릭해서 선택할 수 있습니다.

이동

선택한 컴포넌트를 원하는 위치로 이동시킬 수 있습니다.

마우스

선택한 컴포넌트를 드래그앤드롭으로 이동할 수 있습니다. 키보드 조합키에 따라 이동 시 동작 방식이 달라집니다. 여러 조합키를 같이 사용할 수 있습니다.

조합키	설명
`Ctrl`	컴포넌트가 복사되어 이동합니다.
`Shift`	상하좌우 한 방향으로만 이동할 수 있습니다.
`Alt`	Snap 기능을 무시합니다.

키보드

선택한 컴포넌트를 키보드 방향키를 사용해 이동할 수 있습니다. 방향키를 입력할 때마다 메뉴[Options > Form Design > Guide > Dot grid size]에 지정된 값만큼 이동합니다. Ctrl 키를 조합키로 사용하면 최소단위(1px)만큼 이동합니다.

크기

컴포넌트의 트래커(Tracker) 포인트가 활성화된 상태에서 하나의 포인트를 마우스로 드래그하면 컴포넌트의 크기를 변경할 수 있습니다.

컴포넌트를 하나만 선택하고 크기를 수정할 때는 크기 정보를 표시해줍니다. 이때 표기되는 크기 단위는 눈금자의 표시 단위에 따라 해당하는 단위로 표시해줍니다.

여러 개의 컴포넌트가 선택된 경우, 같은 비율로 선택된 모든 컴포넌트의 크기가 변경됩니다.

Change Multi Selection Component Size

Shift키를 누른 상태에서 마우스를 드래그하면 드래그되는 포인트를 따라 가로, 세로가 같은 비율로 크기가 변경됩니다.

Change Component Size to used Shift Key

Ctrl키를 누른 상태에서 마우스 드래그로 크기를 변경하면, 컴포넌트의 정 가운데 좌표를 기준으로 상하 또는 좌우로 같은 크기로 변경됩니다.

Change Component Size to used Ctrl Key

Shift + Ctrl키를 누른 상태에서 마우스 드래그로 크기를 변경하면, 두 가지 기능이 동시에 적용되어 컴포넌트의 정중앙 좌표를 기준으로 가로, 세로의 크기가 같은 비율로 변경됩니다.

마우스를 사용하지 않고 Shift키를 누른 상태에서 키보드의 방향키를 사용해 컴포넌트의 크기를 변경할 수 있습니다. 이때 방향키 입력 시 변경되는 크기는 메뉴 [Options > Form Design > Guide]에서 지정한 Dot Grid Size 값에 따라 처리합니다.

복사

선택한 컴포넌트들은 키보드의 방향키나 마우스 드래그로 위치를 변경할 수 있으며 변경된 좌표는 속성으로 바로 적용됩니다. 또한, Ctrl키를 누른 상태로 마우스로 드래그하면 해당 지점에 컴포넌트가 복사됩니다.

Copy Component

잠금

Lock Components를 설정하면 컴포넌트의 크기와 위치를 변경할 수 없습니다. Lock Components 설정과 해제는 리본 메뉴 [DESIGN - Lock - Lock Components] 또는 메뉴 [Design > Lock Components]을 선택하거나 폼 디자인 화면에서 컨텍스트 메뉴를 열고 [Lock Components] 항목을 선택합니다.

마우스 드래그를 제외하고 키보드 방향키를 이용하거나 속성창에서 Position을 변경했을 때는 Lock Components 기능이 유효하지 않습니다.

탭 순서

앱 실행 중 <Tab>키를 눌렀을 때 컴포넌트에서 다른 컴포넌트로 이동하는 순서를 설정합니다.

Tab Order(Z-Order) View

현재 화면에 설정된 탭 순서를 확인하는 기능입니다. 메뉴 [Design > State View > Tab Order] 항목을 선택하면 토글 형식으로 해당 기능을 켜거나 끌 수 있습니다. 기능이 활성화되면 아래 그림과 같이 컴포넌트 왼쪽 윗부분에 2개의 숫자가 표시됩니다.

파란색 사각형 안에 표기된 것은 탭 순서를 나타냅니다. 컴포넌트의 taborder 속성을 수정하거나 'Tab Order Editor' 기능을 사용해 순서를 변경할 수 있습니다.

녹색 사각형 안에 표기된 것은 컴포넌트의 Z-Order를 표시합니다. Z-Order는 컴포넌트가 겹쳐있을 때 보여주는 순서를 지정합니다. 숫자가 큰 컴포넌트가 가장 위에 위치하며 사용자에게 보입니다.

Z-Order는 Align 툴바에서 'Bring to Front', 'Send to Back', 'Bring Forward', 'Send Backward' 4가지 기능을 사용해 변경하거나 Source 탭에서 배치된 XML 코드의 순서를 바꿔 변경할 수 있습니다.

Tab Order Editor에서 탭 순서 변경 후 탭 순서에 따라 Z-Order를 변경하고자 할 경우에는 메뉴[Design > Arrange to Tab Order] 항목을 선택해서 Z-Order를 변경할 수 있습니다.

Tab Order Editor (View Type)

디자인 창에서 Ctrl + T키를 누르거나, 메뉴 [Design > Tab Order Editor(View Type)] 항목을 통해 탭 순서를 편집할 수 있습니다.

마우스 커서에 표시된 인덱스 번호가 설정할 Tab Order 번호입니다. 컴포넌트를 클릭하게 되면 해당 컴포넌트의 Tab Order가 마우스 커서의 인덱스로 반영되며, 다른 컴포넌트들의 인덱스가 자동 보정됩니다.

마우스 커서를 특정 컴포넌트 위로 가져가면 컴포넌트가 초록색으로 강조되어 표시되며 'Next Taborder' 값에 해당하는 컴포넌트는 마우스 커서가 위치하지 않더라도 주황색으로 강조되어 표시됩니다. 또한, 여러 개의 컴포넌트가 겹쳐져 있는 경우에는 컴포넌트가 펼쳐진 상태로 보여 각 컴포넌트의 탭 순서를 편집할 수 있습니다.

Tab Order Edit 모드에서는 컨텍스트 메뉴를 아래와 같이 지원합니다.

메뉴	단축키	설명
Set Next Tab Order		Next Tab Order 값을 직접 지정합니다.
Tab Order Decrease	`PageDown`	현재 설정된 Tab Order 값의 간격을 최소화합니다. 0을 기준으로 순서대로 값을 변경합니다.
Next Tab Order Value by 1	`Up`	Next Tab Order 값을 1씩 더합니다.
Previous Tab Order Value by 1	`Down`	Next Tab Order 값을 1씩 감합니다. 최솟값은 0입니다.
Next Tab Order Value by 10	`Right`	Next Tab Order 값을 10씩 더합니다.
Previous Tab Order Value by 10	`Left`	Next Tab Order 값을 10씩 감합니다. 현재 Next Tab Order 값이 10 이하면 0으로 지정합니다.
Tab Order Increase	`PageUp`	현재 설정된 모든 컴포넌트의 Tab Order 값을 10배로 증가합니다. Tab Order가 순서대로 지정된 컴포넌트 사이에 추가할 컴포넌트가 있는 경우에 사용합니다. 예를 들어 Tab Order가 3, 4인 컴포넌트 사이에 추가할 컴포넌트가 있는 경우 Tab Order 값을 30, 40으로 지정하고 31에서 39 사이의 값으로 컴포넌트를 추가할 수 있습니다.
End Editor	`Enter`	변경된 내용을 저장하고 Tab Order Edit 모드를 종료합니다.
Cancel Editor	`Esc`	변경된 내용을 무시하고 Tab Order Edit 모드를 종료합니다.

Tab Order Editor (List Type)

목록 형태로 컴포넌트의 Tab Order를 확인하고 수정할 수 있습니다. 하나 이상의 항목을 선택하고 하단 버튼을 사용해 원하는 순서로 Tab Order를 변경할 수 있습니다.

메뉴 [Design > Tab Order Editor (List Type)] 항목을 통해 탭 순서를 편집할 수 있습니다.

Tab Order 외 목록에 보이는 정보(id, text, tabstop)는 Tab Order List 창에서 수정할 수 없습니다.

속성 설정

Form 디자인에서 선택된 컴포넌트 속성들은 속성창에 표시되며, 속성창에서 값을 변경하였을 경우 컴포넌트에 바로 적용됩니다.

Change Property

하위 속성을 가지는 속성은 확장할 수 있는 아이콘이 표시됩니다. 해당 속성은 하위 속성들과 동기화되어 있어 상위 속성을 수정하거나, 하위 속성을 수정하면 다른 한쪽에 자동으로 반영됩니다.

Expand Property

Outlineview

화면 내 배치된 컴포넌트를 트리 형태로 보여줍니다. View 메뉴에서 Outlineview를 선택하고 Form 디자인 모드일 경우 동작합니다.

	설명
1	Form 오브젝트 내 배치된 컴포넌트 목록 표시 컴포넌트 목록은 다음 기준에 따라 순서대로 표시됩니다. type 속성값이 "table"인 경우에는 컴포넌트의 tablecellarea 속성 type 속성값이 "horizontal" 또는 "vertical"인 경우에는 컴포넌트의 layoutorder 속성 컴포넌트의 Z-order
2	Form 이름 (type 속성) 다른 레이아웃 선택 시 선택한 레이아웃의 type 속성이 표시됩니다.
3	컴포넌트 id 기준으로 탐색

설명

Form 오브젝트 내 배치된 컴포넌트 목록 표시

컴포넌트 목록은 다음 기준에 따라 순서대로 표시됩니다.

type 속성값이 "table"인 경우에는 컴포넌트의 tablecellarea 속성
type 속성값이 "horizontal" 또는 "vertical"인 경우에는 컴포넌트의 layoutorder 속성
컴포넌트의 Z-order

Form 이름 (type 속성)

다른 레이아웃 선택 시 선택한 레이아웃의 type 속성이 표시됩니다.

컴포넌트 id 기준으로 탐색

Outlineview 패널에서 컴포넌트를 선택하고 다음과 같은 기능을 사용할 수 있습니다.

목록에서 컴포넌트 선택 시 디자인 화면에서도 컴포넌트가 선택됩니다.
디자인 화면에서 컴포넌트 선택 시에는 Outlineview 패널 목록에서도 선택한 상태로 표시됩니다.
목록에서 컴포넌트 더블 클릭 시 디자인 화면에서 컴포넌트를 더블 클릭한 것과 같은 동작을 처리합니다.
예를 들어 Grid 컴포넌트를 선택하고 더블 클릭 시 Grid Contents Editor가 표시됩니다.
목록에서 컴포넌트 선택 후 마우스 오른쪽 버튼 클릭 시 컨텍스트 메뉴가 표시됩니다.

기타 기능

Paste Special

Paste Special은 특정 컴포넌트의 Property, Event, Bind 등의 정보 중에서 특정 정보만 골라내어 붙여넣는 기능입니다. 메뉴 [Edit > Paste Special]을 선택하여 사용할 수 있습니다.

선택된 Option 정보만 적용된 상태로 컴포넌트를 붙여 넣습니다. [OK] 버튼을 클릭하기 전에 "Option Save" 항목을 체크한 경우에는 현재 선택된 Option 정보가 [Option > Form Design > Paste Special]에 반영됩니다.

Hotkey Editor

화면에 설정된 컴포넌트의 Hotkey 속성을 지정하는 기능입니다. 메뉴[Design > Hotkey Editor]를 선택하고 해당 기능을 사용할 수 있습니다. 이미 설정된 Hotkey 속성값이 표시되며, 설정된 값이 없다면 공란으로 표시됩니다. Hotkey값을 변경하게 되면 굵은 글꼴로 표시되며, 같은 Hotkey값이 설정된 경우 빨간색으로 표시됩니다.

Go to Event Handler

선택한 컴포넌트에 설정된 이벤트가 있는 경우 해당 스크립트 코드 위치로 이동하는 기능을 제공합니다. 컴포넌트를 선택하고 컨텍스트 메뉴에서 [Go to Event Handler] 항목을 선택하고 원하는 이벤트 함수를 선택합니다.

선택한 컴포넌트에 설정된 이벤트가 없는 경우에는 컨텍스트 메뉴에서 해당 항목이 표시되지 않습니다.

Copy ID

선택한 컴포넌트의 ID 속성값을 클립보드에 복사합니다. Div 또는 Tab 컴포넌트 아래 배치된 컴포넌트의 경우에는 컴포넌트의 ID와 부모 ID를 포함한 값을 복사합니다. 메뉴[Edit > Copy ID (Include Parent)]에서 선택하거나 디자인 화면 내 컨텍스트 메뉴 또는 속성창 상단 컴포넌트 목록을 펼친 상태에서 컨텍스트 메뉴를 실행해 선택할 수 있습니다.

위의 그림과 같은 경우 클립보드에 복사된 값은 아래와 같습니다.

Div00.form.Button00

컴포넌트 프리셋 등록하고 사용하기

컴포넌트 프리셋은 반복적으로 지정해주어야 하는 컴포넌트의 속성, 이벤트 등의 정보를 별도의 프리셋 형태로 관리하고 재사용할 수 있도록 지원하는 기능입니다.

프리셋 등록하기

프리셋은 아래와 같은 방법으로 등록할 수 있습니다.

임의의 Form에서 프리셋으로 등록할 컴포넌트의 속성을 설정합니다.

Calendar 컴포넌트를 배치하고 아래와 같이 속성을 수정했습니다.

width: 200
height: 200
showmonthspin: true
showyearspin: true
type: monthonly
usetrailingday: true
weekformat: S M T W T F S

컴포넌트를 선택한 상태에서 오른쪽 마우스 버튼을 클릭하고 컨텍스트 메뉴에서 [Add Component Preset] 항목을 선택합니다.

Component Preset 패널이 활성화된 경우에는 패널 툴바에서 [Add Preset] 항목을 선택해도 해당 컴포넌트를 프리셋으로 추가할 수 있습니다.

Component Preset 패널이 표시되고 기본 카테고리에 프리셋이 등록됩니다.

프리셋 배치하기

등록된 프리셋은 아래와 같은 방법으로 화면에 배치할 수 있습니다.

Component Preset 패널에서 배치할 프리셋을 선택합니다.

Form 화면 위에서 커서가 선택한 프리셋의 아이콘으로 변경된 것을 확인합니다.

원하는 위치에 클릭하면 프리셋으로 등록했던 컴포넌트가 배치됩니다.

프리셋에 지정한 속성값이 그대로 적용된 것을 확인할 수 있습니다.

프리셋, 카테고리 관리하기

이름 변경하기

Component Preset 패널에서 프리셋 또는 카테고리를 선택하고 더블클릭하거나 [F2]키를 누르면 편집 모드로 변경되고 이름을 수정할 수 있습니다.

삭제하기

Component Preset 패널에서 프리셋 또는 카테고리를 선택하고 [Delete]키를 누르거나 툴바에서 [delete]를 선택하면 해당 프리셋, 카테고리를 삭제합니다.

카테고리를 삭제하는 경우에는 카테고리 하위의 프리셋도 모두 삭제됩니다.

순서 바꾸기

Component Preset 패널에서 프리셋 또는 카테고리를 선택한 상태에서 마우스 드래그로 이동하면 순서를 바꿀 수 있습니다.

카테고리 순서를 변경하는 경우에는 카테고리 하위의 프리셋도 같이 따라갑니다.

검색하기

프리셋이 많은 경우 카테고리로 분류할 수 있지만, 프리셋 이름을 필터링해서 원하는 항목을 찾을 수 있습니다. 프리셋 이름을 지정할 때 특정한 규칙을 가지고 있는 경우 활용할 수 있습니다.

프리셋 업데이트하기

등록된 프리셋은 아래와 같은 방법으로 업데이트할 수 있습니다.

Form 화면에 프리셋을 배치합니다.

배치된 컴포넌트를 선택하고 필요한 속성값을 수정합니다.

Form에 배치된 컴포넌트를 선택한 상태에서 Component Preset 패널에서 업데이트할 프리셋을 선택합니다. 프리셋 이름 옆에 [Update Preset] 버튼 아이콘이 표시됩니다.

[Update Preset] 버튼을 클릭하면 업데이트 여부를 확인하고 프리셋을 업데이트합니다.

컴포넌트 프리셋 파일로 내보내고 가져오기

카테고리, 프리셋 설정은 파일 형태로 내보내서 다른 프로젝트 또는 다른 사용자가 활용할 수 있습니다. Component Preset 패널 상단 툴바에서 [Export] 버튼을 클릭하면 파일(xpreset 확장자)로 저장합니다.

[Import] 버튼을 클릭하면 이미 저장된 파일을 가져올 수 있습니다. 가져오기 시에는 현재 사용하고 있는 설정이 사라지고 새로운 설정으로 Component Preset 패널을 표시합니다.

Component Preset 패널 툴바

Standard Bar
메뉴		기능
1	Add Category	패널에 카테고리를 추가합니다.
2	Add Preset	컴포넌트를 선택한 상태에서 프리셋으로 추가합니다.
3	delete	카테고리 또는 프리셋을 삭제합니다.
4	Import	미리 설정한 컴포넌트 프리셋 파일을 가져오거나 xpackage 파일을 선택하고 Import Wizard를 실행합니다.
5	Export	설정한 컴포넌트 프리셋을 파일 형태로 내보냅니다.
6	Options	컴포넌트 프리셋 파일 위치를 설정합니다.