컴포넌트

Position

넥사크로 스튜디오에서는 폼이나 각 컴포넌트의 위치를 left, top, right, bottom width, height 속성값을 지정해 지정할 수 있습니다. 각 속성값은 픽셀 단위(px) 또는 퍼센트(%) 중 하나를 선택해서 사용할 수 있습니다. 기본 속성 외에 Position Base, Size Base 속성을 지원합니다.

기본 속성

넥사크로플랫폼에서 사용하는 좌표계는 아래 그림과 같이 left, right, width, top, bottom, height 중 속성값 중 4개 속성값을 선택해 사용할 수 있습니다.

속성 창에서 Position 관련 속성의 단위는 픽셀(px)과 퍼센트(%)가 존재합니다. 각 속성의 단위는 둘 중에 하나만 선택할 수 있습니다. 속성 단위가 변경되면 속성값을 단위에 맞게 자동으로 변환합니다. 각 속성값은 부모 컴포넌트를 기준으로 설정되며 PositionBase를 설정한 경우에는 해당 컴포넌트를 기준으로 설정됩니다.

트래커

컴포넌트를 선택했을 때 Position 속성에 따라 해당하는 트래커(Tracker)는 붉은색(또는 파란색)으로 표시됩니다.

컴포넌트의 positionstep 속성값이 -1이거나 두 개 이상의 컴포넌트를 선택하지 않은 경우에는 컴포넌트의 가운데 지점에 PositionBase 트래커가 표시됩니다.

두 개 이상의 컴포넌트를 선택한 경우에는 마지막 선택한 컴포넌트의 트래커만 채워진 점으로 표시되며 나머지 컴포넌트는 속이 비어있는 점으로 표시됩니다. 두 개 이상의 컴포넌트를 선택한 상태에서 메뉴[Design] 항목에서 Align, Space, Size, Position, Arrange 항목 선택 시 마지막 선택한 컴포넌트를 기준으로 관련 속성이 변경됩니다.

min, max, fittocontents 속성

컴포넌트의 높이, 너비의 최대, 최솟값을 지정할 수 있는 minwidth, minheight, maxwidth, maxheight 속성값을 지정할 수 있습니다. 해당 속성값을 설정한 경우에 width, height 속성값이 지정된 범위를 벗어나는 경우에는 width, height 속성값을 무시하고 min, max 속성값으로 지정한 값이 설정됩니다.

컴포넌트에 포함된 콘텐츠(텍스트, 이미지 등)에 맞게 컴포넌트의 크기(높이, 너비)를 변환하고자 할 때는 fittocontents 속성을 사용합니다. 예를 들어 ImageViewer 컴포넌트의 크기를 image 속성값으로 지정한 이미지 크기에 따라 변경할 수 있습니다.

minwidth, minheight, maxwidth, maxheight, fittocontents 속성은 앱 실행 시 반영되는 속성입니다. 넥사크로 스튜디오 디자인 모드에서 해당 속성값에 따라 컴포넌트의 크기를 변경하려면 컴포넌트를 선택하고 메뉴[Design > Fit to Contents] 또는 툴바나 컨텍스트 메뉴에서 [Fit to Contents] 항목을 선택합니다.

PositionBase

컴포넌트의 위치를 지정할 때 부모 컴포넌트(Form, Div 등)을 기준으로 삼지 않고 같은 부모를 가지는 컴포넌트를 기준으로 위치를 지정할 수 있습니다. 부모 컴포넌트만을 기준으로 컴포넌트를 배치하는 경우에는 모든 컴포넌트의 위치를 부모 컴포넌트와 간격을 계산해 배치해야 했지만 컴포넌트를 기준으로 배치하는 경우에는 컴포넌트의 배치 간격만 정해지면 쉽게 배치할 수 있습니다.

아래 그림의 경우 첫 번째 행에 배치된 Button01 컴포넌트의 left 속성값은 "183"입니다. Button00 컴포넌트의 너비와 간격을 같이 계산해야 합니다. 하지만 두 번째 행에 배치된 Button01 컴포넌트의 left 속성값은 "Button00:28"과 같은 식으로 Base가 되는 컴포넌트와 Base 컴포넌트를 기준으로 간격만 지정합니다.

제약사항

• 다른 부모를 갖는 컴포넌트를 Base 컴포넌트로 설정할 수 없습니다.

• positionstep 속성값이 다른 컴포넌트를 Base 컴포넌트로 설정할 수 없습니다.

• positionstep 속성값이 -1인 경우(Fixed Component)는 다른 컴포넌트를 Base 컴포넌트로 설정할 수 없으며 다른 컴포넌트가 해당 컴포넌트를 Base 컴포넌트로 설정할 수 없습니다.

