Flex从入门到精通 第7章

7.1.3 Flex的分类
Flex容器按其使用方式又可分为两类：布局 （Layout）和导航（Navigator）。 1．布局容器（Layout Container） 这类容器用于对子类组件定位和限定尺寸。 2．导航容器（Navigator Container） 这类容器用于控制用户的对多个子类容器的导航、 转移。
7.4.3 折叠导航容器（Accordion navigator Container）
在MXML中，使用<mx: Accordion > 标签定义折叠导航容器。折叠导航容 器建立一系列的面板，依次叠加起来。每个面板的头就是它的导航按钮。 点击任何一个按钮就会打开相应的面板。折叠导航容器有一个非常好的应 用实例。在HTML网页中，购物往往需要几个页面来完成。用户填写完一个 页面，提交之后，再填写下一个页面，直到完成。折叠导航容器，可以将 几个页面分置在其几个单独面板中，填写完成后，统一提交。也可以在不 同的面板分置不同种类的商品目录。 在折叠容器中，每个层面只能容纳一个子类，其语法句式如下： <mx:Accordion 属性 样式 事件 > 子类标签 </mx:Accordion >
7.4 导航容器（Navigator Container）
导航容器是用来控制一组子类容器的移动，导航。 导航容器只定义子类容器的顺序，不定义子类容 器的布局和定位。导航容器中的子类，必须是容 器，而不是控件组件。 Flex提供了以下的导航容器: 视窗堆栈导航容器 标题头导航容器 折叠导航容器
7.3.2 盒子，水平盒子，垂直盒子布局容器（Box, HBox, VBox Layout Container）
盒子容器的是在水平或垂直方向上按序排列子类 组件。其语法句式如下： <mx:Box 属性 样式 > 子类标签 </mx:Box>
7.3.3 控制条布局容器（ControlBar layout Container）
7.3.1 画布布局容器（Canvas layout Container） 在MXML中，使用<mx:Canvas> 标签定义应用画布容器。画 布容器的最特别的地方就是它允许Flex自动布置子组件。 通过给出x，y的数值来给子组件定位。其语法句式如下: <mx:Canvas> 子类标签 </mx:Canvas> 画布下面是两种不同定位方式。 1．画布使用绝对值定位（Absolute Positioning） 2．画布使用约束版面布局（Constraint-based Layout） 3．画布子类可重叠的特性（Overlapping Children）
7.3.8 面板布局容器（Panel layout Container）
无论在Flex还是Java中，面板（Panel）都是最常用的一类 容器。在MXML中，使用<mx:Panel> 标签定义面板布局容器。 Flex的面板拥有题头，题目，周边，以及嵌入子类的内容 部分。在面板中可以定义layout属性来改变布局。面板可 以定义三种方式：水平（horizontal）, 垂直 （vertical）, 精确（absolute）。其语法句式如下： <mx:Panel 属性 样式 事件 > 子类标签 </mx:Panel>
7.1 什么是容器
简单的说，容器就是一类组件在其内部能够容纳 其子类的组件。在Flex的容器中，编程者可以控 制子类组件的布局，改变它们的大小和位置，或 者可对多个子类组件导航。Flex的容器基本分为 两大类：布局容器和导航容器。
7.1.1 容器简介
Flex语言提高了非常多样化的容器。其中，最基本的容器 是应用（Application）容器。它类似于Java中Swing的 Frame，它可以容纳所有其他的容器。每一个容器都定义一 个长方形的区域，其中包含其子类容器和控件。Flex中的 容器包含盒子、面板、列表以及导航类容器。每个容器都 预先对子类的尺寸和位置都有规定和定义。同时，Flex语 言又有足够的灵活性，允许用户建立形形色色的富网络应 用程序。 由于Flex众多的容器预设定了多样化的导航和布局规则， 所以在使用起来往往是事半功倍。编程者不需花费大量的 时间去调整页面布置。而且这些标准化组件的统一使用规 则，也使得用户在使用时得心应手。
在MXML中，使用<mx:TitleWindow> 标签定义弹出窗口布局 容器。弹出窗口是用来定义弹出窗口的容器。它具有题目 条，边框和容纳子类组件的内容区域。并且可在其右上角 显示一个关闭的按钮（“x”的标记）。弹出窗口可以在浏 览器中被拖动。弹出窗口的典型用法是显示一个表格，可 供用户填写信息。其语法句式如下： <mx:TitleWindow 属性 事件 > 子类标签 />
7.3.5 分离盒，水平分离盒， 垂直分离盒容器（Divided Box，HDividedBox and VDividedBox）
分离盒类似于盒子，在水平和垂直的方向排列子 类容器。除了它拥有一个可用鼠标拖动的分离标 志，其作用在于可以任意调整子类容器的大小。 在MXML中，使用<mx: DividedBox > 标签定义分 离盒容器，使用<mx: HDividedBox > 标签定义水 平分离盒容器，使用<mx: VDividedBox > 标签定 义垂直分离盒容器。 类似于盒子（Box），水平分离盒（HDividedBox） 和垂直分离盒（VdividedBox）是在分离盒定义方 向（direction）的属性。就是说 <mx:VDividedBox/>标签与<mx:DividedBox direction="vertical"/>是一样的。
7.3.9 排列模板布局容器（Tile layout Container）
在MXML中，使用<mx:Tile> 标签定义排列模板布 局容器。排列模板（Tile）容器将子类按顺序排 列在类似格栅的横平竖直的单元格中。不同的是， 当一行放满是会自动换到下一行。
7.3.10 弹出窗口布局容器（TitleWindow layout Container）
7.3.4 应用控制条布局容器（ApplicationControlBar layout Container）
在MXML中，使用<mx:ApplicationControlBar>标 签定义应用控制条布局容器。应用控制条容器是 控制容器的子类。不过它具有不同的外观和性能， 可以包含许多的控制组件，其语法句式如下： <mx:ApplicationControlBar 属性 样式 > 子类标签 </mx:ApplicationControlBar>
7.4.2 列表导航容器（TabNavigator Container） 在MXML中，使用<mx:TabNavigator> 标签定义列 表导航容器。列表导航容器是建立和管理一组列 表（tabs），每一个tab都标记一个子类。同样其 子类也必须是容器。选择不同的列表，就打开相 应的子类容器。列表导航容器是视窗堆栈导航容 器的子类，它继承了视窗堆栈导航容器的多数功 能。其语法句式如下： <mx:TabNavigator 样式 > 子类标签 </mx:TabNavigator>
7.2.2 应用对象简介
Flex在MXML文件中使用<mx:Application>标签定 应用对象。通常应用程序只有一个应用对象作为 根。应用对象具有以下特点。 应用对象是MXML文件具有<mx:Application>标签。 绝大多数情况下，Flex只有一个应用对象。 根应用文件就是第一个加载的文件。 应用对象一般是文本对象，但文本对象不一定是 应用对象。 通过mx.core.Application.application路径，我 们可以在程序的任何地方找到根的应用对象。
7.1.2 Flex容器的定位方式
Flex容器按其定位方式可分为两类：自动 （Automatic）布局和精确（Absolute）布局。 1．自动布局 除画布（Canvas）之外，Flex所有的容器都支持 自动（Automatic）布局。 2．精确布局 画布（Canvas）容器、应用（Application）容器 和面板（Panel）容器都支持精确（Absolute）布 局。
第7章 基础知识：容器（Container）
容器（Container）顾名思义就是一个盛东西的盒 子，而实际上也是如此。如果把每一个应用组件 看成是味道不同的水果，现在需要一个水果篮把 它们分门别类的装好。而且用户不光有一种格局 的篮子，可以有很多不同的篮子来摆放水果，好 让它们看上去更美好。这就是为什么Flex提供给 编程者最多样化的容器。本章将具体讲解这样漂 亮的篮子的特点和使用方法。
7.2 应用容器（Application Container） 应用容器是Flex定义的最基本的组件，是用于布 局的容器，它好比是盛装所有容器的大盒子。在 它的基础上，编程者开始进行子类组件和控件的 添加。
7.2.1 应用容器简介
在MXML中，使用<mx:Application> 标签定义应用 容器组件，其语法句式如下： <mx:Application 属性 样式 事件 /> 1．应用容器默认特点 2．应用容器的默认属性（Properties）
7.4.1 视窗堆栈导航容器（ViewStack navigator Container）
在MXML中，使用<mx:ViewStack> 标签定义格栅布局容器。 视窗堆栈容器顾名思义就是将一组子类容器从上到下堆栈 起来，每次只有一个容器可视，可活动(active)。视窗堆 栈容器必须使用链结条（LinkBar）， 标题头条 （TabBar），按钮条（ButtonBar），切换按钮条 （ToggleButtonBar）来控制，选择子类容器。 其语法句式如下： <mx:ViewStack 属性 样式 事件 > 子类标签 </mx:ViewStack>