Flex父子表單相互調用

標籤：style   class   blog   c   code   ext   

Flex父子表單相互調用

1、設計思路

（1）子表單調用父表單的方法

（2）子表單做了改動後，返回父表單，父表單調用子表單函數

2、設計原始碼

（1）父表單

ParentWindow.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"   width="100%" height="100%"><s:layout><s:BasicLayout/></s:layout><fx:Declarations><!-- 將非可視元素（比如服務、值對象）放在此處 --></fx:Declarations><fx:Script><![CDATA[import mx.collections.ArrayCollection;import mx.controls.Alert;import mx.managers.PopUpManager;[Bindable]//表格式資料源綁定private var grid:ArrayCollection = new ArrayCollection([{number:"2014010101",name:"張散",sex:"男",age:"23"},{number:"2014010102",name:"李思",sex:"女",age:"22"},{number:"2014010101",name:"吳王",sex:"男",age:"21"},{number:"2014010101",name:"趙柳",sex:"女",age:"20"},{number:"2014010101",name:"遊華",sex:"男",age:"22"},{number:"2014010101",name:"祝思",sex:"女",age:"18"},{number:"2014010101",name:"周禮",sex:"男",age:"19"},{number:"2014010101",name:"華捷",sex:"女",age:"20"},{number:"2014010101",name:"劉亮",sex:"男",age:"22"},{number:"2014010101",name:"沈雪",sex:"女",age:"21"}]);/*改動事件函數*/protected function updateHandler(event:MouseEvent):void{//建立子視窗對象var childWindow:ChildWindow = new ChildWindow();//將子視窗加入到PopUpManager中PopUpManager.addPopUp(childWindow,this,true);//向子視窗傳遞參數childWindow.age = "23";//子視窗調用父視窗函數childWindow.callBack = this.myFunction;//子視窗置中彈出PopUpManager.centerPopUp(childWindow);}/*重新整理函數*/public function myFunction(you:String):void {  Alert.show(you+"Hello");  } ]]></fx:Script><mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"><mx:DataGrid id="dataGrid" dataProvider="{grid}" rowCount="{grid.length + 1}" width="100%"  verticalAlign="middle" textAlign="center"><mx:columns><mx:DataGridColumn headerText="學號" dataField="number"/><mx:DataGridColumn headerText="姓名" dataField="name"/><mx:DataGridColumn headerText="性別" dataField="sex"/><mx:DataGridColumn headerText="年齡" dataField="age"/></mx:columns></mx:DataGrid><mx:HBox width="100%" horizontalAlign="center" verticalAlign="middle"><s:Button label="改動" click="updateHandler(event)"/></mx:HBox></mx:VBox></s:Application>

（2）子表單

ChildWindow.mxml：

<?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="300" height="220"   close="closeHandler(event)" title="改動表單"><s:layout><s:BasicLayout/></s:layout><fx:Script><![CDATA[import mx.events.CloseEvent;import mx.managers.PopUpManager;//回呼函數public var callBack:Function;public var age:String = "";/*關閉事件函數*/protected function closeHandler(event:CloseEvent):void{PopUpManager.removePopUp(this);}/*改動button事件函數*/protected function updateHandler(event:MouseEvent):void{stuAge.text = age;}            /*取消button事件函數*/protected function cancelHandler(event:MouseEvent):void{number.text = "";stuName.text = "";PopUpManager.removePopUp(this);if(isPopUp){callBack.call(parent);}}]]></fx:Script><fx:Declarations><!-- 將非可視元素（比如服務、值對象）放在此處 --></fx:Declarations><mx:VBox width="100%" height="100%"><mx:Form><mx:FormItem label="學號："><s:TextInput id="number" width="200" maxChars="10"/></mx:FormItem><mx:FormItem label="姓名："><s:TextInput id="stuName" width="200" maxChars="10"/></mx:FormItem><mx:FormItem label="性別："><mx:HBox width="100%"><mx:RadioButtonGroup id="sex"/><s:RadioButton groupName="sex" label="男" selected="true"/><s:RadioButton groupName="sex" label="女"/></mx:HBox></mx:FormItem><mx:FormItem label="年齡："><s:TextInput id="stuAge" width="200" maxChars="2"/></mx:FormItem><mx:FormItem><mx:HBox width="100%"><s:Button label="改動" click="updateHandler(event)"/><s:Label width="42"/><s:Button label="取消" click="cancelHandler(event)"/></mx:HBox></mx:FormItem></mx:Form></mx:VBox></s:TitleWindow>

3、設計結果

（1）初始化時

（2）單擊改動button