连接:
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 >
< 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 >
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中的模态窗口。
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