flex控件总结

Flex基本控件总结

一、flex控件的分类：文本控件(text controls)、数据源控件(data provider controls)、菜单控件       (menu  controls)、按钮控件(button controls)、Flex控件(flex controls)、容器控件。

二、 文本控件

a)         标签（Label）：标签：<mx:Label/>

1. 标签控件的特性：
   1. 用户不能编辑文本，但程序可以改变它。
   2. 可以使用HTML格式定义文本。
   3. 可以控制对齐和改变大小。
   4. 可以定义标签的背景为透明，这样就可以看见容器的背景。
   5. 标签控件没有边界，就像文本直接写在背景上。
2. 例如：<mx:Label id="lblLable" Text="标签">.
3. Label组件支持html标记。如果在标签内容中包含html特殊标记，需要使用转换字符：

例如，在标签中显示<符号

<mx:Label text="&lt;&lt;Prev" />

b)        文本（Text）：标签:<mx:Text/>

1. 特性：
   1. 用户不能编辑文本，但程序可以改变它。
   2. 控件不支持滚动条。
   3. 支持HTML格式定义文本。
   4. 默认的大小足够显示文本。
   5. 文本背景为透明，这样就可以看见容器的背景。
   6. 文本控件没有边界，就像文本直接写在背景上。
   7. 文本在边界会自动转行，而且文本总是排列在文本控件顶部。
2. <mx:Text><mx:text>文本内容</mx:text></mx:Text>

c)         文本条（TextInput）：标签：<mx:TextInput/>

1. 事件：change、enter。
2. 属性：editable：是否阻止对文本的编辑，false为是。

  displayAsPassword：将输入的字符显示为*。

  将一个变量绑定在文本条上：<mx:TextInput Text="{myInputText}"/>.

  restrict（约束、限定）:（此输入可省去验证的麻烦）

例如<mx:TextInput id="txt" restrict="0-9">,表示输入框只能输入0到9之间的数字。

      maxChars:限定输入的做多字符.

例如<mx:TextInput id="txt"        maxChars="20">,标识输入的字符不能超过20个。

d)        文本区域（TextArea）：标签：<mx:TextArea/>

1. 特性：
   1. 文本可以被编辑。
   2. 可以可以具有滚动条。
   3. 支持HTM文本和富文本。
   4. 可以触发change事件。
   5. 可定义文本区域控件为禁用状态。
   6. 可定义为只读属性。
   7. 可使用displayAsPassword属性将文本显示为*。
   8. 文本区域控件的字符串最大长度为37440个字符。
2. 如果文本超过界限，同时horizontalScrollPolicy属性设置为true时，就会出现滚动条。
3. 例如：

<mx:TextArea id="tarEdit" text="文本区域控件内容">

 

e)         富文本区域（RichTextArea）：标签：<mx:RichTextEditor/>

1. 包含2个子控件:
   1. 文本区域，用来输入文字。
   2. 工具条，包含了各类控件，用来改变文本特性。
2. 富文本编辑器控件可以帮助用户定义文本具有不同的字体、颜色、风格、文本的对正、列表或者URL超链接等。
3. 例如：<mx:RichTextEditor id="rte" title="富文本编辑器" text="输入富文本的内容">

三、数据源控件

a)         数据表格（DataGrid）：标签：<mx:DataGrid/>。

1. 是一个可以展示多列数据的列表控件。是一个格式化的数据表格，可以设置可编辑的单元格，是许多数据驱动应用的基础。
2. 特性：
   1. 可改变大小；可以排序；用户定义行列的布局，包括隐藏某一列。
   2. 可选自定义的行和列的标题头。
   3. 用户可以动态改变列的大小和排序。
   4. 多种模式的选择（行、列、单元格）和编辑及选择事件。
   5. 可以在一个单元格使用自定义组件。
   6. 支持数据翻页。
   7. 锁定不能滚动的行和列。
3. 属性：
   1. sorttableColumns：设置为false时，将关闭所有的列排序功能。
   2. sorttable：设置为false时，该列将关闭排序功能。
   3. showDataTips：设置为true时，浮现出提示信息。

b)        树 （Tree）：标签：<mx:Tree/>。

1. 树结构控件是一个分支和叶节点的继承结构。
2. 树中的每一项称为节点，节点可以是根节点、分支节点和叶节点，根节点可以包含分支节点和叶节点，分支节点也可包含子分支节点和叶节点，而叶节点则是树的一个末端点。
3. 常用事件：change。
4. 方法：
   1. addTreeNode()：向tree添加节点。
   2. addTreeNodeAt()：在tree的特定位置添加节点。
   3. getDisplayIndex()：返回给定节点的显示索引
   4. getIsOpen()：指定节点是打开还是关闭。
   5. getNodeDisplayedAt()：将tree的某个显示索引映射到在给索引出显示的节点。
   6. getTreeNodeAt()：返回在树的根上的节点。
   7. "refresh"()：更新树。
   8. removeAll()：从tree中删除所有的节点并刷新tree。
   9. setIcon()：为指定的节点设置图标。

四、菜单控件

a)         菜单（Menu）:

1. 菜单控件只能在ActionScript代码中定义。
2. 通过用户的行为来触发，弹出菜单项。
3. 不具有MXML标签。
4. 当菜单打开后就处于可视状态，除非用户选择了其中一项，或者选择了其他的组建或者用一个脚本（script）脚本程序关闭了菜单。
5. createMenu()：创建menu对象
6. 数据源：Xml、arrayList、model、XmlListCollection。

b)        菜单条（MenuBar）：标签：<mx:MenuBar/>

1. 菜单条中控件中的每一项都可以弹出子菜单。
2. 菜单条控件的数据从数据源中获得。
3. 菜单条总保持可视状态，是一个静态的控件。
4. 菜单条可以在MXML中实现。

c)         弹出菜单按钮（PopUpMenuButton）：标签：<mx:PopUpMenuButton/>

