Flex的容器

介绍
容器定义了在Adobe Flash Player绘图工作面上的一个矩形区域。在容器中，你定义那些想要放在这个容器中的包括控件和容器在内的组件。在容器中定义的组建
叫做容器的孩子。Adobe提供了多种容器。

Flex应用程序的根是一个容器，叫做Application容器，代表整个Flash Player绘图工作面。这个Application容器持有全部其他容器和组件。

容器预定义了控制其孩子们的布局的规则，包括尺寸和位置。Flex通过定义布局规则来简化RIA的设计和实现，并且提供了足够的灵活性。

关于容器布局
容器预定义了导航和布局规则，所以你不需要在这些方面浪费时间，从而可以将精力集中在为用户提供服务。Flex提供了可以让你快速简捷地开发具有丰富功能和交互性应用程序的结构。通过标准的用户交互规则，你的用户不用将时间耗费在琢磨如何在程序中导航，从而可以专注于程序所提供的服务内容。

不同的容器支持不同的布局规则：

1.除了Canvas容器外的全部容器都支持自动布局。使用这种布局方式，你不需要定义孩子在容器中的位置，而是通过选择容器类型、设置孩子在容器中的次序、定义例如gaps的属性，以及使用像Spacer这样的容器来控制孩子的位置。

2.Canvas容器使用绝对布局，Application和Panel容器也可以使用这种布局。使用绝对布局时，你需要显式定义孩子的x和y坐标，或者，你可以使用基于限定的布局。
绝对布局提供了比自动布局更高级别的对尺寸和布局的控制。

关于布局容器和导航容器
Flex定义了两种容器：
布局容器 控制在容器中定义的子控件和子容器的尺寸和布局。例如，一个Grid空间在一个类似HTML表格的布局中控制孩子的尺寸和位置。布局容器还包含一些图形元素来赋予其特定的外观或呈现其功能。

导航容器 联合多个子容器控制用户的活动或导航。单独的子容器控制其孩子的布局和位置。

使用容器

容器的矩形区域封装了它的内容区，即包含其子组件的区域。包围在内容区之外的范围的尺寸由容器的补丁和容器的边框定义。一个容器有顶部、底部、左侧和右侧补丁，每个补丁都可以设置为一个以像素为单位的宽度。容器还有可以让你设置类型和宽度的属性。 如下图：


A：左侧补丁 B：右侧补丁 C：容器   D：内容区域 E：顶部补丁 F：底部补丁

类继承结构

使用容器事件
事件概览
下列事件只被容器调度：
childAdd 在孩子被添加到容器后调度
childRemove 在孩子从容器中移除前调度
childIndexChange 在孩子在容器中的索引发生变化时调度
scroll 在用户手动滚动容器时调度
前三个事件被容器的每个孩子调度，最后一个事件当容器滚动时调度。

下列事件只被Application容器调:
applicationComplete 当程序被初始化，经过LayoutManager处理，并添加到显示列表(display list)后调度。这是在程序启动过程中被调度的一系列事件中的最后一个。
error 当程序中一个未被捕获的错误发生时调度
add 当组件被添加到容器，且父子处于一致状态时由被添加的组件调度。这个事件在容器的childAdd事件之后调度。
remove 当组件从其父容器中移除时，由被移除的组建调度。这个时间在容器的childRemove事件之后调度。

一些事件可以被所有组件调度，但是对于容器需要特别注意，特别是那些导航容器，例如TabNavigator，因为当容器被创建的时候，一些孩子也许并没有被创建。这些事件包括：
preinitialize 当组件被添加到父容器，且在组件被初始化，或任何其孩子被创建前调度。
initialize 当一个组件完成其自身构造，并且其初始化属性被设定时调度。在这个时间点，所有组件的直接子组件都已被创建（至少已经调度了自身的preinitialize事件），但是还没有被安排布局。确切的initialize事件的调度时机由容器的创建策略(creation policy)决定。
creationComplete当组件以及其全部子组件，以及子组件的全部孩子....（以此类推）被创建、排布，且可见时调度。

关于创建策略
容器有一个creationPolicy属性定义了孩子何时被创建。默认的，容器的创建策略为ContainerCreationPolicy.AUTO，也就是说容器会延迟创建子组件，直到它们需要被创建。容器默认的创建策略来源于其父容器的初始化策略，Application容器有一个默认的ContainerCreationPolicy.AUTO创建策略。

自动创建策略可以提供最短的启动时间，因为只有一部分组件在最初被创建。对于像ViewStack,TabNavigator和Accordion这样的导航容器，ContainerCreationPolicy.AUTO创建策略意味着容器会立即创建其直接子组件，但是会知道需要时才会创建直接子组件的下级组件。其结果是，只有最初需要的子组件会在预初始化舞台时被处理。

关于initialize和creationComplete事件
当一个容器添加了全部直接子控件，并且容器最初需要的子组件都被调度了preinitialize事件后，Flex将为其调度initialize事件。

