Adobe Flex 快速入门（二）

界面的布局

所有在flex中的布局都是基于容器的，我们前面创建的应用含有标签<mx:Application>，就是一个容器。每一种容器都有一定的规则，这些规则决定了容器中的字标签怎样布局，下面介绍常见的容器和它们的布局规则。

VBox
子元素垂直布局；每一个子元素都被画在前一个元素的下面。

HBox
子元素水平布局，每一个子元素都被画在前一个元素的右面。

Canvas
子元素按照开发人员指定的XY坐标布局。如果没有坐标定义，所有元素被画在容器的左上角。

Application
能够通过layout属性被设置为VBox, HBox, 或 Canvas 布局。

Tile
子元素按照一个或多个垂直列或水平行布局，必须开始于一个新行或列。所有的Title容器单元是一样大小。Flex使用方格排列title容器的单元格，每个单元格放置一个元素，direction属性决定了布局格式。

Panel
Box容器的子类，Panel容器可以通过layout属性成为HBox, VBox, 或 Canvas容器，默认为Canvas容器。Panel也提供一个标题条，能显示一个标题信息。

ControlBar
容器用于驻泊一个工具条，含有按钮的Panel容器或TitleWindow容器。ControlBar 也可以作为 HBox 容器或 VBox容器, 取决于 direction 属性(Horizontal 是默认的).

ApplicationControlBar
可以作为 HBox 容器或 VBox容器,取决于 direction 属性定义 (Horizontal 是默认的). The ApplicationControlBar 布局容器用于放置被应用程序使用的组件 ，如果作为<mx:Application>标签的第一个子元素被定义，并且如果dock属性为true，ApplicationControlBar将驻留在应用绘图去的顶端。并不随应用程序滚动。

Flex支持绝对定位布局（constraint-based layouts），它允许你自由的使用绝对定位点在界面上排列元素，这种布局形式自动适应页面大小的改变。这种方式通常用于Canvas container（或与之类似的容器，如 Application 和 Panel），Canvas容器要求元素通过绝对坐标定位，同时，容器也将动态的调整坐标以适应页面大小的变化。如果你希望一个图标永远出现在页面的右下角，不管页面的大小如何，你都能在Canvas容器中标定元素边界和页面边界的距离关系。

使用工具产生的代码可能会有不同的顺序，没关系，由于你拖动顺序的不同而生成不同的代码，容器和元素的关系只取决于标签的父子关系。

使用简单控件

简单控件是由框架提供的以便于我们能够更容易的构建RIA应用。使用这些控件，可以很容易的实现按钮、文本、集合框等。你可以使用自己的样式订制控件。控件提供了标准的实现方式，是所有RIA应用的基础。

Flex包括一个可扩展的类库其中含有复杂和简单的控件。所有这些类都能够通过MXML标签实现，或作为标准的ActionScript类实现。它们可以被MXML和ActionScript使用。这些类的继承关系也包含有其他定义了事件模型的类。

你在容器中放置的Flex可视化组件包括文本、控件、图片和其他的媒体元素。所有简单控件都有事件响应用户的活动，如：点击按钮和系统事件，如生成其它组件。你也可以自定义事件。

对于文本域控件，你要为其指定一个ID，你可以通过这个ID来调用它的属性：
<mx:Label id="myLabel"/>

你也可以在运行时绑定数据，这里使用大括号：
<mx:Label id = "yourLabel" text = "{myLabel.text}"/>

可以使用<mx:Image>标签加入图片：
<mx:Image source="@Embed('assets/dairy_milk.jpg')" scaleContent="true"/>
scaleContent="true" 允许flex自动调整图片的大小，以适应设置的图片大小
@Embed指示编译器在编译时把图片加入到swf文件中。

评论

3 楼 hansonmo 2008-10-21  

感觉不一定，多用VBOX、HBOX会使代码可读性降低，我觉得可用但不要滥用。

有时用一下绝对定位和垂直、水平定位也挺好的，另外表格也挺好用，

不同时候用更适合的，没有说那个最好用。

偶也是Flex新手，大家多多沟通。

2 楼 black.angel 2008-10-20  

楼主写的很详细啊。听大家说，多用VBOX,HBOX不知道是不是真的。

1 楼 black.angel 2008-05-17  

好东西，值得分享。