1. 当用户单击弹出按钮，并在弹出菜单中选择了某个菜单项后，主按钮就会显示所选菜单项的标签和图像。
2. 弹出菜单按钮控件只支持单级的菜单，如果选择了菜单的子菜单，主按钮上的标签或图标将不会改变。
3. 弹出菜单的工作流程：
   1. 单击下的弹出按钮，即有向下箭头图标的弹出按钮后，控件在按钮下面显示弹出菜单。
   2. 选择某一菜单项，改变主按钮的标签（不包括菜单中的所有子菜单项）。同时触发MenuEvent.CHANGE事件。
   3. 单击主按钮，触发MenuEvent.CHANGE事件和MouseEvent.CLICKS事件。
4. 常用事件：itemClick。
5. 常用属性：
   1. dataProvider：数据源。
   2. iconField：要为每个菜单项显示的图标。
   3. labelFiled：要为每个菜单项显示的文本。
6. 例如：

<mx:PopUpMenuButton id="popbtn" dataProvider="{数据源}" labelField="@数据源中的label" itemClick="事件"/>

五、按钮控件

a)         按钮（Button）：标签<mx:Button>

1. 常用事件：click（单击）、buttonDown（按钮按下）。
2. 常用状态：up（鼠标不在按钮上，即按钮的原始状态）、down（鼠标按下）、over（鼠标放在按钮上方）、Disable（按钮处于禁用状态）。
3. 常用的属性和方法：
   1. Emphasized：获取或设置一个布尔值，指示当按钮处于弹起状态时，button组建周围是否绘有边框，默认为false。-属性
   2. Label：按钮上显示的文本。-属性
   3. Icon：按钮显示的图标。-属性
   4. Click：按钮的监听单击事件的方法。其实事件：mouseMove、mouseOver、mouseOut、rollOver、rollOut、mouseDown和mouseUp。
4. 例如：<mx:Button id="       btonButton" lable="按钮" color="       red" width="100" icon="@Embed('image/eek.gif')" overIcon="@Embed('image/eek_over.gof')" downIcon="@Embed('image/eek_down.gif')" />。

 

b)        弹出按钮控件（PopUpButtonControl）：标签<mx:PopUpButton/>

1. 常用事件：itemclick（选项单击事件）.
2. 初始化菜单函数：initMenu()。
3. 例如：

定义控件：<mx:PopUpButton id="popB" creationComplete="initMenu();" />

初始化菜单：

import mx.control.*;

import mx.events.*;

private var myMenu:Menu;

private function initMenu():void{

myMenu =new Menui();

var dp:Object=[{label:"目录1"},{label:"目录2"},{label,"目录3"}];

myMenu.dataProvider=dp;

myMenu.selectedIndex=0;

popB.popUp=myMenu;

popB.label="点击弹出按钮";

}

 

c)         按钮条（ButtonBar）：标签：<mx:ButtonBar/>

1. 常用事件:itemClick。
2. 整个控件只有一个单一的监听事件（itemClick），当某个按钮被选择时，此事件被触发。

d)        链接按钮（LinkButton）：标签：<mx:LinkButton/>

1. 常用事件：click。
2. 例如：

<mx:LinkButton label="连接1"  click="viewStack.selectedIndex=0"/>

e)         链接条（LinkBar）：标签：<mx:LinkBar/>

1. 常用事件：itemClick。
2. 可通过<mx:datProvider>标签将数据传递到linkBar控件上。
3. 可使用addItem()和removeItem()方法来操作dataProvider属性。
4. 常用属性和事件：
   1. dataProvder:数据源                                      -属性
   2. separatorColor：设置分隔符的颜色                  -属性
   3. Direction：水平或垂直显示                             -属性
   4. verticalGap：间隔的宽度，范围“0-20”         -属性
   5. itemClick：点击控件中的选项引发                  -事件

f)         复选框（CheckBox）：标签：<mx:CheckBox/>

1. 常用事件：click。
2. 常用状态：未选、被选、禁用、激活。
3. 标识为被选择，返回true；标识为未被选择，返回false。
4. checkBox没有属性值value，无法获取。

g)        单选按钮（RadioButton）：标签：<mx:RadioButton/>

1. 常用事件：click。
2. 当选按钮是成组使用的，每一组选项都具有相同的组名。
3. 每次只能选择一个选项，当选择了一个未选项，当前被选项就变成未选项。
4. 常用属性：
   1. Selected：true为已选定。
5. 例如：

<mx:RadioButton groupName="amount" id="option1"/>

<mx:RadioButton groupName="amount" id="option2"/>

h)        单选按钮组（RadioButtonGroup）：标签：<mx:RadioButtonGroup/>

1. 常用事件：itemClick。
2. 例如：

<mx:RadioButtonGroup id="amount" itemClick="handleBtn(event)"/>

<mx:RadioButton groupName="amount" id="option1"/>

<mx:RadioButton groupName="amount" id="option2"/>

1. 遍历radiobuttongroup中的radiobutton控件：

例：

private function foreachGroup():void{

var arr:Array=[];

var rb:RadioButton;

var idx:int;

var len:int=radioGroup.numRadioButton;

for(idx=0;i<len;i++){

rb=radioGroup.getRadioButtonAt(idx);

arr.push("index:"+idx+",label:"+rb.label);

} 

Alert.show(arr.join(" "));

}

 

i)          开关按钮条（ToggleButtonBar）：标签：</mx:ToggleButtonBar>

1. 常用事件：
   1. itemClick。
   2. 使用addItem()和removeItem()等方法处理dataprovider属性，用于添加或删除button控件。
2. 常用属性：
   1. toggleOnClick：如果设置为true，则选择当前选中的按钮将取消其选中状态。
3. 在整个控件中，只能保持一个按钮为被按下的状态。当单击其他按钮时，当前被按下的按钮就会恢复正常状态，而新单击的按钮则保持按下的状态。
4. 与“按钮条”区分：电风扇的1、2、3挡的按下事件。

六、Flex控件

a)         警告（Alert）：

1. 调用静态的show()方法来弹出一个对话窗口。
2. 警告控件在其对话窗口中具有标题、按钮和图标。
3. Show()方法的变量：
   1. 文本（text）：对话窗口中的文本。
   2. 题目（title）：对话窗口标题。
   3. 标记（flags）：定义按钮的种类，包含OK、Yes、No、CANCEL。
   4. 父类（parent）：父类对象。
   5. 单击监听（clickListener）：对按钮单击的监听。
   6. 图标类（iconClass）：在信息文本的左边定义一个图标。
   7. 默认按钮（defaultButton）：定义一个默认的按钮。默认值为OK按钮。

