5.Form 디자인

5.1컴포넌트

5.1.1컴포넌트 배치컴포넌트:배치

폼을 디자인할 때 컴포넌트 툴바에서 선택한 컴포넌트를 배치할 수 있습니다.

그림 5-1Button component

Type Definition에 정의된 컴포넌트를 모아둔 컴포넌트 툴박스를 사용해서 동일하게 드래그앤드롭으로 컴포넌트를 배치할 수 있습니다. 컴포넌트 툴박스는 메뉴에서 [View > Toolbox]를 선택해 활성화할 수 있습니다.

그림 5-2Component Toolbox

자주 사용되는 컴포넌트컴포넌트:주요 컴포넌트는 아래와 같습니다.

표 5-1컴포넌트

아이콘

이름

설명

Select

하나 이상의 컴포넌트를 마우스로 드래그해서 선택합니다.

Div

Form안에 다른 Form을 불러와서 하나의 Form인 것처럼 사용하거나, 관련 있는 컴포넌트들을 하나의 그룹으로 묶어서 처리할 경우 사용되는 컴포넌트

Button

사용자로부터 마우스 입력을 받을 때 사용하는 컴포넌트

PopupDiv

하나의 화면에 여러 개의 부분화면을 구성할 때 사용

Combo

Edit와 Drop down List를 통합한 형태의 컴포넌트

CheckBox

Check 표시에 대한 TRUE/FALSE 값을 가지는 컴포넌트

ListBox

항목을 목록으로 나열한 후 선택할 경우 사용되는 컴포넌트.

Edit

문자열의 입출력을 가지는 컴포넌트

MaskEdit

날짜의 연월일시(yyyy/mm/dd hh:mi:ss) 형식 또는 숫자의 콤마 표시와 같이 규정된 형식으로 문자열의 입출력을 가지는 컴포넌트

TextArea

여러 줄의 문자열의 입출력을 가지는 컴포넌트

Menu

Menu 아이템을 구성할 경우 사용되는 컴포넌트

Tab

한 화면에서 여러 개의 Tab page를 분할할 경우 사용되는 컴포넌트

ImageViewer

화면에 이미지를 표시할 때 사용되는 컴포넌트

Radio

제시된 여러 가지 선택사항 중에서 하나의 항목을 선택해야 할 경우 사용되는 컴포넌트

Calendar

날짜를 입력할 때 사용되는 컴포넌트

Static

고정된 텍스트를 표시할 때 사용되는 컴포넌트

Grid

스프레드 시트와 유사하게 Dataset의 내용을 표 형식으로 처리하는 컴포넌트

Spin

정해진 규칙에 따라 손쉽게 숫자를 입력 받을 때 사용하는 컴포넌트

PopupMenu

PopupMenu를 구성할 경우 사용되는 컴포넌트

GroupBox

화면을 구성할 때 관련 있는 컴포넌트들을 그룹화하는 컴포넌트

ProgressBar

작업의 현재 진행 상태를 그래픽을 이용하여 보여주는 컴포넌트

Plugin

Plugin을 사용할 경우 사용되는 컴포넌트

Dataset

데이터를 테이블 형태로 저장하는 컴포넌트

Form 디자인 시 빈 공간에 마우스로 드래그 하게 되면 러버밴드(Rubber Band)러버밴드(Rubber Band)가 사각형으로 표시되며, 사각형의 시작과 끝 포인터 위치 및 너비와 높이 정보를 표시하여 생성될 컴포넌트의 크기를 조절할 때 사용자가 미리 가늠할 수 있도록 도와줍니다.

그림 5-3Rubber Band

최종적으로 마우스로 드래그 한 영역의 크기로 컴포넌트가 생성됩니다. 만약 마우스 드래그를 하지 않은 상태로 클릭만 하게 된다면, Type Definition에 정의된 컴포넌트의 기본 크기로 생성하게 됩니다.

그림 5-4Button component 생성

애플리케이션 개발 시 사용하지만 화면에 보여지지 않는 컴포넌트들을 별도로 관리할 수 있는 Invisible Objects 영역이 제공 되어 폼 디자인 작업시 각 컴포넌트의 속성을 조정할 수 있습니다.

그림 5-5Invisible Layout

Invisible Layout 창이 표시 되지 않는다면 Design Window [Popup Menu]에서 ‘Show Invisible Object Area’ 항목을 선택하면 Invisible Layout 창을 볼 수 있습니다.

