[02-D1] MDI 제어

[02-D1] MDI 제어

[01] MDI(Multiple Document Interface) 제어

1. MDI창의 제어, 윈도우 정렬 

>>>>> Run Application: src/MDIExample2.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 

    xmlns:mx="http://www.adobe.com/2006/mxml"

    xmlns:vroi="http://www.vroi.net/2006/mxml">

    <mx:Script>

    <![CDATA[

    

    import net.vroi.containers.Window;

    private function addPopUp():void{

        var popup:VSubWindow = new VSubWindow();

        popup.message = "addPopUp Example";

        mdi.addPopUp(popup);

    }

    ]]>

    </mx:Script>

    <mx:Panel width="100%" height="100%"

        title="MDI Example">

        <vroi:MDI id="mdi" 

            width="100%" height="100%">

        </vroi:MDI>

        <mx:ControlBar>

            <mx:Button label="addPopUp" click="addPopUp();" />

            <mx:Button label="horizontal" click="mdi.horizontalAlign();" />

            <mx:Button label="vertical" click="mdi.verticalAlign();" />

            <mx:Button label="cascade" click="mdi.cascade();" />

            <mx:Button label="minimize" click="mdi.minimizeAllPopUp();" />

            <mx:Button label="restore" click="mdi.restoreAllPopUp();" />

        </mx:ControlBar>

    </mx:Panel>

</mx:Application>

2. MDI 이펙트 적용

- mdi.sequenceAnimate = event.target.selected: CPU Resource slice

>>>>> Run Application: src/MDIExample3.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 

    xmlns:mx="http://www.adobe.com/2006/mxml"

    xmlns:vroi="http://www.vroi.net/2006/mxml"

    initialize="initializeHandler();">

    <mx:Script>

    <![CDATA[

    

    import net.vroi.containers.Window;

    import net.vroi.core.WindowMoveType;

    import net.vroi.core.WindowResizeType;

    import mx.effects.easing.*;

    private function initializeHandler():void{

        Window.resizeAnimate = true;

        Window.moveAnimate = true;

        Window.moveEasingFunction = Quadratic.easeOut;

        Window.moveType = WindowMoveType.ANIMATED;

        Window.resizeType = WindowResizeType.ANIMATED;

    }

    private function addPopUp():void{

        var popup:VSubWindow = new VSubWindow();

        popup.message = "addPopUp Example";

        mdi.addPopUp(popup);

    }

    ]]>

    </mx:Script>

    <mx:Panel width="100%" height="100%"

        title="MDI Example">

        <vroi:MDI id="mdi" 

            width="100%" height="100%">

        </vroi:MDI>

        <mx:ControlBar>

            <mx:Button label="addPopUp" click="addPopUp();" />

            <mx:Button label="horizontal" click="mdi.horizontalAlign();" />

            <mx:Button label="vertical" click="mdi.verticalAlign();" />

            <mx:Button label="cascade" click="mdi.cascade();" />

            <mx:Button label="minimize" click="mdi.minimizeAllPopUp();" />

            <mx:Button label="restore" click="mdi.restoreAllPopUp();" />

            <mx:CheckBox label="sequenceAnimate" 

                click="mdi.sequenceAnimate = event.target.selected" />

            <mx:HSlider minimum="10" maximum="200"

                snapInterval="1"

                change="mdi.sequenceInterval = event.target.value" />

        </mx:ControlBar>

    </mx:Panel>

</mx:Application>

3. MDI 창 스타일 변경

