首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 媒体动画 > flex >

Flex器皿详解-概要介绍(一)

2012-11-06 
Flex容器详解----概要介绍(一)?容器简介:?容器提供了一种可以使你灵活布局子组件的层次结构机制。我们可以

Flex容器详解----概要介绍(一)

?

容器简介:

?

容器提供了一种可以使你灵活布局子组件的层次结构机制。我们可以通过容器方便的改变子组件的大小和位置。通常在Flex种有两种形式的容器:布局和导航。

?

容器可以在Flash Player的界面上方便定义矩阵形式的UI,在容器中我们可以同时设置一些空间和子容器,我们可以叫在容器内定义的任何组件为该容器的孩子。Flex为我们提供了各式各样的容器,如一些常用的box容器,panel, form等。

?

在一个Flex程序的根部是一个叫做Application Container的容器,代表整个Flash Player的画图面板,这个容器用来装载该程序中其他所有的控件和子容器。

?

一个特定的容器一般都会预先定义一些相应的规则用来约束其子容器的布局,如改变大小或位置等。Flex定义这些布局规则可以使我们大大简化设置可以和RIA的实现,也使我们可以足够灵活的创建其他容器。

?

关于从其的布局:

?

容器一般自己预先定义了一些导航和布局的规则,因此你不需要花额外的时间去定义它们,因此你可以集中精力在信息的传递,用户的体验上,而不需要太担心一些事件的设置以及程序显示等。

?

预先定义布局规则的另外一个优点是可以使用户习惯于这种形式,而不是不断接受各种新布局形式,让用户不断去适应新的界面,从而可以让用户把更多的精力放在更重要的信息内容上。

?

不同的容器定义了不同的布局规则:

?

?

更多详细的信息请参阅http://livedocs.adobe.com/flex/3/html/size_position_1.html#65267

?

关于布局容器和导航容器

?

Flex定义了两种类型的容器:

?

布局容器: 用来控制子组件的大小和位置,比如Grid布局容器规定了其子组件的形式就像HTML中的table一样,而DividedBox容器在中间有一条分界线,可以让用户随意拖动分界线来改变分界线两侧区域的大小。而TitleWindow容器也提供一个bar,她能包含标题和状态的信息。更多容器组件的使用,请参阅http://livedocs.adobe.com/flex/3/html/layouts_01.html#365481

?

导航容器 主要提供导航让用户选择各种功能,如菜单容器,tab容器等,更多信息请参阅http://livedocs.adobe.com/flex/3/html/navigators_1.html#65267

?

使用容器

?

容器的矩阵区域封装了他的内容范围,只有这个范围内才可以防止子组件,容器的padding(内边距)和两边的宽度决定了容器的大小,容器的padding分为bottom,top,left和right。每部分都可以设置px大小,下图显示了容器的padding,border和相应的区域。

?


Flex器皿详解-概要介绍(一)
??

尽管我们可以只用一种容器就可以布局一个flex程序,但是通常为了简化工作量,我们都用各种flex为我们提供的容器。如下图就使用了三种容器:

?


?A.????? Parent HBox layout container B. Child VBox layout container

?

在这个例子中,两个VBox被放在了一个HBox中。

?

HBox中的子组件都是水平流水线布局的,我们可以通过设置horizontalGap 和 verticalGap来控制gap。

?

VBox中的子组件是垂直排列的。下图显示了VBox的布局形式:

?


Flex器皿详解-概要介绍(一)
?

?

?

布局容器的主要用途是用来排列他的子组件,这些组件可能是其他组件的容器或者是一些普通的控件,下图显示了一个VBox中有三个子组件:

?

?

?

?
Flex器皿详解-概要介绍(一)
?

利用Form布局容器,我们可以创建基于表单的应用程序。在这个容器中用户可以轻松布局各种形式的表单控件,如下图:

?
Flex器皿详解-概要介绍(一)
?

?

Form容器还可以利用Flex提供的验证机制在用户提交表单之前验证一些error。这样就可以在用户提交之前纠正一些客户端能错误,从而减少和server的链接开销。更多有关表单容器的知识请参阅http://livedocs.adobe.com/flex/3/html/layouts_08.html#109973

?

?

导航容器,如TabNavigator和Accordion容器,里面预先设置了许多子容器,可以使哟过户方便的移动到自己需要的信息部分,如下图展示了一个Accordion容器:

?
Flex器皿详解-概要介绍(一)
?

?

?

A. Accordion按钮

我们可以点击不同的Accordion按钮跳转到不同的子容器中,Accordion容器定义了一系列子panel可以让我们点击Accordion按钮访问。更多信息请参阅http://livedocs.adobe.com/flex/3/html/navigators_5.html#246009

?

?

Flex容器简介

?

下表列出了一些常用的Flex容器

?

容器名

类型

简介

Accordion

?

?

导航

?

?

将不同类型的信息放入一系列定义好的panel中,在任何时间内总是有一个panel处在激活状态

?

ApplicationControlBar

?

布局

用来存放子组件并提供全局导航和各种应用程序的命令。可以被放在一个Application容器的最顶端。

Box (HBox and VBox)

?

布局

以水平或者垂直的方式布局子组件。

Canvas

?

布局

该容器中的子组件必须明确的给定坐标位置。

ControlBar

?

布局

可以将子组件放置在一个panel或者TitleWindow的下边缘。

DividedBox (HDividedBox VDividedBox)

?

布局

水平或者垂直的布局其子组件,类似Box容器,只是其中多了一条水平或者垂直的分界线将容器分割成两个区域。

Form

?

布局

可以用来设计一个表单

Grid

?

布局

可以布局一个类似HTML table的形式

Panel

?

布局

显示一个title bar,一些说明,边框和一些子组件

TabNavigator

?

导航

可以设置许多tab,选择不同的tab选项卡可以切换到不同的内容区域。

Tile

?

布局

有点类似grid 可以指定行数和列数。

TitleWindow

container

布局

类似一个window窗口,有关闭按钮,标题栏,菜单栏等。

ViewStack

?

导航

一个类似栈的导航容器

?

?

?

?

热点排行