그림 5-6Show Invisible Object Area Menu

Invisible Layout에서는 Icon 표시 방법 등을 아래그림과 같은 팝업 메뉴로 지원합니다.

그림 5-7Invisible Layout[Popup Menu]

표 5-2Invisible Layout[Popup Menu]

메뉴

기능

Edit

선택된 Invisible Object에 맞는 편집기를 제공합니다

Cut

선택된 오브젝트 잘라

Copy

선택된 오브젝트 복사

Paste

클립보드에 있는 오브젝트 붙여 넣기

Delete

선택된 오브젝트 삭제

View

Invisible Objects 표시 방식을 Big, List, Small, Report 중 선택하여 변경

5.1.2선택 변경컴포넌트:선택 변경

Form 디자인 시 조합 키를 사용해 다양한 방식으로 컴포넌트를 선택할 수 있습니다.

<Tab>키를 이용하여 현재 선택된 컴포넌트를 다른 컴포넌트로 바꿀 수 있습니다. 이동순서는 컴포넌트의 taborder순서에 따라 이동하며, <Shift + Tab>키를 이용할 경우 taborder의 역순서로 이동하게 됩니다.

그림 5-8Change Selection

<Ctrl>키 또는 <Shift>키를 이용하여 선택된 항목을 추가하거나 해제할 수 있는 다중 선택 기능을 지원합니다.

그림 5-9Multi Selection

마우스로 드래그하면 선택된 영역 내에 있는 컴포넌트가 모두 선택되지만 <Shift> 키를 누른 채 마우스로 드래그하면 기존에 선택한 항목은 해제되고 나머지 항목은 선택되는 반전 선택 기능을 사용할 수 있습니다.

그림 5-10Reverse Selection

컴포넌트가 선택되어 있는 상태에서 <ESC>키를 눌르면 선택된 컴포넌트의 상위 컴포넌트를 선택할 수 있습니다.

그림 5-11Parent Selection

5.1.3크기 변경컴포넌트:크기 변경

컴포넌트의 트래커(Tracker) 포인트가 활성화된 상태에서 하나의 포인트를 마우스로 드래그하면 컴포넌트의 크기를 변경할 수 있습니다.

그림 5-12Change Component Size

만약 여러 개의 컴포넌트가 선택된 경우, 같은 비율로 선택된 모든 컴포넌트의 크기가 변경됩니다.

그림 5-13Change Multi Selection Component Size

<Shift>키를 누른 상태에서 마우스를 드래그하면 드래그되는 포인트를 따라 가로, 세로가 같은 비율로 크기가 변경됩니다.

그림 5-14Change Component Size to used Shift Key

<Ctrl>키를 누른 상태에서 마우스 드래그로 크기를 변경하면, 컴포넌트의 정중앙 좌표를 기준으로 상하 또는 좌우로 같은 크기로 변경됩니다.

그림 5-15Change Component Size to used Ctrl Key

<Shift + Ctrl>키를 누른 상태에서 마우스 드래그로 크기를 변경하면, 두 가지 기능이 동시에 적용되어 컴포넌트의 정중앙 좌표를 기준으로 가로, 세로의 크기가 같은 비율로 변경됩니다.

그림 5-16Change Component Size to used Shift + Ctrl Key

마우스를 사용하지 않고 <Shift>키를 누른 상태에서 키보드의 방향키를 사용해 컴포넌트의 크기를 변경할 수 있습니다.

5.1.4위치 변경컴포넌트:위치 변경

선택된 컴포넌트들은 키보드의 방향키나 마우스 드래그로 위치를 변경할 수 있으며 변경된 좌표는 속성으로 바로 적용됩니다. 또한 <Ctrl>키를 누른 상태로 마우스로 드래그하면 해당 지점에 컴포넌트가 복사됩니다.

그림 5-17Copy Component

Form 디자인에서 컴포넌트를 이동하거나 크기를 변경할 때, 미세한 조정을 지원하기 위해 다른 컴포넌트나 옵션에서 설정된 Dot Grid에 가까이 가져가면 자동으로 해당 위치에 배치해주는 자석(Magnetic) 기능을 지원합니다.

그림 5-18Magnetic

자석 기능은 메뉴 [Tools - Options - Form Design]의 Option값에 따라 Dot Grid 또는 다른 컴포넌트에 대해 활성화 여부를 정할 수 있습니다.

