Flex4中的ModuleLoader，Alert以及TitleWindow

1、ModuleLoader

在Asp.Net开发中，经常会把页面的公共部分封装成自定义控件ascx，以达到重用或动态加载的目的。在Flex4中MXML Module能达到类似的功能，可以把某些功能单独封装成在一个Module，然后利用ModuleLoader动态加载。

每个MXML Module在Build时，会生成一个同名的swf(比如A.mxml会生成A.swf)，但是不能单独运行。

然后在主界面的mxml中，利用ModuleLoader组件来加载，示例代码如下：

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

			   xmlns:s="library://ns.adobe.com/flex/spark" 

			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="400" minHeight="300" xmlns:ns1="*">

	<s:layout>

		<s:BasicLayout/>

	</s:layout>



	<fx:Script>

		<![CDATA[

			import mx.controls.Alert;

			import mx.events.ModuleEvent;		

			

			protected function btnLoad_clickHandler(event:MouseEvent):void

			{				

				mLoader.loadModule("ModuleStu.swf");				

			}



			protected function mLoader_loadingHandler(event:Event):void

			{

				trace("加载中...");

			}



			protected function mLoader_readyHandler(event:ModuleEvent):void

			{

				trace("加载完成!");				

			}



		]]>

	</fx:Script>

	<mx:ModuleLoader id="mLoader" right="10" top="10" left="10" bottom="40" loading="mLoader_loadingHandler(event)" ready="mLoader_readyHandler(event)">

	</mx:ModuleLoader>

	<s:Button label="Load" id="btnLoad" click="btnLoad_clickHandler(event)" bottom="10" horizontalCenter="0"/>

</s:Application>

不过Module加载后，并不象Asp.Net中的ascx那样好控制（也许仅仅只是我目前功力不够）

2、Alert以及TitleWindow

在应用程序中通过弹窗来显示一些消息，是常用的手段。Alert及TitleWindow能满足这种要求

弹出窗口LoginWindow.mxml (创建时 New-->MXML Component，Base on 这里选择spark.components.TitleWindow)

<?xml version="1.0" encoding="utf-8"?>

<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 

			   xmlns:s="library://ns.adobe.com/flex/spark" 

			   xmlns:mx="library://ns.adobe.com/flex/mx" width="334" height="146" title="请输入微薄内容" close="doClose()">

	<s:layout>

		<s:BasicLayout/>

	</s:layout>

	<fx:Script>

		<![CDATA[

			//引入需要的包

			import mx.managers.PopUpManager;

			import mx.controls.Alert;

			import mx.events.CloseEvent;

		

			import spark.components.TextArea;

			

			private var _txtContent:TextArea;

			

			public function get txtContent():TextArea

			{

				return _txtContent;

			}



			public function set txtContent(value:TextArea):void

			{

				_txtContent = value;

			}



			private function doClose():void

			{

				Alert.yesLabel = "是";

				Alert.noLabel = "否";

				Alert.show("确定要退出吗？", "提示", Alert.YES|Alert.NO, this, alertClickHandler);				

			}

			

			private function alertClickHandler(evt:CloseEvent):void {

				if (evt.detail == Alert.YES) {

					//关闭自身

					PopUpManager.removePopUp(this);

				} 

			}

			

			private function doSend():void

			{

				if (txtMsg.text.length>0){

					//在关闭窗口前，给父窗口中的相关文本框赋值（注：这要求在父窗口中调用时，得按约定传递txtContent的引用）

					txtContent.text = txtMsg.text;

				}

				//关闭自身

				PopUpManager.removePopUp(this);

			}		



		]]>

	</fx:Script>

	<s:TextArea x="10" y="11" width="312" height="61" id="txtMsg"/>

	<s:Button x="131" y="84" label="发 送" id="btnSend" click="doSend()"/>

	

</s:TitleWindow>

调用的主窗口TitleWindowDemo.mxml

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

			   xmlns:s="library://ns.adobe.com/flex/spark" 

			   xmlns:mx="library://ns.adobe.com/flex/mx">



	<fx:Script>

		<![CDATA[

		

		import mx.managers.PopUpManager;

		

			private function showWindow():void

			{

				var _loginWin:LoginWindow = PopUpManager.createPopUp(this,LoginWindow,true) as LoginWindow;

				PopUpManager.centerPopUp(_loginWin);

				

				//给弹出窗口的txtContent传递引用

				_loginWin.txtContent = this.txtResult;

			}

		

		]]>

	</fx:Script>

	<s:TextArea top="10" left="10" right="10" bottom="40" id="txtResult" editable="false"/>

	<s:Button label="发微薄" horizontalCenter="0" bottom="10" id="btnWrite" click="showWindow()"/>



	



</s:Application>