当一个容器或控件调度了initialize事件，容器或控件的初始属性将被设定，但是宽度和高度，以及位置尚未被计算。initialize事件用于配置容器的子组件。例如，你可以使用容器的initialize时间来编程地添加孩子或设定容器滚动条的样式。你可以使用一个容器或组件的initialize事件来为控件初始化数据提供者(data provider)。

当容器最初需要的子组件，包括自组建的孩子全部被处理并且绘制在屏幕上时，Flex将为那个容器调度creationComplete事件。例如，如果你必须获得孩子的尺寸和位置，可以创建一个creationComplete事件的监听器。不要将creationComlete事件用于设定布局属性的活动，否则将增加额外的处理时间。

为了更好地理解Flex调度事件的顺序，请考虑下面的程序概要：

Application
    OuterVBox
        InnerVBox1
            InnerVBoxLabel1
        InnerVBox2
            InnerVBoxLabel2

容器和控件的preinitialize,initialize以及creationComplete事件将按照下列顺序被调度。

OuterVBoxpreinitialize
    InnerVBox1Preinitialize
        InnerVBox1Labelpreinitialize
        InnerVBox1Labelinitialize
    InnerVBox1initialize
    InnerVBox2preinitialize
        InnerVBox2Labelpreiitialize
        InnerVBox2Labelinitialize
    InnerVBox2initialize
OuterVBoxinitialize
        InnerVBox1LabelcreationComplete
        InnerVBox2LabelCreationComplete
    InnerVBox1creationComplete
    InnerVBox2creationComplete
OuterVBoxcreationComplete

注意：对于终端控件，例如Label控件，在preinitialized后会立即initialize。对于容器，预初始化从最外层容器开始，并且进入第一个分支对该分支同样进行preinitialized，在退出该分支时执行initialize。这个过程将会继续进行，直到所有的初始化工作完成。之后，creationComplete事件将首先在叶节点被调度，然后是他们的父容器，以此类推，直到application调度creationComplete。

如果将OuterVBox容器改成一个具有ContainerCreationPolicy.AUTO创建策略的ViewStack，如下：

Application
    OuterViewStack
        InnerVBox1
            InnerVBoxLabel1
        InnerVBox2
            InnerVBoxLabel2

则事件调度的顺序如下所示：

OuterViewStackpreinitialize
    InnerVBox1preinitialize
    InnerVBox2preinitialize
OuterViewStackinitialize
       InnerBox1Labelpreinitialize
       InnerBox1Labelinitialize
    InnerVBox1initialize
        InnerBox1LabelcreationComplete
    InnerVBox1creationComplete
OuterViewStackcreationComplete

在设个例子中，第二个VBox只是被preinitialize，旖旎为它没有被显示。注意，当一个导航容器调度initialize事件时，它的孩子们存在且被调度了preinitialize事件，但是孩子们并没有被调度initialize事件，因为它们还没有创建自身的孩子。

initialize事件可用于具有ContainerCreationPolicy.AUTO创建策略的导航容器的直接子容器。例如，默认的，当一个ViewStack被初始化，第一个显示的子容器会调度initialize事件。然后，当用户转移到每个额外的子容器时，initialize事件会被那个子容器调度。

  <mx:Script>
    <![CDATA[
      import mx.controls.Alert;
      public function pane2_initialize():void {
        Alert.show("Pane 2 has been created.");
      }
    ]]>
  </mx:Script>
  <mx:Accordion width="200" height="100">
    <mx:VBox id="pane1" label="Pane 1">
      <mx:Label text="This is pane 1."/>
    </mx:VBox>
    <mx:VBox id="pane2"
      label="Pane 2"
      initialize="pane2_initialize();">
      <mx:Label text="This is pane 2."/>
    </mx:VBox>
  </mx:Accordion>

使容器失效
所有容器都支持enabled属性。默认的，这个属性被设置为true，使用户可以与容器和容器的子组件交互。如果设置enabled属性为false,Flex将淡化容器和所有子组件的的颜色，并且阻塞哟农户对容器和所有子组件的输入。

使用Panel容器
一个在Flex程序中进场使用的容器是Panel容器。P典型的，你使用有一个Panel容器来封装自包含的容器模块。

定义默认按钮
可以使用defaultButton睡醒呢个来定义一个默认的Button空间。在容器的任何控件上按下回车键都会激活那个默认按钮，就像直接选择了它一样。
  <mx:Script>
  <![CDATA[
    public function submitLogin():void {
      text1.text="You just tried to log in.";
    }
  ]]>
  </mx:Script>
  <mx:Panel title="Default Button Example">
    <mx:Form defaultButton="{mySubmitBtn}">
      <mx:FormItem label="Username:">
        <mx:TextInput id="username" width="100"/>
      </mx:FormItem>
      <mx:FormItem label="Password:">
        <mx:TextInput id="password" width="100" displayAsPassword="true"/>
      </mx:FormItem>
      <mx:FormItem>
        <mx:Button id="mySubmitBtn" label="Login" click="submitLogin();"/>
      </mx:FormItem>
    </mx:Form>
    <mx:Text id="text1" width="150"/>
  </mx:Panel>

使用滚动条