9 Flex中的可视化组件
9.1 容器控件
1. Application容器
一个Flex应用程序必须有一个唯一的Application容器。
2. 布局容器
Ø Canvas：四边形区域，可以放置子容器或者子控件。
Ø Box、HBox、VBox：让子容器或子控件按照水平方向或垂直方向顺序排列。
Ø Panel：包含一个Title栏，一个状态显示区域（标题栏的右侧），四个边框和内容区域。
Ø DividedBox、HDividedBox、VDivededBox：是一个都带有分割条的容器。
Ø Grid：提供的是一种基于表格布局的容器控件。GridRow,GridItem.
Ø Tile:表格控件。Tile内的一个个子元素就是Tile的单元格内容。每个单元格的大小和高度都是完全相同的四边形。决定Tile内单元格大小的因素是Tile容器内最大单元格元素的大小。
Ø Form、FormHeading、FormItem：组合用来创建一个收集用户信息的表单。
Ø TitleWindow：弹出窗体容器，是Panel容器的子类。TitleWindow容器除了Panel容器具备的标题栏，状态显示区域（标题栏的右侧），边框和内容区域外，还有一个关闭按钮，该按钮用来关闭弹出的窗体容器。弹出的TitleWindows窗体的位置可以被鼠标任意拖曳。 TitleWinddow的创建没有对应的MXML标签，使用类mx.managers.PopUpManager来创建和关闭TitleWindow。PopUpManager的静态方法createPopUp()用来弹出TitleWindow，该方法具有三个参数。第一个参数指定的是TitleWindow的父容器，即TitleWindow是从哪个父容器内弹出。第二个参数指定要弹出的TitleWindow类型对象。第三个元素是个布尔值类型的参数，它指定弹出的TitleWindow是模式化的还是非模式化窗体，默认为非模式化（值为false）。注意：很多时候，我们都可以先把TitleWindow控件以MXML的方式定义好。然后在使用PopUpManager的addPopUp方法时，构造一个刚才的以MXML方式定义好的TitleWindow类型实例即可。
Ø ControlBar：一般都作为Panel或者TitleWindow的子容器出现，可以理解为功能导航控件。
Ø ApplicationControlBar：功能类似于ControlBar，但它包含的子控件是用来操作整个应用程序的。
3. 导航容器
导航容器可以包含多个子容器，但某一时刻只允许显示一个子容器。导航容器提供了用于显示不同子容器的功能。
Ø ViewStack：切换子容器可以调用selectedIndex和selectedChild属性。除了自己指定切换ViewStack不同子容器的逻辑，我们还可以结合使用LinkBar、TabBar、ButtonBar、ToggleButtonBar控件，这些控件都是基于NavBar的导航控件，把ViewStack的对象实例绑定到这些控件的dataProvider属性上时，ViewStack容器会自动根据NavBar控件的导航功能而自动切换不同的ViewStack子容器。
Ø TabNavigator：容器自带了一个标签条，通过该标签条上的选项可以切换到不同的子容器内。
Ø Accordion：容器提供的子容器导航条可以切换不同的Accordion子容器，通过点击导航条可以折叠或伸缩子容器的内容。Accordion容器更适合步骤性更强的操作，如网站注册的步骤过程。
9.2 通用控件
Ø Alert：弹出式的模式化消息提示框。Alert.show(7个参数)。
Ø ColorPicker：为用户选取颜色值提供了一个可视化的调色板。event.currentTarget.selectedItem获取的是调色板对象的选取颜色值，event.currentTarget.selectedIndex获取的是调色板对象选取颜色的索引值。
Ø ComboBox：下拉框控件，允许用户在下拉列表中选取某个指定的元素内容。dataProvider属性值可以是Array类型或者实现了ICollectionView或者IList接口的类型。
Ø HRule，VRule：水平线控件以及垂直线控件。
Ø HSlider，VSlider：是一种通过浮动块在轨道上的滑动位置来确定值的控件。thumbDrag属性用来监听当用户用鼠标移动滑动块时所发生的事件。ThumbPress属性偶那个来监听当用户用鼠标移动滑动块时所发生的事件。thumbRelease属性用来监听当用户的鼠标从滑动块上离开时所发生的事件。
Ø HscrollBar,VscrollBar:水平或垂直方向的拖动条，通过拖曳这些拖动条，可以让不能完全显示区域的内容也显示出来。
Ø NumericStepper：允许用户从一系列指定的数字数组中选取一个数字。该控件由一个文本输入区域（只能键入数字）和一对小箭头按钮组成，通过上箭头和下箭头的点选可以改变当前NumericStepper的数字值。
<mx:NumericStepper value=”6” stepSize=”2” />
Ø Spacer：该控件相当于一个可视化的空白占位符，它的作用就是填充指定宽度或高度的空白区域内容。
Ø ProgressBar：该控件为某一事件的完成提供了可视化的进度状态。进度条可以分成确定性和非确定性两种类型。确定性进度条用来表明当前的时间与完成事件所需的总共时间的比例。非确定性进度条所提供的进度状态只能表明当前的事件还在进行中。其类型可以通过indeterminate属性值来确定。为true，则为确定性。
ProgressBar按照模式划分，可以分为三种控制模式：event，polled，manual。
Ø TabBar控件提供了水平或垂直显示的一组标签按钮。通常TabBar当度使用没有任何意义，它需要结合其他控件或容器一起使用。其默认的属性为dataProvider.
Ø DataGrid控件是一个用来格式化列表数据或编辑数据的表格控件。它是基于列表的控件，其默认的属性为dataProvider。DataGrid控件列的表头默认会自带排序功能，点击列的表头，可以看到此列的内容重新排列。鼠标点击DataGrid控件的某一项内容的时候，发生mx.events.ListEvent事件。通过控制DataGrid的itemClick等事件属性可以对DataGrid上发生的一系列事件进行监听。
Ø List控件可以在垂直方向显示一系列条目。当条目太多不能完全显示时，List控件自动出现一个垂直滚动条。List是基于列表的控件，其默认属性为dataProvider。当设置了List属性的allowMultipleSelection属性后，List控件可以同时选择多个选项。此时，通过属性selectedIndices和selectedItems可以分别获得选项的索引值数组和选项数组。List控件的内容项前还可以通过List的iconField属性来制定图标。
Ø HorizontalList：可以在水平方向显示一系列条目。这些条目可以是文字、图片、视频或者是这些内容的组合。
Ø TileList控件可以垂直或者水平地显示一系列条目。其默认属性是dataProvider。TileList控件默认的呈现方式是TileListItemRenderer，这种默认的呈现方式所显示的是文字（label）和图像（icon）所组合的数据。
Ø Tree控件提供给的是一种树形结构的呈现方式。Tree控件的节点分为枝节点和叶节点。默认的Tree控件提供的是一种基于图标和文字的呈现方式。Tree控件也是基于列表的控件，其默认属性是dataProvider。由于Tree控件所描述的数据结构具有很强的层次性，因此在使用dataProvider的时候，一般多使用XMLListCollection和ArrayCollection型的数据。
9.3 按钮控件
1)Button：普通按钮和toggle按钮（点击后继续保持按下的状态）。通常Button显示的图标都是通过内嵌图片资源的方式绑定到Flex应用程序中。
<mx:Button label=”Icon Button” icon=”@Embed(source=’asset/FlexLogo.gif’)”/>
2)ButtonBar和ToggleButtonBar：定义了一组外观相同并且内容相关的水平排列或垂直排列的按键组。
3)CheckBox：提供了一种可复选选项的图形化控件。
4)LinkButon：是一种特殊的按钮，多用来作为超链接的跳转。
<mx:LinkButton label=”go to google” width=”80” click=”navigateToURL(new URLRequest (‘http://www.google.com’))”/>
5)LinkBar:提供的是可以垂直或水平排列的LinkButton控件。显示时，LinkBar控件会自动在LinkButton间加上一个分割线。
6)RadioButton和RadioButtonGroup:单选控件。
7)PopUpButton：提供了一种弹出式的按钮。PopUpButton控件的popUp属性用来指定弹出的控件，弹出的控件通常是Menu或List。
9.4 文本控件
1) Label控件显示的是不可编辑的单行文本（text属性）。Label控件还支持显示HTML内容。
<mx:Label width=”100%”>
<mx:htmlText>
<![CDATA[ <b>你好 Flex </b> ]]> </mx:htmlText></mx:Label>
2) Text控件显示的是不可编辑的多行文本。注意：当由于设定好的显示区域内不能完全显示所有内容时，Text控件不会出现滚动条。Text控件也支持HTML代码的显示。
3) TextInput控件显示的是可编辑的单行文本。
4) TextArea：显示的可编辑的多行文本，具有边框和可选的内容滚动条。
5) RichTextEditor：允许用户编辑输入文本的样式，它类似于我们在网页中经常看到的所见即所得的在线HTML编辑器。addChild，removeChild…
9.5 日期控件
1) DateChooser控件显示的日历表包括月、年、每月天数
2) DateField控件由一个TextInput和一个点击TextInput后弹出的DateChooser控件组成。
9.6 载入控件
1) 资源嵌入：使用@Embed指示符。
2) Image：Flex支持显示的图片格式有GIF、JPEG、PNG、SVG、SWF。通过使用Image控件可以读取并显示这些图片。Flex中不支持动画效果的GIF图。<mx:Image> 用source属性来指定图片源的地址。
3) SWFLoader：可以让当前的Flex应用程序读取另一个Flex或Flash应用程序。<mx:SWFLoader id=”loader1” source=”Local.swf” />
例:SWFLoader控件与读取SWF的交互
(Local.mxml)
<?xml version=”1.0” encoding=”utf-8”?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” height=”75” width=”350” backgroundColor=”red”>
<mx:Label id=”localLabel” color=”blue” text=”The Label control of the embedded application.”/>
</mx:Application>
上面代码中定义了一个背景色为红色的Application容器，它包括一个Label控件。
(Text.mxml)
<?xml version=”1.0” encoding=”utf-8”?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
import mx.managers.SystemManager;
import mx.controls.Label;
public var loadedSM:SystemManager;
private function initNestedAppProps():void{
loadedSM=SystemManager(loader1.content);
}
public function updateNestedLabels():void{
loadedSM.application[“localLabel”].text=”change content”;
}
]]>
</mx:Script>
<mx:SWFLoader id=”loader1” source=”Local.swf” creationComplete=”initNestedAppProps();” />
<mx:Button label=”点击我” click=”updateNestedLabels();”/>
</mx:Application>
上面代码创建的SWFLoader控件动态读取的是当前路径下的Local.swf文件。当SWFLoader控件创建完毕的时候，执行initNestedAppProps()方法。该方法内根据SWFLoader控件的content属性构造了一个SystemManager类型的对象loadedSM。在鼠标点击Button控件的时候，通过loadedSM的application属性区访问内嵌的Local.swf中的LocalLabel控件对象，从而改变了localLabel的text属性值。
4) VideoDisplay控件用来读取Flash视频文件（FLV）或Macromedia Flash流媒体服务器上的视频流。
9.7 菜单控件
(一) Menu：菜单控件是一种可以弹出的包含很多选项的控件。
(二) MenuBar控件可以作为Menu控件的容器，在水平方向上显示Menu控件。
(三) PopUpMenuButton可以指定任意的控件作为弹出显示的内容。
(四) Repeater重复控件不算作可视化控件，它必须结合其他的可视化控件一起使用，以达到重复使用其他控件的目的。使用ActionScript代码创建循环比使用MXML中的Repeater控件创建循环的功能要强大得多，而且更灵活。但ActionScript方式构建循环所需的逻辑代码会多些。
浙公网安备 33010602011771号