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

本文的相关文章：

Flex学习笔记_05 使用容器控制界面布局_01管理程序的布局

Flex学习笔记_05 使用容器控制界面布局_03动态布局、导航容器、表单布局

 

 

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 事件，对象的初始化后触发的事件。

 

评论

1 楼 benswallow 2009-04-08  

很好，收藏老