Download presentation
Presentation is loading. Please wait.
1
第15章 使用定制组件 使用定制组件是在Flex提供的组件基础上创建自定义的组件模块。虽然Flex内置了大量的组件以满足不同应用的需求，但是这些组件只是用户界面中较为常见的元素。在大型的或者复杂的应用中，往往需要将这些基本元素组合，组成新的模块单元使用。对于这种情况，Flex提供了自定义组件的功能。本章主要介绍如何使用Flex编程语言创建自定义组件。
2
15.1 定制组件的方式 在前面讲述控件以及容器组件时，曾经遇到过使用自定义组件的例子，例如条目渲染器中的组件模块。这些例子中的自定义组件都是在MXML中定义。除在MXML定义外，Flex还提供其他的方式创建自定义组件。创建的组件既可作为其他组件的一部分，又可以作为应用界面的一部分。 Flex提供如下三种方式创建自定义组件： 使用MXML 该方式与在MXML创建应用类似。将自定义组件中组件元素定义在MXML中的组件文件中。 使用ActionScript 该方式完全依赖于ActionScript中与组件对应的类。通过继承组件类实现类似于MXML中创建组件的功能。 组合使用MXML和ActionScript
3
15.2 使用MXML创建组件 使用MXML创建组件时，组件内所有的元素都定义在MXML中。这种方式与创建Flex应用界面的方式有些类似。不同点在于，创建Flex应用页面时，将所需要的界面元素加入到页面文件中。而自定义组件时，将所需要的界面元素加入到组件文件中。 使用MXML创建组件，MXML文件不再以<mx:Application>开始。如果自定义组件中包含多个元素，以组件最外层容器的名称开始。例如组件在垂直盒子容器VBox中创建，则组件文件的开头和结尾标签均为<mx:VBox>，代码如下所示。 <?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx=" > </mx: VBox >
4
15.2.1．使用Flex Builder创建组件文件
使用MXML方式定制组件，最方便的方法就是在Flex Builder中利用Flex Builder丰富的选项进行创建。 如何在Flex Builder中创建MXML组件呢？在使用Flex Builder创建新文件时，可以发现MXML Component选项，该选项的作用创建新的组件文件，如图15.1所示。选择MXML Component选项后，Flex Builder弹出标题为“New MXML Component”的对话框。在该对话框中，可以选择创建自定义组件的目录，组件的名称以及组件的容器。然后出现图所示界面。
5
创建自定义组件 在使用Flex Builder创建组件文件后，即可在组件文件中添加需要的界面元素。下面的例子中，创建了2个自定义组件myComponent1和myComponent2。然后在应用中使用这两个自定义的组件，如图所示。
6
组件与应用文件的数据交互 在使用多个组件文件时，往往需要在组件文件间共享数据，或者从组件中获得数据。获得数据的方法很多，例如：可以在插入组件时，在组件标签内以组件文件中的变量名为属性赋值，也可以使用parentDocument获得引用该组件的文件中的变量。如果多次嵌套使用组件，可以使用parentApplication获得根应用的变量。 下面的例子中，在应用中使用myComponent1.mxml和myComponent2.mxml定义的组件。而在myComponent1和myComponent2都用到了myCombo.mxml中定义的组件，即图中的“选择区域“选项。
7
15.3 使用ActionScript创建组件 在Flex中，所有组件都有其对应的ActionScript类。例如文件控件（Text Control）对应的ActionScript类为mx.controls.Text类。在ActionScript中可以通过继承组件对应类来创建组件。下面的代码继承mx.controls.Button类，创建了一个自定义的按钮。 package { import mx.controls.Button; //继承Button类 public class MyButton extends Button public function MyButton(){ label = "haha"; }
8
15.4 组合使用MXML和ActionScript
组合使用MXML和ActionScript时，在应用文件中有的组件使用MXML定义，有的组件使用ActionScript定义，这是一种混合方式。无论使用MXML还是ActionScript，对于Flash Player都是相同的，即他们的原理相同。所以MXML和ActionScript组合的方式使用起来并没有想象的那么难。 下面即以一个简单的例子讲述2种方式的混合。在Flex应用文件中，使用了两个按钮控件，一个按钮在MXML定义，另一个按钮在ActionScript中定义。单击按钮时分别弹出对话框，说明该按钮采用何种方式创建，如图和所示。
Similar presentations
