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