布局和容器
Spark和Halo(MX)
- Halo(MX)是Flex3独有的组件；
- Spark是Flex4引入的新一代组件；
- Flex4同时支持 Spark和Halo(MX);
- Spark容器允许改变布局算法；
- Halo(MX)组件则内置了不去算法，所以如果在Halo(MX)中，如果想使用另外一种布局方法，就必需修改所有容器的类型；
布局管理器
布局管理器通过3个阶段处理每个可视组件的位置和大小：
- 提交 - 查看每个组件的所有属性设置，此阶段将执行每个组件的commitProperties()方法，为布局管理器提供与组件位置和大小相关的属性。
- 测量 - 从内到外计算所有组件的默认大小，此过程涉及对所有内部子对象的宽度、边框厚度、内边距和子对象间的间距进行求和。布局管理器运行了每个对象的mesureSizes()方法。
- 布局 - 从外到内调用每个组件的updateDisplayList()方法，通过设置每个组件的位置和大小来对组件进行布局，使组件刷新显示的内容。
Spark容器支持使用的容器：
- BasicLayout - 绝对布局
- HorizontalLayout - 横向排列
- VerticalLayout - 纵向排列
- TileLayout - 网格排列
绝对布局
- Application容器默认使用绝对布局；
- 使用绝对布局需要指定或者默认指定BasicLayout类；
- 绝对布局使用x和y属性；
- 可以使用绝对布局的重叠制造一些特效；
- 可以使用绝对布局来隐藏一些组件，在某些条件下再显示出来。
基于约束的布局
- 此布局不使用相对于容器左上角的x和y属性来定位组件，而是相对于容器的四个边或者容器的中心点来定位组件；
- 此布局的优点在于即使用户调整了窗口大小，组件同容器之间的相对位置关系仍然可以保持不变；
- 如果使用绝对布局来实现同样的效果，就需要自己动手编写代码执行相应的计算，并在窗口发生变化后及时更新x和y属性；
基本约束：
- top、bottom、left、right属性可用于控制组件与相关边的距离；
- horizontalCenter和verticalCenter属性可用于控制组件在相应方向上与中心的距离；
- baseline属性用于设置组件的上边与父容器的距离
增强的约束：
- 在基本约束的基础上更进一步，扩展了对定位的控制能力，允许开发人员在水平和垂直方向上任意创建隐藏的辅助线，然后对照辅助线定位组件；
- 辅助线分为约束行和约束列；
- 约束行与约束列可以按照下列3中方法放到容器中：
- 固定约束 - 位置由绝对值来指定；
- 相对约束 - 位置根据容器大小和百分比来确定；
- 内容大小约束 - 位置是相对于内容大小而确定的。
- 使用<mx:ConstraintColumn>和<mx:ConstraintRow>；
- 只能基于Halo(MX)的Canvas容器使用这种模式；
- Spark容器的组件都不支持这种增强约束，不过当放到使用这类约束的MX容器中时，Spark组件在约束列和约束行下的效果和预期一致；
- 示例：
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <mx:Canvas width="100%" height="100%"> <mx:constraintColumns> <mx:ConstraintColumn id="col1" width="200"/> <mx:ConstraintColumn id="col2" width="50"/> </mx:constraintColumns> <s:Button label="Button1" left="col1:0"/> <!-- 将col1用作ConstraintColumn，向左偏移0 --> <s:Button label="Button2" left="col2:0"/> <!-- 将col2用作ConstraintColumn，向左偏移0 --> </mx:Canvas> </s:Application>带有左右约束的两列固定分割
<s:Button label="Button1" left="col1:0" right="col1:0"/> <s:Button label="Button2" left="col2:0" right="col2:0"/>带有上下约束的两行固定分割
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <mx:Canvas width="100%" height="100%"> <mx:constraintRows> <mx:ConstraintRow id="row1" height="50%"/> <mx:ConstraintRow id="row2" height="100"/> </mx:constraintRows> <s:Button label="Button1" top="row1:0" bottom="row1:0"/> <s:Button label="Button2" top="row2:0" bottom="row2:0"/> </mx:Canvas> </s:Application>有偏移的两行加两列分割
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <mx:Canvas width="100%" height="100%"> <mx:constraintColumns> <mx:ConstraintColumn id="col1" width="100"/> </mx:constraintColumns> <mx:constraintRows> <mx:ConstraintRow id="row1" height="50"/> <mx:ConstraintRow id="row2" height="50"/> </mx:constraintRows> <s:Button label="Button1" left="col1:0" right="col1:0" top="row1:0" bottom="row1:0"/> <s:Button label="Button2" left="col1:10" right="col1:10" top="row2:0" bottom="row2:0"/> </mx:Canvas> </s:Application>基于内容大小的约束
- 该约束会在不指定约束的height和width属性值时自动启动；
- 该约束下，所有项目会缩放至列宽或行高，列宽和行高则由容器的最大项目决定。
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <mx:Canvas width="100%" height="100%"> <mx:constraintColumns> <mx:ConstraintColumn id="col1" /> <mx:ConstraintColumn id="col2" /> </mx:constraintColumns> <mx:constraintRows> <mx:ConstraintRow id="row1" height="50"/> <mx:ConstraintRow id="row2" height="30"/> </mx:constraintRows> <s:Button label="Button1" left="col1:0" top="row1:0" width="200"/> <s:Button label="Button2" left="col1:0" top="row2:0"/> <s:Button label="Button3" left="col2:0"/> </mx:Canvas> </s:Application>
自动布局
HorizontalLayout和HorizontalLayout
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <s:layout> <s:VerticalLayout/> </s:layout> <s:Group> <s:layout> <s:HorizontalLayout/> </s:layout> <s:Button label="BTN1"/> <s:Button label="BTN2"/> </s:Group> <s:Group> <s:layout> <s:VerticalLayout/> </s:layout> <s:Button label="BTN1"/> <s:Button label="BTN2"/> </s:Group> </s:Application>
TileLayout
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <s:layout> <s:TileLayout orientation="columns" requestedRowCount="2" /> </s:layout> <s:Button label="btn1"/> <s:Button label="btn2"/> <s:Button label="btn3"/> </s:Application>
<mx:Spacer/>
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <s:layout> <s:HorizontalLayout /> </s:layout> <s:Button label="btn1"/> <mx:Spacer width="50%"/> <s:Button label="btn2"/> <mx:Spacer width="50%"/> <s:Button label="btn3"/> </s:Application>
组件的大小
- 固定大小：设置固定值，单位为像素；
- 可变大小：设置百分比，实现相对于所在容器的大小缩放；
容器
Spark中新添加的容器：
Application - Flex应用程序的主容器，也是初始容器
- preloader属性，显示启动Flex程序时看到的进度条，默认打开
- Application是应用程序的顶级对象，因此可以用来装载全局变量和函数，从而能够在程序的任何地方访问他们
- 一个应用程序只能有一个<s:Application />容器
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"> <!-- 定义本地命名空间 --> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <fx:Script> <![CDATA[ [Bindable] public var hello:String = "hello!!!"; ]]> </fx:Script> <local:CustomComponent /> </s:Application>CustomComponent.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
]]>
</fx:Script>
<s:Button label="{FlexGlobals.topLevelApplication.hello}"/>
</s:Group>
Group
- 需要与布局类结合起来使用；
- 为减少代码量，还有<s:Hgroup/>和<s:Vgroup/>可供使用。
SkinnableContainer - 支持换肤功能的Group
- 需要单独的皮肤文件，
CoolSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5">
<!--- 定义支持状态 -->
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
<!--- 背景中使用的矩形 -->
<s:Rect height="100%" width="100%">
<s:fill>
<s:LinearGradient>
<s:entries>
<s:GradientEntry color="#92A1B9"/>
</s:entries>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Group id="contentGroup" left="5" right="5" top="5" bottom="5" >
<s:layout>
<s:BasicLayout/>
</s:layout>
</s:Group>
</s:SparkSkin>
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"> <!-- 定义本地命名空间 --> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <s:SkinnableContainer skinClass="CoolSkin"><!--- 指定皮肤 --> <s:layout> <s:HorizontalLayout/> </s:layout> <s:Button label="button 1"/> <s:Button label="button 2"/> </s:SkinnableContainer> </s:Application>
Panel - 基于 SkinnableContainer，是其子类，多了标题栏和一个框架
- 经常用作整个应用程序的顶级容器，支持嵌套
- 优势在于，其在窗口上添加了一个标题栏和一个状态栏，默认还会绘制出子对象的边框
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"> <!-- 定义本地命名空间 --> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <s:Panel title="My Panel"> <s:HGroup top="5" bottom="5" left="5" right="5"> <s:Button label="button1"/> <s:Button label="button2"/> </s:HGroup> </s:Panel> </s:Application>DataGroup和SkinnableDataContainer
- DataGroup 用于数据集合（如数组），使用项渲染器渲染这些数据，从而能够自定义显示；
- 项渲染器也是一个组件；
- SkinnableDataContainer 是 DataGroup 的可换肤版本；
- 在使用这两个组件时，需要把数据发送给它们的dataProvider属性；
- 提供的数据可以是集合形式的，如ArrayCollection，还可以包含任何元素，如字符串，按钮或图形；
- 可以使用的两个项渲染器：
- spark.skins.spark.DefaultItemRenderer 简单文本；
- spark.skins.spark.DefaultComplexItemRenderer Group容器内显示，只有在数据中包含可是组件，如按钮、图像时，渲染才有效
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
xmlns:local="*"> <!-- 定义本地命名空间 -->
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var $data:ArrayCollection = new ArrayCollection(["item1", "item2", "item3"]);
]]>
</fx:Script>
<s:DataGroup dataProvider="{$data}"
itemRenderer="spark.skins.spark.DefaultItemRenderer">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
</s:DataGroup>
</s:Application>
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
xmlns:local="*"> <!-- 定义本地命名空间 -->
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<s:ArrayCollection id="$data">
<s:Button label="button 1"/>
<s:Button label="button 2"/>
<s:Button label="button 3"/>
</s:ArrayCollection>
</fx:Declarations>
<s:DataGroup dataProvider="{$data}"
itemRenderer="spark.skins.spark.DefaultComplexItemRenderer">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
</s:DataGroup>
</s:Application>
Canvas容器
- 基于Halo(MX),轻量级，功能不强大；
- 一般用于使用了增强约束的场景。
ApplicationControlBar
- MX组件，类似还有ControlBar，但是Spark Panel的属性controlBarContent和controlBarLayout可以实现与ContralBar类似的效果；
- 此容器给应用程序添加一个控制栏；
- 需要与Application容器配合使用。
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"> <!-- 定义本地命名空间 --> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <s:Panel title="My Panel"> <s:HGroup top="5" bottom="5" left="5" right="5"> <s:Button label="button1"/> <s:Button label="button2"/> </s:HGroup> </s:Panel> </s:Application>
DivedeBox、HDivedeBox 和 VDivedeBox
- Halo(MX)组件，允许用户控制大小的调整，类似于HTML中的frame；
- 用户通过鼠标拖动分隔条来调整窗口大小，支持嵌套使用；
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"> <!-- 定义本地命名空间 --> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <s:Panel title="Report Dashboard" verticalCenter="0" horizontalCenter="0"> <mx:DividedBox direction="horizontal" width="100%"> <s:VGroup height="100%"> <mx:Text text="Catogries" fontWeight="bold"/> <s:Button label="Finance" width="100%"/> <s:Button label="Operations" width="100%"/> </s:VGroup> <mx:VDividedBox width="50%" height="100%"> <s:VGroup width="100%"> <mx:Text text="Finance Reports" fontWeight="bold"/> <mx:Text text="2008 Q1 sales" /> <mx:Text text="2008 Q2 sales" /> </s:VGroup> <s:VGroup width="100%"> <mx:Text text="Finance Reports2" fontWeight="bold"/> <mx:Text text="2008 Q1 sales" /> <mx:Text text="2008 Q2 sales" /> </s:VGroup> </mx:VDividedBox> </mx:DividedBox> </s:Panel> </s:Application>
Form容器
- 支持在每个表单输入字段旁添加标签(label);
- 纯粹用作布局，不一定包含表单项；
- Form容器包含三个组件：
- Form主容器
- FormHeader组件，可选，为表单中相应分区添加标题
- FormItem 用于将文本与每个表单输入字段关联
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"> <!-- 定义本地命名空间 --> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <mx:Form> <mx:FormHeading label="Contact Info"/> <mx:FormItem label="First Name"> <s:TextInput/> </mx:FormItem> <mx:FormItem label="Last Name"> <s:TextInput/> </mx:FormItem> </mx:Form> </s:Application>
Grid容器
- 包含Grid，GridRow和GridItem标签
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"> <!-- 定义本地命名空间 --> <fx:Declarations> <!-- 将非可视元素（例如服务、值对象）放在此处 --> </fx:Declarations> <mx:Grid> <mx:GridRow> <mx:GridItem> <s:Button label="Rewind"/> </mx:GridItem> <mx:GridItem> <s:Button label="Play"/> </mx:GridItem> <mx:GridItem> <s:Button label="Forward"/> </mx:GridItem> </mx:GridRow> <mx:GridRow> <mx:GridItem colSpan="3"> <s:Button label="STOP" width="100%"/> </mx:GridItem> </mx:GridRow> </mx:Grid> </s:Application>