Flex父子窗口相互调用实现思路及源码
程序员文章站
2022-03-07 18:50:54
1、设计思路 (1)子窗口调用父窗口的方法 (2)子窗口做了修改后,返回父窗口,父窗口调用子窗口函数 2、设计源码 (1)父窗口 parentwindow.mxml: 复制...
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);
}
/*修改按钮事件函数*/
protected function updatehandler(event:mouseevent):void
{
stuage.text = age;
}
/*取消按钮事件函数*/
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)单击修改按钮
(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);
}
/*修改按钮事件函数*/
protected function updatehandler(event:mouseevent):void
{
stuage.text = age;
}
/*取消按钮事件函数*/
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)单击修改按钮
下一篇: Flex中如何判断是否在组件之外单击