Flex中TitleWindow传值思路及实现

副标题#e#

1、设计思路

（1）新建一个DataGrid，在其中最后一列加入三个按钮：新增、修改和删除；

（2）点击新增按钮，可以将表格新增一行；

（3）单击“修改”按钮，可以修改表格中该行的一些属性；

（4）单击“删除”按钮，会将表格中该行删除。

2、实现步骤

（1）新建一个应用程序，DataGrid.mxml

DataGrid.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” minWidth=”955″ minHeight=”600″>
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!– 将非可视元素（例如服务、值对象）放在此处 –>
</fx:Declarations>

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
//表格数据源绑定
private var grid:ArrayCollection = new ArrayCollection([
{number:”2014010101″,name:”张三”,sex:”男”,age:”19″},
{number:”2014010102″,name:”李思”,sex:”女”,age:”20″},
{number:”2014010103″,name:”蔡华”,sex:”男”,age:”21″},
{number:”2014010104″,name:”牛耳”,sex:”女”,age:”22″},
{number:”2014010105″,name:”兆司”,sex:”男”,age:”18″},
{number:”2014010106″,name:”胡柳”,sex:”女”,age:”19″},
{number:”2014010107″,name:”刘斯”,sex:”男”,age:”20″},
{number:”2014010108″,name:”孙阳”,sex:”女”,age:”22″},
{number:”2014010109″,name:”郑武”,sex:”男”,age:”21″},
{number:”2014010110″,name:”王雪”,sex:”女”,age:”20″},
{number:”2014010111″,name:”胡柳”,sex:”女”,age:”19″},
{number:”2014010112″,name:”刘斯”,sex:”男”,age:”20″},
{number:”2014010113″,name:”孙阳”,sex:”女”,age:”22″},
{number:”2014010114″,name:”郑武”,sex:”男”,age:”21″},
{number:”2014010115″,name:”王雪”,sex:”女”,age:”20″}
]);
]]>
</fx:Script>

<mx:VBox paddingBottom=”100″ paddingLeft=”100″ paddingRight=”100″ paddingTop=”100″>
<mx:DataGrid dataProvider=”{grid}” rowCount=”{grid.length+1}” 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:DataGridColumn headerText=”操作”>
<mx:itemRenderer>
<fx:Component>
<mx:HBox paddingLeft=”40″>

<fx:Script>
<![CDATA[
import mx.managers.PopUpManager;

/*添加按钮事件函数*/
protected function addHandler(event:MouseEvent):void
{
var childWindow:ChildWindow = ChildWindow(PopUpManager.createPopUp(this,ChildWindow,true));
var point:Point = new Point(100,100);
childWindow.x = point.x + 400;
childWindow.y = point.y + 50;
}

/*修改按钮事件函数*/
protected function updateHandler(event:MouseEvent):void
{
var updateWindow:UpdateWindow = UpdateWindow(PopUpManager.createPopUp(this,UpdateWindow,true));
var point:Point = new Point(100,100);
updateWindow.x = point.x + 400;
updateWindow.y = point.y + 50;
updateWindow.stuNo = event.currentTarget.selectedItem.content;
}

]]>
</fx:Script>

<mx:LinkButton label=”新增”/>
<s:Label/>
<mx:LinkButton label=”修改”/>
<s:Label/>
<mx:LinkButton label=”删除”/>
</mx:HBox>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>

</mx:VBox>
</s:Application>

（2）新建一个新增窗口组件，ChildWindow.mxml

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”
close=”closeHandler(event)” title=”新增窗口”>
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.managers.PopUpManager;

/*关闭按钮函数*/
protected function closeHandler(event:CloseEvent):void
{
PopUpManager.removePopUp(this);
}

/*取消按钮函数*/
protected function cancelHandler(event:MouseEvent):void
{
PopUpManager.removePopUp(this);
}

]]>
</fx:Script>
<fx:Declarations>
<!– 将非可视元素（例如服务、值对象）放在此处 –>
</fx:Declarations>

<mx:VBox horizontalAlign=”center”>
<mx:Form borderStyle=”solid” borderColor=”#CCCCCC”>
<mx:FormHeading label=”新增界面” fontSize=”14″/>
<mx:FormItem label=”学号：”>
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label=”姓名：”>
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label=”性别：”>
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label=”年龄：”>
<s:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:HBox>
<s:Label/>
<s:Button label=”新增”/>
<s:Label/>
<s:Button label=”取消”/>
</mx:HBox>
</mx:VBox>
</s:TitleWindow>

（3）新建一个修改界面组件，UpdateWindow.mxml

UpdateWindow.mxml：

复制代码 代码如下:

#p#副标题#e##p#分页标题#e#

<?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”
close=”closeHandler(event)” title=”修改窗口”>
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.managers.PopUpManager;

/*关闭按钮函数*/
protected function closeHandler(event:CloseEvent):void
{
PopUpManager.removePopUp(this);
}

/*取消按钮函数*/
protected function cancelHandler(event:MouseEvent):void
{
PopUpManager.removePopUp(this);
}

]]>
</fx:Script>
<fx:Declarations>
<!– 将非可视元素（例如服务、值对象）放在此处 –>
</fx:Declarations>

<mx:VBox horizontalAlign=”center”>
<mx:Form borderStyle=”solid” borderColor=”#CCCCCC”>
<mx:FormHeading label=”修改界面” fontSize=”14″/>
<mx:FormItem label=”学号：”>
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label=”姓名：”>
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label=”性别：”>
<s:TextInput/>
</mx:FormItem>
<mx:FormItem label=”年龄：”>
<s:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:HBox>
<s:Label/>
<s:Button label=”修改”/>
<s:Label/>
<s:Button label=”取消”/>
</mx:HBox>
</mx:VBox>
</s:TitleWindow>

3、设计结果

（1）初始化时