如何创建FLEX自定义组件(1)

我经常看到这个话题——编写组件。通过这个例子，我将告诉你如何从零开始编写一个组件。我将要写几篇文章来探讨这个主题，在最后你就可以创建自己的组件了。
我把自己选择的这个组件叫做循环选择按钮。这个组件的显示的是dataProvider 中的某条纪录和两个箭头组成的一个圆环。当你选择按钮的时候箭头就会旋转一点同时显示dataProvider 中的下一个值。你可以把它想象成一个没有下拉列表的ComboBox组件。

 

Flex框架
想要创建一个Flex组件你必须理解Flex框架。一个组件的创建需要几个阶段，而在这些阶段Flex框架将多次遍历组件的继承层次来决定布局。
举个例子，假设一个Application中有两个VBox。一个VBox中有一些Button控件而另一个中有一些Label控件。要创建这些组件，Flex框架需要首先创建Application，然后创建VBox，然后是VBox的子控件。这是一次遍历。
如果没有对任何一个VBox指定高度或者宽度，那么你可能希望VBox足够大以便能够包含所有的子控件，对吗？为了计算VBox的大小，Flex框架需要决定它的每个子控件的大小。由于Button和Label并没有明确指定大小，所以Flex框架还需要决定它们的大小。这是另一次遍历。
一旦所有的计算都完毕的时候，Flex框架需要获得组件的大小属性和它们的位置。这又是一次遍历。
如同你看到的那样，创建组件并不是一件简单的事情，但是一旦你掌握了其中的窍门，它也并不是那么地困难。
为了方便地创建组件，Flex框架调用各个组件中的特定方法。通过实现这些方法，可以简单地使你的组件很好地适应框架。
有两种创建组件的方法：扩展一个已经实现了你想要的大部分功能的既有组件，或者由所有类的父类也就是最基础的类“从零开始”创建组件。
扩展一个既有的组件是最经常用的方法，而且他是你编写一个Flex程序的时候一直在使用的方法。当你使用一个根标签<mx:Application>创建主程序文件的时候，你就创建了一个组件（扩展自Application）。而当你创建了一个根标签为其它任意组件的MXML文件的时候，也相当于创建了一个组件；不论你是通过MXML还是ActionScript进行扩展组件的。

程序初稿
我们将会以修改HBox组件开始，但是从根本上来说我们想要扩展UIComponent。使用HBox可以很好地阐述概念。

让我们来看一下这个组件的设计，很显然有两部分：一个圆环按钮和一个标签（Label）。但是由于我们想要通过点击标签（Label）在各个选项之间循环，而Button当鼠标放上去或者进行点击的时候都会提供一些反馈，所以使用一个Button看起来更实用。但是一个Button看起来一点也不像上面的那个控件，所以可能使用LinkButton看起来会好一点。
使用HBox作为根标签创建一个新的MXML组件并将其命名为CycleSelectButtonV1.mxml（V1代表version 1）。向其中添加两个子控件：一个Image和一个LinkButton（将它的id设为”linkButton”）。将Image的大小设成20×20并将HBox的verticalAlign属性设为”middle”。如果你是使用FlexBuilder来创建这个组件的话，请将HBox预设的width和height去掉。
对Image标签做以下更改：
<mx:Image source="@Embed('../assets/cycle_component.gif')" 
    width="20" height="20" />
你可以像下面这样使用这个新组件：
<CycleSelectButtonV1 dataProvider="{choices}" 
    change="handleCycleChange(event)" />
这个HBox组件并没有dataProvider属性，也没有change事件。这些东西是需要你进行自定义。

事件和属性
这个组件将要分派一个change事件，所以你需要将这个告诉Flex编译器组件。将下面的代码添加到HBox根标签：
<mx:Metadata> 
    Event(name="change",type="flash.events.Event")] 
</mx:Metadata>
Event 元数据标签告诉Flex编译器在MXML标签中可以包含 change=”…”。用来作为事件的数据类型的类是缺省的，不过我想要明确写出来，这样就对哪个事件类会出现在事件处理函数中就没有疑问了。
要添加dataProvider这个属性，你需要编写一点ActionScript代码。将下面的Script块添加到Metadata标签下面：
<mx:Script> 
<![CDATA[ 
]]> 
</mx:Script>
<![CDATA 和 ]]>语法是为了告诉XML其中的任何东西都不需要做XML解析。在Script标签中添加CDATA块并不是必须的，但是加入你使用像 < 的符号，XML解析器会认为你正在写一个新的标签！
将下面的代码添加到 CDATA 块中：
import mx.collection.ArrayCollection; 
private var _dataProvider:ArrayCollection; 
public function set dataProvider( value:ArrayCollection ) : void 
{ 
    _dataProvider = value; 
} 
public function get dataProvider() : ArrayCollection 
{ 
    return _dataProvider; 
}
这是编写一个属性的标准方式——使用set和get函数，并且变量值和函数名是一样的，只是前面加了一个下划线。有时候你可能会看到这种方式被称作后台变量（backing variable）。
这时候你可以测试一下组件了，而且可以将dataProvider和change添加到组件标签中；尽管它们不会起到任何作用。
当我思考这个组件的时候，我想到要像为ComboBox提供数据一样为这个组件提供数据。下面是一个示例：
[ {label:"Apples", value:1}, {label:"Oranges", value:2}, etc. ]
你可以添加所有你想要让标签(Label)显示的数据，接下来我将告诉你如何实现这个功能。

