第13章 界面布局.ppt

1、13.1什么是容器，什么是容器？举个简单的例子，我们用来吃饭的碗和用来保鲜的保鲜盒都可以叫做容器。它们可以储存食物。在用户界面中，还需要这样的容器来存储界面中的各种组件。我们有各种各样的碗和保鲜盒来满足不同食物的需要，如水平放置、垂直放置和堆叠。在用户界面中，明亮的容器也用于满足不同组件的放置要求。因此，Flex提供了各种容器来满足不同的接口需求。在容器中，您不仅可以放置控件，还可以放置容器或自定义组件。容器中的所有组件都称为容器的子组件，必须遵循容器的布局规则，如水平或垂直放置。Flex中定义的容器分为布局类容器和导航类容器。下面描述如何使用这两个容器。13.1.1布局类容器类似于超文本标记

2、语言页面，将组件平放在容器平面上。在图中，显示了一些布局类容器，包括盒子容器、画布容器等等。13.1.2导航类容器，类似于在超文本标记语言窗口之间切换。在Flex中，整个应用程序被加载到一个浏览器页面中。很多时候，一页不能满足需求，经常需要多页。在这种情况下，您可以使用导航类容器在浏览器页面中切换Flex的页面。导航容器的优点是用户在切换页面时不需要与服务器通信。它不再像在超文本标记语言中那样，你可以在与服务器通信后打开一个新的窗口链接。导航容器不仅加快了浏览速度，而且有效地节省了页面空间。该图显示了三种导航类容器，即视图堆栈导航器、选项卡导航器和从左到右的级联导航器。13.1.3使用容器。F

3、lex中的所有容器都使用矩形区域，容器中的组件必须位于矩形区域中。灵活容器可以分为三种布局规则：水平布局、垂直布局和绝对布局。水平和垂直定位自动水平或垂直排列组件。绝对定位方法使用x和y坐标来定位组件，因此组件可以放置在容器中的任何位置。画布容器只能绝对布局，应用程序和面板容器可以绝对或水平或垂直放置。盒子、表单容器等。只能水平和垂直放置。创建容器时，可以使用布局属性定义布局模式，即垂直垂直布局、水平水平布局和绝对布局。13.1.4容器中的事件不仅可以触发控件中的事件，还可以触发容器组件中的事件。容器组件可以触发的事件如下。ChildAdd:当组件添加到容器中时，会触发此事件。ChildRem

4、ove:当容器中的组件被删除时，会触发此事件。ChildIndexChange:当一个组件被添加到一个容器中时，它将被赋予一个序列号。当序号改变时，事件被触发。滚动：当容器不能完全显示所包含的组件时，可以通过滚动条查看。使用滚动条查看时会触发此事件。预初始化：当容器中的组件与容器相关联时，会触发此事件。此事件发生在组件初始化之前，或者创建容器中的任何组件时。初始化：当容器被结构化并且其属性被初始化时，该事件被触发。触发此事件时，将创建容器中的所有静态组件，但它们不会显示在布局中。此事件通常用于定义容器中组件的初始属性和数据。创建完成：容器创建。根据容器及其组件的定义，Flex完整地创建了容器及

5、其包含的组件，并使它们呈现可视化状态。事件在初始化后发生。13.2应用程序容器，Flex中的应用程序从应用程序容器开始，应用程序中的所有组件(包括容器和控件)都安装在应用程序容器中。对应于应用程序容器的MXML标签为。在前一章的控件应用程序中，应用的MXML代码以思想开始，以思想结束。因此，在学习容器时，我们应该首先学习应用程序容器。创建应用程序时，需要根据需求定义应用程序的大小，即浏览器中显示的应用程序的大小。定义容器大小有两种方法：百分比和特定值。当使用百分比时，当用户缩放浏览器时，应用程序也将缩放，而不影响查看效果。在以下示例中，百分比用于定义应用程序容器，以便它占据整个浏览器区域。如图

