9.MLM(V9.2추가)

현존하는 다양한 매체들은 서로 다른 표현영역을 가지고 있기 때문에 매체에 맞는 Design작업 및 Source관리를 해야 하는 문제가 생깁니다. 따라서 One Source로 다양한 상황에 맞는 Design을 표현할 수 있도록 해줄 수 있는 Multi Layout Manager기능이 추가되었습니다.

UX-Studio에서 생성된 ADL/FDL을 XPLATFORM이 Device에 맞는 Layout을 선택하여 출력합니다.

이하 사용된 용어 설명

9.1Project 생성 및 수정

9.1.1Project생성

‘I-Phone’, ‘I-Pad’, ‘GalaxyTab’의 Layout정보를 가진 Project를 생성하는 방법을 예로 들어 설명합니다. UX-Studio에서 File > New > Project 메뉴를 호출할 경우 아래와 같이 Project를 생성하는 Wizard가 표시되며, 각 단계별로 정보를 입력하여 생성할 수 있습니다.

  1. New Project Wizard – Step1

    생성될 Project의 Frame Template와 생성될 경로 및 Project명을 입력하는 단계입니다. Project명은 반드시 입력해야 하는 필수 항목이며, 생성될 경로에 동일한 Project명이 존재할 경우에는 생성할 수 없습니다.

  1. New Project Wizard – Step2

    Character Set정보 및 TypeDefinition정보 등을 설정하는 단계입니다.

  1. New Project Wizard – Step3

    Project에서 사용할 Screen정보를 입력하는 단계입니다. I-Phone, I-Pad, GalaxyTab을 개발할 목적이기 때문에 각각의 항목을 입력하고, 해당 Screen에서 사용할 Theme를 지정합니다. ‘Finish’를 클릭하여 ‘I-Phone’, ‘I-Pad’, ‘GalaxyTab’ Screen정보를 가진 Project를 생성합니다.

9.1.2Screen정보의 수정

‘New Project Wizard’에서 입력한 Screen정보를 수정하거나 새로운 Screen정보를 입력할 수 있는 Editor기능이 추가되었습니다.

‘Project Explorer’에서 ADL Item에서 제공되는 Popup메뉴를 사용하여 새로운 Screen정보를 추가하거나 ADL Item의 하위 정보로 표시되는 ‘ScreenInfo’등을 선택하여 편집할 수 있습니다.

‘ScreenInfo Editor’는 기존에 제공되던 ‘Widget Editor’, ‘Variable Editor’와 동일한 방식으로 편집기능을 제공합니다.

9.1.3Layout Template등록

기본적으로 제공되는 Layout Template를 사용할 수 있습니다. 또한, 자주 사용되는 Layout정보를 사용자가 Template으로 등록 할 수 있습니다.

Layout Template Dialog는 기본적으로 제공되는 Template인 Device, Graphic Array Template과 사용자가 직접 등록하여 사용하는 User Template 3개의 Tab으로 구성되어 있습니다.

9.2Form생성

‘I-Phone’, ‘I-Pad’, ‘GalaxyTab’ 3군데서 사용할 FDL파일을 만드는 방법을 예로 들어 설명합니다. File > New > Item > Form 메뉴를 선택할 경우 아래와 같이 FDL을 생성하는 Wizard가 표시되며, 각 단계별로 정보를 입력하여 생성할 수 있습니다.

  1. New Form Wizard – Step1

    생성될 Form의 경로와 이름을 입력하는 단계입니다. Form명은 반드시 입력해야 하는 필수 항목이며, 생성될 경로에 동일한 Form명이 존재할 경우에는 생성할 수 없습니다.

  1. New Form Wizard – Step2

    생성될 Form의 Inheritance를 지정하는 단계입니다.

    TypeDefinition에 ‘UserForm’이 등록되어 있는 경우에만 입력 컨트롤이 활성화 됩니다.

  1. New Form Wizard – Step3

    생성될 Form의 ‘Default’Layout Form 크기를 입력하는 단계입니다. 초기 입력값은 Option에서 변경할 수 있습니다.

  1. New Form Wizard – Step4

    생성될 Form에서 Design할 Layout정보를 입력하는 단계입니다. Screen종류별, 가로, 세로의 크기에 맞춘 Layout정보를 설정합니다.

Template버튼을 누르면 아래 그림과 같은 Template Dialog가 나타나고 원하는 Layout, Layout group을 선택한 후 ok버튼을 누르면 선택한 Layout 정보가 New Form Wizard에 추가됩니다.

9.3Layout

‘New Form Wizard’에서 입력한 Layouts정보가 Tab형태로 표시 되도록 Form Design기능이 변경되었습니다.

9.3.1Layout Tab

현재 Form에서 사용되는 Layout이 탭으로 표시됩니다. 탭의 위치는 Option에서 사용자가 변경할 수 있습니다.

Tab을 전환하여 ‘New Form Wizard’에서 입력한 Layout으로 화면 전환이 가능하며 Layout에 대한 수정 기능을 POPUP메뉴로 제공합니다.

‘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

9.3.2Layout 정보 수정

현재 Form에서 사용중인 Layout의 정보를 수정할 수 있는 기능이 POPUP메뉴로 추가되었습니다.

