技术开发 频道

设计松耦合的Flex组件

    在ActionScript中创建自定义事件类来发送复杂数据

    使用Flex可以创建一个使用自定义类型的事件对象的自定义事件。只需要创建一个扩展自Event类的子类然后向其中添加属性。不要忘了扩展自既有Flex类的自定义组件会继承基类的所有事件。

    要创建一个自定义类我们需要创建一个扩展自flash.events.Event的ActionScript类,这个类将作为所有事件对象的基类。接下来,为了调用父类的构造方法并将事件类型传给它,我们要调用super()方法。我们还需要覆写 "clone()" 方法,通过设定type属性和其它一些属性来返回事件对象的一个拷贝。

    为了从自定义组件中分派一个新的事件,我们创建了这个自定义类的一个实例并传送属性值给它。

    现在我会用一个例子来说明这种方式。我们创建了一个简单的Blog阅读器,它允许用户使用下拉列表框从Blog列表中选择一个。这个程序由2个MXML组件组成,这两个组件是一个用来显示日志内容的DataGrid以及一个含有Blog列表下拉列表框。

    我们将从一个自定义事件类(它被保存为"evtClass.as",并放在了”com”文件夹里)开始,它接受一个简单字符串属性:

package com
{
import flash.events.Event;
public class evtClass extends Event
{

public var evProp:String;

public function evtClass(evParam:String,type:String)
{
super(type);
this.evProp = evParam;
}
override public function clone():Event
{
return new evtClass(evProp,type);
}
}
}

    象我们之前说的那样,这个类扩展自flash.events.Event类,调用了super()方法并且覆写了clone()方法。

    现在,在Flex Builder 2中创建一个组件(File > New > MXML Component)并保存为custBlogList.mxml。这个组件包含有一个下拉列表框(ComboBox)并且它的dataProvider是一个ArrayCollection对象。

