Flex自定义组件开发

自定义Flex组件

组件（Components）和控件（Controls）的关系？

“组件”指任何可复用的、可以与其它对象交互的对象，如 Flex 中的validators、formatters、effects、managers、controls、containers 等等；

“控件”则指能够在界面上看到的组件，也称为可视化组件，如Flex中的controls、containers、borders 等等。

所有的控件都是组件，反之，则不一定。Flex中的所有类都可以被称为组件，其中能够在界面上看到的组件都可以被称为控件。

 

 

可视化组件的分类：

在Flash Builder 4中，为了便于用户使用，将可视化组件分为以下几类：

· 定制组件：存放用户自定义组件；

· 控件组件：存放基础的控件组件；如：按钮组件、文本组件和下拉框组件等；

· 数据控件：存放数据呈现的组件，如：网格组件、树组件等；

· 布局组件：如：窗口组件、表单组件；

· 导航组件：如：Tab条组件、按钮条组件；

· Adobe AIR：Adobe AIR组件；

· 图标组件。

 

 

组件的优点

· 通过组件，可以将应用程序分为能够独立开发和维护的模块，通过在自定义组件中实现通用逻辑，可以创建一系列可重用的组件，实现多个应用程序间的代码共用。

· 通过让自定义组件继承 Flex 中预定义的类，我们可以扩展 Flex 中的类，给现有的组件添加更多的行为，或者实现具有全新行为的组件。

 

 

Flex组件构成

在Flex中，一个模块对应着一个在MXML文件或者ActionScript文件中实现的组件。也就是说我们自定义一个组件不是以MXML文件的形式，就是以ActionScript的形式。

组件可以被定义在 MXML 文件（以 .mxml 为后缀的文件）或者 ActionScript 文件（以 .as 为后缀的文件）中。凡是定义在 MXML 文件中的组件都可以转化为定义在 ActionScript 文件中的组件。Flex SDK中的大部分组件都是定义在 ActionScript 文件中的。

 

 

怎样自定义组件？

通过扩展现有的组件来创建自定义组件。

组件形式

在实现自定义组件之前，我们需要决定是在MXML文件中实现还是在ActionScript文件中实现，这取决于应用程序的需求。

· MXML组件和ActionScript组件两者都定义新的ActionScript类。

· 基本上所有在ActionScript组件中能做的事情都可以在MXML组件中做。对于简单的组件，比如修改现有组件的行为或者为其添加新的基本特性，在 MXML 中实现起来更快、更简单。

· 当使用ActionScript创建自定义组件时，需要创建一个继承自Flex类的新类，该类类名必须与ActionScript文件的文件名相同；

   当使用MXML来定义组件时，Flex编译器会自动创建一个与该MXML文件名相同的ActionScript类。

 

 

Flex组件的文件类型

文件类型	扩展名	说明
MXML	.mxml	在MXML文件中实现的组件
ActionScript	.as	在ActionScript类中实现的组件
SWC	.swc	在MXML或ActionScript文件中实现组件后，将其打包进SWC 文件中。SWC文件中包含打包好的可以在多个应用程序间复用的组件。当生成SWF 文件时，SWC文件会被编译进应用程序中。
RSL	.swc	在MXML或ActionScript文件中实现组件后，可以通过RSL 文件来部署。RSL是一种独立文件，能够被SWF文件分别下载并缓存在客户端供多个应用程序的SWF文件使用。

为什么需要自定义组件？

创建自定义组件是为了重用（re-use）组件。

首先，我们的业务逻辑是做一个博客的"最近访客"页面，用于显示博客中最近所有的访客。最终效果如下图：

其次，我们创建一个普通的MXML文件，点击"新建—MXML 应用程序"，命名为：RecentVisitor.mxml，该文件用于显示最近访客。

· 在该文件中放入一个Label组件，标题设置为“最近访客”；

· 接着放入一个Image组件，用于显示访客图片，将它的"源文件"属性设置为一个图片的URL；

· 最后再放入一个Label组件，用于显示访客名称；

此时，RecentVisitor.mxml的源代码如下：

<?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/halo"

minWidth="1024"minHeight="768" xmlns:customComponent="cn.cheng.customComponent.*">

<mx:Image id="imgVisitor" source="images/1.jpg" x="6" y="9" />

<s:Label id="lblUserName" text="风的终点" x="6" y="77" />

</s:Application>

但这只是一个用户的显示，要显示多个用户怎么办呢？当然可以放入多个Label、Image组件，但是显然这样做是不可取的。所以我们要自定义一个组件，用来显示多个用户。

 

 

 

创建自定义组件？

组件可以被定义在 MXML文件或者ActionScript文件中。因此，有两种组件开发的形式：MXML组件开发及ActionScript组件开发。

现在我们使用MXML文件开发自定义组件，逻辑部分结合ActionScript语言完成。

