FLEX- MDI窗口开发实例

参考了杜增强的dpanel和Flex Doc Team的关于Creating Resizable and Draggable Flex Components
连接：
dpanel
Creating Resizable and Draggable Flex Components
demo下载
示例：

代码：
application.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
     xmlns:mdi="ext.containers.windows.mdi.*" width="100%" height="100%"
creationComplete="initCollections();">
    <mx:Script>
        <![CDATA[
            import mx.events.MenuEvent;
            import mx.collections.XMLListCollection;
            import mx.controls.Alert;
            import mx.managers.PopUpManager;
            import mx.managers.SystemManager;
            import mx.containers.Panel;
            import ext.containers.windows.mdi.ChildWindow;
            import mx.events.FlexEvent;
            private var menuBarXML:XMLList =
            <>
                <menuitem label = "windows">
                    <menuitem label ="create window" data="createWindow"/>
                    <menuitem label ="close window" data="closeWindow"/>
                    <menuitem label ="max window" data ="maxWindow"/>
                    <menuitem label ="min window" data = "minWindow"/>
                    <menuitem label ="min all windows" data ="minAllWindows"/> 
                    <menuitem label ="Tile window" data ="tileWindow"/>
                    <menuitem label ="Cascade window" data ="cascadeWindow"/>
                </menuitem>
                <menuitem label ="modal window">
                    <menuitem label ="create modal window" data ="showModal"/>
                </menuitem>
            </>;        
            [Bindable]
            private var menuBarCollection:XMLListCollection;
            
            private function initCollections():void
            {
                menuBarCollection = new XMLListCollection(menuBarXML);
            }
            private function menuHandler(e:MenuEvent):void{
                //Alert.show(e.item.@data);
                switch(String(e.item.@data)){
                    case "createWindow":
                        new MDITest1().addToMainArea();
                        break;
                    case "showModal":
                        (new ModalWindow()).showModal();
                        break;
                    case "closeWindow":
                        ma.windowClose();
                        break;
                    case "maxWindow":
                        ma.maxActiveWindow();
                        break;
                    case "minWindow":
                        ma.minActiveWindow();
                        break;
                    case "minAllWindows":
                        ma.windowMinimizeAll();
                        break;
                    case "tileWindow":
                        ma.windowTileHorizontal();
                        break;
                    case "cascadeWindow":
                        ma.windowCascade();
                        break;
                }
            }
        ]]>
    </mx:Script>
    <mx:MenuBar x="0" y="0" labelField="@label" itemClick="menuHandler(event);"
dataProvider="{menuBarCollection}" width="100%" />
    <mdi:MainArea id="ma" width="100%" height="100%"/>
</mx:Application>

MDITest1.mxml

1 <?xml version="1.0" encoding="utf-8"?>
2 <ChildWindow xmlns="ext.containers.windows.mdi.*" xmlns:mx="http://www.adobe.com/2006/mxml"
width="400" height="300" xmlns:flexlib="flexlib.containers.*" title="child window">
3     <flexlib:Docker>
4         <flexlib:DockableToolBar width="215">
5         <mx:Button width="30" label="B" fontWeight="bold" fontFamily="Arial"/>
6         <mx:Button width="32" label="I" fontStyle="italic"/>
7         </flexlib:DockableToolBar>
8     </flexlib:Docker>
9 </ChildWindow>

ModalWindow.mxml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <Window xmlns="ext.containers.windows.*" 
 3     xmlns:mx="http://www.adobe.com/2006/mxml" width="412" height="322" 
 4     layout="absolute" xmlns:flexlib="flexlib.containers.*" 
 5     title="This is a modal window" >
 6     <mx:Script>
 7         <![CDATA[
 8             import mx.controls.Alert;
 9         ]]>
10     </mx:Script>
11     <mx:Button label="close" x="331" y="246" click="modalResult = Alert.CANCEL;"/>
12     <flexlib:SuperTabNavigator x="10" y="10" width="376" height="221" tabEnabled="true">
13         <mx:Canvas label="one" width="100%" height="100%">
14             <mx:DataGrid x="5" y="0" width="100%" height="100%">
15                 <mx:columns>
16                     <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
17                     <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
18                     <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
19                 </mx:columns>
20             </mx:DataGrid>
21         </mx:Canvas>
22         <mx:Canvas label="two" width="100%" height="100%">
23         </mx:Canvas>
24         <mx:Canvas label="three" width="100%" height="100%">
25         </mx:Canvas>
26         <mx:Canvas label="four" width="100%" height="100%">
27         </mx:Canvas>
28     </flexlib:SuperTabNavigator>
29     <mx:Button label="ok" x="288" y="246" click="modalResult = Alert.OK"/>
30 </Window>
31 

ModalWindow.mxml中第11行中 click事件中只要对modalResult写值就自动关闭窗口，模仿delphi中的模态窗口。

writed by bonashen