b)        下拉列表（ComboBox）：标签：<mx:ComboBox/>.

1. 常用事件：
   1. Close()：隐藏下拉列表。
   2. Open()：显示下拉列表。
   3. Change()：当下拉框项目更改是发生。
2. 常用属性：
   1. editable：当此属性为true时，可以在下拉列表顶部直接输入文本；当此属性为false，输入文本时，控件将会自动查找最接近输入文本的列表项。
   2. Dataprovider：数据源。
   3. labelFileld:在下拉列表中显示的标签。
   4. rowCount：控件列表中可见行数的最大数目。
   5. selectedIndex：下拉列表中所选项目的索引。
   6. selectedItem：对dataprovider中所选项目的引用。

 

1. 例如：<mx:ComboBox close="selectedItem=ComboBox(event.target).selectedItem" editable="true"/>
2. 如下：变量selectedItem是用于下拉列表和标签上的变量，定义了当前所选择的列表项。

[Bindable]public var selectedItem:Object;

c)         选色器（ColorPicker）：标签：<mx:ColorPicker/>。

1. 初始化为小方框，底色为已选择的颜色。
2. 属性：
   1. showTextField：默认为true，用来在一个文本条中显示所选择颜色的标签。
   2. Editable：设置为true，则用户可输入自己所需要颜色的十六进制值。
   3. selectedColor：初始化所选的颜色。
   4. selectedIndex：所选项目的索引
3. 方法：
   1. Close()：隐藏样本面板。
   2. Open()：显示样本面板。
   3. Change()：所选颜色由于用户交互操作而发生更改。
4.  自定义调色板的注意事项：
5. 1.   所显示的颜色，要定义调色板中的颜色。
6. 2.   文本条中的标签，如果不定义标签，则显示十六进制值。
7. 3.   每种颜色的信息。

d)        日期选择器（DataChooser）：标签：<mx:DataChooser/>。

1. 日期选择器控件的界面是一个日历，其中显示了月份、年份和栅格中的日期以及星期标签。
2. 用户可以选择单个的日期。
3. 日期选择器控件可以改变大小以容纳改变日期的格式，可以显示日期的全名。
4. 事件：change
5. 属性：yearNavigationEnabled：年份更改。

e)         日期条（DataField）：标签：<mx:DataField/>.

1. 日期条控件是由一个文本条和文本条右边一个日历的图标组成。
2. 单击日期控件的任何一部分都会弹出一个日期选器。
3. 日期条控件是日期选择器控件的超集。

f)         水平列表（HorizontalList）：标签：<mx:HorzontalList/>.

1. 水平列表的优点是：只在其显示区域用事例显示对象。
2. 水平列表从左到右显示项目。
3. 通过定义allowMultipleSelection属性来选择单个或多个项目。
4. 绑定数据源和图像文件：

在actionscript中写如下的代码：

  数据源：dataProvider.

                      图像文件：

[Bindable]

[Embed(source = "images/cathead.gif")]

public var headImg1:Class;

1. 常用属性：
   1. Dataprovider：数据源。
   2. numChildren：对象的子项数目。
   3. Selectable：是否将所选项目显示为选中状态。
   4. selectedIndex：所选项目的数据提供程序中的索引。
   5. Visible：显示对象是否可见。

 

g)        水平尺/垂直尺（HRule/VRule）：用于在容器内创建一条分割线

1. 标签：水平尺：<mx:HRule/>;垂直尺：<mx:VRule/>
2. 属性：水平尺：如颜色：shadowColor。

      垂直尺：如颜色：strokeColor。

1. 例如：
   1. 水平尺:<mx:HRule shadowColor="#FF0000"/> (颜色为红色的水平尺)。
   2. 垂直尺:<mx:VRlue strokeColor="#00FF00"/> (颜色为绿色的垂直尺)。

                          

h)        水平滑杆/垂直滑杆（HSlider/VSlier）：

1. 标签：水平滑杆：<mx:HSlider/>；垂直滑杆：<mx:VSlider/>。
2. 滑杆的5部分：滑轨、滑块、刻度、标签和数据提示。
3. 滑块的当前值：由他在滑杆两端之间的相对位置决定。

滑杆两端默认的最小值：0。

滑杆的最大值：10。

滑块的当前值可以在最小值与最大值之间连续地改变，或者可以为一组不连续  值中的一个值。

1. 滑杆的属性：maximum：最大滑动值。

snapInterval：数值变化间隔。

tickIntervl：标识刻度。

Labels：标识标签。

1. 例如：

<mx:HSlider snapInterval="5" maximum="100" tickInterval="25" labels="[0,25,50,75,100]"/>

 

i)          图像（Image）：标签：<mx:Image/>。

1. 图像控件可加载GIF、JPEG、PNG、SVG、和SWF格式的文件。
2.  
   1. 使用@Embed标识符来绑定数据源：<mx:Image source="@Embed("image/gif1.png")"/>
   2. 绑定成类：

[Bindable]

[Embed(source="image/gif1.png")]

public var icons:Class;

1. 在需要图片时动态加载：

var icons:String="images/gif1.png";

引入代码：var image:Image=new Image();

  Image.source=icons;

  imgData.addChild(image);

 

j)          列表（List）：标签：<mx:List/>

1. 常用事件：
   1. Change:选择的行的改变时发生。
   2. itemClick：显示选中的数据项的所有属性。
2. 通过定义alternatingItemColos来实现列表中项目交替的背景。
3. 列表控件可以实现工具条标签(toolTip),需要设置dataTipFunction和showDataTips为true。
4. 常用属性：
   1. Editable:指示用户能否编辑数据提。
   2. dataProvider：数据源绑定。
   3. labelFiled：指明显示数据源中的哪个属性。
   4. dataTipFunction：显示文本提示。
   5. wordWrap：当设置为true时，如果文字过长，允许换行。
   6. alternatingItemsColors：指定控件的交互底色。

k)        计数器（NumericStepper）：标签：<mx:NumericStepper/>。

