1. 组件简介

每当使用MXML标签时，实际上就是在使用一个组件。Flex也被认为是一个基于组件的开发模式。自定义的组件可以拓展Flex Sdk已有的功能或者是把一些组件的功能组合起来。组件让我们把系统划分成模块，这大大方便了团队的开发和维护。在良好的设计下，这些自定义的组件会成为可重用的功能单元。

2.  MXML组件

所有被创建的组件都是ActionScript的类。MXML组件是可视化组件的一部分，它的基类是用户界面（UI）组件，在组件的层次结构上，UIComponent是在最顶部的，其他组件继承自它。

这些类根据它们的功能被划分到不同的组当中。例如组件类，管理类，数据服务类。事实上，UIComponent本身也从一系列其他类中继承它们所提供的功能，例如事件控件类（Eventdispatcher object），交互类（interactivity object）等等。

UIComponent的继承关系：

Object->EventDispatcher->DisplayObject->interactiveObject->DisplayObjectContainer->Sprite->UIComponent->All ComPonents.

3. 创建自定义组件示例

这是一个简单的拓展已有组件功能的例子。假设你要创建一个可以自动显示三个货物名称的List组件，在创建的组件中就该用<s:List>作为根标签，因为<s:Application>标签在每个应用程序中只能使用一次。

建立一个简单的组件需要以下六个步骤：

1. 在你的Flex项目中创建一个mxml文件并命名，例如：MyList.mxml.

2. 该组件的第一行是标准的xml文档声明:

<?xml version=”1.0” encoding=”utf-8” ?>

3. 因为要拓展的是List组件，所以使用<s:List>作为根标签，组件的基本结构如下：

<?xml version="1.0" encoding="utf-8"?>

<s:List xmlns:fx="http://ns.adobe.com/mxml/2009"

            xmlns:s="library://ns.adobe.com/flex/spark"

            xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">

            <s:layout>

            <s:VerticalLayout>

            </s:VerticalLayout>

            </s:layout>

            </s:List>

4. 加入到组件List的功能就是显示三个货品的名称，使用<s:dataProvider>标签来为List组件提供数据

以下是完整的组件代码：

<?xml version="1.0" encoding="utf-8"?>

<s:List xmlns:fx="http://ns.adobe.com/mxml/2009"

                xmlns:s="library://ns.adobe.com/flex/spark"

                xmlns:mx="library://ns.adobe.com/flex/mx" width="80" height="300">

            <s:layout>

                <s:VerticalLayout>

                </s:VerticalLayout>

            </s:layout>

            <s:dataProvider>

                <s:ArrayCollection>

                    <fx:String>Dairy</fx:String>

                    <fx:String>Prod</fx:String>

                    <fx:String>Bakery</fx:String>

                </s:ArrayCollection>

            </s:dataProvider>

            </s:List>

5. 在你的项目中创建一个mxml应用程序，假设命名为diyAdobe.mxml把所创建的组件放到包myCom中

6. 最后在diyAdobe.mxml的设计模式下，把自定义组件List拖入到界面中即可。

主程序代码：

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:myCom="myCom.*">

            <myCom:List x="93" y="47"/>

</s:Application>

 4. 自定义组件的优点

在基本了解创建组件的方法后，我们还需要知道使用组件到底有哪些优点

1.组件使程序更容易创建，调试，维护

2.组件使团队开发更加方便

3.在良好的设计下,组件可以成为可重用的功能单元

为了方便的重用这些自定义组件，应该尽可能的让它们独立于其他代码，这些组件应该作为独立的逻辑片段运行，并且明确定义哪些数据会被传入其中，它们又会返回哪些数据。这种程序结构就是面向对象编程中的松散耦合。