一步一步学Flex 3系列(3) 界面布局
FLEX3版本发布了，无论从ActionScript3还是Air都给我们带来了很多的惊喜，全面支持AIR、代码重构、内存和性能分析器 (profilers)、高级Datagrid组件、Web service introspection Web服务的内省一系列新特性更是给我们带来了不少惊喜。《一步一步学Flex 3系列》文章将从Flex3基础知识、数据与通信、自定义控件、动画、图形图像等几个方面带您快速进入Flex3的开发。
本文为系列第五篇创建一个基本的FLEX 3应用在本篇内我们将详细认识系列布局控件及其样式.
容器是Flex的一大特色,跟许多GUI系统特别是面向对象程序中的GUI一样Flex的控件从功能上大致分为两种 容器(主要用于控制布局) 组件(控件,提供GUI实质的功能处理),使用容器分层次管理GUI是当前的趋势,Flex也使用了此种方式,主观上我们认为它把我们界面上的组件通过容器进行了分组或分类布局管理
上图为 整个Flex容器控件体系 摘自:Flex第一步-基于ActionScript 3.0和Flex 2应用开发
Application 布局控制
Application 是一个特殊的容器,位于界面元素层级的根部,它包含了整个程序中的所有元素,因此控制它的布局显示得尤为重要.
Application 标签中有三个属性与布局息息相关,分别是:Layout,horizontalAlign,verticalAlign,其中layout起决定作用,另外两个受制于它
layout 有三种可选值: absolute vertical horizontal
absolute 时 horizontalAlign,verticalAlign 属性均不起作用,界面上的元素均通过 坐标来定位 即前面课程提到的 x y 属性。
vertical horizontal 时元素的位置由 horizontalAlign,verticalAlign 这两个属性来控制。
下面看一下三种方式产生的效果图。
当layout="absolute" 时 未指定 子级元素控件 x y 属性导致界面混乱的情况
layout='absolute'的情形 在 子级元素指定了 x y属性后的情况
layout="horizontal" 的布局情况
layout="vertical" 时布局情况
layout='vertical' horizontal的情形
并且可以看到 horizontalAlign是在水平方向上的对齐方式 verticalAlign是垂直方向上的对齐方式
如果你熟悉CSS的话,定会对 padding特别熟悉,不错它和CSS中表达的含义相同,即到各个边距的距离
Canvas VBox HBox 局布布局控制
Canvas 是我们经常使用的容器,放在 Canvas 中的组件只能用 x y来定位,
发生重叠的情形
通过上图我们可以看到 包含在 Canvas 容器中的三个按钮发生了重合,因为默认它们的x y 均为 0,上图中亦可看到我们为Canvas 指定的边框样式.
VBox HBox 都是Box的子类,和Canvas相比,Box对子级元素采取规则的布局方式
VBox采用垂直方式布局 HBox采用水平布局
通过上图可以看到按钮的不同排列方式,并且它们的x y属性均已经无效
DividedBox 分割界面
DividedBox继承自Box类,它也有两个子类:HDividedBox和VdividedBox。和Hbox,VBox相似,它们也只是对包含的子级元素的布局方向不同,不过不同的是它多了一个功能,那就是在子级元素之前
增加了一个可以手动的分割块,可以在程序运行时控制附近元素的长宽.
窗口布局
Panel
Panel具有Canvas HBox VBox的所有功能,如果Panel的layout属性值为 absolute则Panel对子级元素的布局方式和Canvas一样
当为 horizontal时则相当于 HBox 为vertical时则相当于VBox
并且可以为 Panel指定标题.
TitleWindow
TitleWindow继承自Panel,与Panel相比,它只多了一个对象,那就是关闭按钮,通过 TitleWindow close事件触发该按钮的单击事件
它并不会自动将TitleWindow本身关闭,而是通过我们为该事件所写的代码决定
上图我们可以看到该关闭按钮所起的效果则是弹出一对话框
上图我们则实现了TitleWindow关闭(其实是不可见).
动态控制对象的布局
Tile
Tile组件直接继承自Container,它使用起来非常方便, Title标签的 direction属性值为 horizontal其子级元素的布局方向为水平方式tileWidth 和tileHeight属性用来控制每一个子级对象的长和宽,我们可以看到它的优势在于大批量的相同大小的控件布局.
Grid
在Tile容器中我们很难将其子控件大小精确控制每一行的对象个数。使用Grid组件可以解决这个问题
Grid组件继承自Box它非常类似于 HTML中的表格由若干行组成,每行包含若干个单元格,每个单元格可以包含其他无素,行必须为GridRow对象 每个单元格必须为GridItem对象.GridRow和
GridItem都继承自HBox,跟HTML中的Table一样,单元格回文诗有以下两个属性colSpan rowSpan 前都为单元格横向格数(跨度)后者则为纵向行数．
从图中我们对进行的边框样式描绘,很清晰的看到Grid容器的布局功能
导航容器
Accordion
Accordion是一个可折叠的导航器,它跟我们平常所说的OutLook Bar效果是一样的
从上图中我们可以看到Accordion的子级元素均为 容器
ViewStack
ViewStack导航容器由若干重叠在一起的子容器组成,每次只有一个容器是可见的,我们可以通过ActionScript来进行控制或与其它控制类容器联合使用
我们可以看到要想让我们需要的子容器显示出来,我们可以通过两种方式 一种是指定 ViewStack的 selectIndex值 子容器的下标由0开始,另一种是指定 selectChild当然这种情况需要指定子容器的id
TabNavigator
TagNavigator导航容器跟ViewStack差不多，但是其提供了Tab选项卡导航,不需要我们用代码实现子容器的显示.
表单布局
在Html中表单使得前后台交互成为可能,在Flex中提供了一套表单组件,让我们可以方便的构建复杂的表单程序,相关的组件还有 FormItem的FormHeading
结束语
相信现在各位朋友已经对Flex界面整体有比较清晰的认识了,由于作者水平有限,如果发现问题及与我联系．
稍后我们会提供一个 DataGrid较详细的示例文章．