넥사크로플랫폼에서는 폼이나 각 컴포넌트의 위치를 left, top, right, bottom width, height 속성값을 지정해 지정할 수 있습니다. 각 속성값은 픽셀 단위(px) 또는 퍼센트(%) 중 하나를 선택해서 사용할 수 있습니다. 넥사크로 스튜디오에서는 포지션 에디터, 눈금자, DotGrid(화면 배경으로 레이아웃 배치를 위해 보이는 점), 가이드 라인 등 레이아웃 배치를 지원하는 기능을 제공합니다.

좌표계 설명

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

<Button id="Button00" text="Button00" width="120" height="50" left="20" top="20"/>

<Button id="Button00" text="Button00" left="20" top="20" right="260" bottom="230"/>

<Button id="Button00" text="Button00" right="260" bottom="230" width="120" height="50"/>

컴포넌트의 위치값 설정

컴포넌트의 위치를 설정할 때는 left, right, width, top, bottom, height 중 속성값 중에서 4개의 값을 선택해 사용하며 폼은 위치 설정 없이 width, height 2개의 속성값만 설정합니다.

속성 창에서 Position 관련 속성의 단위인 픽셀(px)과 퍼센트(%)를 쉽게 변경할 수 있습니다. 속성 단위가 변경되면 해당 속성값이 자동으로 변경됩니다.

스크립트에서 위치를 지정할 때는 아래와 같이 setter 메소드를 사용합니다. 단위를 지정할 수 있고 지정된 단위가 없으면 픽셀값으로 처리됩니다.

this.Button.set_left(10);
this.Button.set_left("10px");
this.Button.set_left("30%");

폼 디자인

트래커

마우스로 컴포넌트를 선택했을 때 컴포넌트의 고정된 변에 따라 트래커가 붉은색으로 표시됩니다. 트래커를 보면 해당 컴포넌트의 속성값이 어떻게 지정되었는지 알 수 있습니다.

눈금자 / Dot Grid

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

눈금자 컨텍스트 메뉴에서 Show Pixel Ruler / Show Percent Ruler를 선택하면 눈금자의 표시 단위와 Dot Grid의 표시 방법이 변경됩니다.

컴포넌트 크기 정보

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

포지션 에디터

사용자가 쉽게 Position 정보를 설정할 수 있도록 별도의 에디터를 제공합니다. 포지션 에디터는 컴포넌트를 선택했을 때 나타나는 미니 툴바에서 실행할 수 있습니다.

포지션 에디터에서 수정된 값은 해당 컴포넌트의 left, top, right, bottom, width, height 속성값에 반영됩니다.

Position 관련 주의사항

레이아웃 매니저 기능을 사용해 추가적인 레이아웃을 사용하는 경우, left, top, right, bottom 속성만으로 좌표값을 지정하게 되면 추가된 레이아웃의 크기에 따라 컴포넌트가 보이지 않을 수 있습니다.

예를 들어, 아래와 같이 left, top, right, bottom 속성을 지정해 버튼 컴포넌트의 위치를 지정하면 Default 레이아웃에서는 정상적으로 컴포넌트가 보입니다.

하지만 추가 레이아웃에서는 right, bottom 속성에 지정된 값이 폼의 크기를 벗어나기 때문에 정상적으로 버튼이 보이지 않습니다. 컴포넌트의 left, top 위치가 고정된 상태에서 폼 보다 큰 rigth, bottom 속성값이 적용되기 때문에 화면에서 사라진 것처럼 보이게 됩니다.