您的位置:首页 > Web前端 > JavaScript

FLEX- MDI窗口开发实例--转自 博客园 jssy

2009-01-15 14:01 417 查看
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中的模态窗口。

原文地址:http://www.cnblogs.com/jssy/archive/2007/09/07/886239.html
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: