第三章. Flex标准组件类分析和应用

在能够熟练地利用Flex各种组件开发具体应用之前，我们需要更详细地熟悉Flex开发的各个关键要素和来龙去脉。那么本章将详细的阐述这个过程并且还将彻底分析其中3个关键知识体系。一是，Flex组件的事件触发体系；二是，Flex中Data Provider和Collections等数据容器和迭代器类的详细理论；三是，ActionScript中在Flex应用的一系列关键角色等。笔者并不想按照Flex帮助文档中的知识阐述体系来讲解本章，而是针对Flex应用从总体上把握归纳和分析，在本章你不会看到某个具体的组件TextInput怎么用以及它的详细属性和方法，但是你会看到所有的Flex组件集合中共通的共性和个性，在理解了这些知识以后，读者可以轻松的利用所有的标准组件来开发各自的应用。Flex的帮助文档侧重产品和功能的介绍，从开发者的观点上没有足够的的功能归纳和分析，而这恰恰正是我们所需要的，相信本章将弥补这个空白。本章包含以下几个小节：

1．开发MXML应用的要素和必要理论基础。

2． 你打算在ActionScript中做点什么。

3． DataProvider和Collections数据容器类和迭代器类

4． 事件模型

5． 标准控件Controls类

6． 标准容器Containers类

7． 标准效果Effects类

8． 运行时Runtime特性

3-1开发MXML应用的要素和必要理论基础

我们都已经了解MXML是一种基于标签的编程语言。它给我们的开发提供的最大便利就是，在我们没有写任何一句逻辑控制之前，开发者可以任意预先布局我们应用程序看起来是什么样子的。这是MXML语言首先提供给我们的最大便利。想要深入理解HTML语言我们必须要熟悉DOM文档结构，和HTML一样，MXML也同时隐含了一种类似DOM的结构。从根节点<Application>开始，与所有的内嵌子节点一起组成了一个节点组件树结构。在编程上，我们可以像JavaScript中操作HTML子节点类似(只不过所调用的方法有些不同)就是在ActionScript中通过getChildAt()和getChildByName()方法得到任意子节点的索引，或者直接通过数组下标currentBox[0]来得到currentBox容器下第一个子节点组件。这一切并不是先天和偶然的，而是与Flex组件类架构的设计是息息相关的。

 

3-1-1 可视化组件

         在开发者需要定义自己的组件以便用来布局应用之前，Flex提供了大量功能强大且非常实用美观的标准组件供开发者使用。Flex组件库的容量相当庞大不过每一部分都是有章可循的，尤其是可视化组件这一块。能够比较彻底地熟悉可视化组件的类层次结构对我们从根本上理解Flex组件的应用很有好处。

 

★类层次结构

         Flex所有的可视化组件基本上都是继承了基类UIComponent，当我们自定义组件的时候，也可以继承这个类。UIComponent类包含了所有可视化特性所必须的基础关键要素。包括组件长度，宽度，鼠标双击事件，creationComplete,updateComplete,各种效果effects句柄，id属性，组件风格，相对父容器中的坐标位置等等。UIComponent已经实现的接口有IChildList,IDeferredInstantiationUIComponent, IFlexDisplayObject,  IInvalidating, ILayoutManagerClient,IPropertyChangeNotifier, IRepeaterClient,ISimpleStyleClient, IStyleClient,ToolTipManagerClient, IUIComponent,IValidatorListener等等。所以，在开发者自定义可视化组件的时候没有必要也不太实际得继承Flex类库的最基础类Object来实现自己的组件，因为UIComponent为我们自定义组件准备好了所有基础要素，一般直接继承UIComponent就可以了。上面UIComponent实现的接口具体功能也许读者现在不能完全理解，没关系，我们将在后续的章节中陆续详细地讲解这些接口。图 3-1-1 为Flex标准可视化组件的类继承结构（图片源自Flex官方文档）

                                

                            3-1-1

★设置组件布局

       对于所有的继承自UIComponent的组件包括Flex标准组件（Controls和Containers），我们都可以在标签内或者在AS中动态地设置它们的width和height属性。很多Controls和Containers我们都支持默认大小。对于Containers容器，我们又可以设置它的一系列布局属性properties和风格styles，它们主要包括利用verticalAlign，horizontalAlign设置容器内子组件的对齐方式；利用容器内相对坐标x,y设置子组件在容器内的相对位置；利用paddingBottom,paddingTop,paddingRight,paddingLeft属性设置上下左右边框空白；verticalGap和horizontalGap属性设置容器内子对象间隔；利用horizontalScrollPolicy和verticalScrollPolicy属性设置当容器内子组件大小超过当前容器时是否允许滑动条出现等等。这些都是Flex Containers容器的共性。所有的Flex容器类都继承自mx.core.Container类，这个类定义和实现了以上提到的和容器布局相关的这些属性。

