Openzet.org

소개

MDI는 Multiple Document Interface의 약자를 뜻하며, Flex에서 기본적으로 제공되지 않는 일반적인 MDI의 기능을 제공한다.
MDI기능을 제공하는 클래스 군에는 MDI 컨테이너 및 MDIWindow가 있으며, MDI의 자식으로는 IMDIWindow 인터페이스를 구현하는 객체만 추가 가능하다.
MDI는 기본적으로 자식들을 수평 배열, 수직 배열 및 계단식 정렬을 제공하며, MDIWindow는 창의 최소화, 최대화 및 이전 크기로 돌아가는 기능을 기본적으로 제공한다.

구성요소

MDI는 다음과 같은 클래스들로 구성되어 있다.

속성

maxChildren:int

자식 Window 최대 개수를 나타낸다. 0이면 무한대이다.

메서드

cascade():void

minimize 상태의 창을 제외한 모든 Window를 계단식 정렬한다.

horizontalAlign():void

minimize 상태의 창을 제외한 모든 Window를 수평 바둑판식으로 정렬한다.

verticalAlign():void

minimize 상태의 창을 제외한 모든 Window를 수직 바둑판식으로 정렬한다.

스타일

windowGap:Number

새로운 Window를 생성하는 경우 Window간의 간격을 나타낸다. 기본값은 20.

MDI를 이용한 애플리케이션 개발

이번 항목은 MDI를 이용한 애플리케이션을 개발하는 방법을 소개한다.

Window 추가/제거 하기

MDI에 Window를 추가하는 방법은 ActionScript 개발자가 익히 알고 있는 방법과 동일하게 addChild() 및 removeChild() 메소드를 그대로 사용한다. 또한 MXML에서 MDI 자식 태그를 선언하는 방법을 사용할 수도 있다. 다만, 추가할 수 있는 객체는 반드시 IMDIWindow 인터페이스를 구현하고 있어야 한다. 그렇지 않으면 런타임 에러가 발생한다.

MXML에서 자식 객체 추가하기

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:zet="http://www.openzet.org/2009/mxml">
    <zet:MDI width="100%" height="100%">
      <zet:MDIWindow title="Default MDIWindow" />
    </zet:MDI>
  </mx:Application>

ActionScript에서 자식 객체 추가하기

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:zet="http://www.openzet.org/2009/mxml">
    <mx:Script>
    <![CDATA[
 
    import org.openzet.containers.MDI;
    import org.openzet.containers.MDIWindow;
    import org.openzet.containers.MDIWindowState;
 
    private function addWindow():void
    {
      var window:MDIWindow = new MDIWindow();
      window.title = "MDIWindow test";
      mdi.addChild(Window);
 
      window.windowState = MDIWindowState.MAXIMIZED;
    }
 
    ]]>
    </mx:Script>
    <mx:Button label="add window" click="addWindow();" />
    <zet:MDI id="mdi" width="100%" height="100%" />
  </mx:Application>

여기서 주의해야 할 점은, 다른 속성들은 모두 미리 설정해도 되지만 Window의 x, y, width, height 및 windowState 속성은 반드시 addChild() 후에 설정해주어야 한다. MDI의 내부 구조상 최초에는 기본적으로 자식의 위치와 크기를 잡아주게 되므로 미리 입력한 값들이 무시가 된다.

잘못된 방법

function addWindow():void
    {
      var window:MDIWindow = new MDIWindow();
      window.x = 50;
      window.y = 100;
      window.width = 300;
      window.height = 200;
 
      mdi.addChild(Window);
    }

올바른 방법

function addWindow():void
    {
      var window:MDIWindow = new MDIWindow();
      mdi.addChild(Window);
 
      window.x = 50;
      window.y = 100;
      window.width = 300;
      window.height = 200;
    }

Window 정렬하기

MDI의 cascade(), horizontalAlign() 및 verticalAlign() 메소드를 실행하여 정렬 할 수 있다.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:zet="http://www.openzet.org/2009/mxml">
    <mx:Button label="cascade" click="mdi.cascade();" />
    <mx:Button label="horizontal align" click="mdi.horizontalAlign();" />
    <mx:Button label="vertical align" click="mdi.verticalAlign();" />
    <zet:MDI id="mdi" width="100%" height="100%">
      <zet:MDIWindow title="window 1" />
      <zet:MDIWindow title="window 2" />
      <zet:MDIWindow title="window 3" />
      <zet:MDIWindow title="window 4" />
      <zet:MDIWindow title="window 5" />
    </zet:MDI>
  </mx:Application>

Window 상태 변경하기

Window의 상태는 windowState 속성을 변경하거나 메소드를 호출하면 된다. windowState 속성의 값은 MDIWindowState 클래스의 상수값을 가지며, MDIWindowState.NORMAL, MDIWindowState.MAXIMIZED 및 MDIWindowState.MINIMIZED의 세 가지 상태를 가진다. 또한 maximize(), minimize() 또는 restore()와 같은 메소드를 이용하는 방법이 있다. 다만 restore() 메소드는 다른 메소드와는 조금 다른 동작을 하는데, 이 메소드는 Window를 이전 상태로 되돌리는 기능을 한다. 즉, Window가 최대화 상태에서 최소화 상태로 변경 된 경우에, windowState 속성을 MDIWindow.NORMAL로 설정하면 바로 normal 상태로 변경되지만, restore() 메소드를 호출하면 바로 이전 상태, 즉 최대화 상태로 돌아가게 된다.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:zet="http://www.openzet.org/2009/mxml">
    <mx:Button label="maximize" click="win1.windowState = WindowState.MAXIMIZED" />
    <mx:Button label="minimize" click="win1.windowState = WindowState.MINIMIZED" />
    <mx:Button label="normal" click="win1.windowState = WindowState.NORMAL" />
    <zet:MDI id="mdi" width="100%" height="100%">
      <zet:MDIWindow id="win1" title="window 1" />
      <zet:MDIWindow title="window 2" />
      <zet:MDIWindow title="window 3" />
      <zet:MDIWindow title="window 4" />
      <zet:MDIWindow title="window 5" />
    </zet:MDI>
  </mx:Application>

Mdi