Flex有很多自定义的控件,实现一些很漂亮的很玄的界面效果。
添加Flexlib.swc控件,其中有一个效果是实现动态加载多窗体,并且可以重叠摆放和均匀摆放,界面类似于Mac窗体。在我们做地图开发的时候可以动态加载多个地图,然后实现多地图的联动(那就是后话了,以后再说)。现在先记录多窗体的实现Demo。
一。工程文件——属性——Flex Build Path——Library Path 添加swc
二。MDI.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:flexlib="http://code.google.com/p/flexlib/"
creationComplete="onCreationComplete()" xmlns:ns="sample_content.*" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.events.EffectEvent;
import flexlib.mdi.events.MDIEffectEvent;
import flexlib.mdi.events.MDIWindowEvent;
import flexlib.mdi.effects.MDIEffectsDescriptorBase;
import flexlib.mdi.effects.effectsLib.MDILinearEffects;//窗体效果
import flexlib.mdi.effects.effectsLib.MDIVistaEffects;//窗体效果
import flexlib.mdi.events.MDIManagerEvent;
import mx.controls.Alert;
import mx.controls.TextArea;
import mx.events.CloseEvent;
import mx.events.ListEvent;
private var eventMonitor:TextArea;
private var queuedEvent:MDIManagerEvent;
private var effectsList:Array;//把下拉效果菜单和样式菜单里面的选项定位一个数组 Array
private var stylesList:Array;
private var cssURL:String;
private function onCreationComplete():void
{
// create textfield
eventMonitor = new TextArea();
eventMonitor.percentWidth = 100;
eventMonitor.height = 150;
effectsList = new Array();//效果菜单数组
effectsList.push({data: flexlib.mdi.effects.MDIEffectsDescriptorBase, label: "No effects"});//效果菜单数组依次赋值
effectsList.push({data: flexlib.mdi.effects.effectsLib.MDIVistaEffects, label: "Vista"});
effectsList.push({data: flexlib.mdi.effects.effectsLib.MDILinearEffects, label: "Linear"});
effectsListCb.dataProvider = effectsList;
// these need refining, removing from explorer until then
stylesList = new Array();//样式菜单数组
stylesList.push({label: "Default"});//样式菜单数组依次赋值
stylesList.push({label: "Windows XP"});
stylesList.push({label: "Mac OS9"});
/*
stylesList.push({label: "Noir"});
stylesList.push({label: "Style 1"});
stylesList.push({label: "Style 2"});
stylesList.push({label: "Style 3"});
/**/
stylesListCb.dataProvider = stylesList;
// listen for window close
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_CLOSE, confirmWindowClose);
//listen for all window events
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_ADD, windowEventHandler);
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_MINIMIZE, windowEventHandler);
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_RESTORE, windowEventHandler);
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_MAXIMIZE, windowEventHandler);
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_CLOSE, windowEventHandler);
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_FOCUS_START, windowEventHandler);
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_FOCUS_END, windowEventHandler);
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_DRAG_START, windowEventHandler);
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_DRAG, windowEventHandler);
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_DRAG_END, windowEventHandler);
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_RESIZE_START, windowEventHandler);
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_RESIZE, windowEventHandler);
mdiCanvas.windowManager.addEventListener(MDIManagerEvent.WINDOW_RESIZE_END, windowEventHandler);
mdiCanvas.windowManager.addEventListener(EffectEvent.EFFECT_START, effectHandler);
mdiCanvas.windowManager.addEventListener(EffectEvent.EFFECT_END, effectHandler);
}
private function effectHandler(event:MDIEffectEvent):void
{
var names:String = "";
for each(var win:MDIWindow in event.windows)
{
names += (names.length == 0) ? win.title : ", " + win.title;
}
eventMonitor.text += names + ": " + event.mdiEventType + " " + event.type + "/n";
eventMonitor.verticalScrollPosition = eventMonitor.maxVerticalScrollPosition;
eventMonitor.validateNow();
}
// default event handler
private function windowEventHandler(event:Event):void
{
if(event is MDIManagerEvent)
{
var mgrEvent:MDIManagerEvent = event as MDIManagerEvent;
if(eventMonitor.parent != null)
{
eventMonitor.text += mgrEvent.window.title + ": " + event.type + "/n";
eventMonitor.verticalScrollPosition = eventMonitor.maxVerticalScrollPosition;
eventMonitor.validateNow();
}
}
}
// the flex framework dispatches all kinds of events
// in order to avoid catching one of those and throwing a coercion error
// have your listener accept Event and check the type inside the function
// this is good practice for all Flex development, not specific to flexlib.mdi
private function confirmWindowClose(event:Event):void//确认是否关闭窗体
{
if(event is MDIManagerEvent && confirmCloseCb.selected)
{
// store a copy of the event in case we want to resume later (user confirms their intention)
queuedEvent = event.clone() as MDIManagerEvent;
// this is the line that prevents the default behavior from executing as usual
// because the default handler checks event.isDefaultPrevented()
event.preventDefault();
Alert.show("Seriously? Close it?", null, 3, null, handleAlertResponse);
}
}
// called when the Alert window is closed
// if the user said yes, we execute the default behavior of playing an effect
// and then removing the window by sending the stored event to
// the appropriately named executeDefaultBehavior() method
private function handleAlertResponse(event:CloseEvent):void
{
if(event.detail == mx.controls.Alert.YES)
{
mdiCanvas.windowManager.executeDefaultBehavior(queuedEvent);
}
}
private function addWindow():void//点击按钮,添加窗体
{
var win:MDIWindow = new MDIWindow();
win.width = 350;
win.title = "Window " + String(mdiCanvas.windowManager.windowList.length + 1);
mdiCanvas.windowManager.add(win);
}
private function toggleEventMonitor():void
{
if(eventMonitorCb.selected)
{
vbox.addChildAt(eventMonitor, 1);
}
else
{
vbox.removeChild(eventMonitor);
}
}
private function changeEffects():void//改变效果
{
mdiCanvas.effectsLib = effectsListCb.selectedItem.data as Class;
}
// currently not used
private function changeStyle(event:ListEvent):void//改变样式
{
switch(ComboBox(event.target).selectedLabel)
{
case 'Default' :
StyleManager.unloadStyleDeclarations(cssURL, true);
return;
break;
case 'Windows XP' :
cssURL = "WindowsXP_default.swf";
break;
case 'Mac OS9' :
cssURL = "MacOS9.swf";
break;
default:
break;
}
StyleManager.loadStyleDeclarations(cssURL);
}
]]>
</mx:Script>
<mx:VBox id="vbox" width="100%" height="100%">
<mx:ApplicationControlBar dock="true" width="100%" height="50" verticalAlign="middle">
<mx:Button label="Add Window" click="addWindow()" />
<mx:VRule height="35" />
<mx:Button label="Cascade" click="mdiCanvas.windowManager.cascade()" />
<mx:Button label="Tile" click="mdiCanvas.windowManager.tile(false, Number(10))" />
<mx:Button label="Tile + Fill Space" click="mdiCanvas.windowManager.tile(true, Number(10))" />
<mx:VRule height="35" />
<mx:CheckBox id="confirmCloseCb" label="Confirm window close" />
<mx:VRule height="35" />
</mx:ApplicationControlBar>
<flexlib:MDICanvas id="mdiCanvas" horizontalScrollPolicy="off" verticalScrollPolicy="off"
width="100%" height="100%" backgroundColor="#FFFFFF" backgroundAlpha="0"
>
<flexlib:MDIWindow id="win1"
title="Window 1 "
x="30" y="30" width="400" height="200" />
<flexlib:MDIWindow id="win2"
title="Window 2"
x="450" y="30" width="250" height="300" />
</flexlib:MDICanvas>
</mx:VBox>
</mx:Application>