Mdi

From Openzet

MDI, short for Multiple Document Interface, provides MDI features not supported by Flex framework.
Classes comprising MDI features include MDIContainer and MDIWindow, you can only add children which implement IMDIWindow interface type.
MDI lets you layout children horizontally, vertically and cascadingly, while also providing mimimize, maximize and restore functionality.

Contents 1 Property 1.1 maxChildren:int 2 Method 2.1 cascade():void 2.2 horizontalAlign():void 2.3 verticalAlign():void 3 Style 3.1 windowGap:Number 4 Application Example 5 Adding/removing windows 5.1 Adding children in MXML 5.2 Adding children through ActionScript 5.2.1 Wrong example 5.2.2 Correct example 6 Aligning windows 7 Changing Window Status

Property

maxChildren:int

Specifies the maximum children of a Window. If set to zero, you can add unlimited number of children.

Method

cascade():void

Cascades all windows except for those in minimize state.

horizontalAlign():void

Layouts all windows except for those horizontally.

verticalAlign():void

Layouts all windows except for those vertically.

Style

windowGap:Number

Specifies gap between windows when creating a new window. Default value is 20.

Application Example

The following is a brief introduction to making an application using MDI classes.

Adding/removing windows

You can add or remove windows to or from MDI controls by calling addChild() and removeChild() method as you usually do with other components. Also you can choose to use MXML tag to add child to an MDI instance. Yet one requirement is that children added should always implement IMDIWindow interface. Otherwise, you will run into a runtime exception.

Adding children in 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>

Adding children through 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>

One thing you need to note is that you should always set x, y, width and height value of a window state only after you call addChild() method, while other properties could be set either before or after calling this method. Property values of x, y, width and height set before calling addChild() method will have no effect, since MDI internally layouts its children on its own.

Wrong example

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

Correct example

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

Aligning windows

You can align MDI instances by calling cascade(), horizontalAlign(), verticalAlign() methods.

<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>

Changing Window Status

You can change the status of a window by changing windowState property or by calling relevant methods. windowState property’s value will only accept constants defined in MDIWindowState class, which are MDIWindowState.NORMAL, MDIWindowState.MAXIMIZED and MDIWindowState.MINIMIZED. You can also use methods such as maximize(), minimize(), restore() method to change status. Yet you should note that restore() method has some odd behavior compared with other methods. That is, this method will always restore a window to its previous status. For example, if a window is in a maximized status, and you set windowState property’s value as MDIWindow.NORMAL, then this restore() method will set its status to maximized again if called.

<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>