【原创】Using_Flex_4翻译——自定义组件第一小节

下午刚翻译的，新鲜出炉，直接贴上，有不足还请见谅~

第十章 自定义组件

自定义Flex组件

Adobe Flex支持以组件为基础的开发模型。您可以用Flex中包含的预定义的组件来建立您的应用，为您特殊的应用需求创建组件。您可以用MXML和ActionScript创建自定义组件。

 

关于自定义组件

定义您自己的自定义组件有几点好处。一个优点就是能帮您把应用程序分解成模块，模块可以独立开发和维护。通过实现包含普遍逻辑的自定义组件，您也可以建立一套组件库，在众多的Flex应用使用这套自定义组件库。

 

当然，您也可以继承Flex中预定义的组件来扩展您的自定义组件。您可以创建自定义版本的可视化控制组件，也可以创建非可视化的组件，例如数据验证器、数据格式器和效果类。

 

您可以只用MXML文件建立一个完整的FLex应用程序，这个MXML文件包含您的MXML代码和一些ActionScript代码。然而，当你的应用程序变大了，您的单文件就会变得很大很复杂，这种类型的应用程序不就就会在理解和调试等方面变得非常困难，而且很不利于多个开发者同时开发。通过分解成组件您可以简化架构，为多个开发者分配开发任务。

 

在应用程序开发中利用模块

一个通用的代码联系是把一个程序分解成多个函数单元或者模块，每一个模块完成一个抽象的工作。把您的应用程序分解成模块可以跟您带来很多好处，包括：

 

开发难易度：不同的开发者或者开发组可以各自独立的开发和调试模块。

重用性：你可以在不同的应用程序里重用模块，这样您不必做重复劳动。

维护性：通过多个独立模块开发您的应用程序，您可以比只用一个文件来开发应用程序更快的分析和调试错误错误。

 

在Flex中，一个模块等同于由MXML或者ActionScript实现的一个自定义组件，下面的图片展示了一个把Flex应用程序分解成多个组件的例子。

 

这个例子展示了组件的以下关系：

 

l 您定义了一个包含<s:Application>标签的主MXML文件。

l 在您的主MXML文件中，您用<fx:Script>标签包含了一个ActionScript块，在ActionScript块中，您写了ActionScript代码或者包含了一个ActionScript文件定义的外部逻辑。通常，您用这块区域书写少量的ActionScript代码。如果您必须要写大量的ActionScript代码，您应该包含一个外部文件。

l 主MXML文件利用MXML和ActionScript来引用Flex里面提供的组件，同时引用您自定义的组件。

l 自定义组件可以引用其他自定义组件。

 

Flex类的层级

Flex是像ActionScript类的层级那样实现的。类的层级包括组件类、管理类、数据服务类和其他实现Flex特点的类。如想更详细的了解类的层级，请参阅ActionScript 3.0 Reference for the Adobe Flash Platform. 

 

所有的可视化组件都是继承自UIComponent ActionScript类。Flex非可视化的组件也是用ActionScript通过类的层级实现的。最常用的非可视化类是数据验证器，数据格式器和效果基类。

您通过扩展Flex类的层级用MXML和ActionScript语言创建了自定义组件，组件继承了他们父类的属性、方法、事件、样式、和效果。

 

Spark and MX conponents

Flex定义了两套组件：Spark和MX。Spark组件是Flex中新推出的，在spark.*包中定义。MX组件是从以前发布的Flex中过来的，在mx.*包中定义。

 

Spark和MX定义了一些相同的组件。例如，Spark定义了按钮控制在Spark.components包中，MX定义了按钮控制在mx.control包中。当一个组件在Spark和MX中都可用，Adobe建议您使用Spark的组件。

 

Spark 和MX 也定义了各自特有的组件。例如，Spark定义了表现三维的效果组件。MX定义了数据可视化组件，如DataGrid,和AdvancedDataGrid,这些组件Spark中不包括。您的应用程序通常是Spark和MX组件混合而成的。

 

用户化已存在的组件

用户化（定制）已存在的组件的一个原因是为了您的应用程序需要，用户化可以非常简单，如修改按钮的label属性为"Submit"来为您的表格创建一个定制的按钮。

 

您可能也想要修改Flex组件的行为。比如，一个Vbox容器按由上至下的顺序布局其中的子项，您可以在这个容器中定义子项。然而，您想要定制VBox让其中的子项由下至上布局。

 