<Alt>키를 누른 채로 컴포넌트를 이동할 경우는 자석 기능이 적용되지 않습니다.

5.1.5탭 순서컴포넌트:탭 순서(Tab order)

애플리케이션 실행 중 <Tab>키를 눌렀을 때 컴포넌트에서 다른 컴포넌트로 이동하는 순서를 설정합니다.

Tab Order Edit

디자인 창에서 <Ctrl + D>키를 누르거나, Design Window[Popup Menu]의 Tab Order Edit 메뉴를 통해 탭 순서를 편집할 수 있습니다.

그림 5-19Tab Order Edit

마우스 커서를 특정 컴포넌트 위로 가져가면 컴포넌트가 빨간색으로 강조되어 표시되며 'Next Taborder' 값에 해당하는 컴포넌트는 마우스 커서가 위치하지 않더라도 주황색으로 강조되어 표시됩니다. 또한, 여러 개의 컴포넌트가 겹쳐져 있는 경우에는 컴포넌트가 펼쳐진 상태로 보여 각 컴포넌트의 탭 순서를 편집할 수 있습니다.

Tab Order Edit 모드에서는 컨텍스트 메뉴를 아래와 같이 지원합니다.

메뉴

단축키

설명

Accessibility

Simulation Mode


접근성 기능을 지원하는 애플리케이션에서 실제 탭 기능이 어떻게 동작하는지 확인하는 시뮬레이션 기능 사용 여부를 토글로 선택합니다.

- 미사용: 컴포넌트의 tabstop 속성값이 false 인 경우에 탭 키 입력 시 포커스가 이동하지 않습니다.

- 사용: 컴포넌트의 accessibility.enable 속성값이 false 인 경우에 탭 키 입력 시 포커스가 이동하지 않습니다.

Set Next Tab Order


Next Tab Order 값을 직접 지정합니다.

Next Tab Order

Up

Next Tab Order 값을 1씩 더합니다.

Previous Tab Order

Down

Next Tab Order 값을 1씩 감합니다.

최솟값은 0입니다.

Next Tab Order(10)

Right

Next Tab Order 값을 10씩 더합니다.

Previous Tab Order(10)

Left

Next Tab Order 값을 10씩 감합니다.

현재 Next Tab Order 값이 10 이하인 경우에는 0으로 지정합니다.

Tab Order Increase

PageUp

현재 설정된 모든 컴포넌트의 Tab Order 값을 10배로 증가합니다.

Tab Order가 순서대로 지정된 컴포넌트 사이에 추가할 컴포넌트가 있는 경우에 사용합니다. 예를 들어 Tab Order가 3, 4인 컴포넌트 사이에 추가할 컴포넌트가 있는 경우 Tab Order 값을 30, 40으로 지정하고 31에서 39 사이의 값으로 컴포넌트를 추가할 수 있습니다.

Tab Order Decrease

PageDown

현재 설정된 Tab Order 값의 간격을 최소화합니다.

0을 기준으로 순서대로 값을 변경합니다.

Tab Order List


Tab Order List 창에서 목록 형태로 컴포넌트의 Tab Order 순서를 확인하고 수정합니다.

End Edit

Enter

변경된 내용을 저장하고 Tab Order Edit 모드를 종료합니다.

Cancel Edit

Esc

변경된 내용을 무시하고 Tab Order Edit 모드를 종료합니다.

Tab Order List

목록 형태로 컴포넌트의 Tab Order를 확인하고 수정할 수 있습니다. 하나 이상의 항목을 선택하고 하단 버튼을 사용해 원하는 순서로 Tab Order를 변경할 수 있습니다.

메뉴에서 [Design > Tab Order List] 또는 Design Window[Popup Menu]의 Tab Order List 메뉴를 통해 탭 순서를 편집할 수 있습니다.

Tab Order 외 목록에 보이는 정보(id, text, tabstop, accessibility)는 Tab Order List 창에서 수정할 수 없습니다.

Tab Order View

현재 화면에 설정된 탭 순서를 확인하는 기능입니다. 메뉴에서 [Design > Tab Order View] 또는 Design Window[Popup Menu]의 Tab Order View 메뉴를 선택하면 토글 형식으로 해당 기능을 켜거나 끌 수 있습니다. 기능이 활성화되면 아래 그림과 같이 컴포넌트 왼쪽 윗부분에 2개의 숫자가 표시됩니다.

