6.Form Design

6.1Component 생성

Form Design에는 Componentbar에서 선택된 Component를 생성할 수 있습니다.

Type Definition에 정의된 컴포넌트를 모아둔 Component Toolbox를 사용해서 동일하게 Drag&Drop으로 컴포넌트를 생성할 수 있습니다. Component Toolbox는 메뉴에서 View > Toolbox를 선택해 활성화할 수 있습니다.

자주 사용되는 컴포넌트는 아래와 같습니다.


아이콘

이름

설명

1

Select

컴포넌트 Select Icon

2

Button

사용자로부터 마우스 입력을 받을 때 사용하는 컴포넌트

3

Div

Form안에 다른 Form을 불러와서 하나의 Form인 것처럼 사용하거나, 관련 있는 컴포넌트들을 하나의 그룹으로 묶어서 처리할 경우 사용되는 컴포넌트

4

Combo

Edit와 Drop down List를 통합한 형태의 컴포넌트

5

CheckBox

Check 표시에 대한 TRUE/FALSE 값을 가지는 컴포넌트

6

ListBox

항목을 List로 나열한 후 선택할 경우 사용되는 컴포넌트.

7

Edit

문자열의 입출력을 가지는 컴포넌트

8

MaskEdit

날짜의 연월일시(yyyy/mm/dd hh:mi:ss) 형식 또는 숫자의 Comma 표시와 같이 규정된 형식으로 문자열의 입출력을 가지는 컴포넌트

9

TextArea

여러 Line의 문자열의 입출력을 가지는 컴포넌트

10

Menu

Menu Item을 구성할 경우 사용되는 컴포넌트

11

Tab

한 화면에서 여러 개의 Tab page를 분할할 경우 사용되는 컴포넌트

12

ImageViewer

화면에 이미지를 표시할 때 사용되는 컴포넌트

13

Radio

제시된 여러 가지 선택사항 중에서 하나의 항목을 선택해야 할 경우 사용되는 컴포넌트

14

Shape

라인, 삼각형, 사각형, 원, 라운드 사각형 등 도형을 그리기 위한 컴포넌트

15

Calendar

날짜를 입력할 때 사용되는 컴포넌트

16

Panel

여러 컴포넌트를 Panel을 기준으로 정렬하여 화면을 구성할 때 사용하는 컴포넌트

17

Static

다른 Presentation Component들에 대한 제목 등을 기술할 때 사용되는 컴포넌트

18

Grid

스프레드 시트와 유사하게 Dataset의 내용을 표 형식으로 처리하는 컴포넌트

19

Spin

정해진 규칙에 따라 손쉽게 숫자를 입력 받을 때 사용하는 컴포넌트

20

PopupMenu

PopupMenu를 구성할 경우 사용되는 컴포넌트

21

Splitter

화면 분할을 구현하기 위한 컴포넌트

22

GroupBox

화면을 구성할 때 관련 있는 컴포넌트들을 그룹화하는 컴포넌트

23

ProgressBar

작업의 현재 진행 상태를 그래픽을 이용하여 보여주는 컴포넌트

24

ActiveX

ActiveX를 사용할 경우 사용되는 컴포넌트

25

PopupDiv

하나의 화면에 여러 개의 부분화면을 구성할 때 사용

26

PropertyAnimation

Property Animation 컴포넌트

27

TransitionAnimation

Transition Animation 컴포넌트

28

MoveAnimation

Move Animation 컴포넌트

29

CompositeAnimation

Composite Animation 컴포넌트

30

Dataset

데이터를 Table 형태로 저장하는 컴포넌트

31

FilteredDataset

원본 데이터셋을 바인딩해 논리적인 Table 형태로 저장하는 컴포넌트

32

GraphicPath

Form 위에 GraphicPathData의 정보를 가지고 선 및 곡선을 이용해 도형을 직접 출력할 수 있는 컴포넌트

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

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

Form Design에서 사용은 되지만 Design이 따로 필요 없는 컴포넌트들은 속성을 입력, 수정, 삭제 등의 작업을 할 수 있도록 컴포넌트를 표시 해주는 Invisible Objects가 제공 됩니다.

Invisible Layout창이 표시 되지 않는다면 Design Window[Popup Menu]에서 ‘Show Invisible Object Area’ 메뉴를 사용하여 Invisible Layout창을 볼 수 있습니다.

Invisible Layout에서는 Icon 표시 방법 등을 아래그림과 같은 팝업 메뉴로 지원합니다.