另一个原因要定制Flex组件是想为其增加逻辑或者行为。例如，您可能想要修改TextInput以达到它支持一个按键组合来删除里面输入的所有文本。或者。您想要修改一个组件，以达到当用户执行一个动作的时候它能发出一个新的事件类型。

 

为了创建您自己的组件，您可以继承UIComponent类或者其他Flex组件层级的类来创建子类。例如，如果您想创建一个组件，它的行为跟一个Button基本相同，您可以扩展Button类，而不是从基本重新创建一个Button。

 

根据您计划的修饰，你可以用MXML或者ActionScript创建一个Flex组件的子类。

 

MXML组件和ActionScript组件的关系

为了用ActionScript创建一个定制的组件，您可以根据Flex类的层级创建一个子类。您 的类的名字（例如，MyASButton），必须要跟ActionScript文件的名字相同；例如。MyASButton.as。这个子类继承了父类所有的属性和方法。在这个例子中，您可以使用<MyASButton>标签在MXML中引用它。

 

当你用MXML创建了一个定制的组件，Flex的编译器会自动的创建一个ActionScript类。MXML文件的的名字（例如，MyMXMLButton.mxml）等同于那个ActionScript类的名字。在这个例子中，那个ActionScript类呃使命是MyMXMLButton，您可以用<MyMXMLButton>标签在MXML中引用。

 

下面的例子展示了两个基于Flex Button的组件，一个用ActionScript定义，另一个用MXML定义：

两个实现都创建了一个继承自Button类的组件，继承了所有的公有和保护属性、方法和Button类中的其他元素。在每一个实现中，您可以覆盖继承下的元素，定义新的元素，加上您定制的逻辑。

 

注意 ：您不可以覆盖一个定义为变量的继承属性，但是您可以覆盖属性通过setter和getter方法。您可以重置一个定义为变量的继承属性。您通常在一个ActionScript组件的构造函数中重置它或者在MXML用一个事件处理来重置，因为MXML组件中不能定义构造函数。

 

然而，当您用MXML的时候，Flex编译器为您做了很多帮助您创建一个组件的子类。这就使用MXML创建一个组件要比用ActionScript创建一个组件方便许多。

 

决定用MXML还是ActionScript来创建组件

您的首批决策中应该决定使用MXML还是ActionScript来创建自定义组件，最终，都是由您的应用程序需求来决定以什么方式来创建自定义组件的。

 

一些基本的指导原则如下：

l 用MXML和用ActionScript组件都会定义一个新的ActionScript类

l 您在ActionScript自定义组件中可以做的几乎所有事情您也可以在一个MXML中完成。然而，对简单组件来说，比如组件修改了一个已经存在的组件中的一些行为，或者为已经存在的组件增加一个基本特征，在MXML中创建他们要更简单和快捷。

l 当您的新的组件是一个包含其他组件的复合的组件，而且你可以在一个Flex容器中表达他们的位置和大小，你最好用MXML来定义您的组件。

l 修改组件的行为，比如一个容器的布局方式，用ActionScript。

l 通过继承UIComponent创建一个可视化组件,用ActionScript。

l 创建一个非可视化组件，比如数据验证器、数据格式器或者效果，用ActionScript。

l 要为您的组件增加日志支持，用ActionScript，更多详细信息，请参阅“Logging”在2089页。

 

注意 ：Adobe® Flash® Professional 8 环境不支持ActionScript3.0，因此您不要用Flex为其开发组件。作为替代，您可以使用Adobe® Flash® Builder™ 或者 Adobe Flash Professional CS4 或者更高版本。

 

想要获得更多的定制MXML信息，请参阅“Simple MXML components”在2266页，想要获得更多ActionScript组件信息，请参阅“Create simple visual components in ActionScript”在2300页。

 

创建新的组件

您的应用程序需要要您创建新的组件，而不是修改已经存在的组件。为了创建组件，您通常使用ActionScript创建继承自UIComponent的子类。这个类包含了Flex组件的普遍性的功能。您再增加需要的功能到您的新组件中来满足您应用程序的需求即可。

 

想获得更多信息，请参阅“Create advanced MX visual components in ActionScript”在2342页

<!--EndFragment-->

评论

2 楼 chrislee1982 2010-04-09  

flex帮助中比较有价值，值得一看的知识点。
正想看看英文的，想不到楼主在翻译了。呵呵

1 楼 casparant 2010-04-07  

我专程来路过一下～