zhangsenwei

3.2 使用组件

在 MXML 中，除了 Application标签外，还提供了大量的标签供我们使用。

例如上面代码中出现的Button和Label标签，处理界面结构的Canvas、Box标签，网页中常见的下拉框、多选框、单选框、复选框，用来显示数据的DataGrid、Tree等等。每个标签都对应一个类文件。

3.2.1 插入组件

在MXML中组件使用起来非常简单，比如插入一个按钮，编写代码：

<mx:Button></mx:Button>

这一对闭合的标签将在界面上绘制出一个Button组件。在XML中，所有标签必须闭合。和正常标签相比，闭合标签只是在前面添加了一个“/”。也是用另一种形式：

<mx:Button />

“/”符号是闭合标签的简写形式，通常用于单行的节点，描述一个单独的元素。如果标签包含子节点，则不能采用简写。

MXML中，组件的属性（如长、宽、位置等）是作为节点的属性出现的，比如：

<mx:Button width="200" hieight="200"></mx:Button>

组件按照功能大致可分为三类：

l 布局类，包括所有的容器类型组件，比如 HBox、Panel等。Spacer、HRule 和 VRule不是容器类型，但主要用于布局，因此也归于此类。

l 导航类，包括菜单条、按钮条等各种导航功能的组件。

l 交互类，包括内容展示、数据交互相关组件，如按钮、下拉框、图片、视频等等。

Flex Builder的组件面板中列出了所有的可视化组件。在设计模式试图下，可以直接从组件面板将组件拖入到编辑区，同时自动生成程序代码。

如果要使用非可视化组件，则需要输入代码。在代码试图中输入<mx: 这时候跟进的代码提示窗口将列出mx 空间下所有的对象，如图 3.1 所示。

3.2.2自定义MXML组件

在实际开发中，尤其是一个大型应用中，我们不会把所有的代码都塞进一个文件中。可以想象，修改一个几千行的文件是件痛苦的事。因此，对程序进行功能分割是非常必要的。这带来的好处很多，明显的一点是让开发者能够分工合作，提高程序的重用性，降低了维护的难度。

基于组建的开发模式是Flex的一个特色。一个Flex程序是由若干个组件构成的。程序中所有的MXML文件和ActionScript类文件，都被当作用户自定义的组件。用户自定义的组件和Flex本身的组件在用法上完全一样，它们的区别在于：Flex组件经过封装，可以被任意程序使用，而用户组件在特定的程序中才可以使用。

一般我们将程序中功能能够独立或者需要返复使用的部分定义成一个用户组件。编写程序时，应当尽量减少组件与组件之间的直接联系，降低块与块之间的依赖性。

在程序Example_1中，我们来新建一个MXML组件。在导航区，在空白区域单击鼠标右键，在弹出的菜单中选择 New ----> MXML Component，见图3.2。

然后会弹出如图 3.3 所示的对话框。

这里要给出被创建组件的文件名，并选择是扩展来自哪一种组件，包括所有可视化组件和用户已经自定义的组件，也就是说可以在已经扩展的基础上就继续扩展。

选择Image对象，单击Finish按钮，一个新的MXML文件被创建了，切换到设计视图，点击Image组件，在属性面板会看到他的常见属性，见图3.4。其中Source属性即图片的路径。选择好图片后，这个组建就完成了，见图3.5。

myImage.mxml的文件内容如下：

    再次切换到设计模式视图。这时，在组件面板上，Custom分类中出现了新添加的组件名。想使用Flex自带的组件一样，将myImage组件从组件面板拖放到主程序中，图片显示正常。切换到代码模式视图，Example_1.mxml文件的内容变化了：

    请注意，在Application标签中，多了一个属性：xmlns:nsl="*"，这便是本章3.1.2节中讲到的自定义命名空间。这里边机器自动添加了名为“nsl”的命名空间，将程序目录下所有的MXML组件都纳入其中。因此，插入的myImage组件的代码相应变为：

<nsl:myImage x="30" y="30" />

    在实际开发中，为了更好地规划程序的结构，我们一般根据功能来划分命名空间。新建文件夹“view”，将myImage放在其中。“view”有视图、视界的意思，我们把所有和界面相关的组件都放在这里面，这样看文件夹的名字就知道里面的大致内容了。修改后，Exaple_1.mxml文件的代码如下：

运行程序，效果如图3.6所示：

说明：由于在网上相关资源太少所以本文是按照《Flex第一步》编写，由于时间比较短所以第三章内容没有全部出来同时编写过程中有错别字，请大家担待。^_^