파란색 사각형 안에 표기된 것은 탭 순서를 나타냅니다. 컴포넌트의 taborder 속성을 수정하거나 'Tab Order Edit' 기능을 사용해 순서를 변경할 수 있습니다.

녹색 사각형 안에 표기된 것은 컴포넌트의 Z-Order를 표시합니다. Z-Order는 컴포넌트가 겹쳐있을 때 보여주는 순서를 지정합니다. 숫자가 큰 컴포넌트가 가장 위에 위치하며 사용자에게 보입니다.

Z-Order는 Align 툴바에서 'Bring to Front', 'Send to Back', 'Bring Forward', 'Send Backward' 4가지 기능을 사용해 변경하거나 Source 탭에서 배치된 XML 코드의 순서를 바꿔 변경할 수 있습니다.

5.1.6가이드 라인폼 디자인 팁:가이드 라인

가이드 라인은 눈금자(Ruler)에서 지원되는 기능으로 개발자가 임의로 수평/수직 방향으로 안내선을 만들어 해당 선에 컴포넌트를 정렬키는 기능을 지원합니다.

그림 5-20Guide Line

눈금자 위의 원하는 지점을 마우스로 클릭하면 가이드 라인이 생성되며, 생성된 가이드 라인은 마우스 드래그로 위치를 변경할 수 있습니다. 가이드 라인을 디자인 창 영역 밖으로 드래그앤드롭하거나 눈금자 위에 있는 가이드 라인의 역삼각형 아이콘을 더블 클릭해 제거할 수 있습니다.

5.1.7속성 설정

Form 디자인에서 선택된 컴포넌트 속성들은 속성창에 표시되며, 속성창에서 값을 변경하였을 경우 컴포넌트에 바로 적용됩니다.

그림 5-21Change Property

하위 속성을 가지는 속성은 확장할 수 있는 아이콘이 표시됩니다. 해당 속성은 하위 속성들과 동기화되어 있어 상위 속성을 수정 하거나, 하위 속성을 수정하면 다른 한쪽에 자동으로 반영됩니다.

그림 5-22Expand Property

화면에 시각적으로 표현되는 컴포넌트는 스타일 속성을 가지고 있으며 각 속성을 수정해 컴포넌트의 스타일을 변경할 수 있습니다.

5.1.8글꼴 설정폼 디자인 팁:글꼴 설정

텍스트 속성을 가지고 있으며 글꼴을 지정할 수 있는 컴포넌트는 font 속성을 지정할 수 있습니다.

Color 속성은 글꼴 대화상자가 아닌 해당 컴포넌트의 color 속성을 직접 지정해야 합니다.

넥사크로플랫폼 애플리케이션은 글꼴을 포함해 제공되지 않고 사용자 운영체제에 설치된 글꼴을 사용합니다. 애플리케이션 개발 시 여러 개의 글꼴을 지정해 순차적으로 사용 가능한 글꼴을 찾을 수 있게 지정할 수 있습니다.

5.2데이터 및 이벤트 처리

5.2.1데이터 바인딩데이터 바인딩

폼 디자인 시 생성되어 있는 Dataset 컴포넌트를 드래그앤드롭하거나 속성창에서 바인딩 관련 속성을 선택해 데이터를 바인딩할 수 있습니다.

그림 5-23Bind Global Dataset

드래그앤드롭으로 컴포넌트에 Dataset을 바인딩하는 경우 컴포넌트의 종류에 따라 Inner Bind Dataset 또는 Bind Item Editor 기능이 호출됩니다.

Inner Bind Dataset데이터 바인딩:Inner Bind Dataset

ListBox나 Combo와 같이 목록 형식으로 데이터를 표현할 수 있는 컴포넌트에 Dataset을 바인딩하는 경우에 dataset의 컬럼을 지정할 수 있는 Inner Bind Dataset 기능이 호출됩니다.

그림 5-24Inner Bind Dataset

표 5-3Inner Bind Dataset

속성

설명

Codecolumn

내부에서 코드로 사용되는 컬럼을 지정

Datacolumn

컴포넌트에 보여지는 컬럼을 지정

Bind Item Editor데이터 바인딩:Bind Item Editor

Edit나 Button등 단일 항목만 표현하는 컴포넌트에 Dataset을 바인딩하는 경우에 Bind Item Editor 기능이 호출됩니다.

