Flex复习笔记（一）

一直以来看的东西都比较杂，而又不善于做笔记导致很多东西长时间不用就忘记了，flex去年学习过一段时间，但突然调动项目组不用flex了，前几天看了个flex的东西，发现本来学的不深的flex现在居然很多都忘了，没办法再次找出去年的一些资料重新学习

一、事件注册方法：

1、直接在控件的属性上注册 如：click='clickHandler(event);'
2、注册组件监听，在组件的creationComplete事件中注册监听器 如：
private function creationCompleteHandler(event:FlexEvent):void
{
myButton.addListener(MouseEvent.CLICK, clickHandler);
}

二、组件定位

1、自动定位
layout: horizontal（行）、vertical（列）、absolute（绝对）
horizontalAlign: left、center、right
verticalAlign: top、middle、bottom
2、绝对定位
application、panel使用layout属性为absolute时
canvas容器
    注：使用绝对定位是Flex控件重叠的唯一方法。
3、锚定组件的边缘
top、bottom、left、right指定组件侧边与容器边缘的距离
4、拉伸组件
锚定组件两边，当容器拉伸时组件大小也会相应调整 如：锚定组件上下两边
5、锚定组件中心
horizontalCenter、verticalCenter 样式指定从容器中心的偏移，一个负数会从中心向左或上移动组件
锚定中心后组件不随容器大小调整而变化，除非同时使用基于百分比的大小调整
如：verticalCenter="0" horizontalCenter="0" 将组件绝对定位于容器的中心位置
由基于限制的布局确定大小会覆盖任何显式或百分比规范。如：指定 left 和 right 样式属性产生的基于限制的宽度会覆盖由 width 或 percentWidth 属性设置的任何宽度。

三、嵌入应用程序资源嵌入应用程序资源

1、嵌入图像
可创建一个或多个实例
[Embed] 如：
[Embed(source="assets/logo.png")]
[Bindable]
public var Logo:Class;
只创建一个实例
@Embed 如：<mx:Image id="myLogo" source="@Embed('assets/logo.png')"/>
2、嵌入使用 scale-9 伸缩的图像
如：[Embed(
source="assets/fancy_border.png",
scaleGridTop="55", scaleGridBottom="137",
scaleGridLeft="57", scaleGridRight="266"
)]
scaleGridTop、scaleGridBottom、scaleGridLeft、scaleGridRight属性值可以通过photoshao获取
3、通过css嵌入图像
<mx:Style>
Button
{
upSkin: Embed("assets/box_closed.png");
overSkin: Embed("assets/box.png");
downSkin: Embed("assets/box_new.png");
}
</mx:Style>
4、嵌入SWF文件
[Embed(source="assets/hourglass.swf")]
5、嵌入SWF库资源
嵌入来自现有SWF库中的特定符号，Flash 定义三种类型的符号: Button、MovieClip 和 Graphic；

使用[Embed]元数据标签的source 属性来指定包含您的 库SWF 文件 , 并使用 [Embed]元数据标签的symbol属性来指定您要在该库中嵌入的符号链接 属性来指定您要在该库中嵌入的符号链接 属性来指定您要在该库中嵌入的符号链接属性来指定您要在该库中嵌入的符号链接 ID。
如：[Embed(source="assets/library.swf", symbol="BadApple")]

6、嵌入声音文件
[Embed(source="assets/pie-yan-knee.mp3")]
[Bindable]
public var Song:Class;
public var mySong:SoundAsset = new Song() as SoundAsset;//将mp3文件new成一个SoundAsset对象，并通过调用SoundAsset的方法控制mp3的播放
7、嵌入字体
@font-face
{
font-family: Copacetix;
src: url("assets/copacetix.ttf");
//指定字体的使用范围
unicode-range:
U+0020-U+0040, /* Punctuation, Numbers */
U+0041-U+005A, /* Upper-Case A-Z */
U+005B-U+0060, /* Punctuation and Symbols */
U+0061-U+007A, /* Lower-Case a-z */
U+007B-U+007E; /* Punctuation and Symbols */
}

四、构建用户界面
1、使用基于文本的控件
2、使用基于按钮的控件
在button控件上点击鼠标且button控件被启用时发出两个事件：click和buttonDown
LinkButton 控件创建一个支持可选图标的单行超文本链接。
PopUpButton控件给Button 控件添加一个灵活的弹出界面。
3、使用基于列表的控件
可以使用两种方法设置组件的数据提供程序:
第一种方法是通过将 Array 或 Collection定义为取得数据提供程序的控件子标签,在线上MXML中定义数据提供程序。这种方法具有实施快速的优点具有实施快速的优点,适合与静态数据一起使用及于原型设计.
第二种方法是绑定将控件绑到使用ActionScript定义的现有Array 或 Collection。这后一种方法用于显示由服务器端调用引起的数据及用于绑定到在ActionScript中创建的数据结构。
4、使用容器
使用布局容器
panel panel容器显示一个标题栏、一个标题、一个边框及其子级；panel默认垂直布局，可以通过将布局属性设置为absolute或horizontal来覆盖此设置
HDividedBox、VDividedBox HDividedBox对组件水平布局，在组件间插入可调整的分割线；VDividedBox对子组件进行垂直布局，在子级间插入可调整的分割线
title 多行或多列形式排列子级
form 以标准表单格式排列子级
ApplicationControlBar 停靠在application容器的上边缘，提供全局的导航和应用程序命令的组件
ControlBar 控件置于Panel或TitleWindow容器的下边缘
使用导航容器
导航器容的直接子级必须是容器，无法在导航器容器内直接嵌套控件；控件必须是导航器容器的子容器的子级
Accordion 定义子面板序列，但一次仅显示一个面板
TabNavigator 创建和管理一组选项卡
ViewStack 由彼此堆叠在一起的子容器的一个集合组成，一次只有一个容器是可见的或活动的

5、设置组件的样式

使用本地样式定义
可以使用 <mx:Style> 标签在MXML文件中创建本地样式定义。
使用外部样式表
<mx:Style> 标签的 source 属性
使用线上样式
直接设置标签样式属性
使用setStyle()方法  setStyle() 方法采用两个参数方法采用两个参数：样式名称和值。
6、添加效果
要创建行为，需要定义一个具有唯一ID的特定效果，并将它绑定到触发器上
使用效果方法和事件