메뉴

아이콘

기능

1

Edit


선택된 Invisible Object에 맞는 편집기를 제공합니다

2

Cut

선택된 Object를 잘라내기

3

Copy

선택된 Object를 복사

4

Paste

Object를 붙여 넣기

5

Delete


선택된 Object를 삭제

6

View


Invisible Objects 표시 방식을 Big, List, Small, Report 중 선택하여 변경

6.2선택 변경

Form Design에서는 조합 키를 사용하여 다양한 방식의 컴포넌트 Selection을 지원합니다.

<Tab>키를 이용하여 현재 선택된 컴포넌트를 다른 컴포넌트로 바꿀 수 있습니다. 이동순서는 컴포넌트의 Z-Order순서에 따라 이동하며, <Shift + Tab>키를 이용할 경우 Z-Order의 역순서로 이동하게 됩니다.

<Ctrl>키 또는 <Shift>키를 이용하여 Selection의 추가 및 해제를 할 수 있는 Multi Selection을 지원합니다.

<Shift> + RubberBand Selection을 이용하여 영역 안의 컴포넌트 Selection 추가 및 Reverse Selection을 할 수 있습니다.

컴포넌트가 선택되어 있는 상태에서 <ESC>키를 눌렀을 경우 선택된 컴포넌트의 상위 컴포넌트를 선택할 수 있습니다.

6.3크기 변경

컴포넌트의 Tracker의 Point가 활성화된 상태에서 하나의 Point를 마우스로 Drag&Drop하면 컴포넌트의 크기를 변경할 수 있습니다.

만약 여러 개의 컴포넌트가 Multi Select되어 있는 경우, 같은 비율로 컴포넌트의 크기가 변경됩니다.

<Shift>키를 누른 상태에서 마우스로 크기를 변경하면 가로, 세로 일정한 비율로 크기가 변경됩니다.

<Ctrl>키를 누른 상태에서 마우스로 크기를 변경하면, 컴포넌트의 중심으로 상하, 좌우로 동일한 크기로 변경됩니다.

<Shift + Ctrl>키를 누른 상태에서 마우스로 크기를 변경하면, 두 가지 기능이 동시에 적용되어 컴포넌트의 중심을 기준으로 가로, 세로의 크기가 일정한 비율로 변경됩니다.

컴포넌트의 크기 변경은 <Shift>키를 누른 상태에서 키보드의 방향키를 입력하여 변경할 수도 있습니다.

6.4위치 변경

선택된 컴포넌트들은 키보드의 방향키로 이동 가능하며, 변경된 좌표는 Property에 바로 적용됩니다. 또한 <Ctrl>키를 누른 상태로 마우스로 이동시키면 해당 지점에 컴포넌트가 복사됩니다.

Form Design에서는 Option값에 따라 컴포넌트를 이동하거나 크기를 변경할 때, 미세한 조정을 쉽게 하기 위해서 다른 컴포넌트나 Guide Line에 가까이 가져가면 자동으로 해당 위치로 옮기는 Magnetic 기능을 지원합니다.

Magnetic 기능은 메뉴[Tools - Options… - Design]의 Option값에 따라 Canvas의 Dot 또는 다른 컴포넌트에 대해 동작할지 유무를 정할 수 있습니다. 또한 <Alt>키를 누른 채로 컴포넌트를 이동할 경우, Magnetic 기능을 사용하지 않을 수 있습니다.

6.5Guide Line

Guide Line은 Ruler에서 지원되는 기능으로 개발자가 임의로 수평/수직으로 Line을 만들어 Line에 Component를 정렬시키는 등의 기능을 지원합니다.

Ruler위의 원하는 지점을 마우스 클릭으로 Guide Line을 생성할 수 있으며, 생성된 Guide Line은 마우스 드래그로 위치를 변경할 수 있습니다. Guide Line은 Design Window의 영역 밖으로 Drag&Drop 하거나 Guide Line의 역삼각형을 더블 클릭하여 제거할 수 있습니다.

6.6Tab Order

만들어진 Design이 Launch되어 실행되고 있을 때 <Tab>키를 눌러 컴포넌트에서 다른 컴포넌트로 이동하는 순서를 설정합니다.

Design Window가 활성화되어 있을 때 <Ctrl + D>키를 누르거나, Design Window[Popup Menu]의 Tab Order Edit 메뉴를 통해 기능을 실행할 수 있습니다.

6.7속성 설정

