技术开发 频道

设计松耦合的Flex组件

    Flex 2文档中的声明:在<mx:Script>标签中声明的公有变量或set函数会是这个组件的一个属性。<mx:Script>标签中的公有函数会是组件的一个方法。

    我们可以在主程序文件中访问组件的方法或者传值给组件的属性:

<?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;>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myData:ArrayCollection = new ArrayCollection (
[{A:2000},{A:3000},{A:4000},{A:4000},{A:3000},{A:2000},{A:6000}]);
]]>
</mx:Script>
<cust:custDataGrid id=&#34;custDG&#34; x=&#34;258&#34; y=&#34;89&#34; lista=&#34;{myData}&#34;/>

<mx:Label text=&#34;{custDG.justWrite()}&#34; x=&#34;300&#34; y=&#34;44&#34;/>
</mx:Application>

    在主程序中我们创建了一个叫做”myData”的ArrayCollection变量,我们可以通过下面的方法在MXML组件标签声明中将它传递给组件:
 

<cust:custDataGrid id=&#34;custDG&#34; x=&#34;258&#34; y=&#34;89&#34; lista=&#34;{myData}&#34;/>

    我们用来展示自定义组件中定义的属性的Flex数据绑定机制可以利用数据绑定特性。”lista”变量是custDataGrid组定义组件的一个公有变量,所以我们将它写在custDataGrid标签声明中。

    类似地,也可以创建一个数据绑定调用自定义组件中的一个方法:
 

<mx:Label text=&#34;{custDG.justWrite()}&#34; x=&#34;300&#34; y=&#34;44&#34;/>

    Label控件的text属性将接收自定义组件custDataGrid的公有方法返回的文本:
 

public function justWrite():String
{
return &#34;This is a method of the component&#34;;
}

    设计一个松耦合组件的最后一步是处理包含返回数据的事件的分派。每个自定义MXML组件都可分派事件,事件可以通过三个简单的步骤自定义:

•使用[Event]元数据标签
•创建一个事件对象
•分派事件并创建一个函数来处理该事件

    [Event]元数据标签定义了组件可以分派的事件。可以在一个ActionScript类中包定义之后类定义之前声明[Event]元数据标签:

Package com.casario
{
[Event(name=&#34; changeBlog&#34;, type=&#34; flash.events.Event &#34;)]
public class custComp
{
}
}

    或者在MXML文件中的<mx:Metadata>标签中:

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

    一旦[Event]元数据标签创建,组件就可以使用dispatchEvent()方法来分派该事件。dispatchEvent()方法将事件对象作为参数,如下面的代码中所示:
 

dispatchEvent(new Event(&#34;changeBlog&#34;));

    我们来修改一下custDataGrid.mxml文件,使其可以在用户点击DataGrid中一项的时候分派一个事件。主程序将处理自定义组件触发的事件并在一个TextArea控件中添加一些文字。

    使用Flex Builder 2打开custDataGrid.mxml 并添加[Event]元数据标签:

 

<?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;flash.events.Event&#34;)]
</mx:Metadata>

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

[Bindable]
public var lista:ArrayCollection;

public function justWrite():String
{
return &#34;This is a method of the component&#34;;
}

private function changeHandler():void
{
dispatchEvent(new Event(&#34;changeBlog&#34;));
}
]]>
</mx:Script>

<mx:DataGrid id=&#34;myDG&#34; dataProvider=&#34;{lista}&#34; change=&#34;changeHandler()&#34; >

</mx:DataGrid>

</mx:VBox>

    [Event]元数据标签定义了一个普通Event类型的&#34;changeBlog&#34;事件并且将这个事件设为公有的,这样MXML编译器就会发现它。
 

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

    当DataGrid的change事件被触发时这个事件就会被分派:
 

<mx:DataGrid id=&#34;myDG&#34; dataProvider=&#34;{lista}&#34; change=&#34;changeHandler()&#34; >

    正如你看到的那样,changeHandler&#34;函数简单地执行了dispatchEvent()方法:
 

private function changeHandler():void
{
dispatchEvent(new Event(&#34;changeBlog&#34;));
}
 

    主程序通过使用<mx:Script>块中定义的事件处理函数来处理自定义MXML组件所触发的事件:
 

<?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;>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var myData:ArrayCollection = new ArrayCollection (
[{A:2000},{A:3000},{A:4000},{A:4000},{A:3000},{A:2000},{A:6000}]);
private function changeBlogHandler (event:Event):void
{
myLabel2.text += &#34;Event fired by Datagrid:&#34;+ event.type + &#34;\n&#34; ;
}

]]>
</mx:Script>
<cust:custDataGrid id=&#34;custDG&#34; x=&#34;258&#34; y=&#34;89&#34; lista=&#34;{myData}&#34; changeBlog=&#34;changeBlogHandler(event)&#34;/>

<mx:Label text=&#34;{custDG.justWrite()}&#34; id=&#34;myLabel&#34; x=&#34;283&#34; y=&#34;63&#34;/>
<mx:TextArea id=&#34;myLabel2&#34; x=&#34;205&#34; y=&#34;239&#34; height=&#34;102&#34; width=&#34;273&#34;/>
</mx:Application>

    custDataGrid组件触发&#34;changeBlog&#34;事件并将它与一个事件处理函数相关联:


<cust:custDataGrid id=&#34;custDG&#34; x=&#34;258&#34; y=&#34;89&#34; lista=&#34;{myData}&#34; changeBlog=&#34;changeBlogHandler(event)&#34;/>

    changeBlogHandler函数将事件对象作为一个参数并在TextAream控件中打印了一个简单的文本:

private function changeBlogHandler (event:Event):void
{
myLabel2.text += &#34;Event fired by Datagrid:&#34;+ event.type + &#34;\n&#34; ;
}
 

    注意使用事件对象的 event.type 会返回事件触发者的类型 (这个例子中会返回changeblog )。

    注意:Flex Builder 2会自动找到在组件中自定义事件的引用并使用显示代码提示显示它:

[fig. flexbuilder_customEvent.png] Flex Builder 2 identifies the event name

    尽管我们可以看到为松耦合组件创建一个自定义事件是多么简单,但是如果我们想要发送数据给这个自定义事件,这种方式也会有一些限制。实际上flash.events.Event类不允许开发者向其添加属性。

    实际上我们分派事件只是为了通知在自定义MXML组件中有一些事情发生了。但是如果我们需要发送复杂的数据给一个自定义事件的时候要怎么办呢?

    不用担心。我们可以通过在ActionScript中创建自定义事件类来实现!我将会通过一个例子向你展示如何开发自定义事件类。

0
相关文章