14.Form 디자인 | 배치, 선택, 이동, 설정

Edit

14.1컴포넌트

14.1.1배치

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

그림 14-1Button component

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

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

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

그림 14-2Invisible Layout

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

그림 14-3Show Invisible Object Area Menu

14.1.2선택

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

조합키

설명

Tab

taborder 순서에 따라 현재 선택한 컴포넌트의 다음 순서 컴포넌트를 선택합니다.

Form을 선택한 상태면 첫 번째 taborder로 지정된 컴포넌트를 선택합니다.

Shift + Tab

taborder 순서에 따라 현재 선택한 컴포넌트의 이전 순서 컴포넌트를 선택합니다.

Form을 선택한 상태면 마지막 taborder로 지정된 컴포넌트를 선택합니다.

Ctrl 또는 Shift

해당 키를 누른 상태에서 마우스 클릭으로 여러 항목을 선택할 수 있습니다.

Esc

현재 선택한 컴포넌트의 상위 컴포넌트를 선택합니다.

Ctrl + a

Form을 제외한 모든 항목을 선택합니다.

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

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

14.1.3이동

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

마우스

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

조합키

설명

Ctrl

컴포넌트가 복사되어 이동합니다.

Shift

상하좌우 한 방향으로만 이동할 수 있습니다.

Alt

Snap 기능을 무시합니다.

키보드

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

14.1.4크기

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

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

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

그림 14-4Change Multi Selection Component Size

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

그림 14-5Change Component Size to used Shift Key

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

그림 14-6Change Component Size to used Ctrl Key

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

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

14.1.5복사

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

그림 14-7Copy Component

14.1.6잠금

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

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

14.1.7탭 순서

앱 실행 중 <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 모드에서는 컨텍스트 메뉴를 아래와 같이 지원합니다.

메뉴

단축키

설명

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 창에서 수정할 수 없습니다.

14.1.8속성 설정

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

그림 14-8Change Property

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

그림 14-9Expand Property

14.1.9기타 기능

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

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

이번 장 또는 절에서 설명하는 기능은 넥사크로플랫폼 17.1.0.100 버전에서 추가된 기능입니다.

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

14.2.1프리셋 등록하기

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

1

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

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

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

2

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

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

3

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

14.2.2프리셋 배치하기

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

1

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

2

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

3

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

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

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

이름 변경하기

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

삭제하기

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

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

순서 바꾸기

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

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

검색하기

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

프리셋 업데이트하기

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

1

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

2

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

3

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

4

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

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

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

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

14.2.5Component Preset 패널 툴바

표 14-1Standard Bar

메뉴

기능

1

Add Category

패널에 카테고리를 추가합니다.

2

Add Preset

컴포넌트를 선택한 상태에서 프리셋으로 추가합니다.

3

delete

카테고리 또는 프리셋을 삭제합니다.

4

Import

미리 설정한 컴포넌트 프리셋 파일을 가져오거나 xpackage 파일을 선택하고 Import Wizard를 실행합니다.

5

Export

설정한 컴포넌트 프리셋을 파일 형태로 내보냅니다.

6

Options

컴포넌트 프리셋 파일 위치를 설정합니다.