(二)Flex4 容器与布局

MXML文件

1.文件头

2.命名空间

3.历史版本的恢复

4.利用FlashBuilder的debugger

----------------------------------------------------------------------------------

容器(包含组件)+布局对象---实现组件的定位，即决定了一组元素如何在屏幕上显示

-------------------------------------------------

容器

容器：包含和分组其它组件的特殊组件

组件：组件被容器所包含，则称为容器的子元素

换肤：按照一定规则为容器所包含的组件定义位置和次序的过程

对容器而言，它的外观涉及：背景、边框、阴影等

容器的分类：

1.可以在屏幕上的外观(以下都是SkinableContainer，支持换肤)

ApplicationFlex应用的根元素

NavigationContent与ViewStack控件联合使用，实现导航

Panel有边框，可以有标题和控制条

SkinableContainer与Group功能一致，支持换肤

BorderContainer有边框

2.只为容纳其子元素，容器本身不可见

Group只用来包含子元素，不可见

3.其它容器(以下容器布局方式与1,2的布局不同)

DataGroup

SkinnableDataGontainer

Form

组件

1.LayoutElement

Button、Checkbox组件等

2.GraphicalElements

方块、圆形等

----------------------------------------------

布局对象

分两种

1.Flex4提供的布局对象(通过<layout>来指定需要使用的布局对象)

如果没有指定布局对象，则默认使用BasicLayout，除非为每个子元素指定x,y坐标，否则都将出现在(0,0)位置

BasicLayout支持绝对定位的基本布局对象，必须知道每个布局元素的x,y坐标

HorizontalLayout水平布局

VerticalLayout垂直布局

TileLayout按照行和列布局，指定子元素何时开始新行和新列

2.在Flex4提供的布局对象基础上自定义布局

3.Scroll滚动条

Flex4中，想要某个区域可以滚动，需要特别指定才能使用

使用方式：在容器外部加一对Scroller标签

说明：Scroller只在不能完全显示某个容器中的子元素时，才会根据情况添加水平/垂直滚动条

如果没有指定宽度和高度，Flex会尽可能完全在屏幕上显示该容器

4.MXML标签

类实例classinstance

属性property/attribute

5.控制条controlbar

在控制条上摆放一个标签和导航按钮

controlbarlayout

定义布局对象

controlbarcontent

定义控制条中需要呈现哪些子元素

6.结合Source和Design视图定义组件及其分布

Design视图中可以通过拖拽方式增加容器或组件

通过outline可以快速定位组件

选定某个组件后，可以通过其Properties设置id,width,height,x,y,约束等

通过定义的id，相当于对该标签对应的类的对象进行了引用，在xml的script中就能通过id来访问或者设置其attribute值

7.基于约束的布局

相对于父容器的边界进行定位，父容器将需要设置为BasicLayout

ApplicationSkinableContainerPanelGroup都可以使用BasicLayout

当使用了约束布局，浏览器窗口动态调整时，控件相对于父容器的位置都是固定的

Properties-->Layout-->Constraints中进行设置

8.通过视图状态实现界面的切换(导航的一种实现方式)

创建一个新的视图状态，在此状态下设计需要显示的组件

当应用程序切换到此状态时，就会显示此状态下的组件，实现界面的切换

注意：应用程序会自动创建一个默认状态state1

通过定义includeIn属性实现哪个状态下包含哪个组件

如：<datagridincludein="cartView">则在cartView状态下，DataGrid将被呈现

对于width,height同样可以使用状态(Flex中可以在相应的状态下使用对应的属性值)

width.cartView="0"height.cartView="0"

表示在cartView状态下，某个组件的宽和高都设置为0

控制状态视图：

即什么时候呈现该状态下的视图

每个MXML页面都有一个当前状态currentState属性，通过对该属性赋予不同的状态，就能控制应用程序在指定

的某个条件下将某一状态呈现给用户

currentState=""将应用程序重置为初始状态

9.代码的重构

当完成功能后，应该尽可能对代码进行重构

目标：低耦合，程序各部分依赖性不强；减少重复和冗余，实现单点维护

初学的难点：

实现同一个目标的有哪些方法，以及哪种情况下使用哪个解决方案最行之有效！！！

使用HGroup，VGroup