Component 생성
Form Design에는 Componentbar에서 선택된 Component를 생성할 수 있습니다.
Type Definition에 정의된 컴포넌트를 모아둔 Component Toolbox를 사용해서 동일하게 Drag&Drop으로 컴포넌트를 생성할 수 있습니다. Component Toolbox는 메뉴에서 View > Toolbox를 선택해 활성화할 수 있습니다.
자주 사용되는 컴포넌트는 아래와 같습니다.
아이콘 | 이름 | 설명 | |
---|---|---|---|
1 | Select | 컴포넌트 Select Icon | |
2 | Button | 사용자로부터 마우스 입력을 받을 때 사용하는 컴포넌트 | |
3 | Div | Form안에 다른 Form을 불러와서 하나의 Form인 것처럼 사용하거나, 관련 있는 컴포넌트들을 하나의 그룹으로 묶어서 처리할 경우 사용되는 컴포넌트 | |
4 | Combo | Edit와 Drop down List를 통합한 형태의 컴포넌트 | |
5 | CheckBox | Check 표시에 대한 TRUE/FALSE 값을 가지는 컴포넌트 | |
6 | ListBox | 항목을 List로 나열한 후 선택할 경우 사용되는 컴포넌트. | |
7 | Edit | 문자열의 입출력을 가지는 컴포넌트 | |
8 | MaskEdit | 날짜의 연월일시(yyyy/mm/dd hh:mi:ss) 형식 또는 숫자의 Comma 표시와 같이 규정된 형식으로 문자열의 입출력을 가지는 컴포넌트 | |
9 | TextArea | 여러 Line의 문자열의 입출력을 가지는 컴포넌트 | |
10 | Menu | Menu Item을 구성할 경우 사용되는 컴포넌트 | |
11 | Tab | 한 화면에서 여러 개의 Tab page를 분할할 경우 사용되는 컴포넌트 | |
12 | ImageViewer | 화면에 이미지를 표시할 때 사용되는 컴포넌트 | |
13 | Radio | 제시된 여러 가지 선택사항 중에서 하나의 항목을 선택해야 할 경우 사용되는 컴포넌트 | |
14 | Shape | 라인, 삼각형, 사각형, 원, 라운드 사각형 등 도형을 그리기 위한 컴포넌트 | |
15 | Calendar | 날짜를 입력할 때 사용되는 컴포넌트 | |
16 | Panel | 여러 컴포넌트를 Panel을 기준으로 정렬하여 화면을 구성할 때 사용하는 컴포넌트 | |
17 | Static | 다른 Presentation Component들에 대한 제목 등을 기술할 때 사용되는 컴포넌트 | |
18 | Grid | 스프레드 시트와 유사하게 Dataset의 내용을 표 형식으로 처리하는 컴포넌트 | |
19 | Spin | 정해진 규칙에 따라 손쉽게 숫자를 입력 받을 때 사용하는 컴포넌트 | |
20 | PopupMenu | PopupMenu를 구성할 경우 사용되는 컴포넌트 | |
21 | Splitter | 화면 분할을 구현하기 위한 컴포넌트 | |
22 | GroupBox | 화면을 구성할 때 관련 있는 컴포넌트들을 그룹화하는 컴포넌트 | |
23 | ProgressBar | 작업의 현재 진행 상태를 그래픽을 이용하여 보여주는 컴포넌트 | |
24 | ActiveX | ActiveX를 사용할 경우 사용되는 컴포넌트 | |
25 | PopupDiv | 하나의 화면에 여러 개의 부분화면을 구성할 때 사용 | |
26 | PropertyAnimation | Property Animation 컴포넌트 | |
27 | TransitionAnimation | Transition Animation 컴포넌트 | |
28 | MoveAnimation | Move Animation 컴포넌트 | |
29 | CompositeAnimation | Composite Animation 컴포넌트 | |
30 | Dataset | 데이터를 Table 형태로 저장하는 컴포넌트 | |
31 | FilteredDataset | 원본 데이터셋을 바인딩해 논리적인 Table 형태로 저장하는 컴포넌트 | |
32 | GraphicPath | Form 위에 GraphicPathData의 정보를 가지고 선 및 곡선을 이용해 도형을 직접 출력할 수 있는 컴포넌트 |
Form Design의 빈 공간에서 마우스로 드래그 하게 되면 Rubber Band가 사각형으로 표시되며, 사각형의 시작 포인터 위치와 끝 포인터 위치 및 넓이와 높이 정보를 표시하여 생성될 컴포넌트의 크기를 조절할 때 사용자가 미리 가늠할 수 있도록 도와줍니다.
최종적으로 마우스로 드래그 한 영역의 크기로 컴포넌트가 생성됩니다. 만약 마우스 드래그를 하지 않은 상태로 클릭만 하게 된다면, Type Definition에 정의된 컴포넌트의 Default Size로 생성하게 됩니다.
Form Design에서 사용은 되지만 Design이 따로 필요 없는 컴포넌트들은 속성을 입력, 수정, 삭제 등의 작업을 할 수 있도록 컴포넌트를 표시 해주는 Invisible Objects가 제공 됩니다.
Invisible Layout창이 표시 되지 않는다면 Design Window[Popup Menu]에서 ‘Show Invisible Object Area’ 메뉴를 사용하여 Invisible Layout창을 볼 수 있습니다.
Invisible Layout에서는 Icon 표시 방법 등을 아래그림과 같은 팝업 메뉴로 지원합니다.
메뉴 | 아이콘 | 기능 | |
---|---|---|---|
1 | Edit | 선택된 Invisible Object에 맞는 편집기를 제공합니다 | |
2 | Cut | 선택된 Object를 잘라내기 | |
3 | Copy | 선택된 Object를 복사 | |
4 | Paste | Object를 붙여 넣기 | |
5 | Delete | 선택된 Object를 삭제 | |
6 | View | Invisible Objects 표시 방식을 Big, List, Small, Report 중 선택하여 변경 |
선택 변경
Form Design에서는 조합 키를 사용하여 다양한 방식의 컴포넌트 Selection을 지원합니다.
<Tab>키를 이용하여 현재 선택된 컴포넌트를 다른 컴포넌트로 바꿀 수 있습니다. 이동순서는 컴포넌트의 Z-Order순서에 따라 이동하며, <Shift + Tab>키를 이용할 경우 Z-Order의 역순서로 이동하게 됩니다.
<Ctrl>키 또는 <Shift>키를 이용하여 Selection의 추가 및 해제를 할 수 있는 Multi Selection을 지원합니다.
<Shift> + RubberBand Selection을 이용하여 영역 안의 컴포넌트 Selection 추가 및 Reverse Selection을 할 수 있습니다.
컴포넌트가 선택되어 있는 상태에서 <ESC>키를 눌렀을 경우 선택된 컴포넌트의 상위 컴포넌트를 선택할 수 있습니다.
크기 변경
컴포넌트의 Tracker의 Point가 활성화된 상태에서 하나의 Point를 마우스로 Drag&Drop하면 컴포넌트의 크기를 변경할 수 있습니다.
만약 여러 개의 컴포넌트가 Multi Select되어 있는 경우, 같은 비율로 컴포넌트의 크기가 변경됩니다.
<Shift>키를 누른 상태에서 마우스로 크기를 변경하면 가로, 세로 일정한 비율로 크기가 변경됩니다.
<Ctrl>키를 누른 상태에서 마우스로 크기를 변경하면, 컴포넌트의 중심으로 상하, 좌우로 동일한 크기로 변경됩니다.
<Shift + Ctrl>키를 누른 상태에서 마우스로 크기를 변경하면, 두 가지 기능이 동시에 적용되어 컴포넌트의 중심을 기준으로 가로, 세로의 크기가 일정한 비율로 변경됩니다.
컴포넌트의 크기 변경은 <Shift>키를 누른 상태에서 키보드의 방향키를 입력하여 변경할 수도 있습니다.
위치 변경
선택된 컴포넌트들은 키보드의 방향키로 이동 가능하며, 변경된 좌표는 Property에 바로 적용됩니다. 또한 <Ctrl>키를 누른 상태로 마우스로 이동시키면 해당 지점에 컴포넌트가 복사됩니다.
Form Design에서는 Option값에 따라 컴포넌트를 이동하거나 크기를 변경할 때, 미세한 조정을 쉽게 하기 위해서 다른 컴포넌트나 Guide Line에 가까이 가져가면 자동으로 해당 위치로 옮기는 Magnetic 기능을 지원합니다.
Magnetic 기능은 메뉴[Tools - Options… - Design]의 Option값에 따라 Canvas의 Dot 또는 다른 컴포넌트에 대해 동작할지 유무를 정할 수 있습니다. 또한 <Alt>키를 누른 채로 컴포넌트를 이동할 경우, Magnetic 기능을 사용하지 않을 수 있습니다.
Guide Line
Guide Line은 Ruler에서 지원되는 기능으로 개발자가 임의로 수평/수직으로 Line을 만들어 Line에 Component를 정렬시키는 등의 기능을 지원합니다.
Ruler위의 원하는 지점을 마우스 클릭으로 Guide Line을 생성할 수 있으며, 생성된 Guide Line은 마우스 드래그로 위치를 변경할 수 있습니다. Guide Line은 Design Window의 영역 밖으로 Drag&Drop 하거나 Guide Line의 역삼각형을 더블 클릭하여 제거할 수 있습니다.
Tab Order
만들어진 Design이 Launch되어 실행되고 있을 때 <Tab>키를 눌러 컴포넌트에서 다른 컴포넌트로 이동하는 순서를 설정합니다.
Design Window가 활성화되어 있을 때 <Ctrl + D>키를 누르거나, Design Window[Popup Menu]의 Tab Order Edit 메뉴를 통해 기능을 실행할 수 있습니다.
속성 설정
Form Design에서 선택된 Component의 속성들은 Properties Window에 표시되며, Properties Window에서 값을 변경하였을 경우 Component에 바로 적용됩니다.
Property가 하위 Property를 가지고 있을 경우에는 Expand가 가능한 Icon이 Property앞에 표시됩니다. Property는 하위 Property와 동기화 되어 있어 Property를 직접 수정 하거나, 하위 Property를 수정하면 다른 한쪽에도 자동으로 반영됩니다.
Bind
Form Design에서는 생성되어 있는 Dataset을 컴포넌트로 Drag&Drop 하거나 Properties Window의 Bind모드를 선택하여 선택된 컴포넌트를 Bind할 수 있습니다.
Drag&Drop으로 컴포넌트에 Dataset을 Bind할 경우 컴포넌트의 종류에 따라 Inner Bind Dataset 또는 Bind Item Editor 기능이 호출됩니다.
Inner Bind Dataset
ListBox나 Combo와 같이 List형식으로 Data를 표현할 수 있는 컴포넌트에 Dataset을 Bind할 경우에 dataset의 Column을 지정할 수 있는 Inner Bind Dataset 기능이 호출됩니다.
속성 | 설명 | |
---|---|---|
1 | Codecolumn | 내부에서 사용되는 Column을 지정 |
2 | Datacolumn | Component에 보여지는 Column을 지정 |
Bind Item Editor
Edit나 Button등 단일 항목만 표현이 가능한 컴포넌트에 Dataset을 Bind할 경우에 Bind Item Editor 기능이 호출됩니다.
속성 | 설명 | |
---|---|---|
1 | Bind ID | 사용자 분류 ID |
2 | Component | Dataset이 Bind되는 Component의 ID |
3 | Property | Dataset이 Bind되는 Component의 Property |
4 | Dataset | Component에 Bind하는 Dataset |
5 | Column ID | Component에 Bind하는 Dataset의 Column ID |
6 | Add Bind Item | 새 Bind Item을 추가 |
7 | Delete Bind Item | 선택된 Bind Item을 삭제 |
Dataset이 Form이나 컴포넌트에 Bind되었을 경우에는 그림과 같이 Project Explorer의 Item에 표시가 되어 쉽게 확인할 수 있습니다.
Event 작성
Event를 편집할 컴포넌트를 선택한 후에 Properties Window의 Event 편집 모드를 선택하여, 컴포넌트의 Event를 작성할 수 있습니다. Event는 사용자가 직접 입력하여 작성할 수 도 있지만 Properties의 해당 Event를 더블 클릭하여 자동으로 Event를 생성할 수도 있습니다.
또는 Form Design 위의 컴포넌트를 더블 클릭하면, 해당 컴포넌트의 기본 이벤트가 자동으로 생성됩니다.
Transform
Form Design 위의 컴포넌트를 회전시키거나 기울이는 등, 컴포넌트의 형태를 수정할 수 있는 Trasform 기능을 팝업메뉴로 지원하고 있습니다.
Transform 기능이 활성화 되면 그림과 같이 선택된 컴포넌트 주변에 붉은색 Marker가 생성되며 해당 Marker를 Drag하여 컴포넌트를 회전시키거나 기울일 수 있습니다.
컴포넌트는 흰색 원으로 표시되는 회전축을 중심으로 회전이 되며, 회전축은 마우스 Drag로 옮길 수 있습니다.
Graphic Path Component 사용법
PathData 정보를 통해 선 및 곡선을 표현할 수 있는 Component로 SVG(Scalable Vector Graphics)의 Path 스펙을 동일하게 지원합니다.
GraphicPath Edit 시작
GraphicPath Component가 선택된 상태에서 지원되는 ‘GraphicPath Edit’ 팝업 메뉴를 선택하여 GraphicPath를 편집할 수 있습니다.
PathData 추가
GraphicPath Component의 좌측상단을 시작점으로 원하는 곳에서 마우스를 클릭 하거나 팝업 메뉴를 통해 PathData를 추가하여 사용자가 원하는 모양으로 구성할 수 있습니다.
메뉴 | 아이콘 | 기능 | |
---|---|---|---|
1 | End Edit | 변경된 PathData를 적용하고 종료 | |
2 | Cancel Edit | 변경된 PathData를 취소하고 종료 | |
3 | Move To | 현재 좌표에서 PathData를 새로 시작 | |
4 | Line To | 현재 좌표로 선 그리기 | |
5 | Curve To | 현재 좌표로 곡선 그리기 (처음 그려졌을 때는 Line으로 표현) | |
6 | Elliptical Arc | 타원형 호 그리기 rx: x좌표의 반지름 ry: y좌표의 반지름 x-axis-rotation: x회전축 large-arc-flag: large arc flag sweep-flag: Sweep flag | |
7 | Close Path | 시작점과 마지막점을 직선으로 연결하고 닫기 | |
8 | Remove Current | 선택된 PathData를 삭제 | |
9 | Remove All | 모든 PathData를 삭제 | |
10 | Reset Current Control Point | 선택된 PathData의 Control Point를 초기화 | |
11 | Reset All Control Points | 모든 PathData의 Control Point를 초기화 | |
12 | Edit Elliptical Arc Properties… | 만들어진 Elliptical Arc의 속성값을 편집 |
PathData 수정
마우스 클릭이나 팝업 메뉴를 통해 추가된 PathData는 마우스와 키보드의 방향키로 위치 변경 및 직선을 곡선으로 또는 곡선을 직선으로 변경할 수 있습니다.
변경하려는 PathData를 클릭하여 활성화 되면 PathData의 Point가 회색에서 검은색으로 변경됩니다.
동일한 위치에 다수의 PathData가 존재하여 클릭으로 선택하기 어려운 경우, <Tab>키를 사용하여 선택 가능하며, <Shift + Tab>키를 사용하여 역순으로도 선택할 수 있습니다.
선택된 PathData를 마우스로 원하는 위치에 드래그하거나 키보드의 방향키로 1Point씩 이동하여 위치를 변경할 수 있습니다.
각각의 PathData는 곡선을 표현하기 위해 Control Point를 가지고 있습니다. 최초 Line 생성시 Control Point는 좌표 Point뒤에 위치하기 때문에 Control Point를 변경하기 위해서는 Point를 <ALT>키를 누른 채로 마우스로 클릭하여 Control Point를 선택한 후에 마우스 드래그로 위치를 변경하여 곡선을 표현할 수 있습니다.
Control Point는 <Ctrl>키를 누른 상태로 마우스로 드래그하여 이동하게 되면 연결된 다른 Control Point가 마우스의 이동 방향과 반대 방향으로 대칭 이동됩니다.
Control Point는 <Shift>키를 누른 상태로 마우스로 드래그하여 이동하게 되면 연결된 다른 Control Point가 마우스의 이동 방향과 같은 방향으로 동시 이동됩니다.
PathData 삭제
선택된 특정 PathData를 삭제하거나 전체 PathData를 삭제할 수 있다. 중간에 있는 PathData를 삭제할 경우 앞, 뒤 PathData가 연결됩니다.
GraphicPath Edit 종료
<Enter>키 또는 Popup메뉴의 ‘End Edit’를 선택하여 추가, 수정, 삭제된 PathData를 적용하고 종료하거나 <ESC>키 또는 Popup메뉴의 ‘Cancel Edit’를 선택하여 추가, 수정, 삭제된 PathData를 취소하고 종료할 수 있습니다.
Style Attribute
Form Canvas 위에서 시각적인 표현이 되는 컴포넌트는 Style Attribute를 보여주며 각각의 Attribute를 수정하여 컴포넌트의 Style을 변경할 수 있습니다.
Layout Manager(V9.2추가)
‘New Form Wizard’에서 입력한 Layouts정보를 보여줄 수 있도록 Form Design기능이 변경되었습니다.
Layout Tab
현재 Form에서 사용되는 Layout이 탭으로 표시됩니다. 탭의 위치는 Option에서 사용자가 변경할 수 있습니다.
Tab을 전환하여 ‘New Form Wizard’에서 입력한 Layout으로 화면 전환이 가능하며 Layout에 대한 수정 기능을 POPUP메뉴로 제공하고 있습니다.
메뉴 | 아이콘 | 기능 | |
---|---|---|---|
1 | Add Layout | ‘Layout Tab’의 마지막에 새 Layout을 생성하는 Dialog를 보여줍니다. * 사용중인 Layout Name은 입력할 수 없습니다. | |
2 | Copy & Add Layout | 현재 선택된 Layout을 Copy하여 ‘Layouts’의 마지막에 추가합니다. | |
3 | Delete Layout | 선택된 Layout을 삭제 | |
4 | Layout List | 현재 Form에서 사용중인 Layout정보를 수정할 수 있는 Dialog를 보여줍니다. |
Design
‘Default’ 탭에서는 모든 기능이 제공되지만, 추가된 ‘Layout’ 탭에서는 일부 Design 기능이 제한됩니다.
Design 기능 | Default | 추가 Layout |
---|---|---|
Component Create, Delete | O | X |
Component Copy, Cut, Paste, Paste Special | O | X |
TabOrder 변경 | O | X |
Form의 Size수정 | O | X |
Form의 Size를 Guide Line으로 표시 | X | O |
Form의 Tracker표시 | O | X |
Div, Tab, Popup등의 하위 Component 수정 | O | X |
Invisible Object 추가, 삭제, 선택 | O | X |
현재 Form에서 사용중인 Layout의 정보를 수정할 수 있는 기능이 POPUP메뉴로 추가되었습니다.
속성 | 설명 | |
---|---|---|
1 | Template | Template에서 Layout 정보를 가져와서 추가하는 기능 |
2 | Add Layout | Form에서 사용될 Layout 정보를 추가하는 버튼 |
3 | Delete | Layouts 그리드에서 선택된 Layout정보를 삭제하는 버튼 |
4 | Layout정보를 보여주는 그리드 | Form이 사용할 Layout정보를 보여주는 그리드
|
‘Default’ 탭에서 Component의 속성값이 변경되었을 경우에 변경된 내용을 다른 Layout에 적용할지 확인하는 메시지 창이 뜹니다.
‘Default’탭에서 수정이 되어 다른 Layout에 적용할지 확인하는 메시지 창은 아래의 조건을 모두 만족한 경우에만 뜹니다.
번호 | 조건 |
---|---|
1 | 다른 Layout에서 변경될 속성이 Source상에 존재하는 경우 |
2 | ‘Layouts Edit’ Option 값이 ‘Ask whenever a property changed’로 되어 있는 경우 |
‘Default’탭에서 수정이 되어 다른 Layout에 적용할지 확인하는 메시지 창에서 ‘Don’t ask me again’을 체크한 상태에서 ‘Yes’나 ‘No’를 선택하는 경우 ‘Layouts Edit’ Option값이 바뀌면서 이후에는 메시지 창이 뜨지 않습니다
버튼 | ‘Layouts Edit’ Option |
---|---|
Yes | Change property Default Layout with other layouts |
No | Changed property is only Default Layout applied |
Properties Windows
Form Design의 정보를 Properties Windows에서 보여주고 있는 경우, Layout 탭에 따라 표시 방법이 달라지게 됩니다.
Form Design이 추가된 Layout탭이고 Form Properties를 보여준다면 Layout정보가 Properties Window에 추가로 표시됩니다.
Default Layout탭에서는 Form Properties중 ‘position’정보를 수정하면 Multi Layout을 사용할 경우, height’와 ‘width’가 현재 size에 맞게 설정됩니다. Default Layout탭에서 ‘height’와 ‘width’는 hidden property입니다. Tracker를 사용하여 size 변경을 할 경우 ‘position’과 height’와 ‘width’정보 모두가 바뀌게 됩니다.
추가된 Layout탭에서는 Form Properties중 ‘position’정보를 수정할 수는 없지만 ‘Layout Information’정보인 ‘height’와 ‘width’를 변경하여 크기를 변경할 수 있습니다. Tracker를 사용하여 size 변경을 할 경우 ‘position’정보는 저장되지 않고 ‘height’와 ‘width’정보만 저장 됩니다.
‘Layout Information’에서 보여주는 Properties는 ‘Layout List Dialog’와 동일합니다.
Form Design의 ‘Default’탭과 다른 정보를 가지고 있는 추가된 Layout탭에서는 Property를 굵은 파랑색으로 표시하게 되었습니다. 따라서 Properties Window에서 표시해주는 정보는 굵기와 색깔에 따라서 아래와 같은 의미를 가지게 됩니다.
색상 | 굵게 | 정보 |
---|---|---|
검은색 | X | Theme와 css만 적용된 기본값을 가진 경우 |
검은색 | O | ‘Default’탭에서 수정하여 Theme와 css가 적용된 기본값과 다른 값을 가진 경우 |
파란색 | O | 추가된 Layout탭에서 수정한 값이 ‘Default’탭의 정보와 다른 값을 가진 경우 |
Form Design의 추가된 Layout탭에서 Property를 표시할 경우에 아래와 같은 Property는 수정할 수 없도록 비활성화됩니다.
속성명 | 설명 |
---|---|
Id | 모든 컴포넌트의 ID는 추가된 Layout탭에서는 수정할 수 없습니다. |
taborder | 모든 컴포넌트의 taborder는 추가된 Layout탭에서는 수정할 수 없습니다. |
inheritanceid | Form Property중에서 inheritanceid는 수정할 수 없습니다. |
position | Form Property중에서 position은 수정할 수 없습니다. |
Sub Layout
Component내부에 Contents를 가지고 있는 Div, PopupDiv, TabPage 등도 Form과 같이 Multi Layout을 가지게 되며 이를 Sub Layout이라 합니다. Sub Layout은 Form Layout과 1:1 매칭이 아니고 별도의 Multi Layout을 구성합니다. Tab의 경우, TabPage 별로 다른 Multi Layout을 구성할 수 있습니다.
Sub Layout을 가지고 있는 Component는 자신의 Sub Layout 중에서 해당 Component의 Size에 맞는 최적화된 Sub Layout을 자동으로 표시해 줍니다.
Target Component의 Size가 변경될 시, 자동으로 Sub Layout Change가 일어나고 새로운 Size에 맞는 최적화된 Sub Layout을 찾아줍니다.
Sub Layout을 가지고 있는 Component의 하위 Contents는 Form의 Default Layout에서만 직접 편집이 가능합니다. (기존의 편집 방법과 동일)
직접 편집되는 내용은 해당 Component가 보여주고 있는 Sub Layout에 저장됩니다.
단, Default Layout이 아닌 추가 Layout (예: 위 그림에서 iPhoneW Layout)에서는 Contents를 직접 편집 할 수 없습니다. 따라서, 하위 Contents는 선택 및 수정 할 수 없으며 하위 Contents 선택 시, 최상위 Component가 선택됩니다. 추가 Layout에서 Contents를 편집 하기 위해서는 Sub Layout Editor를 사용하여 편집하여야 합니다.
추가 Layout에서 Contents를 편집 하기 위해서는 Sub Layout Editor를 사용하여 편집하여야 합니다. Sub Layout을 가진 Component는 Sub Layout Edit, Set Sub Layout 2개의 Popup Menu를 제공합니다.
Sub Layout Edit메뉴를 선택하면 Sub Layout을 편집할 수 있습니다.
Set Sub Layout메뉴를 선택하면 Component의 Size를 선택한 Sub Layout의 크기로 변환해 줍니다. Set Sub Layout메뉴는 default Sub Layout이외의 Sub Layout이 존재할 경우에만 나타납니다.
Sub Layout Edit메뉴를 선택하면 아래 그림과 같은 Sub Layout Editor가 나타납니다.
Link Url을 가지고 있는 Component는 Sub Layout Editor를 실행 할 수 없습니다.
Contents Editor와 마찬가지로 더블클릭으로도 실행할 수 있습니다.
최초 Sub Layout Editor 실행 시, 현재 Target Component의 Default Size가 default Sub Layout의 Size가 됩니다.
해당 Component 및 하위 Component를 제외한 다른 Component는 선택 및 편집할 수 없습니다
Scroll에 가려져 보이지 않던 Component 들도 편집 가능합니다.
해당 Component의 Size에 맞는 Ruler가 제공됩니다.
Sub Layout Editor 역시 Form Layout 처럼 Default를 제외한 Layout에서는 Component생성 등의 일부 기능이 제한됩니다.
Sub Layout Editor만의 Popup Menu가 제공됩니다.
Component를 선택하면 Popup Menu가 약간 다르게 제공됩니다.
메뉴 | 아이콘 | 기능 | |
---|---|---|---|
1 | Add Sub Layout | 새 Sub Layout을 생성하는 Dialog를 보여줍니다. 단,사용중인 Sub Layout Name은 입력할 수 없습니다. | |
2 | Delete Sub Layout | 현재 선택된 Layout을 Sub Layout List에서 제거합니다. 단, ‘Default’는 삭제할 수 없습니다. | |
3 | Sub Layout List | 현재 Component에서 사용중인 Sub Layout정보를 수정할 수 있는 대화상자를 띄워줍니다. Default Sub Layout을 포함한 모든 Sub Layout의 정보를 편집 및 수정할 수 있습니다. Add Layout: Sub Layout 추가 버튼 Delete: Sub Layout 삭제 버튼 Name: Sub Layout 의 이름 단, Default Sub Layout의 이름은 임의로 지정 불가 Width: Sub Layout의 넓이 Height: Sub Layout의 높이 | |
4 | Apply Size & End Edit | 현재 edit 중인 sub Layout의 size로 target component를 설정하고 현재까지 Sub Layout Editor에서 작업한 undo buffer를 하나로 묶어서 design undo list에 추가합니다. | |
5 | End Edit | 현재까지 Sub Layout Editor에서 작업한 undo buffer를 하나로 묶어서 design undo list에 추가합니다. | |
6 | Cancel Edit | 현재까지 Sub Layout Editor에서 작업한 내용을 모두 undo 하고 원상복귀 합니다. |
Sub Layout의 Size를 변경 할 수는 있지만 Target Component의 Position은 변하지 않습니다.
각 Sub Layout 마다 Target Component의 Style 및 일부 속성을 설정 할 수 있습니다.
default Layout의 수정 내용은 <Div>등의 Tag내에 저장됩니다.
그 외 하위 Sub Layout의 수정 내용은 해당 <Layout>에 저장됩니다.
기타 Sub Layout Editor의 조작관련 사항
각 Sub Layout 안에 있는 하위 Contents를 가진 Component는 Form Design과 마찬가지로 default Layout에서만 편집 가능합니다.
Sub Layout Editor 내에서 또 다른 Sub Layout Editor를 실행하지 못합니다.
Contents Editor는 실행 할 수 있습니다.
그 외 Component의 조작 같은 경우, Form Design과 동일하게 동작합니다.
Sub Layout Undo
Sub Layout Editor에서 Undo는 Form Design과 따로 관리됩니다.
Sub Layout Editor 실행 전의 Undo는 Sub Layout Editor 안에서 사용 할 수 없습니다.
Sub Layout Editor 안에서 누적된 Undo는 Editor 종료와 동시에 사라지거나 한꺼번에 Form Design Undo List에 추가됩니다. (Sub Layout Editor 안의 편집 내용을 하나의 Undo로 인식)
Step(V9.2추가)
Step이란 여러 개의 step으로 이루어진 페이지를 하나의 Form에서 개발할 수 있는 기능을 의미합니다.
Form의 stepcount Property 값을 조정하면 아래그림과 같이 step이 표시됩니다.
번호 | 설명 |
---|---|
1 | 현재 편집중인 Step을 표시. 현재 편집중인 Step은 마우스포인터의 위치로 판단합니다. |
2 | Step과 Step 사이의 안내선 |
여러 개의 step이 있다고 해서 Form의 실질적인 Size가 변하지 않습니다.
실행 시에는 1개의 Step만 보여지게 됩니다.
Position2(V9.2추가)
비율인 “%”로 Position을 지정할 수 있도록 하는 position2 속성을 추가하였습니다. 또한, UX-Studio에서 Ruler, DotGrid(화면 바닥에 보이는 점들)등의 Position2 관련 편집기능을 제공합니다.
Tracker
Component의 positiontype을 position2로 설정할 경우 tracker 모양이 다르게 표시됩니다.
Positioin2 Tracker는 고정된 변을 붉은 색으로 표시하여 position2의 값을 별도로 확인하지 않아도 Anchor 상태를 알 수 있습니다.
Ruler / Dot Grid
Position2는 Percent입력을 지원하기 때문에, Form Design상에서 손쉽게 확인할 수 있도록 Percent단위로 정보를 표시해 주는 기능이 추가되었습니다.
Ruler의 Popup Menu에서 Show Pixel Ruler / Show Percent Ruler를 선택할 경우 해당 단위로 Ruler와 Dot Grid의 표시 방법이 변경됩니다.
Component Resize Info
Component를 한 개만 선택한 상태에서 Tracker로 크기를 조정하는 경우 수정되는 크기 정보를 표시해 줍니다.
만약 Ruler단위가 Percent로 표시 중이라면 Resize Info도 Percent 단위로 표시됩니다.
Position Editor
사용자가 쉽게 Position정보를 설정할 수 있도록 UI를 가진 Editor를 제공합니다. Position Editor는 Form Design의 Minitoolbar에서 호출할 수 있습니다.
Minitoolbar는 XPLATFORM 9.2 버전에서 추가된 기능으로 자주 사용되는 Style Property을 메뉴를 사용 손쉽게 수정할 수 있는 기능입니다.
Position Editor에서 수정된 값은 대상 Component가 사용중인 positiontype에 맞는 position, position2값으로 변경되어 반영됩니다.
Properties Window
Properties Window에서는 추가된 position2의 단위를 쉽게 변경할 수 있도록 기능을 지원합니다.
Percent단위는 position2에서만 지원되며, Component의 positiontype이 position을 사용하는 경우에는 해당 기능으로 값이 변경되지 않습니다.