Form Design에서 선택된 Component의 속성들은 Properties Window에 표시되며, Properties Window에서 값을 변경하였을 경우 Component에 바로 적용됩니다.

Property가 하위 Property를 가지고 있을 경우에는 Expand가 가능한 Icon이 Property앞에 표시됩니다. Property는 하위 Property와 동기화 되어 있어 Property를 직접 수정 하거나, 하위 Property를 수정하면 다른 한쪽에도 자동으로 반영됩니다.

6.8Bind

Form Design에서는 생성되어 있는 Dataset을 컴포넌트로 Drag&Drop 하거나 Properties Window의 Bind모드를 선택하여 선택된 컴포넌트를 Bind할 수 있습니다.

Drag&Drop으로 컴포넌트에 Dataset을 Bind할 경우 컴포넌트의 종류에 따라 Inner Bind Dataset 또는 Bind Item Editor 기능이 호출됩니다.

6.8.1Inner Bind Dataset

ListBox나 Combo와 같이 List형식으로 Data를 표현할 수 있는 컴포넌트에 Dataset을 Bind할 경우에 dataset의 Column을 지정할 수 있는 Inner Bind Dataset 기능이 호출됩니다.


속성

설명

1

Codecolumn

내부에서 사용되는 Column을 지정

2

Datacolumn

Component에 보여지는 Column을 지정

6.8.2Bind Item Editor

Edit나 Button등 단일 항목만 표현이 가능한 컴포넌트에 Dataset을 Bind할 경우에 Bind Item Editor 기능이 호출됩니다.


속성

설명

1

Bind ID

사용자 분류 ID

2

Component

Dataset이 Bind되는 Component의 ID

3

Property

Dataset이 Bind되는 Component의 Property

4

Dataset

Component에 Bind하는 Dataset

5

Column ID

Component에 Bind하는 Dataset의 Column ID

6

Add Bind Item

새 Bind Item을 추가

7

Delete Bind Item

선택된 Bind Item을 삭제

Dataset이 Form이나 컴포넌트에 Bind되었을 경우에는 그림과 같이 Project Explorer의 Item에 표시가 되어 쉽게 확인할 수 있습니다.

6.9Event 작성

Event를 편집할 컴포넌트를 선택한 후에 Properties Window의 Event 편집 모드를 선택하여, 컴포넌트의 Event를 작성할 수 있습니다. Event는 사용자가 직접 입력하여 작성할 수 도 있지만 Properties의 해당 Event를 더블 클릭하여 자동으로 Event를 생성할 수도 있습니다.

또는 Form Design 위의 컴포넌트를 더블 클릭하면, 해당 컴포넌트의 기본 이벤트가 자동으로 생성됩니다.

6.10Transform

Form Design 위의 컴포넌트를 회전시키거나 기울이는 등, 컴포넌트의 형태를 수정할 수 있는 Trasform 기능을 팝업메뉴로 지원하고 있습니다.

Transform 기능이 활성화 되면 그림과 같이 선택된 컴포넌트 주변에 붉은색 Marker가 생성되며 해당 Marker를 Drag하여 컴포넌트를 회전시키거나 기울일 수 있습니다.

컴포넌트는 흰색 원으로 표시되는 회전축을 중심으로 회전이 되며, 회전축은 마우스 Drag로 옮길 수 있습니다.

6.11Graphic Path Component 사용법

PathData 정보를 통해 선 및 곡선을 표현할 수 있는 Component로 SVG(Scalable Vector Graphics)의 Path 스펙을 동일하게 지원합니다.

6.11.1GraphicPath Edit 시작

GraphicPath Component가 선택된 상태에서 지원되는 ‘GraphicPath Edit’ 팝업 메뉴를 선택하여 GraphicPath를 편집할 수 있습니다.

6.11.2PathData 추가

GraphicPath Component의 좌측상단을 시작점으로 원하는 곳에서 마우스를 클릭 하거나 팝업 메뉴를 통해 PathData를 추가하여 사용자가 원하는 모양으로 구성할 수 있습니다.


메뉴

아이콘

기능

1

End Edit


변경된 PathData를 적용하고 종료

2

Cancel Edit


변경된 PathData를 취소하고 종료

3

Move To


현재 좌표에서 PathData를 새로 시작

4

Line To


현재 좌표로 선 그리기

5

Curve To


현재 좌표로 곡선 그리기

(처음 그려졌을 때는 Line으로 표현)

6

Elliptical Arc


타원형 호 그리기

