Flex 4のModuleLoader,AlertおよびTitleWindow

4686 ワード

1、ModuleLoader
Asp.Net開発では,ページの共通部分をカスタムコントロールascxにカプセル化し,再利用や動的ロードの目的を達成することが多い.Flex 4では、MXML Moduleは同様の機能を達成し、いくつかの機能を1つのModuleに個別にカプセル化し、ModuleLoaderを使用して動的にロードすることができます.
各MXML Moduleは、Build時に同じ名前のswf(A.mxmlなど)を生成しますが、単独で実行することはできません.
次に、メインインタフェースの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はこの要件を満たすことができる
ポップアップウィンドウmxml(作成時New-->MXML Component,Baseonここで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>


呼び出されたメインウィンドウ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>