MLM(Multi Layout Manager)

개발된 애플리케이션을 사용하는 환경이 다양해지면서 각 디바이스에 최적화된 디자인과 기능을 제공해야 하는 문제가 생기고 있습니다. 요구되는 디바이스 수대로 애플리케이션을 개발한다면 그 비용과 시간을 기존 시스템에서 감당하기 어렵습니다. 넥사크로플랫폼에서는 이런 요구에 따라 하나의 소스로 다양한 상황에 맞는 디자인과 기능을 구현할 수 있는 멀티 레이아웃 매니저 기능을 지원합니다.

프로젝트 생성 및 수정

프로젝트 생성

‘iPhone’, ‘iPad’, ‘GalaxyTab’의 레이아웃 정보를 가진 프로젝트를 생성하는 방법을 예로 들어 설명합니다. 넥사크로 스튜디오에서 File > New > Project 메뉴를 호출하면 아래와 같이 프로젝트를 생성하는 마법사가 표시되며, 단계별로 정보를 입력하여 생성할 수 있습니다.

New Project Wizard – Step1

생성될 프로젝트의 프레임 템플릿을 설정하고 프로젝트를 저장할 경로 및 이름을 입력하는 단계입니다. 프로젝트명은 반드시 입력해야 하는 필수 항목이며, 생성될 경로에 같은 프로젝트명이 존재하면 생성할 수 없습니다.

New Project Wizard – Step2

TypeDefinition정보를 설정하는 단계입니다.

New Project Wizard – Step3

프로젝트에서 사용할 스크린 정보를 입력하는 단계입니다. iPhone, iPad, GalaxyTab에 맞는 애플리케이션을 개발할 목적이기 때문에 각각의 항목을 입력하고, 해당 스크린에서 사용할 테마를 지정합니다. ‘Finish’를 클릭하면 ‘iPhone’, ‘iPad’, ‘GalaxyTab’ 스크린 정보를 가진 프로젝트가 생성됩니다.

New Project Wizard 3단계

Screen 속성

설명

name

Screen 이름 (고유 식별자)

type

사용 장비 형태

- 'desktop', 'phone', 'tablet' 중 여러 항목을 선택할 수 있습니다.

screenwidth

Screen 너비 (입력 제한: 0~65536)

sizeorientation

screenwidth 속성을 처리하는 방향을 지정합니다.

- 'landscape', 'portrait' 중 한 가지 항목을 선택합니다.

- 기본값 'landscape' (type 속성에 'desktop' 또는 'tablet' 항목이 포함된 경우)

- 기본값 'portrait' (type 속성이 'phone'인 경우)

autozoom

자동 확대, 축소 기능 사용 여부를 지정합니다.

- true, false 중 한 가지 항목을 선택합니다. (기본값은 false)

- type 속성에 'desktop'일 경우에는 autozoom 설정은 적용하지 않습니다.

zoommin

autozoom 기능 사용 시 최솟값 정보를 지정합니다.

- 음수 지정 시 무제한, 기본값은 -1

zoommax

autozoom 기능 사용시 최댓값 정보를 지정합니다.

- 음수 지정 시 무제한, 기본값은 -1

systemos

Screen에서 사용할 OS 정보

- 'windows', 'android', 'ios' 중 여러 항목을 선택할 수 있습니다.

- 기본값은 모든 OS 속성값을 포함합니다.

systemlocale

Screen에서 사용할 Locale 정보

- 'af_ZA' … "zh_TW" 중 여러 항목을 선택할 수 있습니다.

- 기본값은 모든 Locale 속성값을 포함합니다.

formlayoutwidth

Screen에서 사용할 Form Layout의 너비를 지정합니다.

formlayoutheight

Screen에서 사용할 Form Layout의 높이를 지정합니다.

스크린 정보의 수정

‘New Project Wizard’에서 입력한 스크린 정보를 수정하거나 새로운 스크린 정보는 Project Explorer > ADL 컨텍스트 메뉴를 사용하여 새로운 스크린 정보를 추가하거나 ADL 하위 정보로 표시되는 ScreenInfo 항목을 선택해 편집할 수 있습니다.

폼 생성

‘iPhone’, ‘iPad’, ‘GalaxyTab’ 3가지 디바이스에서 사용할 폼을 만드는 방법을 예로 들어 설명합니다. File > New > Item > Form 메뉴를 선택하면 아래와 같이 FDL을 생성하는 마법사가 실행되며, 단계별로 정보를 입력하여 생성할 수 있습니다.

New Form Wizard – Step1

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

New Form Wizard – Step2

생성될 폼의 ‘Default’ 레이아웃 크기를 입력하는 단계입니다. 초기 입력값은 속성 창에서 변경할 수 있습니다.

New Form Wizard – Step3

생성될 폼에서 컴포넌트 생성 시 적용할 Position 단위를 지정하는 단계입니다.

