MLM (Multi Layout Manager)
넥사크로는 다양한 크기를 가지는 디바이스에 대응하는 화면 디자인을 하나의 소스로 개발할 수 있도록 MLM(Multi Layout Manager)기능을 제공합니다. 앱을 구성하는 폼은 화면 크기에 따라 여러 개의 레이아웃을 사용할 수 있고 서브 레이아웃을 사용하면 내부적인 컴포넌트까지 세부적으로 배치할 수 있습니다. 또한 모바일 디바이스에서 스텝 기능을 활용하면 최적화된 화면을 구성할 수 있습니다.
Layout
Layout을 편집할 수 있는 컴포넌트는 기본적으로 "default"라는 이름의 레이아웃을 가집니다. Form 생성 시에 레이아웃을 추가할 수 있으며 생성 후에는 오른쪽 마우스 클릭 후 나타나는 메뉴에서 레이아웃을 추가하거나 삭제할 수 있습니다.
"default" 레이아웃은 삭제하거나 변경할 수 없습니다.
속성 | 설명 | |
|---|---|---|
1 | Add Layout | 레이아웃 추가 |
2 | Copy & Add Layout | 선택한 레이아웃 정보를 복사해 새로운 레이아웃을 추가 |
3 | Delete Layout | 선택한 레이아웃 삭제 |
4 | Rename Layout | 선택한 레이아웃의 이름을 변경 |
5 | View | 레이아웃 정보 표시 (Name, Screen, Size 항목 선택) "default" 레이아웃은 Name 항목을 보이지 않게 설정하더라도 default 라는 문구가 표시됩니다. |
Layout 툴바
편집하는 화면의 Layout을 기준으로 레이아웃을 선택하고 편집할 수 있는 툴바를 제공합니다.
툴바에서는 레이아웃의 3가지 정보를 표시하고 있습니다.
Screen 타입에 따라 레이아웃의 아이콘 표시
(none, desktop, tablet, phone, desktop + tablet, desktop + phone, tablet + phone, all)
레이아웃 이름
크기 (너비 x 높이)
툴바의 툴팁에서는 툴바 정보를 포함하여 추가적인 정보를 표시하고 있습니다.
screenid
stepcount
stepindex
description
툴바에서 레이아웃을 선택하면 해당 레이아웃 편집 화면으로 변경됩니다.
Div, PopupDiv, Tabpage Layout
Div, PopupDiv, Tabpage 컴포넌트는 별도 레이아웃을 가지지 않고 Form 레이아웃을 따라갑니다. 컴포넌트를 더블 클릭하거나 오른쪽 마우스를 클릭하고 메뉴에서 [Edit] 항목을 선택해 해당 컴포넌트에 포함된 화면 배치를 수정할 수 있습니다.
컴포넌트의 url 속성값을 지정해 다른 Form을 연결한 경우에는 연결된 Form을 편집할 수 있도록 열어줍니다.
레이아웃 툴팁
컴포넌트의 url 속성값을 지정해 다른 Form을 연결한 경우에는 넥사크로 스튜디오 디자인 모드에서 관련 정보를 툴팁 형태로 제공합니다. 컴포넌트가 겹쳐있는 경우에는 겹쳐진 컴포넌트와 관련된 정보를 모두 제공합니다.
속성값 색상 표시
색상 | 정보 | |
|---|---|---|
1 | 굵은 글꼴 | "default" 레이아웃에서 편집한 값 |
2 | 파란색 | 추가된 레이아웃에서 편집한 값 (해당 레이아웃을 선택한 경우에 파란색으로 표시됨) |
Initialize
지정된 속성값을 사용하고 이후에는 사용자가 입력하거나 실행 중 변경된 값을 사용해야 하는 경우가 있습니다. 그런 항목 값은 Initialize 속성으로 별도 관리합니다. 속성값 중 Layout Information에 해당하는 값을 제외한 나머지 값 중에서 일부 항목만 편집할 수 있습니다.
편집 화면에서는 Init Value가 적용되지 않습니다. 값 적용 확인 실제 실행으로 확인할 수 있습니다.
스텝
스텝(Step)이란 여러 개 단계 이루어진 페이지를 하나의 폼에서 개발할 수 있는 기능을 의미합니다. 스텝은 간단하게 폼에서 stepcount 속성값을 지정하면 구현할 수 있습니다.
속성 | 설명 | |
|---|---|---|
1 | Add Step | Step을 추가합니다. stepcount 속성값이 1 증가합니다. |
2 | Delete Step | Step을 삭제합니다. stepcount 속성값이 1 감소합니다. |
3 | Add/Delete Step | 버튼 클릭 시 Step을 추가하거나 감소합니다. 입력창에 직접 Step 개수를 지정할 수 있습니다. |
stepcount
현재 편집중인 스텝 영역을 표시합니다. 마우스 포인터의 위치에 따라 편집 영역이 변경됩니다.
각 스텝 영역은 파란색 점선으로 구분되어 표시됩니다.
여러 개의 스텝을 만들어도 폼의 크기는 변하지 않습니다. 실행 시에는 하나의 스텝만 보이고 사용자의 조작에 따라 스텝을 이동하게 됩니다.
특정 컴포넌트를 선택한 후에 "positionstep" 속성값을 변경하면 해당 스텝 영역으로 컴포넌트가 이동합니다. 만약, "positionstep" 속성값이 스텝 영역을 벗어나면 0으로 처리됩니다.
Fluid Layout
Form Layout 내 배치되는 컴포넌트의 위치를 고정하지 않고 설정된 규칙에 따라 자동으로 배치되도록 설정할 수 있습니다. 동적으로 컴포넌트를 추가하는 기능을 구현하거나 화면 크기에 따라 컴포넌트 배치 방식을 자동으로 변경하고자 할 경우에 활용할 수 있습니다.
컴포넌트 배치 기준 설정하기
Form 오브젝트 또는 컨테이너 컴포넌트(Div, Tab, View)에서 Layout 오브젝트의 type 속성으로 기본 배치 기준을 설정할 수 있습니다.
Form 오브젝트
Form Wizard에서 Layout Type 선택값을 변경하고 생성하거나 Form 생성 후 속성창에서 type 속성값을 변경할 수 있습니다. type 속성은 Layout 오브젝트 속성이며 각 Layout 별로 설정할 수 있습니다.
컨테이너 컴포넌트
컨테이터 컴포넌트에서 다른 Form 파일을 연결하지 않고 직접 컴포넌트를 배치할 때는 type 속성을 설정할 수 있습니다.
컴포넌트 배치하기(horizontal, vertical)
type 속성값을 "vertical"로 설정한 Div 컴포넌트를 예를 들어 설명합니다.
컴포넌트를 선택하고 마우스로 이동하기
배치할 컴포넌트를 선택하고 Div 컴포넌트 영역 위로 가져가면 디자인 화면에 현재 선택된 type 속성 정보를 표시하며 컴포넌트가 배치될 위치를 파란색으로 보여줍니다.
이미 배치된 컴포넌트 중간에 배치할 수도 있습니다.
배치된 컴포넌트의 위치를 변경할 수 있습니다.
컴포넌트를 그룹으로 묶어서 이동하기
Layout Order Editor를 사용하면 컴포넌트의 배치 순서 뿐 아니라 컴포넌트의 layoutorder 속성값을 설정할 수 있습니다.
컴포넌트의 layoutorder 속성값은 동적으로 컴포넌트를 생성하고 원하는 위치에 배치할 때 사용합니다. Layout Order Editor에서는 같은 layoutorder 속성값을 가지도록 컴포넌트를 설정하고 layoutorder 속성값을 변경해 여러 컴포넌트의 위치를 한 번에 변경할 수 있습니다.
1
컨테이너 컴포넌트를 선택하고 컨텍스트 메뉴에서 Edit 항목을 선택하거나 컨테이너 컴포넌트를 두 번 클릭해 편집 모드로 진입합니다.
2
컨텍스트 메뉴에서 Layout Order Editor를 선택합니다.
3
Layout Order Editor에서 Button 컴포넌트를 마우스로 선택하고 이동해 순서를 변경합니다.
컴포넌트의 layoutorder 속성값을 따로 설정하지 않으면 0으로 처리됩니다.
4
[+] 버튼을 클릭해 layoutorder 항목을 추가하고 값을 1로 설정합니다.
5
Button 컴포넌트를 마우스로 선택하고 추가한 layoutorder(1) 아래로 이동합니다.
layoutorder(1) 그룹 아래에 컴포넌트가 배치된 것을 확인합니다.
6
layoutorder(0) 항목을 클릭하고 값을 0 대신 2로 수정합니다.
값을 수정하면 layoutorder 항목과 하위 컴포넌트의 순서가 변경됩니다.
컴포넌트 배치하기(table)
type 속성값을 "table"로 설정한 Div 컴포넌트를 예를 들어 설명합니다.
특정 Cell 위치에 컴포넌트 배치하기
type 속성값을 "table"로 설정하면 tabletemplate 속성 기본값(Column 1개, Row 1개)이 적용된 상태로 편집창이 표시됩니다.
설명 | ||
|---|---|---|
1 | Reset Table | 편집창 왼쪽 상단 표 모양 아이콘을 클릭하면 Column, Row 숫자를 변경할 수 있는 Reset Table 창이 표시됩니다. |
2 | Column 편집 | 오른쪽 마우스 버튼 클릭 시 Column을 추가, 삽입, 삭제할 수 있는 컨텍스트 메뉴를 표시합니다. Column 항목 클릭 시 값을 수정할 수 있는 편집 상태로 전환됩니다. 경계선을 마우스로 드래그해서 값을 변경할 수 있습니다. 항목값이 px 또는 % 단위인 경우에는 1씩 변경되며 * 단위인 경우에는 0.5씩 변경됩니다. |
3 | Row 편집 | 오른쪽 마우스 버튼 클릭 시 Row를 추가, 삽입, 삭제할 수 있는 컨텍스트 메뉴를 표시합니다. Row 항목 클릭 시 값을 수정할 수 있는 편집 상태로 전환됩니다. 경계선을 마우스로 드래그해서 값을 변경할 수 있습니다. 항목값이 px 또는 % 단위인 경우에는 1씩 변경되며 * 단위인 경우에는 0.5씩 변경됩니다. |
Column 3개, Row 2개로 레이아웃을 설정한 경우 예시입니다. Div 컴포넌트에 가져갔을 때 가상의 Table Cell 영역이 표시되며 원하는 Cell 영역에 배치할 수 있습니다.
[Options > Form Design > Layout > Table Layout]에서 "Display table guidelines" 항목을 체크하면 Table Cell 영역을 구분하는 선과 tabletemplatearea 속성값으로 지정한 값이 항상 표시됩니다.
Button 컴포넌트 배치 시 2개 이상의 Cell 영역을 걸치도록 크기를 조정하면 2개 이상의 Cell 영역이 병합된 것처럼 컴포넌트를 배치할 수 있습니다(2개 이상의 Cell에서 드래그해서 선택하는 영역이 각 Cell 영역의 50% 이상인 경우에만 선택 상태가 됩니다).
컴포넌트의 기본 크기와 상관 없이 Cell 영역에 꽉 차게 크기가 조정됩니다(width, height 속성값이 100%로 설정됩니다). 컴포넌트 배치 후 컴포넌트 크기는 조정할 수 있습니다.
Div 같은 컨테이너 컴포넌트의 경우 더블 클릭 후 편집 모드에서만 Reset Table 기능 등을 사용할 수 있는 편집 화면이 표시됩니다.
편집 모드가 아닌 경우에도 컴포넌트 배치 시 참고할 수 있도록 마우스 커서가 컨테이너 컴포넌트 위로 이동하면 가이드라인 정보를 표시합니다.
Column, Row 추가, 삽입, 삭제
컨텍스트 메뉴에서 Column, Row를 추가, 삽입, 삭제할 수 있습니다.
추가
Column, Row를 마지막 위치에 추가합니다.
모든 Cell에 컴포넌트가 배치된 상태에서 Cell 영역이 아닌 곳에 컴포넌트를 추가하려는 경우에는 Row를 추가하고 컴포넌트를 추가할 것인지 아닌지 묻는 창이 표시됩니다. Row를 추가하지 않으면 마지막 Cell에 겹쳐서 컴포넌트를 추가합니다.
삽입
선택한 Column, Row 위치 앞에 Column, Row를 삽입합니다.
2개 이상의 Cell 영역을 걸친 컴포넌트 사이에 Column, Row를 삽입하는 경우에는 삽입된 Column, Row를 포함하도록 tablecellarea 속성값이 변경됩니다.
삭제
선택한 Column, Row를 삭제합니다.
Column, Row 삭제 시 해당 Column, Row에 컴포넌트가 배치된 경우 컴포넌트 삭제 여부를 묻는 창이 표시됩니다.
컴포넌트를 삭제하지 않는 경우 삭제하는 위치에 따라 컴포넌트가 겹쳐져 배치되거나 유효하지 않은 Cell 영역에 배치될 수 있습니다.
마지막 Column, Row를 삭제하는 경우
컴포넌트의 tablecellarea 속성값이 유효하지 않은 값이 되며 테이블 영역 오른쪽 또는 아래쪽에 배치됩니다.
컴포넌트의 크기가 % 단위로 설정된 경우에는 참조하는 Cell이 없어 화면에서 보이지 않게 됩니다.
마지막이 아닌 Column, Row를 삭제하는 경우
삭제된 Column, Row에 배치된 컴포넌트의 tablecellarea 속성값은 유지되며 뒤에 있는 Column, Row에 배치된 컴포넌트의 tablecellarea 속성값이 하나씩 당겨집니다. 때문에 삭제된 Column, Row 위치의 컴포넌트와 그 다음 Column, Row 위치의 컴포넌트가 겹쳐져 표시됩니다.
2개 이상의 Cell 영역을 걸친 컴포넌트가 포함된 Column, Row를 삭제하는 경우
삭제된 Column, Row를 제외하고 남은 Cell 영역에 맞게 tablecellarea 속성값이 변경됩니다.
같은 Cell 이름으로 설정한 영역에 컴포넌트 배치하기
2개 이상의 Cell에 같은 Cell 이름을 설정하고 해당 Cell 이름으로 설정된 영역에 컴포넌트를 배치할 수 있습니다. 같은 Cell 이름을 가지는 Cell 영역은 연속된 Cell로 구성된 사각형 형태가 되어야 합니다.
1
속성창에서 tabletemplatearea 속성 항목의 버튼을 클릭합니다.
Table Template Area 창이 뜨고 간단한 예시가 표시됩니다. 설정한 Column, Row에 맞게 원하는 tabletemplatearea 속성값을 설정합니다. 예시에 표시된 값을 복사해 사용할 수도 있습니다.
tabletemplatearea 속성값을 "A A B" "A A B"로 입력합니다.
2
Button 컴포넌트를 배치합니다.
Div 컴포넌트에 가져갔을 때 가상의 Table Cell 영역이 표시되며 Cell 이름이 표시됩니다.
3
특정 Cell 위에 마우스 포인터가 위치한 상태에서 Shift 키를 누르면 같은 이름을 가진 Cell이 선택된 상태로 표시됩니다.
4
같은 이름을 가진 Cell이 선택된 상태에서 마우스 버튼을 클릭하면 해당 영역에 컴포넌트가 배치됩니다.
이렇게 배치된 컴포넌트의 tablecellarea 속성값은 Cell 이름으로 설정됩니다. 위의 예에서 tablecellarea 속성값은 "A"가 됩니다.
컴포넌트 배치 기준, 간격 설정하기
화면에서 컴포넌트를 배치할 때 시작 위치부터 배치하는 것은 아닙니다. 기능 버튼의 경우에는 화면 오른쪽 위치에 배치하고 일정한 간격을 주어 사용자가 버튼을 쉽게 인지할 수 있도록 도와줍니다.
컴포넌트 배치 기준
type 속성값이 “horizontal”이나 “vertical”인 경우 속성값에 따라 “horizontal”이면 수평축, “vertical”이면 수직축이 Main Axis(주축)이 됩니다. 그리고 Main Axis와 교차하는 축이 Cross Axis(교차축)입니다. “horizontal”이면 수직축, “vertical”이면 수평축이 Cross Axis가 됩니다.
flexmainaxisalign, flexcrossaxisalign 속성값을 설정하지 않으면 아래와 같이 "start"로 설정됩니다.
flexmainaxisalign, flexcrossaxisalign 속성값을 "end", "center"로 설정하면 컴포넌트의 배치 위치가 변경됩니다. 배치 순서는 바뀌지 않습니다.
컴포넌트 간격 설정하기
spacing 속성값을 "5px", horizontalgap 속성값을 5로 설정했을 때 보여지는 모습입니다. spacing 속성은 Layout 컨테이너와 컴포넌트 사이의 간격을 설정합니다. 그리고 각 컴포넌트 간 간격은 horizontalgap 속성으로 설정합니다.
배치 간격을 특정 값으로 설정하지 않고 flexmainaxisalign 속성에서 배치 간격을 설정할 수 있습니다.
flexmainaxisalign | 배치 방식 |
|---|---|
spacebetween | (1) 첫 번째, 마지막 컴포넌트를 Main Axis의 Start, End 지점에 배치합니다. (2) 남은 여백을 각 컴포넌트 사이 간격으로 설정합니다. |
spacearound | 전체 여백을 컴포넌트 수만큼 나누어 컴포넌트 앞과 뒤에 간격으로 설정합니다. 컴포넌트 사이 간격은 Layout 컨테이너와 컴포넌트 사이의 간격의 2배로 처리됩니다. |
spaceevenly | 전체 여백을 컴포넌트 수+1만큼 나누어 컴포넌트 사이 간격과 Layout 컨테이너와 컴포넌트 사이의 간격으로 설정합니다. 모든 간격이 같은 값으로 처리됩니다. |
줄바꿈 처리하기
컴포넌트의 flexshrink 속성값을 설정하지 않았다면 1로 설정되어 배치된 컴포넌트가 Layout 컨테이너 영역을 벗어나면 컴포넌트의 크기를 재조정해 Layout 컨테이너 영역을 넘어가지 않도록 합니다.
하지만 컴포넌트의 width 또는 height 값이 px 단위로 설정되어 있고 flexshrink 속성값을 0으로 설정하면 컴포넌트의 크기에 따라 Layout 컨테이너 영역을 넘어갈 수 있습니다. 실행 시에는 스크롤바가 표시됩니다.
flexwrap 속성값을 "wrap"으로 설정하면 Layout 컨테이너 영역을 벗어나는 컴포넌트를 줄바꿈 처리해 다음 줄에 배치합니다.
Table Cell 간격 설정하기
tabletemplate 속성값 설정 시 "px", "%", "*" 3가지 단위 중 하나를 선택할 수 있습니다. Table template Editor에서 Create Table 버튼을 클릭해 Column, Row를 설정하는 경우에는 "1*"로 각 값이 설정됩니다.
"*"을 단위로 사용하는 Column, Row가 있는 경우에는 남은 여백을 나누어 크기로 설정합니다. 예를 들어 tabletemplate 속성값이 "1* 1* / 30px 2* 1*"인 경우 첫 번째 Column 너비를 30px로 설정하고 나머지 2개 Column 너비는 남은 여백의 2/3, 1/3으로 설정됩니다.
Table Cell 간격을 설정하려면 "*"을 단위로 사용하는 Column, Row가 없어야 합니다. 아래 그림은 tabletemplate 속성값을 "100px 100px / 30px 100px 30px"로 설정하고 tablecellalign 속성값을 "spacebetween spacebetween"으로 설정했습니다.