1. 计数器控件由文本条和按钮组成。
2. 计数器右边的按钮是由向上和向下两个按钮组成的。
3. 单击向上、向下的三角形按钮可以递增或递减显示数据，用户也可以直接输入一个合法的数据到文本条中。
4. 计数器默认最小值为0，最大值为10，计数间隔为1.
5. 常用属性：
   1. minimum：最小值。
   2. maximum：最大值。
   3. stepSize：计数间隔。
   4. value：初始数值。

l)          进度条（progressBar）：标签：<mx:progressBar/>.

1. 分类：
   1. 确定时间（determinate）进度条：用于线性体现事件在已知总体时间上的进度，以进度所用时间百分比来显示，
   2. 未定时间（indeterminate）进度条：用于体现未知整体时间的进程。
2. 进度条控件模式：mode。

操作模式：

1)、事件（event）：使用属性source定义一个发出progress和complete事件的加载进程。

2)、调查（polled）：在使用source属性定义加载时，列出getsBytesLoaded()和getsBytesTotal()      方法。

1. 属性：
   1. source：定义其进程是用来进行某种任务的加载过程。
   2. Label：随进度栏显示的文本。
   3. Maximum：最大进度值。
   4. Minimum：最小进度值。
2. 进度条控件模式：mode。

操作模式：

            1.   事件（event）：使用属性source定义一个发出progress和complete事件                         的加载进程。

2.   调查（polled）：在使用source属性定义加载进程时，列出getBytesLoaded()            和getsBytesTotal()方法。

3.   手工（manual）：在使用setProgress()方法过程中定义maximum、minmum            和indeterminate属性。

1. 事件：
   1. Hide：组件不可见。
   2. Show：组件可见。
   3. Complete：加载完成时。
   4. Progress：加载中。

 

m)      滚动条、水平滚动条、垂直滚动条（ScrollBar、HScrollBar、VScrollBar）：

1. 标签：水平滚动条：<mx:HScrollBar/>、垂直滚动条：<mx:VScrollBar/>
2. 滚动条的4部分：两个箭头按钮、一个滑轨、一个滑块。
3. 滚动条根据一下4个参数来显示状态：
   1. 最小范围值。
   2. 最大范围值。
   3. 当前位置，其值必须在最小和最大范围值内。
   4. 视窗大小，代表了在此显示范围内每次可显示的数据量。
4. 常见属性：minScrollPosition：最小滚动条位置；maxScrollPosition：最大滚动条位置；scroll：滚动时触发的事件。
5. 例如：<mx:VScrollBar id="bar" minScrollPosition="0" maxScrollPosition="{panel.width-20}" scroll="myScroll(event);">

n)        SWF加载器（SWFLoader）：标签：<mx:SWFLoader/>

1. Swf控件可加载GIF、JPEG、PNG、SVG和SWF格式的文件到应用程序中。
2. Swf加载器可以加载Flex应用程序。
3. 绑定文件：<mx:SWFLoader id="load" source="@Embed(source='images/image.swf')"/>
4. 设置是swfloader任意缩放:maintainAspectRatio=false;scaleContent=false;

• o)        排列列表（TileList）：标签：<mx:TileList/>

1. 优点：只在显示区域用实例显示对象。
2. 通常包括一个坐标方向的滚动条。
3. 通过定义allowMultipleSelection属性来选择单个或者多个项目。
4. 绑定数据：

在actionscript中的代码如下：

Private var listArray:Array=[{image:"image/img1.gif",data,0},{image:"image/img2.gif",data,1}];

[Bindable]public var TileListdp:ArrayCollection=new ArrayCollection(listArray);

1. 属性direction：控制其子控件的方向。

p)        音像（VideoDisplay）：标签：<mx:VideoDisplay/>.

1. 音箱控件用于影像和音响数据。
2. 属性：
   1. playheadTime：定义了当了当前在音像文件中的位置以秒计算。控件支持volume属性，数值范围为0.0~1.00，从无声到有声，默认值为0.75.
   2. miantainAspectRadio、height、width：用于设定控件大小。
3. 方法：
   1. close()：强制关闭输入流以及Flash media server的链接。
   2. load()：加载媒体文件，但不播放。
   3. pause()：在不移动播放头情况下暂停回放。
   4. stop()：停止回放。

attachCamera()：指定播放来自摄像机的视频流。

1. 绑定音像文件:<mx:VideoDisplay source="swf/head.flv"/>。

 

q)        标签条（TabBar）：标签:<mx:TabBar/>

1. 常用事件：itemClick。
2. 标签条控件定义了一系列标签按钮，放置在一个水平条上。每一个标签条控件可以打来一个相应的子类容器。标签条控件可用来设置单个容器的可视性。
3. 遍历控件中的各个tab，并通过labelPlacement属性设置标签位置：

var tab:Tab;

var idx:unit;

var len:unit=tabBar.numChildren;

for(idx=0;idx<len;idx++){

tab=tabBar.getChildAt(idx) as Tab;

tab.labelPlacement=tab.label.

}

七、容器控件

1. 应用容器（Application）:标签：<mx:Application>
   1. 语法格式:<mx:Application  属性  样式  事件>.
   2. 特点:

a)         应用对象使MXMl文件具有<mx:Application>标签。

b)        绝大多数情况下，Flex只有一个应用对象。

c)         根应用文件就是第一个加载的文件。

d)        应用对象一般是文本对象，但文本对象不一定是应用对象。

e)         通过mx.core.Application.application路径，我们可以在程序的任何地方找到根的应用对象。

1. 属性：

a)         Xmlns：用于定义当前文件将会使用到的命名空间。

b)        Layout：在不特别设置的情况下，当前页遵循的页面布局。

1. 事件：

a)         Preinitialize：预初始化时发出。

b)        creationComplete：完成构造，属性，测量，布局，绘制后发出。

1. 布局容器（Layout）:标签：<mx:Application>
   1. 画布（Canvas）：标签：<mx:Canvas/>

a)         语法:<mx:Canvas>子类标签</mx:Canvas>

b)        定位方式：

1. 使用绝对值定位:(Absolute):在画布上使用(x,y) 值来定义子类的位置。
2. 使用约束版面布局(Constraint-based Layout):给出子类到画布的顶边、底边和左右边的距离，来进行布局和定位。

c)         画布子类可重叠的特性：可用来得到不同的效果。

d)        要控制滚动条，通过属性horizontalScrollPolicy和verticalScrollPolicy进行控制，值为：on/off/auto。