그림 5-25Bind Item Editor

표 5-4Bind Item Editor


속성

설명

1

Bind ID

사용자 분류 ID

2

Component

Dataset이 바인딩되는 컴포넌트 ID

3

Property

Dataset이 바인딩되는 컴포넌트 속성

4

Dataset

컴포넌트에 바인딩하는 Dataset

5

Column ID

컴포넌트에 바인딩하는 Dataset의 컬럼 ID

6

Add Bind Item

새로운 Bind Item을 추가

7

Delete Bind Item

선택된 Bind Item을 삭제

Dataset이 폼이나 컴포넌트에 바인딩되면 Project Explorer의 해당 아이템에 다른 컴포넌트와 다르게 표시가 되어 쉽게 확인할 수 있습니다.

그림 5-26Bind Mark

5.2.2Grid Contents Editor

Grid 컴포넌트는 속성창에서 볼 수 있는 속성 외에 Grid를 구성하는 각 Cell 단위 별로 추가적인 속성을 가지고 있습니다. Grid Contents Editor는 Grid의 추가적인 속성을 편집할 수 있는 기능을 제공합니다.

디자인 창에서 Grid 컴포넌트를 더블 클릭하면 Grid Contents Editor를 호출할 수 있습니다.

Grid Contents Editor는 기본 편집 창, 속성 창 및 Design Source로 구성되어 있습니다. 기본 편집 창에서는 컨텍스트 메뉴와 단축키를 사용하여 Cell을 추가/삭제하거나 속성을 편집할 수 있습니다. 기본 편집 창의 최상단에는 Column Index가 표시되고 아래로는 Head, Body, Summary로 구분되어 표시됩니다. 속성 창에는 Cell 구분, 해당 Cell의 속성 목록, 각각의 속성 값이 표시됩니다.

그림 5-27Grid Contents Editor[Formats]

기본 편집 창의 컨텍스트 메뉴에서 Column이나 Row를 추가할 수 있습니다.

그림 5-28Grid Contents Editor[Add Popup Menu]

표 5-5Grid Contents Editor[Add Popup Menu]

메뉴

기능

Add Column

Column 추가

Add Head Row

Head Row 추가

Add Body Row

Body Row 추가

Add Summ Row

Summ Row 추가

Cell이 선택된 상태에서는 아래와 같은 컨텍스트 메뉴가 지원됩니다.

그림 5-29Grid Contents Editor[Cell Popup Menu]

표 5-6Grid Contents Editor[Cell Popup Menu]

메뉴

기능

Cut

Column 또는 Row 잘라내기

Copy

Column 또는 Row를 선택 후 복사하기

Paste

클립보드에 복사된 내용을 붙여 넣기

• Append - 맨 뒤에 붙여 넣기

• Insert - 삽입하여 붙여 넣기

Add

Column 또는 Row 추가

Insert

Column 또는 Row 삽입

Delete

Column 또는 Row 삭제

Merge Cells

선택된 Cell 영역을 병합

Split Cell

병합된 Cell을 다시 나눔

Same Width

전체 영역이 선택된 경우 모든 Column의 너비값을 첫 번째 Column의 너비값으로 변경

Undo

Undo 기능

Redo

Redo 기능

Design Source 창에서는 편집된 내용을 XML형태로 표시되며 원하는 항목을 직접 수정할 수 있습니다.

그림 5-30Grid Contents Editor[Design Source]

5.2.3이벤트 생성

이벤트를 편집할 컴포넌트를 선택하고 속성창의 이벤트 편집 모드를 선택하여, 컴포넌트의 이벤트를 작성할 수 있습니다. 이벤트는 사용자가 직접 스크립트로 작성할 수 도 있지만 속성창에서 해당 이벤트를 더블 클릭하면 자동으로 이벤트 함수를 생성할 수 있습니다.

또는 폼에 배치된 컴포넌트를 더블 클릭하면, 해당 컴포넌트의 클릭 이벤트가 자동으로 생성됩니다.

그림 5-31Create Event Function

5.3화면 레이아웃

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

5.3.1폼 레이아웃

새로운 폼을 만들 때 ‘New Form Wizard’에서 레이아웃을 지정하거나 폼을 만든 이후에 추가적인 레이아웃을 지정할 수 있습니다. 폼 레이아웃은 사용자가 접하는 화면의 크기에 따라 최적화된 화면 구성을 제공하기 위해 사용합니다.

