最近较闲,学习了一下Flex 的回调函数。
A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.(js的解释)
回调就是一个函数的调用过程。大多用于父页面调用子页面。
回调函数实现的过程:
1. 定义一个回调函数;
2. 提供函数实现的一方在初始化的时候,将回调函数的函数指针注册给调用者;
3. 当特定的事件或条件发生的时候,调用者使用函数指针调用回调函数对事件进行处理。
自己写了一个示例:
父页面(supApplication.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" xmlns:callBackTest="callBackTest.*"
creationComplete="application1_creationCompleteHandler(event)" >
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
/**
* 2.组件构建完成时,将回调函数的函数指针即子页面的call1()函数,注册给调用者
*/
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
//默认进来没有触发子页面的change事件,则回调函数未被调用
subcallback.call1 = callBack;
}
//3.定义一个回调函数。
//当子页面的change事件被触发时,该回调函数被调用,弹出当前选中项的id、label
private function callBack(str1:String,str2:String):void{
Alert.show("当前选中项的id:" + str1 + "以及label:" + str2);
}
]]>
</fx:Script>
<!--这是父页面,在父页面中引用子页面-->
<callBackTest:subCallBack id="subcallback"/>
</s:Application>
子页面(subCallBack.mxml)
<?xml version="1.0" encoding="utf-8"?>
<s:Group 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="400" height="300">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
//1.定义一个函数指针
public var call1:Function;
/**
* 当触发TabNavigator的change事件时,
* 将当前NavigatorContent的id和Label值的传递到函数指针中
*/
protected function tabnavigator1_changeHandler(event:IndexChangedEvent):void
{
//获得当前NavigatorContent的id和Label值
var labId:String = (event.relatedObject as NavigatorContent).id;
var labVanel:String = (event.relatedObject as NavigatorContent).label;
call1(labId,labVanel);
}
]]>
</fx:Script>
<!--这是子页面-->
<mx:TabNavigator width="226" height="83" change="tabnavigator1_changeHandler(event)">
<s:NavigatorContent id="real" label="实时">
<s:Label id="realLab" text="实时Lab"/>
</s:NavigatorContent>
<s:NavigatorContent id="hour" label="时段">
<s:Label id="hourLab" text="时段Lab"/>
</s:NavigatorContent>
<s:NavigatorContent id="day" label="日">
<s:Label id="dayLab" text="日Lab"/>
</s:NavigatorContent>
</mx:TabNavigator>
</s:Group>
可以自己debug一下,理解的可能更快,透彻一点。