1. 盒子、水平盒子、垂直盒子（Box、HBox 和VBox）:

a)         盒子容器用于在水平或者垂直方向上按序列排序子类组件。

b)        语法:<mx:Box 属性 样式>子类标签<mx:Box/>.

c)         标签:盒子：<mx:Box>；水平盒子：<mx:HBox>、垂直盒子：<mx:VBox>.

d)        两种方法定义垂直和水平的盒子：

1. 使用<mx:HBox>和<mx:VBox>.
2. 使用<mx:Box>,并设置direction属性（水平-hoorizontal和垂直-vertial）。

e)         属性：

1. horizontalAlign、horizontalCenter：水平居中。其中horizontalAlign的属性值为left、center、right；
2. verticalAlign、verticalCenter：垂直居中。其中verticalAlign的属性值为top、middle、buttom。
3. 控制条（ControlBar）:标签：<mx:ControlBar>.
   1. 语法：<mx:ControlBar>子类标签</mx:ControlBar>
   2. 应用控制条（ApplicationControlBar）:标签:<mx:ApplicationControlBar>

a)         应用控制条容器是控制条容器的子类.

b)        语法：<mx:ApplicationControlBar 属性 样式> 子类标签</mx:ApplicationControlBar>

c)         两种模式:

1. 固定模式：控制条一直固定在窗口的顶部，不会随着面板滚动。
2. 浮动模式：控制条可以在窗口的任何地方，而且随着面板滚动。
3. 分离盒、水平分离盒、垂直分离盒（Vidided Box、HVididedBox 和VVididedBox）:

a)         标签：分离盒<mx:DividedBox>;水平分离盒：<mx:HDividedBox>;垂直分离盒：<mx:VDividedBox>.

b)  语法：<mx:DividedBox 属性 样式 事件>子类标签</mx:DividedBox>.

1. 表单、表单头、单元格（From、FormHeading、FormItem）。

a)         标签：表单:<mx:From>；表单头：<mx:FormHeading>；单元格：<mx:FormItem>.

b)        语法:<mx:From 样式>

<mx:FromHeading  属性 样式/>

<mx:FromItem 属性 样式>

子类标签

<mx:FromItem>

                                          </mx:From>

c)         设置必填项目的方式：在单元格中定义required属性为true。

d)        存储和确认表单数据：

1. 在表单控件中存储：如

<mx:Script>

private function processValues(myName:String,phoneNumber:String):void{}

</mx:Script>

1. 定义一个数据模型来存储：如

<mx:Script>

private function processValues():void{

var myName:String=myFrom.myName;

var ipPhone:String=myFrom.phoneNumber;

 }

</Script>

e)         可通过backgroundColor和brderStyle属性来修改背景色和边框样式。

f)         formHeading组件用于显示From容器中一组控件的标题，用来提示用户该表单收集的是什么样的数据。

g)        formItem组件是定义一个标签，通过设置label属性来提示用户每一个输入组件的输入内容。

1. 格栅布局容器（Grid）:标签：<mx:Grid>

a)         格栅(Grid)由格栅(Grid)、格栅行(GrodRow)和格栅细目(GridItem)组成。

b)        语法:<mx:Grid 样式>

<mx:GridRow>

<mx:GridItem>

子类标签

</mx;GridItem>

<mx:GridRow>

<mx:Grid>

c)         Grid容器允许按单元格的行和列来排列子项。Grid容器包含一行或多行，并且每行包含一列或多个单元格或项目。

1. 面板布局容器（Panel）：标签：<mx:Panel>

a)         3中定义方式:水平（horizontal）、垂直（vertical）和精确（absolute）。

b)        语法：<mx:Panel 属性 样式 事件>

子类标签

</mx:Panel>.

c)         Panel容器包含题栏、标题、边框以及子项分内容区域。使用panel容器包围顶级应用程序模块。

1. 排列模板布局容器（Tile）：标签：（mx:Tile）.

a)         排列模板容器将子类按顺序排列在类似格栅的横平竖直的单元格中，当一行放满时会自动换到下一行。

b)        子类：<mx:Tile 属性 定位>子类标签</mx:Tile>。

c)         Tile容器将其放在由大小相等的单元格组成的网格中。可以使用tileWidth和tileHeight属性指定这些单元格的大小。让Tile容器根据最大子项确定单元格大小。

1. 标题窗口布局容器(TitleWindow):标签：<mx:TitleWindow>。

a)         标题窗口具有标题条、边框和容纳子类组件的内容区域，并且可在其右上角显示一个关闭的按钮。

b)        语法：<mx:TitleWindow 属性 事件>子类标签</mx:TitleWindow>.

c)         弹出标题窗口：代码如下：

private function showWindow():void{

var popWindow:IFlexDisplayObject=PopUpManager.createPopUp(this.myPanel,this.titleWindow,true);

PopUpManager.centerPopUp(popWindow);

}

d)        关闭标题窗口，代码如下：

private function close():void{

PopUpmanager.removePopUp(this);

}

e)         对话框返回值id处理：

1. 通过application处理。

在Application中定义一个public变量user_id，则可以在对话框   Dialog中赋值给Application.user_id变量，然后ModuleA中去读      取Application.user_id变量。

1. 通过Dialog.owner来处理。

触发Dialog：

Var dialog:Dialog=PopUpManager.createPopUp(this,Dialog,true) as        Dialog;

Dialog.owner=this;

在dialog中进行ModuleA的user_id变量赋值。

ModuleA(this.owner).user_id="用户id";

1. 通过自定义事件来处理。

自定义一个事件，然后在Dialog中新建一个事件，将user_id作为参数置入到事件中，然后派发该事件。

1. 通过全局变量来处理。

定义全局变量，然后在Dialog中置user_id变量，在ModuleA中读取user_id变量即可。

1. 通过parentDocumnt来处理。

在dialog中进行ModuleA的user_id变量赋值：

parentDocument.user_id="用户id";

f)         对话框返回值处理办法：

1. 如果该返回值影响Application，建议用全局变量来处理。
2. 如果该返回值只是当前窗体，建议用parentDocument进行处理。

 

1. 导航容器（Navigator）：

a)         视窗堆栈导航容器：标签:<mx:ViewStack>.