rx: x좌표의 반지름

ry: y좌표의 반지름

x-axis-rotation: x회전축

large-arc-flag: large arc flag

sweep-flag: Sweep flag

7

Close Path


시작점과 마지막점을 직선으로 연결하고 닫기

8

Remove Current


선택된 PathData를 삭제

9

Remove All


모든 PathData를 삭제

10

Reset Current Control Point


선택된 PathData의 Control Point를 초기화

11

Reset All Control Points


모든 PathData의 Control Point를 초기화

12

Edit Elliptical Arc Properties…


만들어진 Elliptical Arc의 속성값을 편집

6.11.3PathData 수정

마우스 클릭이나 팝업 메뉴를 통해 추가된 PathData는 마우스와 키보드의 방향키로 위치 변경 및 직선을 곡선으로 또는 곡선을 직선으로 변경할 수 있습니다.

변경하려는 PathData를 클릭하여 활성화 되면 PathData의 Point가 회색에서 검은색으로 변경됩니다.

동일한 위치에 다수의 PathData가 존재하여 클릭으로 선택하기 어려운 경우, <Tab>키를 사용하여 선택 가능하며, <Shift + Tab>키를 사용하여 역순으로도 선택할 수 있습니다.

선택된 PathData를 마우스로 원하는 위치에 드래그하거나 키보드의 방향키로 1Point씩 이동하여 위치를 변경할 수 있습니다.

각각의 PathData는 곡선을 표현하기 위해 Control Point를 가지고 있습니다. 최초 Line 생성시 Control Point는 좌표 Point뒤에 위치하기 때문에 Control Point를 변경하기 위해서는 Point를 <ALT>키를 누른 채로 마우스로 클릭하여 Control Point를 선택한 후에 마우스 드래그로 위치를 변경하여 곡선을 표현할 수 있습니다.

Control Point는 <Ctrl>키를 누른 상태로 마우스로 드래그하여 이동하게 되면 연결된 다른 Control Point가 마우스의 이동 방향과 반대 방향으로 대칭 이동됩니다.

Control Point는 <Shift>키를 누른 상태로 마우스로 드래그하여 이동하게 되면 연결된 다른 Control Point가 마우스의 이동 방향과 같은 방향으로 동시 이동됩니다.

6.11.4PathData 삭제

선택된 특정 PathData를 삭제하거나 전체 PathData를 삭제할 수 있다. 중간에 있는 PathData를 삭제할 경우 앞, 뒤 PathData가 연결됩니다.

6.11.5GraphicPath Edit 종료

<Enter>키 또는 Popup메뉴의 ‘End Edit’를 선택하여 추가, 수정, 삭제된 PathData를 적용하고 종료하거나 <ESC>키 또는 Popup메뉴의 ‘Cancel Edit’를 선택하여 추가, 수정, 삭제된 PathData를 취소하고 종료할 수 있습니다.

6.12Style Attribute

Form Canvas 위에서 시각적인 표현이 되는 컴포넌트는 Style Attribute를 보여주며 각각의 Attribute를 수정하여 컴포넌트의 Style을 변경할 수 있습니다.

6.13Layout Manager(V9.2추가)

‘New Form Wizard’에서 입력한 Layouts정보를 보여줄 수 있도록 Form Design기능이 변경되었습니다.

6.13.1Layout Tab

현재 Form에서 사용되는 Layout이 탭으로 표시됩니다. 탭의 위치는 Option에서 사용자가 변경할 수 있습니다.

Tab을 전환하여 ‘New Form Wizard’에서 입력한 Layout으로 화면 전환이 가능하며 Layout에 대한 수정 기능을 POPUP메뉴로 제공하고 있습니다.


메뉴

아이콘

기능

1

Add Layout


‘Layout Tab’의 마지막에 새 Layout을 생성하는 Dialog를 보여줍니다.

* 사용중인 Layout Name은 입력할 수 없습니다.

2

Copy & Add Layout


현재 선택된 Layout을 Copy하여 ‘Layouts’의 마지막에 추가합니다.

3

Delete Layout


선택된 Layout을 삭제

4

Layout List


현재 Form에서 사용중인 Layout정보를 수정할 수 있는 Dialog를 보여줍니다.

6.13.2Design

‘Default’ 탭에서는 모든 기능이 제공되지만, 추가된 ‘Layout’ 탭에서는 일부 Design 기능이 제한됩니다.

Design 기능

Default

추가 Layout

Component Create, Delete

O

X

