Flex学习笔记_05 使用容器控制界面布局_02窗口布局

2. 窗口布局

Panel组件就是这样一个窗口组件，它直接继承Container。和它的子类TitleWindow都具有窗口程序的特点：有标题条，可以放置其他内容，形成一个整体。

 

2.1 Panel 组件

fontSize 表示字体大小，默认是10.一般中文12显示较清晰。

title 表示窗口的标题。

ControBar Panel的一个容器，位置不可调整总是在底部，布局模式跟HBox相同。可以放置按钮等组件。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Panel x="53" y="49" width="302" height="254" layout="horizontal" title="这里是标题" fontSize="12"> <mx:Label text="这里放置其它内容"/> <mx:ControlBar height="24" paddingBottom="0" paddingTop="0" horizontalAlign="right"> <mx:Button label="其他控制"/> </mx:ControlBar> </mx:Panel> </mx:Application>

为窗口添加关闭按钮：

<?xml version="1.0" encoding="utf-8"?> <mx:Canvas width ="300" height="300" xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <!--[CDATA[ //点击关闭按钮时触发该函数 internal function doClose():void{ visible = false; } ]]--> </mx:Script> <mx:Panel width ="100%" height="100%" layout="absolute" title="这里是标题" fontSize="12"> <mx:Label text="这里放置其它内容" x="0" y="0"/> <mx:ControlBar height="24" paddingBottom="0" paddingTop="0" horizontalAlign="right" x="0" y="230"> <mx:Button label="其他控制"/> </mx:ControlBar> </mx:Panel> <mx:Canvas width="40" height="24" top = "4" right="10"> <mx:Button label="X" width="30" x="10" click = "doClose()"/> </mx:Canvas> </mx:Canvas>

将上面的代码保存为MXML，然后使用下面的代码new一个实例出来：

<?xml version="1.0" encoding="utf-8"?> <!--这里我们使用了命名空间，将主程序目录下所有的对象归到“tree”标记下--> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:tree= "*"> <tree:Panel2 x="54" y="24"> </tree:Panel2> </mx:Application>

Application 的 applicationComplete 事件 会在主程序初始化后被触发。

接下来为窗口实现拖动功能，使用PopUpManager这个对象弹出Panel窗口，窗口将置于最上层，被称为Pop-Up弹出窗口。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete ="initApp()"> <mx:Script> <!--[CDATA[ //导入类 import mx.managers.PopUpManager; import mx.managers.PopUpManagerChildList //导入Panel对象 import mx.containers.Panel; //初始化函数 internal function initApp():void{ var win:Panel = new Panel(); win.width = 300; win.height = 240; win.title = "PopUp Panel"; win.x = 20; win.y = 20; //popup:弹出窗口 PopUpManager.addPopUp(win,this,true); } ]]--> </mx:Script> <mx:Button x="130" y="280" label="Button"/> </mx:Application>

PopUpManager.addPopUp函数可以将对象置于父级对象的顶层，对应的removePopUp可以删除弹出的对象。

addPopUp有4个参数：

window:IFlexDisplayObject, 弹出的对象

parent:DisplayObject, 分配给新弹出窗口层级的对象

modal:Boolean=false,  true的话，变成模式窗口，直到窗口关闭，其他元素不可用。

childList:String=null 将添加新窗口的对象，默认为PopUpManagerChildList. PARENT

所有组件都可以被弹出，会触发组件的内部预写方法。如Panel，弹出后，内部的isPopUp属性变为true，就可拖动了。

 

2.2 TitleWindow 组件

继承Panel ，多了一个关闭按钮。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <!--[CDATA[ //点击后出发 close 事件，执行该函数 internal function doClose():void{ txt.text = "关闭按钮被点击了"; } ]]--> </mx:Script> <mx:TitleWindow x="52" y="45" width="250" height="271" close="doClose()" layout="absolute" title="TitleWindow 例子" fontSize="12" showCloseButton="true"> <mx:TextArea id="txt" x="25" y="38" height="143" text="这是一个文本区"/> </mx:TitleWindow> </mx:Application>

showCloseButton指定是否显示关闭按钮。

close指定点击关闭按钮调用的方法。是TitleWindow的关闭事件。

creationComplete 事件，对象的初始化后触发的事件。