另外Flex通过两种方式定义Controls组件在父容器的的位置和布局。一个是自动布局，Flex根据当前父容器的默认方式布局设置其子组件的布局和位置，如VBox会在容器内垂直地布局所有的子组件，而HBox则水平地布局子组件；另一种方式是绝对布局，利用子组件相对当前父容器的坐标x和y属性以绝对位置的方式定义组件的布局位置。

在所有Flex可视化组件库中共有三种容器支持绝对布局方式。Application，Panel默认使用自动布局方式，开发者可以设置其layout属性为absolute，将布局方式设置为绝对布局。第三个容器组件是Canvas，允许绝对布局。

 

★Flex组件布局过程

       LayoutManager类是Flex的一个后台布局管理器。开发者基本上不必直接操作这个类。它主要负责运行时以实时侦听的方式解析布局应用组件的大小，风格和位置。逻辑上布局过程可分为三个阶段（提交commitment，检测measurement和实施layout）.其中每个过程都是以上一个过程的完成为基础。

●     提交阶段Commitment

这个过程LayoutManager触发待布局组件树中各个组件的commitProperties()方法用来确定与组件布局相关的属性变化。然后以相同的方式call每个组件的validateProperties()方法遍历属性列表。commitProperties()方法定义在每个容器类Container中。validateProperties（）方法则声明在ILayoutManagerClient接口中，而UIComponent可视化基类实现了ILayoutManagerClient 接口，这就是每个我们自定义的容器类或者标准容器类可以在机制上实现精确布局的理论基础。

●      检测阶段Measurement

这个过程LayoutManager触发每个组件的measureSizes()内置方法检测应用中每个组件的默认大小。检测遍历从底层嵌套最深的组件开始一直到最外层的容器。

●     实施阶段Layout

这个过程中LayoutManager触发每个组件的updateDisplayList（）方法用来最终布局组件树结构，包括组件的大小多少和位置等。布局顺序从最外层的容器一直到最底层的容器。

       从另一个角度来描述，从Mxml标签嵌套最底层的Controls组件到最外层的Application组件，Flex依次检测以显式方式设置的组件绝对长度和宽度。这个过程在检测阶段完成。检测阶段完成后，进入实施阶段，Flex从最外层的容器到最底层的内嵌组件，依次确定以百分比方式设置的width和height等组件属性。第三步Flex检测和确定以设置minWidth, minHeight, maxWidth,maxHeight等属性决定大小的组件的实际长度和宽度。

★组件大小

在Flex组件布局的检测和实施阶段，LayoutManager会根据组件的width和height属性描绘组件大小。在flex的实现中组件大小的设置可以有三种方式。

（I）                   默认大小：没有显式的设置长宽时，系统自动确定组件的默认大小。

（II）               绝对大小：显式的设置组件的长度和宽度

（III）            百分比大小：参考当前组件的父容器，利用百分比设置组件大小

（IV）               间接限制大小：通过设置相对父容器边框距离和中心点位置确定组件大小的方式。

应用中你会发现在Flex 组件中有若干属性可以设置组件的大小。对于这一部分的掌握将有助于你对Flex组件机制的理解。如果你没有用自定义的组件，你可以用下面介绍的方式来设置组件的大小属性。

●     在MXML标签和ActionScript中可以直接设置每个组件的width，height，percentWidth，percentHeight属性初始化大小。

●     在MXML标签中或者ActionScript中设置每个组件的minWidth，minHeight，maxWidth,maxHeight属性设置当前组件可以拥有的最大最小长度和宽度。但是如果你已经显式地设置了当前组件的绝对长度和宽度width和height，那么这种设置方式将没有效果。

 

  

 

 

 

 

3-1-1 开发 MXML 应用程序   

★利用容器布局应用

MXML支持两种用户接口组件，Controls和Containers。Controls是指一系列如Buttons,TextInput,HSliders,DateChoser,ColorPicker,ComboBoxes等供页面显示用的标准的控件元素。Containers从本质上讲是指一个长方形的容器，里面可以放别的Controls和Containers。Flex也提供了一系列为便利应用导航设计的容器，叫做Navigation Containers。如ViewStack容器，TabNavigator容器和Accordion容器，这三个容器只允许用户一次只能看到容器中的一个可视元素。

ViewStack容器在默认条件下不提供任何可视元素间的导航逻辑，只显示ViewStack容器内第一个可视单元。只能通过手动设置selectedChild属性来切换当前需要显示的可视元素。

             

。。。。。。。。。。。。。。。。

 

       未完待续！