Flex4中的ModuleLoader,Alert以及TitleWindow

简介: 1、ModuleLoader 在Asp.Net开发中,经常会把页面的公共部分封装成自定义控件ascx,以达到重用或动态加载的目的。在Flex4中MXML Module能达到类似的功能,可以把某些功能单独封装成在一个Module,然后利用ModuleLoader动态加载。
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>

目录
相关文章
|
3月前
|
JavaScript
如何在 Angular 中使用 ng-container 元素
如何在 Angular 中使用 ng-container 元素
42 0
|
JavaScript
vue踩坑-This relative module was not found
vue踩坑-This relative module was not found
191 0
|
6月前
Angular启动/node_modules/@types/node/index.d.ts (20,1): Invalid ‘reference‘ directive syntax.
Angular启动/node_modules/@types/node/index.d.ts (20,1): Invalid ‘reference‘ directive syntax.
73 2
|
11月前
(node)Warning: Accessing non-existent property ‘xxx‘ of module exports inside circular depen
(node)Warning: Accessing non-existent property ‘xxx‘ of module exports inside circular depen
|
11月前
|
JavaScript
Vue项目报错:This relative module was not found
Vue项目报错:This relative module was not found
打包报错Error: ‘default‘ is not exported by node_modules/qs/lib/index.js
打包报错Error: ‘default‘ is not exported by node_modules/qs/lib/index.js
267 0
Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.
Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.
741 0
angular29-ng-hide,ng-show
angular29-ng-hide,ng-show
90 0
angular29-ng-hide,ng-show
angular26-ng-classt隔行变色
angular26-ng-classt隔行变色
92 0
angular26-ng-classt隔行变色