commitProperties
到现在为止，组件并不知道如何在LinkButton中显示数据。所以我们需要一些ActionScript代码。将下面的代码添加到Script块中：
override protected function commitProperties() : void 
{ 
    super.commitProperties(); 
    // we'll fill this in below 
}
部分Flex框架周期包括一个对commitProperties()函数的调用。在组件的所有属性都设定完毕之后就会调用这个函数，这一点很重要，因为你不知道在一个属性的set函数中是否调用了另外一个属性的set函数。例如，如果第三个属性的设定需要用到其它两个的值，那么设定第三个属性的唯一合理的地方就是在commitProperties()中。
我们将使用commitProperties()将LinkButton的label属性设定为dataProvider中的一个值。这个例子中它将会被设定为第一个条目。将下面的代码添加到super.commitProperties()下面：
linkButton.label = dataProvider[0].label;
这里可能会发生很多错误：dataProvider属性可能从来没有被设定或者它的第一个条目可能并没有label属性。不过现在我们假设所有的东西都设定好了。
再次运行这个程序你将会看到LinkButton的label变成了”Apples”。
如果在主程序文件中添加一些代码对CycleSelectButtonV1的dataProvider做一些更改，你觉得会发生什么事情？如果你更改了一个ComboBox 或者 DataGrid的dataProvider将会发生什么事情？ComboBox 或者 DataGrid将会显示新的值对不对？你肯定希望CycleSelectButton有同样的效果。
如果你这样写：cycleButton.dataProvider = newValue，这就是对dataProvider调用了组件的set函数：
public function set dataProvider( value:ArrayCollection ) : void 
{ 
    _dataProvider = value; 
}
重点提示：其中的_dataProvider发生了改变，但是LinkButton的label并没有改变。你可能会尝试将linkButton.label=value[0].label添加到这个set函数中，但是我希望你看到这样做有很多问题。首先，它“看上去”就不对。而且真正的问题是，当组件正在创建属性还未设定完毕的时候，LinkButton的label属性可能并不能被赋值。当然，在那之后它将可以被赋值，但是在属性设定阶段很多组件都不可能很容易地被改变。
可以被赋值的地方就是commitProperties()函数。调用commitProperties()函数最合理的地方就是set函数。尽管这“看上去”也不对，而且，它所做的事情不但和上面所做的是一样的，还具有相同的问题。
接下来我们就想要通知Flex框架commitProperties()函数需要被调用，而这只需要在set函数中调用invalidateProperties()函数就可以了。在Flex框架中invalidateProperties()函数的作用是设定一个标记（flag），这个函数的好处是你可以设定100个属性并调用invalidateProperties()函数100次，而commitProperties()只会被调用一次，非常有效率。对set函数作以下更改：
public function set dataProvider( value:ArrayCollection ) : void 
{ 
    _dataProvider = value; 
    invalidateProperties(); 
}

循环显示数据
上面的代码只是为了下一件事情做准备：将LinkButton的label显示dataProvider的下一条目。
第一个条目已经被直接写到了commitProperties()函数中，很显然这里我们需要一个变量来保存条目的索引。嗯，selectedIndex 这个变量听起来是个不错的选择，而且它和ComboBox以及很多其他的Flex控件也保持一致。为selectedIndex也建立一个set函数和一个get函数：
private var _selectedIndex:int = 0; 
public function set selectedIndex( value:int ) : void 
{ 
    _selectedIndex = value; 
    invalidateProperties(); 
} 
public function get selectedIndex() : int 
{ 
    return _selectedIndex; 
}
你还需要更改commitProperties函数中的一行代码来使用selectedIndex：
linkButton.label = dataProvider[selectedIndex].label;
然后让LinkButton的click事件调用一个函数来在索引之间切换：
private function handleClick() : void 
{ 
    selectedIndex = selectedIndex + 1; 
    if( selectedIndex >= dataProvider.length ) selectedIndex = 0; 
    linkButton.label = dataProvider[selectedIndex].label; 
}
当然也要为LinkButton添加click事件：
<mx:LinkButton label="linkButton" click=handleClick()" />
现在运行程序并点击组件中的LinkButton，它应该循环显示dataProvider中所有条目的label。当点击LinkButton的时候就会调用handleClick()函数，这会使selectedIndex的值加1，所以当commitProperties被调用的时候就会显示与新的selectedIndex对应的dataProvider中条目。很酷吧？哈！

分派事件
最后，我们还要在selectedIndex发生改变的时候分派一个change事件。你可以在selectedIndex 的set函数中实现这个功能，但是这也意味着任何通过ActionScript对selectedIndex所做的更改都会分派这个事件，这不符合标准的Flex工作流程。所以，我们将在LinkButton的click事件处理函数中分派这个事件：
private function handleClick() : void 
{ 
    selectedIndex = selectedIndex + 1; 
    if( selectedIndex >= dataProvider.length ) selectedIndex = 0; 
    linkButton.label = dataProvider[selectedIndex].label; 
    dispatchEvent( new Event(Event.CHANGE) ); 
}
在主程序中你可以处理这个change事件并使用组件的selectedIndex来查看当前选中的是哪个条目。

总结
你可以使用任何Flex容器（例如HBox, VBox, Canvas）为基础来编写自己的组件，你只需要用MXML标签将向其中添加一些子组件，创建一个Script块并添加一些属性（使用set和get函数），然后覆写commitProperties()函数来应用这些属性。
在下一篇文章中我将会用ActionScript写一个相同的组件并且使其在每次被点击的时候旋转那个圆环图像。