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

(2)Flex4 容器与布局

2013-01-17 
(二)Flex4 容器与布局MXML文件1.文件头2.命名空间3.历史版本的恢复4.利用Flash Builder的debugger--------

(二)Flex4 容器与布局
MXML文件
1.文件头
2.命名空间
3.历史版本的恢复
4.利用Flash Builder的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标签
类实例 class instance
属性property/attribute
5.控制条 control bar
在控制条上摆放一个标签和导航按钮
controlbarlayout
定义布局对象
controlbarcontent
定义控制条中需要呈现哪些子元素

6.结合Source和Design视图定义组件及其分布
Design视图中可以通过拖拽方式增加容器或组件
通过outline可以快速定位组件
选定某个组件后,可以通过其Properties设置id,width,height,x,y,约束等
通过定义的id,相当于对该标签对应的类的对象进行了引用,在xml的script中就能通过id来访问或者设置其attribute值

7.基于约束的布局
相对于父容器的边界进行定位,父容器将需要设置为BasicLayout
ApplicationSkinableContainer  Panel  Group都可以使用BasicLayout
当使用了约束布局,浏览器窗口动态调整时,控件相对于父容器的位置都是固定的
Properties-->Layout-->Constraints中进行设置

8.通过视图状态实现界面的切换(导航的一种实现方式)
创建一个新的视图状态,在此状态下设计需要显示的组件
当应用程序切换到此状态时,就会显示此状态下的组件,实现界面的切换
注意:应用程序会自动创建一个默认状态state1
通过定义includeIn属性实现哪个状态下包含哪个组件
如:<datagrid includein="cartView">则在cartView状态下,DataGrid将被呈现
对于width,height同样可以使用状态(Flex中可以在相应的状态下使用对应的属性值)
width.cartView="0" height.cartView="0"
表示在cartView状态下,某个组件的宽和高都设置为0

控制状态视图:
即什么时候呈现该状态下的视图
每个MXML页面都有一个当前状态currentState属性,通过对该属性赋予不同的状态,就能控制应用程序在指定

的某个条件下将某一状态呈现给用户
currentState=""将应用程序重置为初始状态
9.代码的重构
当完成功能后,应该尽可能对代码进行重构
目标:低耦合,程序各部分依赖性不强;减少重复和冗余,实现单点维护
初学的难点:
实现同一个目标的有哪些方法,以及哪种情况下使用哪个解决方案最行之有效!!!
使用HGroup,VGroup

热点排行