Component Copy, Cut, Paste, Paste Special

O

X

TabOrder 변경

O

X

Form의 Size수정

O

X

Form의 Size를 Guide Line으로 표시

X

O

Form의 Tracker표시

O

X

Div, Tab, Popup등의 하위 Component 수정

O

X

Invisible Object 추가, 삭제, 선택

O

X

현재 Form에서 사용중인 Layout의 정보를 수정할 수 있는 기능이 POPUP메뉴로 추가되었습니다.


속성

설명

1

Template

Template에서 Layout 정보를 가져와서 추가하는 기능

2

Add Layout

Form에서 사용될 Layout 정보를 추가하는 버튼

3

Delete

Layouts 그리드에서 선택된 Layout정보를 삭제하는 버튼

4

Layout정보를 보여주는 그리드

Form이 사용할 Layout정보를 보여주는 그리드

  • Name : Layout의 이름

    • Layout의 Name으로 대소문자 구별 없이 ‘Default’를 사용할 수 없습니다

    • 같은 Form안에서는 중복된 Layout Name을 사용할 수 없습니다

  • Screen : Layout이 사용할 Screen명

  • Width : Layout의 넓이

  • Height : Layout의 높이

‘Default’ 탭에서 Component의 속성값이 변경되었을 경우에 변경된 내용을 다른 Layout에 적용할지 확인하는 메시지 창이 뜹니다.

‘Default’탭에서 수정이 되어 다른 Layout에 적용할지 확인하는 메시지 창은 아래의 조건을 모두 만족한 경우에만 뜹니다.

번호

조건

1

다른 Layout에서 변경될 속성이 Source상에 존재하는 경우

2

‘Layouts Edit’ Option 값이 ‘Ask whenever a property changed’로 되어 있는 경우

‘Default’탭에서 수정이 되어 다른 Layout에 적용할지 확인하는 메시지 창에서 ‘Don’t ask me again’을 체크한 상태에서 ‘Yes’나 ‘No’를 선택하는 경우 ‘Layouts Edit’ Option값이 바뀌면서 이후에는 메시지 창이 뜨지 않습니다

버튼

‘Layouts Edit’ Option

Yes

Change property Default Layout with other layouts

No

Changed property is only Default Layout applied

6.13.3Properties Windows

Form Design의 정보를 Properties Windows에서 보여주고 있는 경우, Layout 탭에 따라 표시 방법이 달라지게 됩니다.

Form Design이 추가된 Layout탭이고 Form Properties를 보여준다면 Layout정보가 Properties Window에 추가로 표시됩니다.

색상

굵게

정보

검은색

X

Theme와 css만 적용된 기본값을 가진 경우

검은색

O

‘Default’탭에서 수정하여 Theme와 css가 적용된 기본값과 다른 값을 가진 경우

파란색

O

추가된 Layout탭에서 수정한 값이 ‘Default’탭의 정보와 다른 값을 가진 경우

속성명

설명

Id

모든 컴포넌트의 ID는 추가된 Layout탭에서는 수정할 수 없습니다.

taborder

모든 컴포넌트의 taborder는 추가된 Layout탭에서는 수정할 수 없습니다.

inheritanceid

Form Property중에서 inheritanceid는 수정할 수 없습니다.

position

Form Property중에서 position은 수정할 수 없습니다.

6.13.4Sub Layout

Component내부에 Contents를 가지고 있는 Div, PopupDiv, TabPage 등도 Form과 같이 Multi Layout을 가지게 되며 이를 Sub Layout이라 합니다. Sub Layout은 Form Layout과 1:1 매칭이 아니고 별도의 Multi Layout을 구성합니다. Tab의 경우, TabPage 별로 다른 Multi Layout을 구성할 수 있습니다.

Sub Layout을 가지고 있는 Component의 하위 Contents는 Form의 Default Layout에서만 직접 편집이 가능합니다. (기존의 편집 방법과 동일)

직접 편집되는 내용은 해당 Component가 보여주고 있는 Sub Layout에 저장됩니다.

단, Default Layout이 아닌 추가 Layout (예: 위 그림에서 iPhoneW Layout)에서는 Contents를 직접 편집 할 수 없습니다. 따라서, 하위 Contents는 선택 및 수정 할 수 없으며 하위 Contents 선택 시, 최상위 Component가 선택됩니다. 추가 Layout에서 Contents를 편집 하기 위해서는 Sub Layout Editor를 사용하여 편집하여야 합니다.