<?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?>
<mx:VBox xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34; >
<mx:Metadata>
[Event(name=&#34;changeBlog&#34;, type=&#34;com.evtClass&#34;)]
</mx:Metadata>

<mx:Script>
<![CDATA[

import com.evtClass;
private function init():void
{
myArray.addItemAt({label:&#34;Alistair McLeod&#34;, data:&#34;http://weblogs.macromedia.com/amcleod/index.xml&#34;}, 0);
}
private function changeHandler():void
{
var eventObj:evtClass = new evtClass(myCombo.value as String,&#34;changeBlog&#34;);
dispatchEvent(eventObj);
}

]]>
</mx:Script>

<mx:ComboBox id=&#34;myCombo&#34; change=&#34;changeHandler()&#34; creationComplete=&#34;init();myCombo.sel&#101;ctedIndex=0&#34; >
<mx:ArrayCollection id=&#34;myArray&#34;>
<mx:Object label=&#34;Mike Chambers&#34; data=&#34;http://weblogs.macromedia.com/mesh/index.xml&#34;/>
<mx:Object label=&#34;Matt Chotin&#34; data=&#34;http://weblogs.macromedia.com/mchotin/index.xml&#34;/>
</mx:ArrayCollection>
</mx:ComboBox>

</mx:VBox>

    我们使用了[Event]元数据标签定义了这个MXML组件可以分派的事件。赋给type属性的值就是我们的自定义事件类:

<mx:Metadata>
[Event(name=&#34;changeBlog&#34;, type=&#34;com.evtClass&#34;)]
</mx:Metadata>

    一旦用户在下拉列表框中选择了一个Blog,change事件就会被触发并且changeHandler()会被调用:


<mx:ComboBox id=&#34;myCombo&#34; change=&#34;changeHandler()&#34; creationComplete=&#34;init();myCombo.sel&#101;ctedIndex=0&#34; >

    这个事件处理器只有一个作用,就是创建一个自定义事件类的实例并将用户所选择的值传送给这个实例(将myCombo中的值作为一个字符串):
 

private function changeHandler():void
{
var eventObj:evtClass = new evtClass(myCombo.value as String,&#34;changeBlog&#34;);
dispatchEvent(eventObj);
}

    第二个MXML组件包含了DataGrid控件并且从主程序中接收dataProvider。现在你需要将这个文件保存为custBlogData.mxml:

<?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?>
<mx:VBox xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34;>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import flash.net.*;
[Bindable]
public var lista:ArrayCollection;
]]>
</mx:Script>

<mx:DataGrid id=&#34;myDG&#34; horizontalCenter=&#34;14&#34; verticalCenter=&#34;18.5&#34; dataProvider=&#34;{lista}&#34; width=&#34;100%&#34;
change=&#34;navigateToURL(new URLRequest(myDG.sel&#101;ctedItem.link),&#39;_blank&#39;);&#34; >
<mx:columns>
<mx:DataGridColumn headerText=&#34;Posts&#34; dataField=&#34;title&#34; />
<mx:DataGridColumn headerText=&#34;Date&#34; dataField=&#34;pubDate&#34; width=&#34;100&#34; />
</mx:columns>
</mx:DataGrid>

</mx:VBox>

这个DataGrid定义了两列。第一列从用户选择的RSS feed(在custBlogList中选择的)中获取数据。第二列从类型为ArrayCollection 的变量&#34;lista&#34; 获取数据。

接下来,就是主程序文件了(BlogReader.mxml),它会调用上面的两个组件,调用一个HTTPService来获取rss数据并且定义了一个事件处理函数:

<?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?>
<mx:Application xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34; layout=&#34;absolute&#34; xmlns:cust=&#34;*&#34;
creationComplete=&#34;hs.send()&#34; >
<mx:HTTPService
id=&#34;hs&#34;
url=&#34;{sel&#101;ctedMenu}&#34;
useProxy=&#34;false&#34;/>
<mx:Script>
<![CDATA[

import com.evtClass;

[Bindable]
private var sel&#101;ctedMenu:String= &#34;http://weblogs.macromedia.com/amcleod/index.xml&#34;;

private function eventFired(event:evtClass):void
{

sel&#101;ctedMenu = event.evProp;
if (sel&#101;ctedMenu == &#34;null&#34;)
{
mx.controls.Alert.show(&#34;Please Choose a valid Blog&#34;);
return;
};
hs.send();
}
]]>
</mx:Script>

<mx:Panel width=&#34;70%&#34; height=&#34;70%&#34; layout=&#34;absolute&#34; title=&#34;Comtaste&#39;s Blog Reader&#34; horizontalCenter=&#34;0&#34;
verticalCenter=&#34;-14.5&#34;>

<mx:Label text=&#34;{hs.lastResult.rss.channel.title}&#39;s Blog&#34; id=&#34;myLbl&#34; x=&#34;48.5&#34; y=&#34;43&#34; fontWeight=&#34;bold&#34;/>
<cust:custBlogList x=&#34;161&#34; y=&#34;10&#34; changeBlog=&#34;eventFired(event)&#34; />
<mx:Label x=&#34;48.5&#34; y=&#34;10&#34; text=&#34;Sel&#101;ct a Blog&#34; height=&#34;25&#34;/>
<cust:custBlogData width=&#34;80%&#34; x=&#34;48.5&#34; y=&#34;69&#34; lista=&#34;{hs.lastResult.rss.channel.item}&#34; />
<mx:ControlBar>
<mx:Label text=&#34;Developed by Marco Casario&#34; />
<mx:LinkButton label=&#34;http://casario.blogs.com&#34; click=&#34;navigateToURL(new
URLRequest(&#39;http://casario.blogs.com&#39;),&#39;_blank&#39;);&#34;/>
</mx:ControlBar>
</mx:Panel>

</mx:Application>

HTTPService标签对它的url属性进行了数据绑定。当custBlogList中的changeBlog事件触发时{sel&#101;ctedMenu}的值就会被确定:

<mx:HTTPService
id=&#34;hs&#34;
url=&#34;{sel&#101;ctedMenu}&#34;
useProxy=&#34;false&#34;/>
<cust:custBlogList x=&#34;161&#34; y=&#34;10&#34; changeBlog=&#34;eventFired(event)&#34; />

eventFired()是一个事件处理器,它使用事件对象来获取在actionscript(evtClass.as)类中定义的evProp,它包含myCombo的值:


private function eventFired(event:evtClass):void
{
sel&#101;ctedMenu = event.evProp;
if (sel&#101;ctedMenu == &#34;null&#34;)
{
mx.controls.Alert.show(&#34;Please Choose a valid Blog&#34;);
return;
};
hs.send();
}
 

    松耦合的组件是Flex 2程序中一个强大的工具,因为这使得开发者可以提高代码的重用性和可维护性。使用这种方式可以定义在多个程序中都能使用的响应不同用户交互的逻辑模块。

    模块也可以被自定义成包含有能够接收其它模块传值的属性以及可以返回信息的事件。

0
相关文章