• z-order가 자신보다 낮은 컴포넌트만 Base 컴포넌트로 지정할 수 있습니다. z-order가 자신보다 높은 컴포넌트를 지정하려 하는 경우에는 아래와 같은 경고 메시지가 출력되며 z-order를 변경할지를 확인합니다.

제약사항에 따라 positionstep 속성값이 -1이거나 선택한 컴포넌트와 부모가 다르거나 positionstep 속성값이 다른 경우에는 속성창에 표시되지 않습니다. 또한, z-order가 자신보다 높은 컴포넌트도 속성창에는 표시되지 않습니다.

PositionBase 트래커

PositionBase 트래커는 하나의 컴포넌트를 선택했을 때 컴포넌트 영역의 가운데 [+] 형태로 표시됩니다. 해당 트래커를 마우스 버튼으로 누른 상태에서 Base 컴포넌트로 지정할 컴포넌트로 드래그하면 정확한 값을 지정할 수 있는 창이 표시되며 Base 컴포넌트를 지정할 수 있습니다.

드래그 방향에 따라 지정되는 속성은 아래와 같습니다.

연결된 Base 컴포넌트를 선택했을 때는 점선으로 연결 관계를 표시합니다.

컴포넌트를 선택하지 않았을 경우에는 연결 관계를 표시하지 않습니다.

연결 관계 삭제

디자인창에서 연결 관계를 표시하는 선을 선택한 후 [Delete]키를 입력하거나 오른쪽 마우스 클릭 후 [Delete] 항목을 선택하면 연결 관계가 없어집니다. 컴포넌트를 선택하고 속성창에서 해당 속성값의 Base 항목을 지워도 연결 관계가 없어집니다.

컴포넌트의 positionstep 속성값이 변경되거나 z-order가 변경되는 경우에도 연결 관계가 삭제됩니다. 연결 관계가 삭제될 대상을 경고 메시지로 보여주고 삭제된 결과는 Output 창에 표시됩니다.

Position Editor

컴포넌트를 선택하고 오른쪽 마우스를 클릭한 후 미니 툴바에서 [Position Editor] 아이콘을 선택하거나 메뉴[Design > Position Editor]를 선택하고 실행할 수 있습니다.

Position Editor에서는 선택한 컴포넌트의 상위 오브젝트를 기준으로 속성값을 수정할 수 있습니다.

"Use anchor position" 옵션을 선택한 경우에는 원하는 항목을 고정시킨 상태에서 값을 수정할 수 있습니다. 아래 그림과 같은 경우 Left, Top 속성값이 고정된 상태이고 해당 속성값은 지울 수 없습니다.

가이드

눈금자

폼 디자인 상에서 위치를 지정하면서 사용한 단위에 따라 레이아웃을 쉽게 배치할 수 있도록 눈금자의 단위도 픽셀과 퍼센트 둘 중에 하나를 선택할 수 있습니다.

Form 영역에서 마우스 커서를 이동할 경우 가로/세로 위치를 눈금자에서 표시합니다.

가이드 라인

가이드 라인은 눈금자(Ruler)에서 지원되는 기능으로 개발자가 임의로 수평/수직 방향으로 안내선을 만들어 해당 선에 컴포넌트를 정렬키는 기능을 지원합니다.

눈금자 위의 원하는 지점을 마우스로 클릭하면 가이드 라인이 생성되며, 생성된 가이드 라인은 마우스 드래그로 위치를 변경할 수 있습니다. 가이드 라인을 디자인 창 영역 밖으로 드래그앤드롭하거나 눈금자 위에 있는 가이드 라인의 역삼각형 아이콘을 더블 클릭해 제거할 수 있습니다.

Form에 레이아웃이 2개 이상 있는 경우 레이아웃에 따라 다른 가이드라인을 설정할 수 있습니다. 넥사크로 스튜디오를 종료하더라도 설정한 가이드라인은 그대로 유지됩니다.

가이드라인에 맞추어 컴포넌트를 배치한 경우에는 가이드라인을 이동하면 해당 방향으로 컴포넌트의 크기가 변경됩니다.

격자 표시

컴포넌트의 배치를 눈으로 쉽게 알아볼 수 있도록 Form 디자인 화면의 배경을 격자 형태로 제공합니다. 눈금자의 표시 단위에 따라 격자 간격을 다르게 설정할 수 있으며 아래와 같이 4가지 형식으로 표시할 수 있습니다.

Snap

Form 디자인에서 컴포넌트를 이동하거나 크기를 변경할 때, 미세한 조정을 지원하기 위해 다른 컴포넌트나 옵션에서 설정된 Dot Grid에 가까이 가져가면 자동으로 해당 위치에 배치해주는 스냅(Snap) 기능을 지원합니다.