第章 Flex 自定义组件.ppt

12.1 自定义组件简介 12.2 自定义组件开发 12.1.1 自定义组件概述 Flex的应用程序只有一个主应用页面（包含s:Application标签的页面）。在Flex应用程序开发中，如果多个编程人员同时操作这一个文件，程序会变得很长很复杂，开发时彼此之间存在冲突，给系统的维护也带来很大的困难。 自定义组件的应用是Flex中的一个亮点，它既可以扩展现有组件的功能，也可以组合多个组件的功能。因此，使用自定义组件可以将应用程序切分到不同的模块中，从而可以分别开发和维护这些模块，更好地实现分工，提高程序的重用性，降低维护的成本。 使用MXML标签创建和使用自定义组件的基本步骤如下所示。 （1）创建一个新文件，文件名是自定义组件的名称。因为创建的是ActionScript类，所以名称应该以大写字母开头。 （2）代码的第一行是在主应用程序文件中使用过的XML文档类型定义，如下所示： ?xml version=1.0 encoding=utf-8? （3）为自定义组件插入根标签作为第一个MXML标签，反映创建这个组件的目的。如果是一个容器，则表示要将多个组件组合成一个易于使用的组件；如果不是一个容器，则表示要扩展一个预定义组件的功能或者是再次扩展一个自定义组件的功能。示例如下： s:Panel xmlns:fx=/mxml/2009 xmlns:s=library:///flex/spark xmlns:mx=library:///flex/mx width=370 height=286 title=自定义组件 /s:Panel （4）在组件主体中根据组件实现的功能添加不同的内容。 （5）在创建组件实例的文件中，添加一个XML命名空间，以便能访问组件。例如： xmlns:ns=* 这里使用“ns”作为自定义组件的前缀，“*”表示在当前目录下的所有文件。如果自定义组件的程序文件存放在某个目录中，如views/login目录下，则需要添加目录名，例如： xmlns:ns=views.login.* （6）像使用预定义Flex组件一样使用自定义组件。 12.2.1 使用MXML建立自定义组件 在建立自定义组件之前首先创建一个Flex项目，如MyCp。然后在该项目中的“新建”菜单项中选择“MXML组件”，如图所示。 在“名称”文本框中输入自定义组件名，如MyComponent。可以在“基于”文本框中选择为自定义组件插入的根标签，本例保持默认的Group类，如图所示。 单击“完成”按钮完成自定义组件的创建。这时，新建一个MyComponent.mxml文件，文件中系统预定义的代码如下所示： ?xml version=1.0 encoding=utf-8? s:Group xmlns:fx=/mxml/2009 xmlns:s=library:///flex/spark xmlns:mx=library:///flex/mx width=400 height=300 s:layout s:BasicLayout/ /s:layout fx:Declarations !-- 将非可视元素（如服务、值对象）放在此处 -- /fx:Declarations /s:Group 在该文件中可以设计自定义组件的内容，例如，本例设计一个Label组件和List组件，代码所示。 完成之后，打开主程序文件MyCp.mxml的设计视图，查看“组件”子窗口，在“自定义”目录下出现一个“MyComponent”组件，如图所示。 拖曳该组件到设计面板中，出现一个Label控件和一个List控件，如图所示。 主程序文件中的代码如下所示： ?xml version=1.0 encoding=utf-8? s:Application xmlns:fx=/mxml/2009 xmlns:s=library:///flex/spark xmlns:mx=library:///flex/mx xmlns:ns1=* ns1:MyComponent x=158 y=10 /ns1:MyComponent /s:Application 程序运行结果如图所示。 使用ActionScript类创建自定义组件，必须在使用该类以前确定要继承的基类，这决定了自定义组件的功能。例如，继承于一个容器类则表示要将多个组件组合成一个易于使用的组件。定义的基本结构如下所示： package { public class 自定义组件名 extends UIComponent基类名 {?.... } } 1．构造函数 如果自定义组件类中没有显式定义构造函数，则自动调用基类的构造函数。如果重写构造