넥사크로 컴포넌트 좌표 체계와 상대좌표 설정하는 방법을 알아 봅니다.
좌표 설정을 이용하여 컴포넌트 Move, Resize 구현이 가능 합니다.

소스참고
\nexacro17_Education_Materials\Sample\EduProject\CompCom\CompCom_Arrange.xfdl

Position

화면에 컴포넌트를 생성하면 컴포넌트 좌표와 크기는 아래처럼 구성되며, 픽셀 또는 퍼센트 단위로 설정이 가능 합니다.

화면에 컴포넌트를 아래와 같이 생성합니다,
컴포넌트 배치에 따라 좌표 설정을 다르게 지정합니다.

화면을 실행하여 화면 사이즈를 변경하면서 결과를 확인 합니다.
좌표 설정에 따라 컴포넌트가 Move 또는 Resize 되는 결과를 확인 할 수 있습니다.

Arrangement

컴포넌트의 좌표를 Form 기준으로 설정하는 것이 아니라 기준 컴포넌트와의 좌표를 지정하는 기능입니다.
기준 컴포넌트의 위치나 크기가 변하는 것에 상대좌표로 설정된 컴포넌트의 위치와 크기가 변경됩니다.
기준 컴포넌트 지정 할 경우 동일한 Child 내에서만 가능 합니다.

Position 적용

1 컴포넌트를 선택하면 십자 모양의 Tracker가 나타납니다. 
2 Tracker를 마우스 드래그 하여 Base 컴포넌트에 설정 합니다.
3 Base 컴포넌트 기준의 좌표를 픽셀, 퍼센트 단위로 입력 합니다.

컴포넌트 left 속성에 아래와 같이 지정되며, 속성창에서 직접 선택하거나 입력해도 됩니다.

동일한 방식으로 top, right 등의 좌표를 지정 할 수 있습니다. 사용자 동작 패턴을 적용하여 필요한 설정만 가능하도록 제공 합니다.

좌상단으로 드래그 하여 적용시 left, top 좌표를 지정 할 수 있습니다.

Size 적용

Base 컴포넌트 크기를 기준으로 Target 컴포넌트의 크기를 설정 할 수 있습니다.

width 또는 height 속성에 Base 컴포넌트를 지정하고 크기를 퍼센트 단위로 지정합니다.

Base 컴포넌트 사이즈가 변경되면 Target 컴포넌트의 크기가 상대적으로 변경 됩니다.

Fit to Contents

컴포넌트 내부 콘텐츠에 따라 컴포넌트 사이즈를 자동으로 맞춰주는 기능 입니다.

컴포넌트 내부 콘텐츠 내용에 맞게 컴포넌트의 크기를 자동으로 맞춰주는 기능입니다.
내부 콘텐츠가 가변적으로 변경이 되거나, 다국어 처리를 할때 한글과 영어에 따라 텍스트 길이가 달라지는 경우 등에 적용이 가능 합니다.

버튼 컴포넌트를 생성하고 앞쪽의 컴포넌트 기준으로 상대좌표를 설정 합니다.

넥사크로 스튜디오에서 적용

Fit to Contents를 적용할 컴포넌트를 선택 합니다.

넥사크로 스튜디오 상단 메뉴의 Design > Fit to Contents 또는 상단 Align 툴바를 이용하여 적용 합니다.

Fit to Contents를 width로 적용한 결과 입니다.

스크립트 지정

실행 상태에서 스크립트로 적용 할 경우 컴포넌트의 fittocontents 속성을 변경합니다.

//적용
this.btn_retrieve.set_fittocontents("width");
this.btn_add.set_fittocontents("width");
this.btn_del.set_fittocontents("width");
this.btn_save.set_fittocontents("width");	

//해제
this.btn_retrieve.set_fittocontents("none");
this.btn_add.set_fittocontents("none");
this.btn_del.set_fittocontents("none");
this.btn_save.set_fittocontents("none");

화면 실습

Arrangement 와 Fit to Contents 기능을 이용하여 다음과 같은 화면을 구성합니다.

교육자료 아래의 경로에 기본 화면이 생성되어 있습니다.
이 화면에서 아래 내용을 적용하여 기능을 완성해 봅니다.

nexacro17_Education_Materials\Sample\EduProject\Smpl\ArrangeFit_Exe.xfdl

예시 화면 항목

1 영화 제목    2 제작사    3 제작년도    4 영화내용    5 상세정보

구현 내용

• 제작사 표현 컴포넌트는 텍스트가 잘리지 않게 표현 합니다.

• 제작년도 표현 컴포넌트는 제작사 컴포넌트 바로 뒤에 위치 합니다.

• 영화내용 텍스트가 짧은 경우는 영화내용 컴포넌트의 최소 사이즈를 유지 합니다.

• 영화내용 텍스트가 긴 경우 해당 컴포넌트 사이즈를 길이이 맞게 늘려주고, 하단의 상세 정보를 그 밑으로 이동 합니다.

적용한 결과는 아래 경로의 화면에서 확인 할 수 있습니다.

nexacro17_Education_Materials\Sample\EduProject\Smpl\ArrangeFit.xfdl