1. 将一组子类容器从上到下堆栈起来，每次只有一个容器可视、可活动。
2. 必须使用链接条、列表条、按钮条和切换按钮条来控制，选择子类容器。
3. 语法：<mx:ViewStack 属性 样式 事件>子类标签</mx:ViewStack>。
4. 属性：
   1. selectedIndex：定义子类容器的指针。数目为0~numChildren-1.
   2. selectedChild：定义子类容器的ID。如果没有容器被选择，其值为null。属性只能在actionscript中定义。
   3. numChildren：子类容器的总数目。

b)        列表导航容器：标签：<mx:TabNavigator>。

1. 语法：<mx:TabNavigator 样式>子类标签</mx:TabNavigator>。
2. 列表导航容器每次只能有一个子类被显示。可通过列表或者使用键盘导航控制来选择不同的子类。在子容器发生该表时可以利用change事件相对应地进行监听。自动建立子容器的列表，可改变列表文本。

c)         折叠导航容器（Accordion）：标签：<mx:Accordion>.

1. 折叠导航容器建立一系列的面板，依次叠加起来。每一个面板的头就是导航按钮，单击任何一个按钮就会打开相应的面板。
2. 语法:<mx:Accordion 属性 样式>子类标签</mx:Accordion>
3. 属性：
   1. selectedChild：对当前可见子容器的引用。默认值为对第一个子项的引用。如果没有子项，则此属性为null。只能在actionscript中设置此属性。
   2. selectedIndex：当前可见子容器的从零开始的索引。子索引从0开始，子项的数目-1。

八、其他控件

a)         高级表格(AdvancedDataGrid):标签:<s:AdvancedDataGrid>

1. AdvancedDataGrid扩展了DataGrid控件的功能，为应用程序增添了数据可视化功能。能更好地控制数据显示、数据聚合和数据格式设置。可显示多列数据，具有多个属性的对象。
2. AdvancedDataGrid具有如下功能:
   1. 列可以具有不同宽度或同一固定宽度。
   2. 用户可以在运行时调整列的尺寸。
   3. 用户可以在运行时重新排列列。
   4. 可选择自定义列标题。
   5. 能够对任何列使用自定义项显示器来显示数据（而非文本）。
   6. 支持通过单击某列对数据进行排序。

b)        OLAPDataGrid：标签：<s:OLAPDataGrid>

1. OLAPDataGrid控件扩展了AdvancedDataGrid控件的功能，可显示OLAP查询的结果。
2. OLAPDataGrid用于统计的字段只能是数字，目前支持求和，求平均数，求最大最小四种运算。
3. OLAPDataGrid继承于AdvancedDataGrid,但是内容不能拖拽，排序和编辑。

c)         可编辑文本(RichEditableText)：标签：<s:RichEditableText>.

1. 用于显示、滚动、选择和编辑各种格式的文本。
2. 可包含可单击的超链接以及可嵌入或从URL加载的内嵌图形。
3. 不包含滚动条，但可实现用于以编程方式滚动的接口(IViewport)。支持使用鼠标滚动垂直滚动。
4. 不包括用于更改文本格式的任何用户界面。但提供了可以通过编程方式执行此操作的接口。

d)        RichText：标签<s:RichText>。

1. 可以显示一行或多行富文本或嵌入图像的UIComponent。
2. 不支持滚动、选择、编辑、可单击的超链接或从URL加载的图像。
3. 如果文本超出了显示这些文本的空间，RichText可以截断文本，使用截断指示符(如"...")替换超额文本。

e)         Spinner：标签：<s:Spinner>

1. Spinner组件从有序集中选择值。使用基于stepsize属性的当前值增大或者减小当前值的两个控件。
2. Spinner控件由两个必须按钮组成，一个用于增大当前值，一个用于减小当前值。可使用向上箭头和向下箭头或鼠标滚轮遍历这些值。
3. Spinner组件的范围是value属性的允许的值集。允许的值为minimum和snapInterval属性的整数倍数之和，且小于或等于maximum的值。

f)         VideoPlayer：标签：<s:VideoPlayer>

1. VideoPlayer控件是一个可设置外观的视频播放器，它支持渐进式下载，多比特率流和流视频。支持播放FLV和F4V文件。
2. VideoPlayer组件可以播放本地摄像头的视频流。 
3. 属性、方法与事件:
   1. 播放位置属性：PlayHeadTime

a)         表示视频播放头的位置，以秒计算。

b)        属性可即了读取也可写入。读取PlayHeadTime属性表示当前视频播放的位置，设置PlayHeadTime属性表示设置视频流的位置。

1. 常用方法

a)         Close：关闭视频流。

b)        Load：加载视频。

c)         Pause：暂停视频。

d)        Play：开始播放。

e)         Stop：停止播放。

注：pause方法与stop方法的不同：pause方法使得PlayHeadTime属性暂时变化，stop方法使得PlayHeadTime属性为0，并停止播放。

1. 常用事件：

a)         Complete：播放头到flv文件结束位置事件。

b)        PlayHeadUpdate：间隔一段事件更新事件。

c)         Progress：加载flv文件进度事件。

d)        Ready：flv视频加载完成事件。

e)         StateChange：视频状态发生改变事件，如播放、暂停、停止等。

g)        BorderContainer：标签：<s:BorderContainer>。

1. BorderContainer类定义一组css样式，用于控制容器的边框外观和背景填充。
2. 默认情况下，边框的笔触是圆形的。可将笔触的joints属性设置成Joints.MITER来更改边框的笔触。

h)        DataGroup：标签 :<s:DataGroup>

1. DataGroup类是数据项目的容器基类。DataGroup类将根据项目转换为可视元素以进行显示。通常仅用于包含作为子项的数据项目。
2. 不能更改DataGroup容器的外观。
3. 属性与方法：
   1. ItemRenderer：用于数据项目的项显示器。该类必须实现IDataRenderer接口。-属性。
   2. dataProvider：为DataGroup的数据提供程序。可用作数据绑定的源。-属性。
   3. itemToLabel()：返回可在项呈示器中显示的String。将String写入到项呈示器的labelText属性。 -方法
   4. updateRenderer()：更新呈示器以重用。此方法首先会准备项呈示器以重用，方法是清除任何旧属性，同时使用新属性进行更新。此方法应对项呈示器设置data属性。-方法。

