현존하는 다양한 매체들은 서로 다른 표현영역을 가지고 있기 때문에 매체에 맞는 Design작업 및 Source관리를 해야 하는 문제가 생깁니다. 따라서 One Source로 다양한 상황에 맞는 Design을 표현할 수 있도록 해줄 수 있는 Multi Layout Manager기능이 추가되었습니다.
MLM구조
UX-Studio에서 생성된 ADL/FDL을 XPLATFORM이 Device에 맞는 Layout을 선택하여 출력합니다.
이하 사용된 용어 설명
Default Layout
기본이 되는 Layout. Layout정보를 가지고 있지 않으며 기존 V9.1의 Form과 같은 기능
추가 Layout
Default Layout을 제외한 모든 Layout
Sub Layout
Div, PopupDiv, TabPage등 하위 contents를 가지고 있는 component들의 Layout
Target 컴포넌트
Sub Layout Editor를 실행한 컴포넌트
Project 생성 및 수정
Project생성
‘I-Phone’, ‘I-Pad’, ‘GalaxyTab’의 Layout정보를 가진 Project를 생성하는 방법을 예로 들어 설명합니다. UX-Studio에서 File > New > Project 메뉴를 호출할 경우 아래와 같이 Project를 생성하는 Wizard가 표시되며, 각 단계별로 정보를 입력하여 생성할 수 있습니다.
New Project Wizard – Step1
생성될 Project의 Frame Template와 생성될 경로 및 Project명을 입력하는 단계입니다. Project명은 반드시 입력해야 하는 필수 항목이며, 생성될 경로에 동일한 Project명이 존재할 경우에는 생성할 수 없습니다.
New Project Wizard – Step2
Character Set정보 및 TypeDefinition정보 등을 설정하는 단계입니다.
New Project Wizard – Step3
Project에서 사용할 Screen정보를 입력하는 단계입니다. I-Phone, I-Pad, GalaxyTab을 개발할 목적이기 때문에 각각의 항목을 입력하고, 해당 Screen에서 사용할 Theme를 지정합니다. ‘Finish’를 클릭하여 ‘I-Phone’, ‘I-Pad’, ‘GalaxyTab’ Screen정보를 가진 Project를 생성합니다.
Name : Screen의 이름
Theme : Screen에 사용할 Theme
System Type
win32 : 일반 Desktop
Android : Android Mobile
iPhone : Apple Mobile
OS : 해당 장비에서 사용되는 운영체제
Device : 장비의 종류
Description : Screen에 대한 설명(Description은 기능 동작에 영향을 주지 않습니다.)
Screen정보의 수정
‘New Project Wizard’에서 입력한 Screen정보를 수정하거나 새로운 Screen정보를 입력할 수 있는 Editor기능이 추가되었습니다.
‘Project Explorer’에서 ADL Item에서 제공되는 Popup메뉴를 사용하여 새로운 Screen정보를 추가하거나 ADL Item의 하위 정보로 표시되는 ‘ScreenInfo’등을 선택하여 편집할 수 있습니다.
‘ScreenInfo Editor’는 기존에 제공되던 ‘Widget Editor’, ‘Variable Editor’와 동일한 방식으로 편집기능을 제공합니다.
Layout Template등록
기본적으로 제공되는 Layout Template를 사용할 수 있습니다. 또한, 자주 사용되는 Layout정보를 사용자가 Template으로 등록 할 수 있습니다.
Layout Template Dialog는 기본적으로 제공되는 Template인 Device, Graphic Array Template과 사용자가 직접 등록하여 사용하는 User Template 3개의 Tab으로 구성되어 있습니다.
User Template : 사용자가 직접 등록하여 사용하는 Layout Template List
Device : 현재 사용되고 있는 주요 모바일 기기
Graphic Array : 해상도로 사용되고 있는 Graphic Array
Form생성
‘I-Phone’, ‘I-Pad’, ‘GalaxyTab’ 3군데서 사용할 FDL파일을 만드는 방법을 예로 들어 설명합니다. File > New > Item > Form 메뉴를 선택할 경우 아래와 같이 FDL을 생성하는 Wizard가 표시되며, 각 단계별로 정보를 입력하여 생성할 수 있습니다.
New Form Wizard – Step1
생성될 Form의 경로와 이름을 입력하는 단계입니다. Form명은 반드시 입력해야 하는 필수 항목이며, 생성될 경로에 동일한 Form명이 존재할 경우에는 생성할 수 없습니다.
New Form Wizard – Step2
생성될 Form의 Inheritance를 지정하는 단계입니다.
TypeDefinition에 ‘UserForm’이 등록되어 있는 경우에만 입력 컨트롤이 활성화 됩니다.
New Form Wizard – Step3
생성될 Form의 ‘Default’Layout Form 크기를 입력하는 단계입니다. 초기 입력값은 Option에서 변경할 수 있습니다.
New Form Wizard – Step4
생성될 Form에서 Design할 Layout정보를 입력하는 단계입니다. Screen종류별, 가로, 세로의 크기에 맞춘 Layout정보를 설정합니다.
Template버튼을 누르면 아래 그림과 같은 Template Dialog가 나타나고 원하는 Layout, Layout group을 선택한 후 ok버튼을 누르면 선택한 Layout 정보가 New Form Wizard에 추가됩니다.
Layout
‘New Form Wizard’에서 입력한 Layouts정보가 Tab형태로 표시 되도록 Form Design기능이 변경되었습니다.
Layout Tab
현재 Form에서 사용되는 Layout이 탭으로 표시됩니다. 탭의 위치는 Option에서 사용자가 변경할 수 있습니다.
Tab을 전환하여 ‘New Form Wizard’에서 입력한 Layout으로 화면 전환이 가능하며 Layout에 대한 수정 기능을 POPUP메뉴로 제공합니다.
Add Layout : ‘Layout Tab’의 마지막에 새 Layout을 생성하는 Dialog를 보여줍니다.
Copy & Add Layout : 현재 선택된 Layout을 복사해 ‘Layouts’의 마지막에 추가
Delete Layout : 현재 선택된 Layout을 ‘Layouts’에서 제거. (‘Default’는 삭제할 수 없습니다.)
Layout List : 현재 Form에서 사용중인 Layout정보를 수정할 수 있는 Dialog를 보여줍니다.
‘Default’ 탭에서는 모든 기능이 제공되지만, 추가된 ‘Layout’ 탭에서는 일부 Design 기능이 제한됩니다.
Design 기능 | Default | 추가 Layout |
|---|---|---|
컴포넌트 Create, Delete | O | X |
컴포넌트 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등의 하위 컴포넌트 수정 | O | X |
Invisible Object 추가, 삭제, 선택 | O | X |
Layout 정보 수정
현재 Form에서 사용중인 Layout의 정보를 수정할 수 있는 기능이 POPUP메뉴로 추가되었습니다.
Name : Layout의 이름
Layout의 Name으로 대소문자 구별 없이 ‘Default’를 사용할 수 없습니다
같은 Form안에서는 중복된 Layout Name을 사용할 수 없습니다
Screen : Layout이 사용할 Screen명
Width : Layout의 넓이
Height : Layout의 높이
‘Default’ 탭에서 컴포넌트의 속성값이 변경되었을 경우에는 변경된 내용을 다른 Layout에 적용할지 확인하는 메시지 창이 Popup됩니다.
위 확인하는 메시지 창은 아래의 조건을 모두 만족한 경우에만 Popup됩니다.
번호 | 조건 |
|---|---|
1 | 다른 Layout에서 변경될 속성이 Source상에 존재하는 경우 |
2 | ‘Layouts Edit’ Option 값이 ‘Ask whenever a property changed’로 되어 있는 경우 |
‘Default’탭에서 수정이 되어 다른 Layout에 적용할지 확인하는 메시지 창에서 ‘Don’t ask me again’을 체크한 상태에서 ‘Yes’나 ‘No’를 선택하는 경우 ‘Layouts Edit’ Option값이 바뀌면서 이후에는 메시지 창이 Popup되지 않습니다
버튼 | ‘Layouts Edit’ Option |
|---|---|
Yes | Change property Default Layout with other layouts |
No | Changed property is only Default Layout applied |
Properties Window
Form Design의 정보를 Properties Windows에서 보여주고 있는 경우, Layout 탭에 따라 표시 방법이 달라지게 됩니다.
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는 수정할 수 없도록 disable처리됩니다.
속성명 | 설명 |
|---|---|
id | 모든 컴포넌트의 ID는 추가된 Layout탭에서는 수정할 수 없습니다. |
taborder | 모든 컴포넌트의 taborder는 추가된 Layout탭에서는 수정할 수 없습니다. |
inheritanceid | Form Property중에서 inheritanceid는 수정할 수 없습니다. |
position | Form Property중에서 position은 수정할 수 없습니다. |
Sub Layout
컴포넌트내부에 Contents를 가지고 있는 Div, PopupDiv, TabPage 등도 Form과 같이 Multi Layout을 가지게 되며 이를 Sub Layout이라 합니다. Sub Layout은 Form Layout과 1:1 매칭이 아니고 별도의 Multi Layout을 구성합니다. Tab의 경우, TabPage 별로 다른 Multi Layout을 구성할 수 있습니다.
Sub Layout을 가지고 있는 컴포넌트는 자신의 Sub Layout 중에서 해당 컴포넌트의 Size에 맞는 최적화된 Sub Layout을 자동으로 표시해 줍니다.
Target 컴포넌트의 Size가 변경될 시, 자동으로 Sub Layout Change가 일어나고 새로운 Size에 맞는 최적화된 Sub Layout을 찾아줍니다.
Default Layout에서의 편집
Sub Layout을 가지고 있는 컴포넌트의 하위 Contents는 Form의 Default Layout에서만 직접 편집이 가능합니다. (기존의 편집 방법과 동일)
직접 편집되는 내용은 해당 컴포넌트가 보여주고 있는 Sub Layout에 저장됩니다.
단, Default Layout이 아닌 추가 Layout (예: 위 그림에서 iPhoneW Layout)에서는 Contents를 직접 편집 할 수 없습니다. 따라서, 하위 Contents는 선택 및 수정 할 수 없으며 하위 Contents 선택 시, 최상위 컴포넌트가 선택됩니다. 추가 Layout에서 Contents를 편집 하기 위해서는 Sub Layout Editor를 사용하여 편집하여야 합니다.
Sub Layout에서의 편집
추가 Layout에서 Contents를 편집 하기 위해서는 Sub Layout Editor를 사용하여 편집하여야 합니다. Sub Layout을 가진 컴포넌트는 Sub Layout Edit, Set Sub Layout 2개의 Popup Menu를 제공합니다.
Sub Layout Edit메뉴를 선택하면 Sub Layout을 편집할 수 있습니다.
Set Sub Layout메뉴를 선택하면 컴포넌트의 Size를 선택한 Sub Layout의 크기로 변환해 줍니다. Set Sub Layout메뉴는 default Sub Layout이외의 Sub Layout이 존재할 경우에만 나타납니다.
Sub Layout Edit메뉴를 선택하면 아래 그림과 같은 Sub Layout Editor가 나타납니다.
Link Url을 가지고 있는 컴포넌트는 Sub Layout Editor를 실행 할 수 없습니다.
Contents Editor와 마찬가지로 더블클릭으로도 실행할 수 있습니다.
최초 Sub Layout Editor 실행 시, 현재 Target 컴포넌트의 Default Size가 default Sub Layout의 Size가 됩니다.
해당 컴포넌트 및 하위 컴포넌트를 제외한 다른 컴포넌트는 선택 및 편집할 수 없습니다
Scroll에 가려져 보이지 않던 컴포넌트 들도 편집 가능합니다.
해당 컴포넌트의 Size에 맞는 Ruler가 제공됩니다.
Sub Layout Editor 역시 Form Layout 처럼 Default를 제외한 Layout에서는 컴포넌트생성 등의 일부 기능이 제한됩니다.
Sub Layout Editor만의 Popup Menu가 제공됩니다.
Sub Layout List : 현재 컴포넌트에서 사용중인 Sub Layout정보를 수정할 수 있는 Dialog를 보여줍니다
Apply Size & End Edit : 현재 edit 중인 sub Layout의 size로 target component를 설정하고 현재까지 Sub Layout Editor에서 작업한 undo buffer를 하나로 묶어서 design undo list에 추가합니다
컴포넌트를 선택하면 Popup Menu가 약간 다르게 제공됩니다.
Sub Layout의 Size를 변경 할 수는 있지만 Target 컴포넌트의 Position은 변하지 않습니다.
각 Sub Layout 마다 Target 컴포넌트의 Style 및 일부 속성을 설정 할 수 있습니다.
default Layout의 수정 내용은 <Div>등의 Tag내에 저장됩니다.
그 외 하위 Sub Layout의 수정 내용은 해당 <Layout>에 저장됩니다.
기타 Sub Layout Editor의 조작관련 사항
각 Sub Layout 안에 있는 하위 Contents를 가진 컴포넌트는 Form Design과 마찬가지로 default Layout에서만 편집 가능합니다.
Sub Layout Editor 내에서 또 다른 Sub Layout Editor를 실행하지 못합니다.
Contents Editor는 실행 할 수 있습니다.
그 외 컴포넌트의 조작 같은 경우, 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
Step이란 여러 개의 step으로 이루어진 페이지를 하나의 Form에서 개발할 수 있는 기능을 의미합니다.
Form의 stepcount Property 값을 조정하면 아래그림과 같이 step이 표시됩니다.
번호 | 설명 |
|---|---|
1 | 현재 편집중인 Step을 표시. 현재 편집중인 Step은 마우스포인터의 위치로 판단합니다. |
2 | Step과 Step 사이의 안내선 |
여러 개의 step이 있다고 해서 Form의 실질적인 Size가 변하지 않습니다.
실행 시에는 1개의 Step만 보여지게 됩니다.
Form의 배경은 Step마다 적용 됩니다.
Positionstep Property
컴포넌트에 positionstep Property가 추가 되었습니다. positionstep Property는 해당 컴포넌트의 소속 Step을 나타냅니다.
컴포넌트의 Position이 positionstep + Position으로 적용됩니다.
컴포넌트의 Position은 지정된 positionstep 을 기준으로 설정됩니다.
버튼 | positionstep + Position |
|---|---|
Button00 | positionstep="0" position="absolute 50 100 150 150" |
Button01 | positionstep ="1" position="absolute 50 100 150 150" |
Button03 | positionstep ="2" position="absolute 50 100 150 150" |
Button03 | positionstep ="0" position="absolute 650 100 750 150" |
컴포넌트가 모든 Step영역을 벗어나면 positionstep 0으로 처리됩니다.
positionstep이 -1일 경우에는 모든 Step에 표시됩니다.
-1 positionstep 컴포넌트는 모든 Step 영역에서 선택, 편집 할 수 있습니다
-1 positionstep 컴포넌트는 현재 편집중인 Step이 아닌 경우, 실제 컴포넌트보다 약간 투명하게 보여집니다.
-1 positionstep 컴포넌트는 모든 Step에서 해당 Step에서 보여지는 컴포넌트를 선택 및 편집 할 수 있습니다.
컴포넌트 이동 및 Position 변환
컴포넌트의 Step간 이동은 Property를 직접 입력하거나 Design화면에서 직접 이동할 수 있습니다.
Property 입력 – 입력 값 유지, positionstep 및 Position 재조정 없음 (현재 step에서 벗어날 수 있음)
Design 이동 – Design 화면에서 직접 이동된 Position 정보를 현재 Step에 맞게 변환하여 재적용
(이동 전)
(Position Property 를 직접 입력하여 이동한 경우)
(컴포넌트를 직접 Design 화면에서 이동한 경우)
InitValue
MLM을 적용한 애플리케이션이 특정한 값을 가진 상태에서 시작해야 하는 경우가 있습니다. 예를 들어 각 레이아웃마다 다른 디자인 속성을 가지는 경우 레이아웃마다 다른 속성값을 지정합니다.
하지만 사용자가 입력하거나 변경할 수 있는 속성은 레이아웃이 변한다고 해서 입력되거나 수정된 값이 처음 설정한 값으로 변경돼서는 안됩니다. 이런 항목에 속성값을 직접 지정하지 않고 InitValue를 선언해주면 처음 애플리케이션을 호출할 때만 해당 값을 사용하고 레이아웃 변경과 상관없이 수정된 값을 유지할 수 있습니다.
UX스튜디오 속성창에 Init Info라는 항목이 추가됐습니다. 필요할 때 아래 그림과 같이 InitValue를 적용할 수 있습니다. 수정된 값은 xfdl 파일에 <InitValue> 태그로 추가됩니다.
InitValue로 지정된 값은 폼이 로딩되기 전에 적용되며 속성값은 폼이 로딩되면서 적용됩니다. InitValue와 속성값을 같이 지정하는 경우에는 속성값이 InitValue를 덮어쓰게 됩니다.
레이아웃에 따라 InitValue를 따로 지정할 수는 없습니다.
컴포넌트의 속성값이 임의로 수정되지 않은 상태(Default Value)일 때는 레이아웃 변경이 속성값에 영향을 미치지 않습니다.
실행
Quick View는 현재 활성화된 Layout Tab을 기준으로 보여주도록 되어 있습니다.
Launch Project는 Standard Toolbar에서 선택한 Screen정보를 기준으로 보여주도록 되어 있습니다.
Screen정보를 입력하지 않거나 ADL에 없는 Screen일 경우 Active ADL의 Theme를 적용하여 보여주도록 되어 있습니다.
XML 추가/변경 사항
XPRJ
‘Layout Template’기능으로 생성되는 정보는 XPRJ파일에 저장하도록 되어 있습니다.
XADL
Project생성시 또는 ScreenInfo Edit로 생성되는 정보는 XADL파일에 저장됩니다.
XFDL
Form의 Layout정보 및 컴포넌트의 속성값들은 XFDL에 저장됩니다.
‘Default’탭에서 Form의 속성이 변경된 경우는 <Form>태그에 저장됩니다.
추가된 Layout 탭에서 Form의 속성이 변경된 경우 해당하는 <Layout>태그에 저장됩니다
추가된 Layout 탭에서 컴포넌트의 속성이 변경된 경우 해당하는 <Layout>태그의 하위에 변경된 속성값만 저장됩니다.
InitValue가 추가되면 <InitValue> 태그로 저장됩니다. Form에 대한 InitValue를 지정하는 경우에는 InitValue 태그 자체 속성으로 처리되고 각 컴포넌트의 InitValue는 <InitValue> 태그 안에 변경된 속성값이 처리됩니다.
Sub Layout
기본적으로 Form의 XML 구조와 동일한 구조를 같습니다. Target 컴포넌트의 하위로 default Layout이 있고 그 밑으로 Sub Layout의 Tag가 있습니다.
각각의 Sub Layout 에서 수정된 내용은 해당 Sub Layout Tag에 Multi Layout Manger 형식으로 저장됩니다.