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>

7.3.7 格栅布局容器（Grid Layout Container） 在MXML中，使用<mx:Grid> 标签定义格栅布局容 器。格栅（Grid）容器是非常有效的布局容器， 可以对子类进行行和列的排列，类似于Word中的 表单。在一个3x3格局格栅中，共有九个单元的格 栅容器。其横向称为格栅行，其纵向称为格栅列， 每一个小格称为格栅单元，在每个格栅单元中可 放入零个或一个子类容器，并且在子类容器中再 添加子类组件。
在MXML中，使用<mx:ControlBar>标签定义控件条 布局容器。控制条布局容器可以使编程者在面板 或弹出的窗口的底部定义一个区域，并添加各类 控件。在MXML程序中通常将此标签放在面板或弹 出窗口的最下面，其语法句式如下： <mx:ControlBar> 子类标签 </mx:ControlBar>
7.3 布局容器（Layout Container）
在Flex中，布局容器通过它继承的结构来布局，格式化子 类组件。在这一节我们将讲述布局容器的特点和它们的用 途。布局（Layout），就是在Flash画面上定义一个长方形 的区域，并控制它的子类的尺寸和位置。使用布局容器非 常容易，首先编程者建立一个容器，然后在其中加入子类 组件来实现功能应用。Flex提供了以下的布局容器。 画布（Canvas）布局容器 盒子（Box），水平盒（HBox），垂直盒（VBox）布局容器 控制条（ControlBar）布局容器 应用控制条（ApplicationControlBar）容器
7.3.6 表单，表单头，单元格布局容器（Form, FormHeading and FormItem layout Container）
表单是网页最常用来收集用户信息的模式。与 HTML的表单相似，Flex也提供表单来方便编程者 设计收集数据的页面。 在MXML中，使用<mx: Form > 标签定义表单容器， <mx: FormHeading > 标签定义表单头，使用<mx: FormItem > 标签定义单元格，
7.3 布局容器（Layout Container）
分离盒（Divided Box），水平分离盒 （HDividedBox），垂直分离盒（VDividedBox） 表格（Form），表格头（FormHeading），表格细 目（FormItem）布局容器 格栅（Grid）布局容器 面板（Panel）布局容器 排列（Tile）布局容器 标题窗口（TitleWindow）布局容器 下面我们分别讲述每个容器。