7.Arrangement

넥사크로 컴포넌트 좌표 체계와 상대좌표 설정하는 방법을 알아 봅니다.
좌표 설정을 이용하여 컴포넌트 Move, Resize 구현이 가능 합니다.
소스참고
\nexacro17_Education_Materials\Sample\EduProject\CompCom\CompCom_Arrange.xfdl

7.1Position

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

그림 7-1설치1

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

그림 7-2설치1

컴포넌트

left

top

right

bottom

width

height

1

10

10

미지정

미지정

100

30

2

미지정

10

10

미지정

100

30

3

10

미지정

미지정

10

100

30

4

미지정

미지정

10

10

100

30

5

10

50

10

50

미지정

미지정

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

그림 7-3설치1

7.2Arrangement

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

Position 적용

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

그림 7-4화면만들기2

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

그림 7-5화면만들기2

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

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

그림 7-6화면만들기2

그림 7-7화면만들기2

Size 적용

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

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

그림 7-8화면만들기2

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

그림 7-9화면만들기2

컴포넌트 생성 순서(Z-order)상 앞에 생성된 컴포넌트만 Base 컴포넌트로 설정할 수 있습니다.

나중에 생성한 컴포넌트를 Base 컴포넌트로 지정 할 경우 생성순서를 변경할지 여부의 팝업창이 제시됩니다.

Arrangement기능이 설정된 컴포넌트들을 함께 Copy&Paste를 할 경우 Arrangement설정은 모두 삭제됩니다.

7.2.1Fit to Contents

컴포넌트 내부 콘텐츠에 따라 컴포넌트 사이즈를 자동으로 맞춰주는 기능 입니다.
컴포넌트 내부 콘텐츠 내용에 맞게 컴포넌트의 크기를 자동으로 맞춰주는 기능입니다.
내부 콘텐츠가 가변적으로 변경이 되거나, 다국어 처리를 할때 한글과 영어에 따라 텍스트 길이가 달라지는 경우 등에 적용이 가능 합니다.
버튼 컴포넌트를 생성하고 앞쪽의 컴포넌트 기준으로 상대좌표를 설정 합니다.

그림 7-10화면만들기2

그림 7-11화면만들기2

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

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

그림 7-12화면만들기2

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

그림 7-13화면만들기2

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

그림 7-14화면만들기2

스크립트 지정

실행 상태에서 스크립트로 적용 할 경우 컴포넌트의 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");

그림 7-15화면만들기2

fittocontents 속성은 Button, CheckBox, FileDownload, ImageViewer, Menu, Radio, Static 컴포넌트에서만 사용 할 수 있습니다.

7.3화면 실습

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

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

그림 7-16설치1

예시 화면 항목

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

구현 내용

그림 7-17예시1

그림 7-18예시2

적용한 결과는 아래 경로의 화면에서 확인 할 수 있습니다.
nexacro17_Education_Materials\Sample\EduProject\Smpl\ArrangeFit.xfdl