i)          Group：标签：<s:Group>。

1. Group容器将实现IUIComponent接口的任何组件和实现IGraphicElement接口的任何组件视为子代。希望管理可视子项(可视组件和图形组件)时，使用此容器。
2. 不能设置Group容器的外观。
3. 常用方法：
   1. addElement()：将可视元素添加到此容器中。该元素将在添加完所有其他元素之后添加，并出现于所有其他元素之上。
   2. addElementAt()：将可视元素添加到此容器中。该元素将被添加到指定的索引位置。索引2代表显示列表中的第一个元素。
   3. removeAllElements()：从容器中删除所有可视元素。
   4. removeElement()：从此容器的子列表中删除指定的可视元素。在该可视容器中，位于该元素之上的所有元素的索引位置都减少1.

j)          HGroup：标签：<s:HGroup>。

1. HGroup容器是HorizontalLayout类的Group容器的一个实例。
2. HGroup容器将所有元素进行横排。
3. 属性:
   1. columnCount：返回视图中的元素的当前数目。-属性
   2. firstIndexInView：组成布局在布局目标的滚动矩形内的第一列的索引，或-1。-属性
   3. lastIndexInView：组成布局在布局目录的滚动矩形内的最后一列的索引，或-1。-属性

k)        ModuleLoader：标签：<mx:ModuleLoader>。

1. ModuleLoader组件是一种可视化的组件，方便开发人员在运行期间动态地加载和卸载module。
2. 常用属性、方法与事件：
   1. applicationDomain：applicationDomain类，将你的模块加载到哪个应用域。-属性
   2. Url：String类型，要加载的外部MXMLmodule的url。-属性
   3. LoadModule：格式：loadModule(url:String=null,bytes:ByteArray=null):void,加载module。-方法
   4. unloadModule：格式：unloadModule():void，卸载module，释放内存。-方法
   5. Error：当module抛出错误是派发。-事件
   6. Loading：当ModuleLoader开始根据URL加载module时派发。-事件
   7. Progress：Module加载过程中以一定的间隔周期派发。-事件
   8. Ready：当module完成加载时派发。-事件
   9. Setup：当module已下载，但module并没有加载完成时派发。-事件
   10. Unload：当module卸载完成时派发。-事件
   11. urlChange：当ModuleLoader有了一个新的url是派发。-事件

l)          SkinnableContainer：标签：<s:SkinnnableContainer>。

1. SkinnableContainer类是具有可视内容的可设置外观容器的基类。SkinnableContainer容器将实现IVisualElement接口的任何组件视为子项。
2. 属性与方法：
   1. Layout：此容器的layout对象。负责容器中可视元素的测量与布局。-属性
   2. numElements：此容器中的可视元素的数量。-属性
   3. addElement()：将可视元素添加到此容器中。该元素将在添加完所有其他元素之后添加，并出现与所有元素之上。-方法
   4. addElementAt()：将可视元素添加到此容器中。该元素将被添加到指定的索引位置。索引0代表显示列表中的第一个元素。-方法
   5. getElementAt()：返回指定索引出的可视元素。-方法
   6. getElementIndex()：返回可视元素的索引位置。-方法
   7. removeAllElements()：从容器中删除所有可视元素。-方法
   8. removeElement()：从此容器中的子列表中删除指定的可视元素。在该可视容器中，位于改元素之上的所有元素的索引位置都减少1。-方法
   9. removeElementAt()：从容器中的指定索引位置删除可视元素。-方法

m)      SkinnableDataContainer：标签：<s:SkinneableDataContainer>

1. SkinnabkeDataContainer类是数据项目的容器基类。此类将数据项目转换为可视元素以进行显示。通常用于包含作为子项的数据项目。
2. 项显示器定义容器中数据项目的可视表示形式。项显示器将数据项目转换为可以由容器显示的一种格式。必须将项显示器传递该SkinnableDataContainer才能是当地显示数据项目。
3. 属性：
   1. itemRendererFunction（属性）：为某个特定项目返回一个项显示器IFactory的函数。应定义一个与此示例函数类似的显示器函数：

function myItemRendererFunction(item:Objecy):IFactory

1. itemRenderer(属性)：用于数据项目的项显示器。该类必须实现IDataRenderer接口。
2. Layout(属性)：此容器的layout对象。此对象负责容器中可视元素的测量和布局。

n)        TileGroup：标签：<s:TileGroup>

1. TileGroup容器是使用TileLayout类的Group容器的一个实例。
2. 属性：
   1. columnCount（属性）：实际的列计数。默认值为-1.
   2. requestedColumnCount（属性）：要显示的列数。设置为-1会允许TileLayout自动确定列计数。
   3. requestedRowCount（属性）：要显示的行数。设置为-1会删除显式覆盖并允许TileLayout自动确定行计数。

• o)        VGroup：标签：<s:VGroup>

1. VGroup容器是使用VerticalLayout类的Group容器的一个实例。
2. VGroup将容器中所有元素进行竖排。
3. 属性:
   1. firstIndexInView（属性）：组成布局且在布局目标的滚动矩形内的第一个布局元素的索引，或者-1。
   2. lastIndexInView（属性）：组成布局且在布局目标的滚动矩形内的最后一个布局元素的索引，或者-1。
   3. rowCount（属性）：可见元素的当前数目。

p)        面积图表（AreaChart）：标签：<mx:AreaChart>.

1. 使用AreaChart控件将数据展示为其线型边界表示数据值的面积区域。面积区域有线条及其下边所填充的颜色和图案组成。可以使用图标或符号沿着边界线展示每个数据点，也可以展示不带图标的简单区域线。
2. 常用属性：
   1. yField：指定数据源的某字段，确定其为每个数据点在y轴上的属性。
   2. xField：指定数据源的某字段，确定其为每个数据点在x轴上的属性。如不指定此属性，flex将按照数据源中的数据顺序排列数据。
   3. minField：指定数据源的某字段，确定面积区域分底部在y轴上的位置。如不指定此属性，则面积区域的底部将与x轴对齐。此属性对覆盖、堆栈、100%堆积图不产生影响。
   4. form：指定数据序列在图表中的显示方式。如：

a)         segment：将每个数据点连成折现。此为form的默认值。