화면 구성

현재 폼에서 추가된 레이아웃이 탭 형식으로 표시됩니다. 탭이 표시되는 위치레이아웃:탭 위치 변경는 [Tools > Options > Form Design > Layout Manager > Layout Tab Style] 항목에서 원하는 위치로 변경할 수 있습니다.

그림 5-32Layout Tab

추가된 레이아웃 탭을 선택하면 해당 레이아웃으로 화면이 전환되며 컨텍스트 메뉴에서 레이아웃을 추가하거나 삭제하고 전체 레이아웃 목록을 확인할 수 있습니다. 추가된 레이아웃은 빨간 점선으로 폼의 영역을 표시해줍니다.

그림 5-33Layout Tab Popup Menu

표 5-7Layout Tab Menu

메뉴

기능

Add Layout

‘레이아웃 탭’의 마지막에 새로운 레이아웃을 생성합니다.

• 사용중인 레이아웃과 동일한 이름은 입력할 수 없습니다.

Copy & Add Layout

현재 선택된 레이아웃을 복사해 '레이아웃 탭’ 마지막에 추가합니다.

Delete Layout

선택된 레이아웃을 삭제합니다.

Layout List

현재 폼에서 사용중인 레이아웃 정보를 확인하고 수정할 수 있는 대화상자를 보여줍니다.

현재 폼에서 사용중인 레이아웃 정보레이아웃:Layout List는 폼 화면 또는 Project Explorer에서 폼을 선택했을 때 보여지는 컨텍스트 메뉴에서도 확인할 수 있습니다.

그림 5-34Design Popup Menu

그림 5-35Layout List Dialog

표 5-8Layout List Dialog


속성

설명

1

Template

템플릿으로 작성된 레이아웃 정보를 가져와서 추가하는 기능

2

Add Layout

폼에서 사용될 레이아웃 정보를 추가하는 버튼

3

Delete

목록에서 선택된 레이아웃을 삭제하는 버튼

4

Layout 정보를

보여주는 그리드

폼에 포함된 레이아웃 정보를 보여주는 그리드

• Name : 레이아웃 이름

레이아웃 이름은 대소문자 구별 없이 ‘Default’를 사용할 수 없습니다

같은 폼 안에서는 중복된 레이아웃 이름을 사용할 수 없습니다

• Screen : 레이아웃이 사용하는 스크린 이름

• Width : 레이아웃 너비

• Height : 레이아웃 높이

디자인 기능 제한

'Default' 탭에서는 모든 기능이 제공되지만, 추가된 '레이아웃' 탭에서는 일부 디자인 기능이 제한됩니다.

표 5-9제한된 Design 기능

디자인 기능

Default

추가 레이아웃

컴포넌트 생성, 삭제

O

X

컴포넌트 복사, 잘라내기, 붙여넣기

O

X

탭 순서 변경

O

O

폼 영역 표시

X

O

Invisible Object 추가, 삭제, 선택

O

X

속성창속성 창:속성 편집 창(Properties)

폼 속성 중 height와 width 속성은 레이아웃 별로 수정할 수 있으며 트래커를 마우스로 드래그해서 크기를 변경하는 경우 해당 레이아웃의 height, width 속성값이 같이 변경됩니다. 속성창에서 보여지는 폼 크기와 관련된 속성값은 ‘Layout List' 목록에서 보여지는 값과 같습니다.

그림 5-36Properties Window ? Layout Information

‘Default’ 레이아웃 탭과 다른 정보를 가지는 추가된 레이아웃 탭에서 변경된 속성은 굵은 파랑색으로 표시됩니다. 속성창에 표시되는 정보는 굵기와 색깔에 따라서 아래와 같은 의미를 가집니다.

표 5-10Display Property Information

색상

굵게

정보

검은색

X

테마와 스타일만 적용된 기본값을 가진 경우

검은색

O

‘Default’ 탭에서 수정하여 테마와 스타일이 적용된 기본값과 다른 값을 가진 경우

파란색

O

추가된 레이아웃 탭에서 수정한 값이 ‘Default’ 탭의 정보와 다른 값을 가진 경우

모든 컴포넌트의 id는 추가된 레이아웃 탭에서 수정할 수 없습니다.

5.3.2서브 레이아웃레이아웃:서브 레이아웃