要创建自定义组件要用到Group容器控件，它是一个用于保存其它用于显示的组件的容器。

 

步骤：

首先，在src目录下创建一个包用于存放自定义组件，我们命名为：customComponent。在该包下创建一个MXML组件，"新建—MXML组件"。在弹出的对话框中输入MXML组件的文件名，例如：RecentVisitorDisplay.mxml。将对话框中的宽度和高度的值删掉，防止以硬编码的形式创建自定义组件。之后，点击"完成"就创建了一个MXML组件。

此时Group类作为这个自定义组件的基类。

然后，我们将RecentVisitor.mxml文件中的代码拷贝到新创建的自定义组件文件中，此时的自定义组件文件如下：

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

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

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

xmlns:mx="library://ns.adobe.com/flex/halo">

<mx:Image id="imgVisitor" source="images/1.jpg" x="6" y="9" />

<s:Label id="lblUserName" text="风的终点" x="6" y="77" />

</s:Group>

再然后，就是使用自定义组件了。使用自定义组件类似于使用Flex框架组件。唯一不同的是它们不使用MX和Spark命名空间。它们引用自己所在的命名空间，更明确地说，就是你创建的自定义组件所在的目录。

在RecentVisitor.mxml文件中去掉所有的代码，只留下模板代码，此时在文件中以标签的形式输入你自定义的组件名，可以发现你自定义的标签。Flash Builder的自动生成方面采用了上下文感知(context-sensitive)的方式，帮助你找到自定义组件类。此时，选中你的自定义标签，按下回车，就在一个外部文件中使用了你自定义的组件，同时Flash Builder会在主应用程序标签中生成一个命名空间，指向你的自定义的组件的所在目录。代码如下：

<?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/halo" minWidth="1024" minHeight="768" xmlns:customComponent="customComponent.*">

<s:layout>

<s:BasicLayout/>

</s:layout>

<s:Label x="80" y="34" text="最近访客" id="lblRecentVisitor" fontWeight="normal" fontSize="14"/>

<customComponent:RecentVisitorDisplay/>

</s:Application>

这时就使用了一个你自定义的组件。

但是此时，你在"组件"面板的"自定义"选项中选择你的自定义标签，拖放到你的应用中，显示的都是同一个用户，如下：

显然，我们的目的还没有达到。

我们在自定义组件的时候，如果涉及到业务逻辑的话，会把ActionScript代码和MXML文件放在同一个文件中。在这种情况下，ActionScript代码放置在一个脚本标记块里，这是fx命名空间的一部分。

在MXML文件中创建并使用自定义组件的类属性，必须在MXML组件文件中，为您的ActionScript代码创建一个脚本标记（Script tag）。你还需要为一个变量定义访问修饰符的类属性。所以此时的RecentVisitorDisplay.mxml代码如下：

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

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

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

xmlns:mx="library://ns.adobe.com/flex/halo">

 

<fx:Script>

<![CDATA[

[Bindable]

publicvar imageFile:String;

[Bindable]

publicvar userName:String;

]]>

</fx:Script>

 

<mx:Image id="imgVisitor" source="images/{imageFile}" x="6" y="9" />

<s:Label id="lblUserName" text="{userName}" x="6" y="77" />

</s:Group>

注意：1.在Flash Builder会自动生成的一个CDATA块，这是XML规范中来处理非XML元素内容的指令。这里可以放置ActionScript代码。

2.需要使用可绑定元数据（Bindable metadata）指令，绑定一个ActionScript变量到一个自定义的MXML组件。

3.在Image标签中，source属性应用的是ActionScript代码中定义的变量；在Label标签中的text属性应用的是ActionScript代码中的userName变量，此时在外部文件中就可以使用这两个变量为每个自定义组件的实例对象设置不同的值，从而达到组件重用的目的。

 

    最后，RecentVisitor.mxml文件的代码如下：

<?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/halo" minWidth="1024" minHeight="768" xmlns:customComponent="cn.cheng.customComponent.*">

<s:layout>

<s:BasicLayout/>

</s:layout>

<s:Label x="80" y="34" text="最近访客" id="lblRecentVisitor" fontWeight="normal" fontSize="14"/>

<customComponent:RecentVisitorDisplay imageFile="1.jpg" userName="风的终点" x="70" y="70"/>

 

<customComponent:RecentVisitorDisplay imageFile="2.jpg" userName="娇娇" x="160" y="70" />

 

<customComponent:RecentVisitorDisplay imageFile="3.jpg" userName="娇花照水" x="250" y="70" />

 

<customComponent:RecentVisitorDisplayimageFile="4.jpg"userName="bao.bei.0219" x="340" y="70" />

 

<customComponent:RecentVisitorDisplayimageFile="5.jpg"userName="xuanwugudu" x="430" y="70" />

</s:Application>

Flex中的自定义组件很重要，以后编程中会经常使用到，应当很好的理解掌握。