New Form Wizard – Step4

생성될 폼에 필요한 레이아웃 정보를 입력하는 단계입니다. 스크린 종류별, 가로, 세로의 크기에 맞춘 레이아웃 정보를 설정합니다.

템플릿 버튼을 누르면 아래 그림과 같은 Screen Template 대화상자가 나타나고 원하는 유형의 정보를 선택한 후 OK 버튼을 누르면 선택한 Screen 정보가 New Form Wizard에 적용됩니다.

생성된 폼과 관련된 상세한 옵션은 넥사크로 스튜디오 가이드를 참고하세요.

InitValue

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

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

실행

XML 추가/변경 사항

XADL

프로젝트 생성 시 또는 ScreenInfo 항목을 직접 편집해 생성되는 정보는 XADL 파일에 저장됩니다.

<?xml version="1.0" encoding="utf-8"?>
<ADL version="1.2">
  <TypeDefinition url="default_typedef.xml"/>
  <GlobalVariables url="globalvars.xml"/>
  <Application id="TEST2">
    <Layout>
...
    </Layout>
    <ScreenInfo>
      <Screen name="iphone" type="phone" screenwidth="1280" 
		sizeorientation="landscape" autozoom="false" 
		zoommin="100%" zoommax="" systemos="" 
		systemlocale="" formlayoutwidth="" 
		formlayoutheight="" themeid="default.xtheme"/>
    </ScreenInfo>
  </Application>
</ADL>

XFDL

폼의 레이아웃 정보 및 컴포넌트의 속성값들은 XFDL 파일에 저장됩니다.

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="LayoutForm">
    <Layouts>
      <Layout width="1024" height="768"/>
      <Layout name="iPad_P" screenid="iPad" width="768" height="1024"/>
      <Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
    </Layouts>
  </Form>
</FDL>

‘Default’ 탭에서 Form의 속성이 변경된 경우는 <Form> 태그에 저장됩니다.

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="LayoutForm" style="background:red;">
    <Layouts>
      <Layout width="1024" height="768"/>
      <Layout name="iPad_P" screenid="iPad" width="768" height="1024"/>
      <Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
    </Layouts>
  </Form>
</FDL>

추가된 레이아웃 탭에서 폼의 속성이 변경된 경우 해당하는 <Layout> 태그에 저장됩니다.

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="LayoutForm" style="background:red;">
    <Layouts>
      <Layout width="1024" height="768"/>
      <Layout name="iPad_P" screenid="iPad" width="768" height="1024" 
           style="background:yellow;"/>
      <Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
    </Layouts>
  </Form>
</FDL>

추가된 레이아웃 탭에서 컴포넌트의 속성이 변경된 경우 해당하는 <Layout> 태그의 하위에 변경된 속성값만 저장됩니다.

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="LayoutForm">
    <Layouts>
      <Layout width="1024" height="768">
        <Button id="Button00" text="Button00" 
             left="20" top="20" width="120" height="50"/>
      </Layout>
      <Layout name="iPad_P" screenid="iPad" width="768" height="1024">
        <Button id="Button00" style="color:blue;"/>
      </Layout>
      <Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
    </Layouts>
  </Form>
</FDL>

InitValue가 추가되면 <InitValue> 태그로 저장됩니다. 폼에 대한 InitValue를 지정하는 경우에는 InitValue 태그 자체 속성으로 처리되고 각 컴포넌트의 InitValue는 <InitValue> 태그 안에 변경된 속성값이 처리됩니다.

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="LayoutForm">
    <Layouts>
    </Layouts>
    <InitValue>
      <Button id="Button00" style="color:blue;"/>
    </InitValue>
  </Form>
</FDL>

서브 레이아웃은 폼을 구성하는 XML과 기본 구조는 같습니다. 대상 컴포넌트 하위에 default 레이아웃이 있고 그 하위에 서브 레이아웃이 생성됩니다. 각 서브 레이아웃에서 수정된 속성은 <Layout> 태그의 하위에 변경된 속성값만 저장됩니다.

<?xml version="1.0" encoding="utf-8"?>
<FDL version="1.5">
  <TypeDefinition url="..\default_typedef.xml"/>
  <Form id="LayoutForm">
    <Layouts>
      <Layout width="1024" height="768">
        <Div id="Div00" taborder="0" left="20" top="20" width="300" height="300">
          <Layouts>
            <Layout width="300" height="300">
              <Button id="Button00" left="17" top="67" width="120" height="50"/>
            </Layout>
            <Layout name="SubLayout00" width="200" height="200">
              <Button id="Button00" style="color:blue;"/>
            </Layout>
          </Layouts>
        </Div>
      </Layout>
      <Layout name="iPad_P" screenid="iPad" width="768" height="1024"/>
      <Layout name="iPad_L" screenid="iPad" width="1024" height="768"/>
    </Layouts>
  </Form>
</FDL>