b)        step：水平与竖直的交错线，呈阶梯状。第一个数据点处，画一条水平线，然后是一条连接第二个数据点的竖直线。

c)         reverseStep：水平与竖直的交错线，呈阶梯状。第一个数据点处，画一条竖直线，然后是一条连接第二个数据点水平线。

d)        vertical：在第二个数据点的x坐标处，从第一个数据点的y坐标到第二个数据点的y坐标画出竖直线。

e)         horizontal：在第一个数据点的y坐标处，从第一个数据点的x坐标到第二个数据点的x坐标画出水平线。

f)         curve：在数据点之间画出曲线。

g)        type：表示很多图表的变化，如覆盖、堆栈、100%堆积图，高低面积区域图等。

q)        条形图表（BarChart）：标签：<mx:BarChart>

1. .使用BarChart控件，以水平条的方式展示数据，并用水平条的长表示数据的值。使用BarSeries图表序列为BarChart控件定义数据。
2.  常用属性：

a)         yField：指定数据源的某字段，以确定图标中的每个水平条的根部处于y轴的位置，如不指定此属性，则flex将以数据源中的数据排列水平条。

b)        xField：指定数据源的某字段，以确定每个位于x轴方向上的末端位置。

c)         minField：指定数据源的某字段，已确定每个位于水平条根部的x轴位置。

d)        type：要呈示的条形图类型：

1. Clustered：按类别分组条。Type的默认值。
2. Overlaid：多个条以逐个叠加的方式按类别呈示，最后一个系列位于最顶部。
3. Stacked：条以堆栈的方式收尾相接，并按类别进行组织。各条都表示其下方值的累计值。
4. 100%：条以堆栈的方式首尾相接，一直累积到100%。各条表示该条所占该类别的值之和的百分比。

 

r)         气泡图表(BubbleChart)：标签<mx:BubbleChart>.

1. 使用BubbleChart控件展示带有三个值的数据点：相对于图表中的其他数据点来决定的此数据点的x轴方向的位置、y轴方向的位置、图形的大小。
2. 属性：
   1. minRadius：指定图表元素以像素为单位的最小半径。
   2. maxRadius：指定图标元素以像素为单位的最大半径。
   3. xField：指定数据源中的某字段，以确定每个数据点在x轴上的位置。
   4. yField：指定数据源中的某字段，以确定每个数据点在y轴上的位置。
   5. radiusField：指定数据源中的某字段，以确定每个数据图形相对于其他数据图形的半径。

s)         蜡烛图表(CandlestickChart)：标签：<mx:CandlestickChart>

1. 使用CandleSickBart控件表示数据系列的高、低、开放和闭合值的一系列烛台图表来表示财务数据。每个烛台图表中垂直线段的顶部和底部分别表示数据点的高值和低值，而填充框的顶部和底部分别表示开放值和闭合值。每个烛台图表的填充方式不同，具体取决于数据点的结束值是高于还是低于起始值。
2. CandleSickBart控件要求其series属性包含CandlestickSeries对象数组。

t)          圆柱图表（ColumnChart）：标签：<mx:ColumnChart>

1. ColumnChart控件将数据表示为一组垂直列，其高度有数据中的值确定。可使用ColumnChart表示包含简单列、群集列、堆栈、100%堆栈或高/低的各种不同图表。
2. ColumnChart控件要求其series属性包含ColumnSeries对象数组。
3. 堆栈和100%列图表会覆盖其ColumnSeries对象的minField属性。
4. 属性：
   1. Type：列图表的类型：

a)         Clustered：按类别分组来自不同系列的值。此为默认值。

b)        Overlaid：多个值以逐个叠加的方式按类别呈示，最后的系列位于最顶部。

c)         Stacked：列以堆栈的方式逐层堆叠，并按类别进行组织。各列都表示其下方列的累计值。

d)        “100%”：列以堆栈的方式逐层堆叠，一直累积至100%。各列表示该列所占类别的值之和的百分比。

u)        HLOCChart（HighLowOpenCloseChart）：标签：<mx:HLOCChart>

1. HLOCChart控件将财务数据表示为一系列表示数据系列高、低、收盘和开盘值的元素。每个元素中垂直线的顶部和底部分别代表数据点的最高值和最低值。右侧的刻度线表示收盘值，左侧的刻度线代表开盘值。
2. HLOCChart控件要求其series属性包括HLOCserices对象Array。

v)        Legend：标签：<mx:Legend>

1. Lengnd控件可向图表中添加图例，此图例可为图表中的每个数据系列显示一个标签，以及一个用于显示系列的图表元素的键。
2. 可将图表控件标识符绑定到Legend控件的dataProvider属性，或者定义一个LegendItem对象Array，进而初始化Legend控件。
3. 事件：
   1. itemClick：当用户在Legend控件中的LegendItem上单击时分派此事件。
   2. itemMouseDown：当用户在Legend控件中的LegendItem上按下鼠标按键时分派此事件。
   3. itemMouseOut：当用户将鼠标从Legend中的LegendItem上移走时分派此事件。
   4. itemMouseOut：当用户将鼠标移至Legend控件中的LegendItem上时分派此事件。
   5. ItemMouseUp：当用户在Legend中的LegendItem上释放鼠标按键时分派此事件。

w)       折线图表(LineChart)：标签：<mx:LineChart>。

1. LineChart控件将数据系列表示为使用连续线条连接的多个点。
2. 可使用图标或元件来表示该线条上的每个数据点，或者显示一条不带图标的线条。
3. LineChart控件要求其series属性包含LineSeries对象Array。

x)        圆饼图表(PieChart)：标签：<mx:PieChart>。

1. PieChart控件使用标准的饼图来表示数据系列。数据提供程序的数据确定饼图中每个楔子相对于其他楔子的大小。可使用PieSeris类创建标准的饼图、环形图或堆叠的饼图。
2. PieChart控件要求其series属性包含PieSeries对象Array。

y)        散点图表（PlotChart）：标签：<mx:PlotChart>

1. PlotChart控件使用两个值来表示每个数据点的数据。一个值用于确定数据点沿水平轴的位置，另一个值用于确定该点沿垂直轴的位置。
2. PlotChart控件要求其series属性包含PlotSeries对象A rray。