16.Form 디자인 | MLM

Edit

16.1MLM (Multi Layout Manager)

넥사크로플랫폼은 다양한 크기를 가지는 디바이스에 대응하는 화면 디자인을 하나의 소스로 개발할 수 있도록 MLM(Multi Layout Manager)기능을 제공합니다. 앱을 구성하는 폼은 화면 크기에 따라 여러 개의 레이아웃을 사용할 수 있고 서브 레이아웃을 사용하면 내부적인 컴포넌트까지 세부적으로 배치할 수 있습니다. 또한 모바일 디바이스에서 스텝 기능을 활용하면 최적화된 화면을 구성할 수 있습니다.

16.1.1Layout

Layout을 편집할 수 있는 컴포넌트는 기본적으로 "default"라는 이름의 레이아웃을 가집니다. Form 생성 시에 레이아웃을 추가할 수 있으며 생성 후에는 오른쪽 마우스 클릭 후 나타나는 메뉴에서 레이아웃을 추가하거나 삭제할 수 있습니다.

"default" 레이아웃은 삭제하거나 변경할 수 없습니다.

표 16-1Dataset Editor


속성

설명

1

Add Layout

레이아웃 추가

2

Copy & Add Layout

선택한 레이아웃 정보를 복사해 새로운 레이아웃을 추가

3

Delete Layout

선택한 레이아웃 삭제

4

Rename Layout

선택한 레이아웃의 이름을 변경

5

View

레이아웃 정보 표시

(Name, Screen, Size 항목 선택)

"default" 레이아웃은 Name 항목을 보이지 않게 설정하더라도 default 라는 문구가 표시됩니다.

Layout 툴바

편집하는 화면의 Layout을 기준으로 레이아웃을 선택하고 편집할 수 있는 툴바를 제공합니다.

툴바에서는 레이아웃의 3가지 정보를 표시하고 있습니다.

툴바의 툴팁에서는 툴바 정보를 포함하여 추가적인 정보를 표시하고 있습니다.

툴바에서 레이아웃을 선택하면 해당 레이아웃 편집 화면으로 변경됩니다.

Div, PopupDiv, Tabpage Layout

Div, PopupDiv, Tabpage 컴포넌트는 별도 레이아웃을 가지지 않고 Form 레이아웃을 따라갑니다. 컴포넌트를 더블 클릭하거나 오른쪽 마우스를 클릭하고 메뉴에서 [Edit] 항목을 선택해 해당 컴포넌트에 포함된 화면 배치를 수정할 수 있습니다.

컴포넌트의 url 속성값을 지정해 다른 Form을 연결한 경우에는 연결된 Form을 편집할 수 있도록 열어줍니다.

레이아웃 툴팁

컴포넌트의 url 속성값을 지정해 다른 Form을 연결한 경우에는 넥사크로 스튜디오 디자인 모드에서 관련 정보를 툴팁 형태로 제공합니다. 컴포넌트가 겹쳐있는 경우에는 겹쳐진 컴포넌트와 관련된 정보를 모두 제공합니다.

속성값 색상 표시

표 16-2Display Property Information


색상

정보

1

굵은 글꼴

"default" 레이아웃에서 편집한 값

2

파란색

추가된 레이아웃에서 편집한 값 (해당 레이아웃을 선택한 경우에 파란색으로 표시됨)

16.1.2Initialize

지정된 속성값을 사용하고 이후에는 사용자가 입력하거나 실행 중 변경된 값을 사용해야 하는 경우가 있습니다. 그런 항목 값은 Initialize 속성으로 별도 관리합니다. 속성값 중 Layout Information에 해당하는 값을 제외한 나머지 값 중에서 일부 항목만 편집할 수 있습니다.

편집 화면에서는 Init Value가 적용되지 않습니다. 값 적용 확인 실제 실행으로 확인할 수 있습니다.

16.1.3스텝

스텝(Step)이란 여러 개 단계 이루어진 페이지를 하나의 폼에서 개발할 수 있는 기능을 의미합니다. 스텝은 간단하게 폼에서 stepcount 속성값을 지정하면 구현할 수 있습니다.

표 16-3Dataset Editor


속성

설명

1

Add Step

Step을 추가합니다.

stepcount 속성값이 1 증가합니다.

2

Delete Step

Step을 삭제합니다.

stepcount 속성값이 1 감소합니다.

3

Add/Delete Step

버튼 클릭 시 Step을 추가하거나 감소합니다.

입력창에 직접 Step 개수를 지정할 수 있습니다.

stepcount

  1. 현재 편집중인 스텝 영역을 표시합니다. 마우스 포인터의 위치에 따라 편집 영역이 변경됩니다.

  2. 각 스텝 영역은 파란색 점선으로 구분되어 표시됩니다.

여러 개의 스텝을 만들어도 폼의 크기는 변하지 않습니다. 실행 시에는 하나의 스텝만 보이고 사용자의 조작에 따라 스텝을 이동하게 됩니다.

특정 컴포넌트를 선택한 후에 "positionstep" 속성값을 변경하면 해당 스텝 영역으로 컴포넌트가 이동합니다. 만약, "positionstep" 속성값이 스텝 영역을 벗어나면 0으로 처리됩니다.