컴포넌트 내부에 컨텐츠를 가지는 Div, PopupDiv, TabPage 컴포넌트도 폼과 마찬가지로 여러 개의 레이아웃을 가질 수 있습니다. 폼 레이아웃과 구분해서 서브 레이아웃(Sub Layout)이라고 표현합니다. 서브 레이아웃은 폼 레이아웃과 별개로 구성됩니다. Tab 컴포넌트를 사용하면 TabPage 별로 다른 서브 레이아웃을 구성할 수 있습니다.

폼에 추가된 레이아웃에서는 Div 에 포함된 Button 컴포넌트를 직접 편집할 수 없습니다. 때문에 해당 컴포넌트의 크기에 맞는 최적화된 화면 배치를 필요로 합니다. 서브 레이아웃를 적용하면 폼 레이아웃이 변경되면서 대상 컴포넌트의 크기가 변경되고 이에 따라 서브 레이아웃도 같이 변경되면서 최적화된 화면을 구현할 수 있습니다.

레이아웃 옵션

추가 레이아웃에서 Div와 같은 컴포넌트 내부에 포함된 컨텐츠를 편집 하기 위해서는 서브 레이아웃 에디터를 사용해야 합니다.

그림 5-37Sub Layout ? Popup Menu

서브 레이아웃 에디터

Sub Layout Edit 메뉴를 선택하거나 컴포넌트를 더블 클릭하면 아래 그림과 같은 서브 레이아웃 에디터가 나타납니다. default 서브 레이아웃은 선택한 컴포넌트 크기와 같습니다.

그림 5-38Sub Layout ? Sub Layout Editor

url 속성으로 다른 폼을 연결하고 있는 경우에는 서브 레이아웃 편집을 지원하지 않습니다. 대신 컨텍스트 메뉴 또는 더블 클릭으로 연결된 폼을 열어 편집할 수 있습니다.

서브 레이아웃 에디터는 다음과 같은 특징을 가집니다.

하위 컴포넌트를 선택했을 때와 그렇지 않았을 때 컨텍스트 메뉴가 조금 다르게 표기되며 하위 컴포넌트를 선택했을 때 컨텍스트 메뉴는 컴포넌트에 따라 달라질 수 있습니다.

그림 5-39Sub Layout ? Sub Layout Editor Popup Menu

그림 5-40Sub Layout ? Sub Layout Editor Popup Menu

표 5-11Sub Layout Editor – Sub Layout List

메뉴

기능

Add Sub Layout

새로운 서브 레이아웃을 생성하는 대화상자가 나타납니다.

추가할 서브 레이아웃 크기는 현재 컴포넌트 크기로 기본 설정됩니다.

단, 사용중인 서브 레이아웃 이름은 입력할 수 없습니다.

Delete Sub Layout

현재 선택된 서브 레이아웃을 목록에서 제거합니다. ‘Default’ 서브 레이아웃은 삭제되지 않습니다.

Sub Layout List

컴포넌트에서 사용중인 모든 서브 레이아웃을 수정할 수 있는 대화상자를 띄워줍니다.

Default 서브 레이아웃의 이름(default)는 임의로 수정할 수 없습니다.

Show Sub Layout Name

현재 컴포넌트에 적용된 서브 레이아웃 이름을 확인할 수 있습니다.

Fit to Componet

현재 편집 중인 서브 레이아웃의 크기를 현재 컴포넌트 크기로 변경합니다.

Apply Size & End Edit

현재 편집 중인 서브 레이아웃의 크기를 현재 컴포넌트에 반영하고 서브 레이아웃 에디터를 종료합니다.

End Edit

서브 레이아웃 에디터에서 수정된 내용을 반영하고 에디터를 종료합니다.

Cancel Edit

작업 중인 내용을 모두 취소하고 에디터를 종료합니다.

서브 레이아웃 에디터는 폼 디자인과 별도의 Undo 데이터를 관리하며 서브 레이아웃 에디터가 종료되면 해당 Undo 데이터도 같이 삭제됩니다.

서브 레이아웃 에디터에서 작업된 내용은 서브 레이아웃 에디터 내에서는 각 작업별로 Undo 기능이 처리되지만 에디터 종료 후 폼 디자인에서는 하나의 작업으로 Undo 데이터에 추가됩니다. 폼 디자인 상태에서 Undo를 실행하면 서브 레이아웃 에디터에서 처리한 모든 작업이 복원됩니다.

