컴포넌트

배치

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

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

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

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

Invisible Layout 창이 표시되지 않는다면 Design Window [Popup Menu]에서 ‘Show Invisible Object Area’ 항목을 선택하면 Invisible Layout 창을 볼 수 있습니다.

선택

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

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

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

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

이동

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

마우스

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

키보드

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

크기

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

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

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

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

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

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

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

복사

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

잠금

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

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

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

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

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

Tab Order Editor (List Type)

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

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

속성 설정

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

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

기타 기능

Paste Special

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

Paste Special창에서 붙여넣을 정보만 체크하여 컴포넌트를 붙여넣습니다. 체크한 정보를 계속 유지하고 싶으면 "Option Save"를 체크하면 됩니다.

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

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

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

프리셋 등록하기

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

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

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

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

프리셋 배치하기

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

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

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

이름 변경하기

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

삭제하기

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

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

순서 바꾸기

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

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

검색하기

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

프리셋 업데이트하기

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

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

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

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

Component Preset 패널 툴바