추가 Layout에서 Contents를 편집 하기 위해서는 Sub Layout Editor를 사용하여 편집하여야 합니다. Sub Layout을 가진 Component는 Sub Layout Edit, Set Sub Layout 2개의 Popup Menu를 제공합니다.

Sub Layout Edit메뉴를 선택하면 아래 그림과 같은 Sub Layout Editor가 나타납니다.


메뉴

아이콘

기능

1

Add Sub Layout


새 Sub Layout을 생성하는 Dialog를 보여줍니다.

단,사용중인 Sub Layout Name은 입력할 수 없습니다.

2

Delete Sub Layout


현재 선택된 Layout을 Sub Layout List에서 제거합니다. 단, ‘Default’는 삭제할 수 없습니다.

3

Sub Layout List


현재 Component에서 사용중인 Sub Layout정보를 수정할 수 있는 대화상자를 띄워줍니다.

Default Sub Layout을 포함한 모든 Sub Layout의 정보를 편집 및 수정할 수 있습니다.


Add Layout: Sub Layout 추가 버튼

Delete: Sub Layout 삭제 버튼

Name: Sub Layout 의 이름

단, Default Sub Layout의 이름은 임의로 지정 불가

Width: Sub Layout의 넓이

Height: Sub Layout의 높이

4

Apply Size & End Edit


현재 edit 중인 sub Layout의 size로 target component를 설정하고 현재까지 Sub Layout Editor에서 작업한 undo buffer를 하나로 묶어서 design undo list에 추가합니다.

5

End Edit


현재까지 Sub Layout Editor에서 작업한 undo buffer를 하나로 묶어서 design undo list에 추가합니다.

6

Cancel Edit


현재까지 Sub Layout Editor에서 작업한 내용을 모두 undo 하고 원상복귀 합니다.

6.14Step(V9.2추가)

Step이란 여러 개의 step으로 이루어진 페이지를 하나의 Form에서 개발할 수 있는 기능을 의미합니다.

Form의 stepcount Property 값을 조정하면 아래그림과 같이 step이 표시됩니다.

번호

설명

1

현재 편집중인 Step을 표시.

현재 편집중인 Step은 마우스포인터의 위치로 판단합니다.

2

Step과 Step 사이의 안내선

6.15Position2(V9.2추가)

비율인 “%”로 Position을 지정할 수 있도록 하는 position2 속성을 추가하였습니다. 또한, UX-Studio에서 Ruler, DotGrid(화면 바닥에 보이는 점들)등의 Position2 관련 편집기능을 제공합니다.

6.15.1Tracker

Component의 positiontype을 position2로 설정할 경우 tracker 모양이 다르게 표시됩니다.

Positioin2 Tracker는 고정된 변을 붉은 색으로 표시하여 position2의 값을 별도로 확인하지 않아도 Anchor 상태를 알 수 있습니다.

6.15.2Ruler / Dot Grid

Position2는 Percent입력을 지원하기 때문에, Form Design상에서 손쉽게 확인할 수 있도록 Percent단위로 정보를 표시해 주는 기능이 추가되었습니다.

Ruler의 Popup Menu에서 Show Pixel Ruler / Show Percent Ruler를 선택할 경우 해당 단위로 Ruler와 Dot Grid의 표시 방법이 변경됩니다.

6.15.3Component Resize Info

Component를 한 개만 선택한 상태에서 Tracker로 크기를 조정하는 경우 수정되는 크기 정보를 표시해 줍니다.

만약 Ruler단위가 Percent로 표시 중이라면 Resize Info도 Percent 단위로 표시됩니다.

6.15.4Position Editor

사용자가 쉽게 Position정보를 설정할 수 있도록 UI를 가진 Editor를 제공합니다. Position Editor는 Form Design의 Minitoolbar에서 호출할 수 있습니다.

Minitoolbar는 XPLATFORM 9.2 버전에서 추가된 기능으로 자주 사용되는 Style Property을 메뉴를 사용 손쉽게 수정할 수 있는 기능입니다.

Position Editor에서 수정된 값은 대상 Component가 사용중인 positiontype에 맞는 position, position2값으로 변경되어 반영됩니다.

6.15.5Properties Window

Properties Window에서는 추가된 position2의 단위를 쉽게 변경할 수 있도록 기능을 지원합니다.

Percent단위는 position2에서만 지원되며, Component의 positiontype이 position을 사용하는 경우에는 해당 기능으로 값이 변경되지 않습니다.