Div 내에 Div가 포함되는 경우 다른 하위 컴포넌트처럼 편집할 수 있으며 추가적인 서브 레이아웃을 지원합니다. 해당 Div 를 선택하고 더블 클릭 시 서브 레이아웃 에디터가 실행합니다.

Default 레이아웃이 아닌 경우에 하위 Div 컴포넌트를 선택할 수 없지만 더블 클릭 시 서브 레이아웃 에디터가 실행합니다.

서브 레이아웃 에디터 실행 중 다른 Div 컴포넌트를 더블 클릭하면 편집 대상을 변경할 수 있습니다.

Div 컴포넌트보다 하위 컴포넌트 영역이 클 경우에는 마우스로 Div 컴포넌트를 선택할 수 있습니다. 이런 경우에는 아래와 같은 방법을 활용할 수 있습니다.

1) 하위 컴포넌트 선택

2) Esc 키를 입력하면 부모 컴포넌트(Div 컴포넌트)가 선택됩니다.

3) Menu 키를 입력해 컨텍스트 메뉴를 호출하고 Sub Layout Edit 항목을 선택합니다.

속성창

서브 레이아웃 내에서 컴포넌트의 스타일 및 일부 속성을 수정할 수 있습니다. Div 컴포넌트라면 default 서브 레이아웃에서 수정된 내용은 <Div> 태그에 저장되고 추가된 서브 레이아웃에서 수정된 내용은 해당 <Layout>에 저장됩니다.

...
<Layouts>
     <Layout>
          <Div id="Div00" left="10" top="10" width="250" height="250" 
          style="background:red;">
               <Layouts>
                    <Layout width="250" height="250"/>
                    <Layout name="iOS" width="150" height="150" 
                    style="background:blue;"/>
               </Layouts>
          </Div>
     </Layout>
</Layouts>
...

5.3.3스텝레이아웃:스텝

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

stepcount

그림 5-41Step ? Form Design

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

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

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

positionstep

...
    <Layouts>
      <Layout width="300" height="450" stepcount="3">
        <Button id="Button00" text="Button00" 
          left="60" top="60" width="120" height="50"/>
        <Button id="Button01" text="Button01" 
          left="60" top="60" width="120" height="50" positionstep="1"/>
        <Button id="Button02" text="Button02" 
          left="60" top="60" width="120" height="50" positionstep="2"/>
        <Button id="Button03" text="Button03" 
          left="60" top="160" width="120" height="50" positionstep="-1"/>
      </Layout>
    </Layouts>
...

디자인 폼 화면에서 컴포넌트를 다른 Step으로 이동하면 positionstep 값이 변경되며 position 값이 해당 step에 맞게 조정됩니다.

하지만 직접 position 속성값을 현재 Step 영역 밖으로 지정해서 step 영역을 벗어나게 되는 경우에는 positionstep 값이 변경되지 않습니다.

5.3.4Position

넥사크로 스튜디오에서는 폼이나 각 컴포넌트의 위치를 left, top, right, bottom width, height 속성값을 지정해 지정할 수 있습니다. 각 속성값은 픽셀 단위(px) 또는 퍼센트(%) 중 하나를 선택해서 사용할 수 있습니다.

트래커폼 디자인 팁:트래커

컴포넌트를 선택했을 때 Position 속성에 따라 해당하는 트래커(Tracker)는 붉은 색으로 표시됩니다.

그림 5-42Position Tracker

눈금자폼 디자인 팁:눈금자 / Dot Grid

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

그림 5-43Ruler Popup Menu

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

그림 5-44Pixel Ruler / Dot Grid

그림 5-45Percent Ruler / Dot Grid

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

그림 5-46Pixel Resize Info

그림 5-47Percent Resize Info

포지션 에디터폼 디자인 팁:포지션 에디터

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

그림 5-48Form Design Minitoolbar

미니툴바는 자주 사용되는 스타일 속성 메뉴를 바로 수정할 수 있는 기능을 제공합니다.

그림 5-49Position Editor

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

속성창폼 디자인 팁:단위지정

속성창에서 left, top, right, bottom, width, height 속성값의 단위를 변경할 수 있습니다.

그림 5-50Position Unit Change

Form, Mainframe, Childframe은 퍼센트 단위로 크기를 지정할 수 없습니다. 실제 사용하는 너비와 높이를 픽셀 단위로만 지정할 수 있습니다.