6、13.3箱式容器所示，在箱式容器中，组件水平或垂直放置在容器中，但所有组件都放在一行中。如果长度超过容器的宽度或高度，它就不能自动包装。箱式容器包括以下三种类型。水平箱式容器(HBox容器):组件水平放置在容器中。垂直VBox容器：组件垂直放置在容器中。箱式容器：可以根据容器的属性定义布局方向。如果设置为垂直，则容器与垂直箱式容器相同。如果它是水平的，它就像一个水平的盒子容器。水平盒容器和垂直盒容器都继承了对应于盒容器的mx.containers.Box类，所以mx.containers.Box类的属性是这三个容器的共同属性。箱式容器的常见属性如表所示。13.3.1水平箱式容器，其中所有组件从

7、左至右排列，如图所示。对应于水平箱式容器的MXML标签为。使用时，必要时插入标签并定义相应的属性。在容器中添加组件时，在标签区域添加所需组件的定义。容器按照组件标签出现的顺序显式显示组件。13.3.2立式箱式容器。立式箱柜的原理与卧式箱柜相似。不同之处在于组件是垂直排列的，即从上到下，如图所示。13.4画布容器，画布容器比盒子容器自由得多。盒子容器中的组件必须根据盒子的规则水平或垂直创建，但是画布中的组件可以随意放置，如图所示。13.4.1创建一个画布容器，画布容器的MXML标签为。创建画布容器时，插入之后，可以在容器内定义组件。但是，必须注意的是，画布中的组件是由X和Y坐标定位的。如果未定义

8、X和Y坐标，组件将显示在容器的右上角(即，X=0，Y=0)。以图13.9为例，介绍如何创建一个画布容器。图13.9中的代码如下所示。13.4.2动态改变组件的位置，由于画布容器中采用了绝对定位的方法，可以通过改变组件x和y的坐标来动态改变组件的位置，如图和图所示。13.5分隔盒容器，分隔盒容器也可视为盒容器。除了在盒子内部，在盒子的每个组件之间添加了一个分隔线，如图所示。如图所示，两侧的组件可以通过分频器进行缩放。13.5.1、水平分隔盒，水平分隔盒容器中的组件水平排列，相邻组件之间有隔板。用户可以拖动分隔线来改变水平方向上相邻组件的宽度。如图13.14所示。对应于水平分隔框的MXML标签为。

9、使用容器时，将标签插入代码中，然后将组件标签插入框中。图13.14中的代码如下所示。13.5.2垂直分离的盒子，垂直分离的盒子容器类似于水平分离，区别在于垂直分离的盒子中的组件是垂直放置的，即从上到下。将图形改为垂直放置，13.5.3组合使用单独的方框。有时，有必要一起使用水平分隔框和垂直分隔框，如图所示。13.6表单，表单容器通常用于填写和显示大量信息，如用户注册。如图所示。XX用户注册可以称为表格标题。标题下的每一行中的显式组件可以称为表单项。13.6.1表容器标签，对应于表容器的MXML标签为。表格容器分为两部分：标题和表格项目。在Flex Builder的设计模式中，您可以看到每个条目

10、都是垂直对齐的，如图所示。这样，添加组件时，无需重复定义对齐组件的高度和宽度坐标值。13.6.2表头，表头对应的MXML标签为。您可以使用标签属性定义标题的内容，如图中的XX用户注册。创建标题时，在表控件的标签中添加一个标签，然后将显示的内容作为lebel属性值。该图的表头代码如下。13.6.3条目，与该条目对应的MXML标签为。标签还包含用于定义条目名称的标签属性，如“用户名”。同时，方向属性可用于定义条目中组件的排列顺序。您也可以将一个项目视为一个有自己布局规则的容器，类似于一个盒子容器。图中的用户名条目可以定义如下。13.6.4要创建表格容器，您需要先添加标签，然后根据需要添加标题和项目

11、标签。标题是可选的，不能定义。下面以图形为例说明如何创建表控件。该图包括一个标题和五个表项，所以在MXML，首先插入五个标签，然后定义它们的属性。图表的代码如下所示。13.6.5使用默认按钮，用户可以使用键盘完成信息写入，而无需在鼠标和键盘之间来回切换。在表容器中，可以通过使用defaultButton属性来定义defaultbutton。填写完信息后，用回车键完成信息提交，图形用回车键代替鼠标点击。默认按钮属性只能在中定义。13.6.6在表格中使用“*”。填写项目时，出于安全原因，一些必须填写的内容可以用“*”表示。在Flex中，“*”位于解释性文本和文本输入框之间，如图所示。13.6.7为