>>>>> Run Application: src/MDIExample4.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 

  xmlns:mx="http://www.adobe.com/2006/mxml"

  xmlns:vroi="http://www.vroi.net/2006/mxml"

  initialize="initializeHandler();">

  <mx:Style>

  Window {

    backgroundAlph: 1;

    backgroundColor: #EEEEEE;

    borderAlpha: 1;

    borderColor: #121E26;

    borderThicknessTop: 0;

    borderThicknessRight: 4;

    borderThicknessLeft: 4;

    borderThicknessBottom: 0;

    cornerRadius: 10;

    dropShadowEnabled: false;

    headerHeight: 24;

    highlightAlphas: .2, .4;

    paddingTop: 10;

    paddingRight: 10;

    paddingBottom: 10;

    paddingLeft: 10;

    roundedBottomCorners: true;

    modalTransparency: .5;

    modalTransparencyColor: #DDDDDD;

    titleStyleName: "windowTitle";

    infoStyleName: "windowInfo";

    }

  /* windowTitle */

  .windowTitle {

    color: #FFFFFF;

    fontWeight: "bold";

    }

  /* windowInfo */

  .windowInfo {

    color: #FFFFFF;

    fontWeight: "normal";

    textAlign: "left";

    }

  </mx:Style>

  <mx:Script>

  <![CDATA[

  

  import net.vroi.containers.Window;

  import net.vroi.core.WindowMoveType;

  import net.vroi.core.WindowResizeType;

  import mx.effects.easing.*;

  private function initializeHandler():void{

    Window.resizeAnimate = true;

    Window.moveAnimate = true;

    Window.moveEasingFunction = Quadratic.easeOut;

    Window.moveType = WindowMoveType.ANIMATED;

    Window.resizeType = WindowResizeType.ANIMATED;

    mdi.sequenceAnimate = true;

  }

  private function addPopUp():void{

    var popup:VSubWindow = new VSubWindow();

    popup.message = "addPopUp Example";

    mdi.addPopUp(popup);

  }

  private function changeStyle(styleName:String, value:Object):void{

    var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration("Window");

    style.setStyle(styleName, value);

  }

  ]]>

  </mx:Script>

  <mx:Panel width="100%" height="100%"

    title="MDI Example">

    <vroi:MDI id="mdi" 

      width="100%" height="100%">

    </vroi:MDI>

    <mx:ControlBar>

      <mx:VBox>

        <mx:HBox>

          <mx:Button label="addPopUp" click="addPopUp();" />

          <mx:Button label="horizontal" click="mdi.horizontalAlign();" />

          <mx:Button label="vertical" click="mdi.verticalAlign();" />

          <mx:Button label="cascade" click="mdi.cascade();" />

          <mx:Button label="minimize" click="mdi.minimizeAllPopUp();" />

          <mx:Button label="restore" click="mdi.restoreAllPopUp();" />

        </mx:HBox>

        <mx:HBox>

          <mx:ColorPicker 

            change="changeStyle('borderColor', event.target.selectedColor);" />

          <mx:HSlider minimum="0.1" maximum="1" value="1" liveDragging="true" 

            change="changeStyle('borderAlpha', event.target.value);" />

          <mx:ColorPicker 

            change="changeStyle('backgroundColor', event.target.selectedColor);" />

          <mx:HSlider minimum="0.1" maximum="1" value="1" liveDragging="true" 

            change="changeStyle('backgroundAlpha', event.target.value);" />

          <mx:CheckBox label="dropShadowEnabled" 

            change="changeStyle('dropShadowEnabled', event.target.selected);" />

          <mx:HSlider minimum="0" maximum="1" 

            values="{[.2, .4]}" liveDragging="true" 

            thumbCount="2" allowThumbOverlap="true"

            change="changeStyle('highlightAlphas', event.target.values);" />

          <mx:HSlider minimum="20" maximum="50" value="24" 

            liveDragging="true" snapInterval="1"

            change="changeStyle('headerHeight', event.target.value);" />

        </mx:HBox>

      </mx:VBox>

    </mx:ControlBar>

  </mx:Panel>

</mx:Application>

4. MDI의 배경을 윈도우 바탕화면으로 지정하세요.

>>>>> Run Application: src/MDIExample5.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 

  xmlns:mx="http://www.adobe.com/2006/mxml"

  xmlns:vroi="http://www.vroi.net/2006/mxml"

  initialize="initializeHandler();" layout="absolute">

  <mx:Style>

  Window {

    backgroundAlph: 1;

    backgroundColor: #FFFFFF;

    borderAlpha: 1;

    borderColor: #0099FF;

    borderThicknessTop: 0;

    borderThicknessRight: 4;

    borderThicknessLeft: 4;

    borderThicknessBottom: 0;

    cornerRadius: 10;

    dropShadowEnabled: false;

    headerHeight: 24;

    highlightAlphas: .2, .4;

    paddingTop: 10;

    paddingRight: 10;

    paddingBottom: 10;

    paddingLeft: 10;

    roundedBottomCorners: true;

    modalTransparency: .5;

    modalTransparencyColor: #3333FF;

    titleStyleName: "windowTitle";

    infoStyleName: "windowInfo";

    }

  /* windowTitle */

  .windowTitle {

    color: #FFFFFF;

    fontWeight: "normal";

    font-size: 11px;

    }

  /* windowInfo */

  .windowInfo {

    color: #FFFFFF;

    fontWeight: "normal";

    textAlign: "left";

    font-size: 11px;    

    }

  </mx:Style>

  <mx:Script>

  <![CDATA[

  

  import net.vroi.containers.Window;

  import net.vroi.core.WindowMoveType;

  import net.vroi.core.WindowResizeType;

  import mx.effects.easing.*;

  private function initializeHandler():void{

    Window.resizeAnimate = true;

    Window.moveAnimate = true;

    Window.moveEasingFunction = Quadratic.easeOut;

    Window.moveType = WindowMoveType.ANIMATED;

    Window.resizeType = WindowResizeType.ANIMATED;

    mdi.sequenceAnimate = true;

  }

  private function addPopUp():void{

    var popup:VSubWindow = new VSubWindow();

    popup.message = "addPopUp Example";

    mdi.addPopUp(popup);

  }

  private function changeStyle(styleName:String, value:Object):void{

    var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration("Window");

    style.setStyle(styleName, value);

  }

  ]]>

  </mx:Script>

  <mx:Canvas left="0" top="0" right="0" bottom="0">

    <mx:VBox left="0" top="0" bottom="0" right="0" backgroundColor="#4D64EE">

    

        <vroi:MDI id="mdi" 

        width="100%" height="100%" backgroundImage="@Embed(source='images/Windows XP_02.jpg')" backgroundSize="100%">

        </vroi:MDI>

        <mx:HBox horizontalAlign="center">

            <mx:Button label="addPopUp" click="addPopUp();" />

            <mx:Button label="horizontal" click="mdi.horizontalAlign();" />

            <mx:Button label="vertical" click="mdi.verticalAlign();" />

            <mx:Button label="cascade" click="mdi.cascade();" />

            <mx:Button label="minimize" click="mdi.minimizeAllPopUp();" />

            <mx:Button label="restore" click="mdi.restoreAllPopUp();" />

        </mx:HBox>

    </mx:VBox>

  </mx:Canvas>

  

</mx:Application>