positiontype 속성
position2 속성이 추가되면서 컴포넌트에서 어떤 속성을 적용할 지 판단하는 속성으로 positiontype 속성값을 추가했습니다. positiontype 속성값에 따라 사용하지 않는 속성은 UX-Studio 속성창에서 비활성화 상태로 변경됩니다.
UX-Studio 메뉴[Tools > Options]에서 옵션 항목 중 [Form Design > Position] 항목에서 default 값으로 적용할 positiontype 속성값을 지정할 수 있습니다. 해당 설정에 따라 컴포넌트를 Form에 배치했을 때 positiontype 속성값이 지정됩니다. 해당 설정값은 default 값을 지정하는 것일 뿐 컴포넌트의 positiontype은 변경할 수 있습니다.
Position & Anchor
컴포넌트가 화면에 표시될 위치와 크기를 지정하기 위해 position 속성값을 지정합니다. 컴포넌트가 표시될 x, y 좌푯값을 지정하고 컴포넌트의 높이(height)와 너비(width)를 지정할 수 있습니다. x, y 좌푯값 대신 left, top 속성값을 지정해 부모 컴포넌트(Form, Div 등)로부터 떨어진 거리를 지정할 수도 있습니다.
부모 컴포넌트의 크기가 고정된 경우에는 컴포넌트의 위치와 크기를 변경할 필요가 없습니다. 하지만 화면 크기가 가변적인 경우에는 배치된 컴포넌트의 위치와 크기를 적절하게 재조정해주어야 합니다. position2 속성을 사용하는 경우에는 위치나 크기를 부모 컴포넌트 대비 비율(%)로 지정할 수 있어 부모 컴포넌트의 크기가 변경되었을 때 배치된 컴포넌트의 크기를 조정할 수 있습니다. 하지만 position 속성값을 지정하는 단위는 픽셀(px)만 지원합니다.
그래서 position 속성값을 사용하는 경우에도 부모 컴포넌트의 위치와 크기 조정에 대응할 수 있도록 anchor 속성을 지원하고 있습니다. anchor 속성은 컴포넌트와 부모 컴포넌트 간의 거리를 고정할지 여부를 지정하는 속성입니다. left, top, right, bottom 4가지 속성을 조합해 어떤 식으로 간격을 유지할지 결정합니다.
UX-Studio 속성창에서 anchor 속성은 positiontype 속성값이 "position"인 경우에만 활성화됩니다. position2 속성값에 따라 anchor 속성값이 변경되긴 하지만 positiontype 속성값을 변경할 경우 비슷한 조건을 맞추기 위해 UX-Studio 내부에서 처리하는 것입니다.
default
anchor 속성값을 default로 지정한 경우에는 속성값을 "left top"으로 지정한 것과 같은 방식으로 처리합니다. 컴포넌트의 x, y 좌푯값이 고정된 상태에서 컴포넌트의 다른 position 속성은 변경되지 않습니다. 그래서 부모 컴포넌트의 위치나 크기가 변경되어도 항상 같은 위치를 유지합니다.
속성값 | 설명 |
|---|---|
default | left top 속성값으로 처리합니다. |
left top | 컴포넌트의 x, y 좌푯값은 고정됩니다. 부모 컴포넌트의 위치, 크기와 상관없이 같은 위치, 크기에 고정됩니다. |
left top 고정
속성값을 default로 지정했을 때처럼 "left top"이 고정된 경우에는 컴포넌트의 x, y 좌푯값은 변경되지 않습니다. 추가로 지정된 속성값에 따라 컴포넌트의 너비, 높이가 커지게 됩니다.
컴포넌트의 x, y 좌푯값이 고정되기 때문에 다른 컴포넌트와 가까이 붙어서 배치된 경우에는 컴포넌트가 겹쳐서 표기될 수 있습니다.
속성값 | 설명 |
|---|---|
all | left top right bottom 속성값으로 처리합니다. 부모 컴포넌트의 크기에 비례해 컴포넌트의 크기가 변경됩니다. |
left top right | 부모 컴포넌트의 너비 변경에 비례해 컴포넌트의 너비가 변경됩니다. 컴포넌트의 높이는 변경되지 않습니다. |
left top bottom | 부모 컴포넌트의 높이 변경에 비례해 컴포넌트의 높이가 변경됩니다. 컴포넌트의 너비는 변경되지 않습니다. |
속성값에 따라 변경되는 요소
속성값으로 지정되는 값은 컴포넌트를 잡아당겨 고정하고 있는 면이라고 볼 수 있습니다. 예를 들어 left top 방향에서 컴포넌트를 잡고 있으면 x, y 좌푯값은 고정된 상태에서 나머지 속성에 따라 컴포넌트의 크기가 변합니다. 반대로 left, top 방향에서 컴포넌트를 잡고 있지 않다면 컴포넌트는 기존 위치에서 벗어나게 됩니다.
아래 그림은 anchor 속성값을 "right bottom"으로 지정했습니다. 부모 컴포넌트의 크기 변경에 따라 컴포넌트의 x, y 좌푯값이 이동하는 것을 확인할 수 있습니다. 빨간색으로 표시된 부분은 원래 컴포넌트의 위치를 표시한 것입니다.
부모 컴포넌트의 크기가 커질 때 자식 컴포넌트의 크기는 작아지는 경우도 있습니다. 예를 들어 anchor 속성값이 "left"인 경우 x 좌푯값은 고정된 상태지만 나머지 방향에서는 기존 상태를 유지합니다. y 좌푯값은 아래로 이동하고 bottom, right 방향으로 컴포넌트의 크기가 변경되지 않습니다. 컴포넌트의 크기는 그대로 유지하려고 하고 y 좌푯값이 아래로 이동하다 보니 컴포넌트의 높이값이 감소하게 됩니다.
아래 표는 각 속성값에 따라서 변하는 x, y 좌푯값과 컴포넌트의 크기 변화를 정리한 내용입니다.
속성값 | x 좌푯값 | y 좌푯값 | 너비 | 높이 |
|---|---|---|---|---|
default (left top) | X | X | X | X |
all | X | X | O | O |
none | O | O | O(감소) | O(감소) |
left top right | X | X | O | X |
left top bottom | X | X | X | O |
top right bottom | O | X | X | O |
left right | X | O | O | O(감소) |
left bottom | X | O | X | X |
top right | O | X | X | X |
top bottom | O | X | O(감소) | O |
right bottom | O | O | X | X |
left | X | O | X | O(감소) |
top | O | X | O(감소) | X |
right | O | O | X | O(감소) |
bottom | O | O | O(감소) | X |
Position2 (V9.2 추가)
position2란 비율인 “%”로 Position을 지정할 수 있도록 하는 속성을 의미합니다. UX-Studio에서 Ruler, DotGrid(화면 바닥에 보이는 점들)등의 Position2 관련 편집기능을 제공합니다.
좌표계 설명
기존 position의 좌표는 화면의 left와 top을 기준으로 하여 기준점에서 떨어진 pixel 거리를 좌표 정보로 사용합니다.
V9.2에서 추가된 position2는 기존 좌표계의 표현 한계를 극복하기 위해 도입된 좌표계로서 아래그림과 같이 사용자가 입력한 left, right, width, top, bottom, height 중 4개를 입력 받아 표현됩니다.
컴포넌트의 Position2 설정
컴포넌트의 Property로 position2와 positiontype이 추가되었으며, 컴포넌트의 좌표계는 positiontype으로 결정됩니다.
Properties Window에서는 position, position2 양쪽 모두 수정이 가능하지만, XFDL의 Source에는 positiontype에서 지정된 좌표계로 저장됩니다.
Properties Window에서는 추가된 Position2의 단위를 쉽게 변경할 수 있도록 px, %를 지원합니다.
Percent단위는 position2에서만 지원되며, 컴포넌트의 positiontype이 position을 사용하는 경우에는 해당 기능으로 값이 변경되지 않습니다.
Form Design
Tracker
컴포넌트의 positiontype을 position2로 설정할 경우 tracker 모양이 다르게 표시됩니다.
Positioin2 Tracker는 고정된 변을 붉은 색으로 표시하여 position2의 값을 별도로 확인하지 않아도 Anchor 상태를 알 수 있습니다.
Ruler / Dot Grid
Position2는 Percent입력을 지원하기 때문에, Form Design상에서 손쉽게 확인할 수 있도록 Percent단위로 정보를 표시해 주는 기능이 추가되었습니다.
Ruler의 Popup Menu에서 Show Pixel Ruler / Show Percent Ruler를 선택할 경우 해당 단위로 Ruler와 Dot Grid의 표시 방법이 변경됩니다.
컴포넌트 Resize Info
컴포넌트를 한 개만 선택한 상태에서 Tracker로 Resize를 하는 경우, Resize되는 정보를 표시해 줍니다.
만약 Ruler단위가 Percent로 표시 중이라면 Resize Info도 Percent 단위로 표시됩니다.
Position Editor
사용자가 쉽게 Position정보를 설정할 수 있도록 UI를 가진 Editor를 제공합니다. Position Editor는 Form Design의 Minitoolbar에서 호출할 수 있습니다.
Minitoolbar는 XPLATFORM 9.2 버전에서 추가된 기능으로 자주 사용되는 Style Property를 메뉴를 사용하여 손쉽게 수정할 수 있는 기능입니다.
Position Editor에서 수정된 값은 대상 컴포넌트가 사용중인 positiontype에 맞는 position, position2값으로 변경되어 반영됩니다.
New Project Wizard
Form Design에서 컴포넌트를 생성할 경우, 생성될 컴포넌트의 positiontype의 기본값을 New Project Wizard에서 입력할 수 있도록 기능이 추가되었습니다.
입력된 PositionType은 XPRJ파일에 저장되어 Project단위로 관리됩니다.
New Project Wizard에서 선택된 PositionType은 Tools > Options에서 변경 가능합니다.
Position2관련 주의사항
Layout Manager 기능을 이용하여 Form을 Design하는 경우, Left, Top, Width, Height를 이용하여 Position2를 지정하지 않으면 추가 Layout에서 컴포넌트가 사라지는 현상이 발생하므로 주의하십시오.
예를 들어, 아래 그림과 같이 Left, Top, Right, Bottom을 이용하여 Position2를 지정하면 Default Layout에서는 Button이 정상으로 보입니다.
하지만, 아래 그림과 같이 추가 Layout에서는 Button이 사라져서 보이지 않게 됩니다.
이 현상이 발생하는 이유는 Form의 Left, Top 위치가 고정되어 있기 때문입니다.
따라서, Layout Manager기능을 이용할 경우 반드시 Left, Top, Width, Height를 이용하여 Position2를 설정하십시오.