12、了验证用户输入的数据，当用户输入用户名、密码等信息时，必须按照系统的规定进行输入，例如，密码必须包含数字和字母。因此，在用户输入之后，有必要验证用户输入的数据。当使用其他页面语言(如JSP)实现该功能时，数据验证由服务器端程序处理。这样，在填写完信息后，用户首先将信息提交给服务器，然后服务器返回信息是否符合要求，这使得整个提交过程冗长乏味。在Flex中，数据的验证可以通过Flex提供的验证组件来实现。Flex内置了八种数据验证器，用于验证字符串、日期、电子邮件、信用卡信息、社会安全号码、邮政编码、号码和电话号码。在用户输入信息之后，根据应用程序中定义的验证器对信息进行验证。在图中，当用户输入的

13、密码少于4位数字时，将出现红色警告信息。13.6.8收集表格中的信息。由于表单通常用于用户注册，因此在填写完信息后，有必要将信息提交给服务器进行记录。当信息量很大时，通常需要收集所有要提交的信息。图中所示的示例利用表容器的特性来收集信息，并收集所有注册信息，然后以XML格式将其发送到服务器。13.7网格容器，按行和列排列组件。网格容器的最小单位是网格单位，图中的链接16、文本输入框和按钮都放在网格单位中。13.7.1网格容器标签，与网格容器对应的MXML标签为。在栅格容器中，有两个部分：行和每行中的像元。图中的链接13在同一行，每个单元是一个链接按钮。对应于该行的MXML标签为，对应于该单元格

14、的MXML标签为。定义网格单元时，有些组件需要占用一个以上的单元或一个以上的列单元，占用的行数和列数可以通过行跨度和列跨度属性来定义。使用栅格容器时，组件会自动按行和列对齐。在Flex Builder的设计模式中，您可以看到组件被放置在网格的单元边界内。如图所示。13.7.2创建栅格容器。创建栅格容器时，插入标签，定义栅格的列，然后在栅格的列中定义栅格单位。以下是如何创建栅格容器的示例。该图分为3行3列。首先，创建第一行标签，然后在第一行中添加三个网格单元，然后在网格单元中添加链接按钮控件。13.8面板容器，面板容器是上述章节中最常用的容器。容器包含标题栏、标题和边框，如图所示。13.8.1面

15、板容器标签，面板容器对应的MXML标签为，包括以下三种布局模式。垂直布局模式：类似于垂直框。容器中的组件从上到下排列。水平布局模式：类似于水平框。容器中的组件水平排列。绝对布局模式：采用绝对定位方式。类似于帆布容器。选择模式时，只需定义布局属性，该属性定义为上述三种模式之一。13.8.2创建面板容器。创建面板容器时，插入标签并在标签中定义组件。以下是如何创建面板容器的示例。在图中，只显示了最简单的面板容器。将其直接插入应用程序，并定义高度和宽度等属性以完成创建。图形代码如下所示。13.9控制栏，通常与面板容器一起使用，以实现面板中的组件共享控制栏中的组件。当面板中的组件超过容器大小时，您需要使

16、用滚动条来查看它们，并且控制条不会随着滚动条一起滚动。通用控制条放置在容器的底部，并与整个容器集成在一起。链接和按钮所在的区域是控制栏，如图所示。13.10应用程序控制栏，类似于控制栏。应用程序控制栏通常用于为整个应用程序提供全局控制。应用程序控制栏通常位于整个应用程序页面的顶部，它与整个应用程序集成在一起，如图所示。13.11平铺容器，其中组件按行和列排列。如果组件超出容器的水平或垂直范围，容器会自动将组件更改为下一行或下一列，如图和图所示。13.11.1瓦容器标签，对应于瓦容器的MXML标签是，其通用属性如下表所示。13.11.2创建图块容器。创建平铺容器时，插入标签，定义容器的方向和其他属性，并在容器中添加组件。以图13.29为例，介绍如何创建切片。在图13.29中，组件水平排列。因此，方向属性是水平的。每个平铺单元都是一个链接按钮组件。图13.29中的代码如下所示。13.12标题窗口容器，基于面板容器，类似于弹出窗口，可以在程序运行时动态弹出。在图中，单