本文和大家重点讨论一下FlexBuilder教程中数据绑定，界面布局和导航方面的内容，以MXML标记来描述UI，数据绑定(Databinding)来连接数据，这样就真正实现了UI和程序逻辑的分离。
一，FlexBuilder教程中的数据绑定
以MXML标记来描述UI，数据绑定(Databinding)来连接数据，这样就真正实现了UI和程序逻辑的分离。Databinding可以一绑多或者多绑一。
1，在MXML中使用大括号{}语句:格式为:{源对象.属性}。可直接传送给目标对象；高级用法是在{}中包含AS表达式、AS函数或者E4X表达式
2，在MXML中使用<mx:Binding>标签:这是{}语句的替代用法，格式为:<mx:Bindingsource="源对象.属性"destination="目标对象.属性"/>；
高级用法是在标签中包含AS表达式或者E4X表达式//在Model数据中使用{}语句来绑定数据
- <mx:Modelidmx:Modelid="thing1">
- <data>
- <part>{input1.text}</part>
- </data>
- </mx:Model>
- //用<mx:Binding>标签来绑定数据
- <mx:Bindingsourcemx:Bindingsource="input2.text"destination="thing1.part"/>
- <mx:TextInputidmx:TextInputid="input1"/>
- <mx:TextInputidmx:TextInputid="input2"/>
- <mx:TextAreatextmx:TextAreatext="{thing1.part}"/>
3，使用AS类来绑定:使用mx.binding.utils.BindingUtils的bindProperty()或者bindSetter()方法
二，FlexBuilder教程中界面布局和导航
容器定义了FlashPlayer的绘图表面的一个矩形区域。子容器包括控件和容器。Container类是所有Flex容器类的基本类。扩展Container类的容器添加它们自己的功能以进行子组件布局。Application容器是的Flex应用程序的唯一根部容器,代表整个FlashPlayer绘图表面。
1，布局容器:
使用FlexBuilder教程中布局容器可进行用户界面布局。
A,面板(Panel)容器显示一个标题栏、一个标题、一个边框及其子级。默认情况下,Panel容器会对子组件进行垂直布局,并且可以通过将布局属性设置为"absolute"或"horizontal"来覆盖此设置。
B,HDividedBox容器对子组件进行水平布局,除了在子级之间插入一个可调整的分割线之外,它与HBox容器很相似。VDividedBox容器对子组件进行垂直布局,而且也在子级之间插入一个可调整的分割线。
C,平铺(Tile)容器以多行或多列的形式排列其子级。
D,表单(Form)容器以标准的表单格式排列其子级。
E,ApplicationControlBar容器容纳提供全局导航和应用程序命令的组件,并可以停靠在Application容器的上边缘。
F,ControlBar容器将控件置于Panel或TitleWindow容器的下边缘。
G,另外可使用Spacer控件来辅助布局。Spacer控件并非容器，而是基于百分比的可用于挤占留空以准确定位的一个不可见控件。
2,导航容器:
使用FlexBuilder教程中导航容器可以控制其他容器的多个子级之间的用户移动或导航。导航器容器不能直接嵌套控件，只能嵌套容器。
A，手风琴(Accordion)容器定义一个子面板序列,但一次仅显示一个面板。若要导航容器,用户会单击与他们需要访问的子面板相对应的导航按钮。使用Accordion容器,用户可以按任何顺序访问子面板以在表单中前后移动。
B,TabNavigator容器创建和管理一组选项卡,使用它们可在其子级中间导航。TabNavigator容器的子级是其他容器。TabNavigator容器为每个子级创建一个选项卡。当用户选中某个选项卡时,TabNavigator容器会显示相关联的子级。
C,ViewStack容器由彼此堆叠在一起的子容器的一个集合组成,一次只有一个容器是可见的或活动的。ViewStack容器不为用户定义切换当前活动容器的内置机制；您必须使用LinkBar、TabBar、ButtonBar或ToggleButtonBar控件或自己在ActionScript中构建逻辑让用户来更改当前活动的子级。
3,使用容器Containers进行定位布局
定位方式有三种:
A,自动定位:多数Flex容器使用默认预定义的规则来自动定位你在其中定义的所有的子组件。
B,使用绝对定位:用于使控件重叠
C,使用基于约束的布局:可以锚定容器的边缘或者中心点，然后控件就会随着容器的伸缩而伸缩
Canvas容器，和layout属性为absolute的Application或Panel容器才能进行绝对定位，或约束布局。
4，使用视图状态(或ViewStack导航容器)进行用户界面切换导航
可以为一个Flex程序或组件定义几种视图状态，然后通过改变(切换)视图状态而改变用户界面。(ViewStack导航容器可实现同样效果)
1)，设计基础状态(Basestate,Start,currentState=''):就是在默认状态下设计用户界面。
2)，设计视图状态(currentState='SomeState'):在设计模式中，在状态查看（Window>States）上点击新状态/NewState按钮。然后在此状态下编辑的界面即为该视图的对应界面。
3)，创建用户行为切换控件:定义用户变换状态的点击事件处理器。一般是使用一个LinkButtun，激活currentState='SomeState'以切换到某界面，激活currentState=''以回到默认界面。
【编辑推荐】