‘Default’ 탭에서 컴포넌트의 속성값이 변경되었을 경우에는 변경된 내용을 다른 Layout에 적용할지 확인하는 메시지 창이 Popup됩니다.

번호

조건

1

다른 Layout에서 변경될 속성이 Source상에 존재하는 경우

2

‘Layouts Edit’ Option 값이 ‘Ask whenever a property changed’로 되어 있는 경우

버튼

‘Layouts Edit’ Option

Yes

Change property Default Layout with other layouts

No

Changed property is only Default Layout applied

9.3.3Properties Window

Form Design의 정보를 Properties Windows에서 보여주고 있는 경우, Layout 탭에 따라 표시 방법이 달라지게 됩니다.

색상

굵게

정보

검은색

X

Theme와 css만 적용된 기본값을 가진 경우

검은색

O

‘Default’탭에서 수정하여 Theme와 css가 적용된 기본값과 다른 값을 가진 경우

파란색

O

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

속성명

설명

id

모든 컴포넌트의 ID는 추가된 Layout탭에서는 수정할 수 없습니다.

taborder

모든 컴포넌트의 taborder는 추가된 Layout탭에서는 수정할 수 없습니다.

inheritanceid

Form Property중에서 inheritanceid는 수정할 수 없습니다.

position

Form Property중에서 position은 수정할 수 없습니다.

9.4Sub Layout

컴포넌트내부에 Contents를 가지고 있는 Div, PopupDiv, TabPage 등도 Form과 같이 Multi Layout을 가지게 되며 이를 Sub Layout이라 합니다. Sub Layout은 Form Layout과 1:1 매칭이 아니고 별도의 Multi Layout을 구성합니다. Tab의 경우, TabPage 별로 다른 Multi Layout을 구성할 수 있습니다.

9.4.1Default Layout에서의 편집

Sub Layout을 가지고 있는 컴포넌트의 하위 Contents는 Form의 Default Layout에서만 직접 편집이 가능합니다. (기존의 편집 방법과 동일)

직접 편집되는 내용은 해당 컴포넌트가 보여주고 있는 Sub Layout에 저장됩니다.

단, Default Layout이 아닌 추가 Layout (예: 위 그림에서 iPhoneW Layout)에서는 Contents를 직접 편집 할 수 없습니다. 따라서, 하위 Contents는 선택 및 수정 할 수 없으며 하위 Contents 선택 시, 최상위 컴포넌트가 선택됩니다. 추가 Layout에서 Contents를 편집 하기 위해서는 Sub Layout Editor를 사용하여 편집하여야 합니다.

9.4.2Sub Layout에서의 편집

추가 Layout에서 Contents를 편집 하기 위해서는 Sub Layout Editor를 사용하여 편집하여야 합니다. Sub Layout을 가진 컴포넌트는 Sub Layout Edit, Set Sub Layout 2개의 Popup Menu를 제공합니다.

Sub Layout Edit메뉴를 선택하면 아래 그림과 같은 Sub Layout Editor가 나타납니다.

Sub Layout Editor만의 Popup Menu가 제공됩니다.

Sub Layout의 Size를 변경 할 수는 있지만 Target 컴포넌트의 Position은 변하지 않습니다.

9.5Step

Step이란 여러 개의 step으로 이루어진 페이지를 하나의 Form에서 개발할 수 있는 기능을 의미합니다.

Form의 stepcount Property 값을 조정하면 아래그림과 같이 step이 표시됩니다.

번호

설명

1

현재 편집중인 Step을 표시.

현재 편집중인 Step은 마우스포인터의 위치로 판단합니다.

2

Step과 Step 사이의 안내선

9.5.1Positionstep Property

버튼

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"

9.5.2컴포넌트 이동 및 Position 변환

컴포넌트의 Step간 이동은 Property를 직접 입력하거나 Design화면에서 직접 이동할 수 있습니다.

(이동 전)

(Position Property 를 직접 입력하여 이동한 경우)

(컴포넌트를 직접 Design 화면에서 이동한 경우)

9.6InitValue

MLM을 적용한 애플리케이션이 특정한 값을 가진 상태에서 시작해야 하는 경우가 있습니다. 예를 들어 각 레이아웃마다 다른 디자인 속성을 가지는 경우 레이아웃마다 다른 속성값을 지정합니다.

하지만 사용자가 입력하거나 변경할 수 있는 속성은 레이아웃이 변한다고 해서 입력되거나 수정된 값이 처음 설정한 값으로 변경돼서는 안됩니다. 이런 항목에 속성값을 직접 지정하지 않고 InitValue를 선언해주면 처음 애플리케이션을 호출할 때만 해당 값을 사용하고 레이아웃 변경과 상관없이 수정된 값을 유지할 수 있습니다.

9.7실행

9.8XML 추가/변경 사항

9.8.1XPRJ

‘Layout Template’기능으로 생성되는 정보는 XPRJ파일에 저장하도록 되어 있습니다.

9.8.2XADL

Project생성시 또는 ScreenInfo Edit로 생성되는 정보는 XADL파일에 저장됩니다.

9.8.3XFDL