设计松耦合的Flex组件

10月 14th, 2006 — Dreamer

又看到一篇不错的Flex初级教程，翻译了过来。翻译已经经过作者Marco Casario的同意，原文版权归原作者所有，译文版权归Dreamer所有。此文未经同意，谢绝转载。

英文原文：http://mxdj.sys-con.com/read/276919_1.htm
作者：Marco Casario

译者：Dreamer

设计松耦合的Flex组件

Flex应用程序可能有复杂的结构但它们通常都是由多个MXML，Actionscript 以及CSS文件组成。

在单个文件里编写整个程序不是一个最佳实践。那样会使代码难以维护和重用，而且程序没有被架构成逻辑上的各个部分。

Flex允许开发者将一个工程分成外部的模块，创建分离的MXML文件并且单独维护它们。将Flex程序分离成各个逻辑模块有很多好处。它允许开发小组独立地开发和调试单个模块，模块中的错误和功能可以被独立出来。这使得代码变得容易维护，也提高了代码在多个应用程序间的重用性。

每个MXML文件是一个MXML组件，但是只有主MXML程序可以加载外部组件。事实上一个应用程序中只能有一个 Application 标签，其它所有都是MXML组件。

为了设计一个MXML组件，需要创建一个MXML文件。这个文件的根标签不是Application而是一个组件标签（比如VBox，Panel，Canvas，Button，DataGrid等等），而且根标签中需要声明命名空间http://www.adobe.com/2006/mxml 。

下面的代码展示了一个简单的叫做custDataGrid.mxml 的MXML组件，它由一个用来存储数据的DataGrid组成。

<?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?>
<mx:VBox xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34;>

<mx:DataGrid id=&#34;myDG&#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>

根标签是一个简单的VBox组件并且其中声明了xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34;。一旦创建了外部模块，主程序就可以像下面一样调用这个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;comp.*&#34; >
<mx:Panel title=&#34;Comtaste&#39;s Blog Reader&#34;>

<cust: custDataGrid width=&#34;80%&#34; />

</mx:Panel>

</mx:Application>

主程序添加了一个新的XML命名空间并使用一个包名来表示在一个文件夹中定义的所有组件：

<mx:Application xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34; layout=&#34;absolute&#34; xmlns:cust=&#34;comp.*&#34; >

“cust”命名空间指向”comp”文件夹中的MXML组件，实际上如果是最佳实践所有的组件都应当被保存在一个子目录下。

使用组件和使用其它MXML标签一样，唯一不同的是不再使用”mx”前缀而是使用自定义前缀：

<cust: custDataGrid width=&#34;80%&#34; />

注意MXML标签的名字对应着这个组件的文件名。

紧耦合组件与松耦合组件

为了使组件在程序中可以配置和重用，你可能会想要创建可以接受属性，创建方法以及分派事件的MXML组件。为了做到这样，组件必须不依赖于特定的程序（紧耦合），包括它们的变量名或标签实例的名字。紧耦合情况下如果程序或者组件的代码改变了，相应的代码就不能再工作，我们必须修改紧耦合的组件来相应这些变化。

一种更清晰也更好的方式是开发松耦合的组件，它可以分派传播返回数据给程序的事件并且包含一些属性使得可以从程序传送信息给它。

这种方式可以让你像创建“黑盒子”一样创建MXML组件，并且有以下好处：

•它们容易重用和维护
•除了内部的组件它们不了解其它的东西
•它们不依赖于一个变量名和标签实例的名字

如我们所说的那样，为了创建一个松耦合的组件我们需要属性来存储信息，需要一个事件模型来分派包含有返回数据的事件。

属性经常在ActionScript中定义（尽管你可以在MXML中定义它们）并且放在一个<mx:Script>块中：

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

[Bindable]
public var lista:ArrayCollection;
]]>
</mx:Script>

定义MXML组件的方法也是一样：

<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;;
}
]]>
</mx:Script>

在下面的例子中，组件定义了一个作为DataGrid的dataProvider的属性和一个返回字符串的方法。下面是custDataGrid.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;

[Bindable]
public var lista:ArrayCollection;

public function justWrite():String
{
return &#34;This is a method of the component&#34;;
}
]]>
</mx:Script>

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

</mx:DataGrid>

</mx:VBox>

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; >

正如你看到的那样，&#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中创建自定义事件类来实现！我将会通过一个例子向你展示如何开发自定义事件类。

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

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

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

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

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

我们将从一个自定义事件类（它被保存为&#34;evtClass.as&#34;，并放在了”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程序中一个强大的工具，因为这使得开发者可以提高代码的重用性和可维护性。使用这种方式可以定义在多个程序中都能使用的响应不同用户交互的逻辑模块。

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

分享收藏



本文链接: http://www.zhuoqun.net/html/y2006/276.html 转载请注明出处，谢谢。

TrackBack引用地址：http://www.zhuoqun.net/html/y2006/276.html/trackback

相关日志


Posted in Flex, 技术.

5条评论

  • At 2006.10.14 19:58, 阿眯 CHINA said:

    群～～据说本月１５号老大的精选集各大音像店就有得卖了哦！刚刚听来了消息！哈哈

    [Reply]
    • At 2006.10.15 11:15, spartak CHINA said:

      不错，详细拜读了一下。不过整个application最终生成的的是一个swf。类比较多的情况下，文件会比较大。application之间应该可以互相调用吧。

      [Reply]
      • At 2006.10.15 11:16, spartak CHINA said:

        勤奋的blogger,我经常来看

        [Reply]
        • At 2006.10.31 16:07, Ken CHINA said:

          不错，以后常来。

          [Reply]
          • At 2007.05.23 09:48, apex CHINA said:

            文章真的不错

            [Reply]
            (Required)
            (Required, will not be published)
            « Flex Quick Starts中文翻译（八）

            大学就是小社会？ »