Chapter 4:Building the user interface

 

1、flex包含一个基于组件的开发模型，你只需要按需求继承现有的组件并扩展相关的方法就可开发你的应用。

 

2、可视化组件包括以下主要特性：尺寸、事件、样式、效果、皮肤。

 

3、flex定义了两套组件。一套为Spark，放在spark.*包下。一套为MX，放在mx.*包下。Spark是在flex4中新添加的，mx为旧版本中定义的。两套组件的主要不同点在于样式及皮肤的使用。另外对于容器组件，布局的方式也改变了。

 

4、有些组件在两套UI中都存中，例如按钮，在这种情况下adobe建议你使用Spark中的组件。有些组件是某套UI特有的。例如Spark中的3d效果。mx组件中的数据可视化组件，例如DataGrid、AdvancedDataGrid。所以你的应用会包含两套UI中的组件。

 

5、可视化组件的继承层次结构：Object-EventDispatcher-DisplayObject-InteractiveObject-DisplayObjectContainer-Sprite-FlexSprite-UIComponent。flex中所有的可视化对像都继承自UIComponent。

 

6、UIComponent中需要注意以下属性。doubleClickEnabled:flex默认是不支持双击的，如果要开启双击，请把该属性设为true;height:在mxml中你可以设置值为数字，这时默认单位为pix。你也可以设置为70%这种比例。在as中，如果要设置百分比，你需要用percentHeight这个属性。x,y:这组属性只在layout为绝对布局时才有效。

 

7、每一个flex组件都有对应的mxml接口和as接口。两者之间是相等的。

 

8、每个一可视化组件都包含以下三个生命周期事件：preInitialize:组件刚被创建，还没有添加子节点，且不可见。initialize：把子节点初始化好，并尺寸也设置好，但仍然处于不可见状态。 creationComplete:组件已经被放在父容器中而且可见。你可以使用上面三个事件对组件做一些初始化工作。

 

9、flex提供了多种设置组件大小和布局的机制。默认大小：如果你不指定组件的大小或布局，flex会自动设置一个适合的值。显式设置大小：你可以显式地设置组件的height/width大小。基于比例的设置大小：例如在mxml中设置height/width=70%或在as中设置percentHeight/percentWidth=70。基于约束的布局：你可通过组件中的样式属性：top,buttom等设置组件的布局及大小。这种设置方式只可以使用在父组件为绝对布局的情况。

 

10、flex应用是基于事件驱动的。事件可以让程序员知道用户与UI的交互、组件的生命周期及外观变化。当一个组件分发事件，所以对该组件进行监听的监听器都会被通知。

 

11、除了用选择器设置组件的外观外，还可以直接调用元素的setStyle("proName","value")设置外观。

 

12、flex4中的类选择器需要使用命名空间。例子代码：@namespace s "library://ns.adobe.com/flex/spark"; s|BorderContainer{borderColor:red;}。

 

13、效果（effect）是组件在一段时间内的视觉或听觉上的变化，例如退色，位移等。

 

14、数据绑定是源属性(source)发生变化时，目的(destination)属性会自动产生变化。

 

15、flex提供了三种数据绑定的方式。第一种是在mxml中使用{}括号在目的属性中对源属性进行绑定。第二种是在mxml中使用<fx:Binding>标签对源属性与目标属性进行绑定。第三种是在as中使用BindingUtils方法对源属性与目标属性进行绑定。

 

16、数据绑定符{}可以直接对属性进行引用 ，也可以对方法进行引用。例如：{obj.text.toUperCase()}

 

17、数据绑定符{}和<fx:Binding>两种方式对数据进行绑定是从编译时就开始的。而BindingUtils即在运行时才开始绑定。

 

18、可绑定符[]的意思是当对应的属性变化时，会触发数据绑定事件，通知绑定的目标属性。

 

19、当源对像分发initialize事件以及在源对像变化时都会触发数据绑定事件。

 

20、如果你创建一个对像，并想让它可以成为数据绑定的源，那属性前面必需加上[Bindable]/[Bindable("eventname")]/[Bindable(event="eventname")]标签。当你直接使用[Bindable]标签时，实质上等价于[Bindable("propertyChange")]。当属性发生改变时，flex会分发propertyChange事件给绑定于此属性的绑定目标对像。

 

21、通过<fx:Binding>标签或BindingUtils可以把多个源属性绑定到一个目标对像。绑定后，任意一个源发生改变时，目标对像都会被更新。

 

22、双向绑定,数据的任意一方发生变化时，另一方都会被通知并改变。数据绑定表达式：@{}。数据绑定标签:<fx:Binding source="" distination="destination" twoWay="true" />。另外样式、效果、RPC中的request和arguments对像都不支持双向绑定。

 

23、使用方法作为数据绑定的源。当方法的参数为[Bindable]时，参数的改变会触发数据绑定事件，让目标属性的值更新为方法的结果。如果方法中没有[Bindable]参数，即目标属性只会在开始时被更新一次。

 

24、如果你想绑定一个方法作为源数据，但该方法又没有可绑定的参数时可以使用[Bindable(event="evenname")]标签，当该对像分发dispatchEvent(new Event("eventname"))时，绑定到方法的目标属性就会被更新。

 

25、在类定义的地方便用[Bindable]标签等价于在该类中的所有public属性以及有对应的set/get方法的属性中加上[Bindable]标签。

 

27、在定义一个属性的地方使用[Bindable]标签的作用是当该属性被替换成另一个值时，目标属性会接收到通知事件，并更新值。这里要注意的是只有被替换时才更新，如果只是该属性中的某个属性被改变的情况，目标对像是不会被更新的。

 

28、在数组(ArrayCollection)中使用[Bindable]标签时，无论是数组被替换还是数组中的元素改动，都会触发更新事件。

 

29、如果只绑定数组中的某个元素时，应使用getItemAt()。这样该元素被替换时会触发更新事件去更新目标对像。但如果使用[num]的形式进行绑定时，不会触发更新事件。

 

30、在数据绑定符({})和数据绑定标签(<fx:Binding>)中，你可以使用as表达式。例如{Number(obj.text)*6/7}和ex4表达式。但不能在BindingUtils.bingProperty()/bindSetter()中使用。

 

31、as中的方法绑定接口。BindingUtils.bindSetter(funToCall,sourceObj,sourceObj.property):ChangeWatcher。

 

32、你可以使用ChangeWatcher.watch("sourceobj","sourceobj.property",listener);方法添加一个监听器，当绑定时件触发时，listener会被调用。

 

33、如果源属性被替换，但被替换的对像与原对像是同一个对像，这种情况下更新更件不会被触发。如果你想自已控制事件触发，你可以在[Bindable("eventname")]中指定事件名，然后在想更新时通过dispatchEvent(new Event("eventname"))的方式触发。

 

34、数据绑定源中的整个属性链(chain)中的每一个节点都需要[Bindable]，如果只有最未端属性是Bindable，那链中的其它层属性被更改时，不会触发更新事件。

 

35、如果你把对像绑定到dataProvider的话，当你需要改变其中一个对像的一个属性时，你需要以下代码obj.dataprovider.editField(index,"propername","value");这样更新对像才会同时更新到显视组件中。

 

36、如果你把Array绑定到显视组件中时，该组件只在初始化时更新一次值。初始化后，当Array中的项改变时，不会触发更新。

 

37、容器提供了一个层次结构让你去布局组件。

 

38、flex最顶层持容器叫application。

 

39、flex容器有两种，一种是布局容器(layout container),另一种为导航容器(navigator container)。布局容器用于布局子组件/子容器的大小和位置。导航容器用于多个容器的导航。导航容器只能够到mx容器及spark的NavigatorContent容器。

 

40、mx组件容器只能存放继承自UIComponent对像的组件，而spark容器可以放下实现IVisualElement接口的组件。IVisualElement在UIComponent对像的继承层次中被实现。

 

41、mx容器与spark容器的主要区别在于mx组件的布局是固定的，而spark组件的布局是可以被替换的。

 

42、创建策略（Creation Policy）。创建策略指定了容器对子组件的初始化进程。创建策略有三个选项：ContainerCreationPolicy.AUTO/NONE/ALL。all：开始时初始化所有容器。NONE：不初始化所有子容器。AUTO：子组件在被需要时才创建，例如如果设置了AUTO选项，导航容器中除首页外，其它页的子组件在点击后才会被创建。

 

43、如果把一个容器的layout属性设为null，即该容器会采用它父容器的布局。

 

44、初始化事件顺序：preinitialize(自外向内)，contentCreationComplete(容器特有，自内向外)，initialize(自内向外)，cteationComplete(自内向外)。

 

45、容器中有一个enabled属性，如果该属性设为false，即所有节组件都处于enabled=false状态。

 

46、容器中的defaultButton属性。设置该属性后，当用户在该容器上按回车键时，该按钮被触发。

 

47、spark中的四种布局：BasicLayout(绝对定位或约束布局),HorizontalLayout(单行水平布局),VerticalLayout(单身垂直布局)，TileLayout(多行表格布局)。

 

48、spark容器中如果放置一个大于该容器的组件，默认情况下该组件会越过容器显视。

 

49、如果要把组件的显视限制在容器内，可以使用viewport和scrollbar。

 

50、viewport定义了两个区域，一个为逻辑区域(logical content)，另一个为可视窗口(visible window)。逻辑区域包括所有的子组件。显视区域是用户能看见的，是逻辑区域的一个子集。

 

51、veiwport的contentHeight/contentWidth是逻辑区域的大小，它的大小由子组件决定。

 

52、height/width是可视窗口的大小。

 

53、verticalScrollPosition/horizontalScrollPosition是可视化窗口相对于逻辑窗口的坐标。坐标为负时，可视化窗口向左上移。为正时向右下移。

 

54、viewport中的clipAndEnableScrolling属性默认为false，即如果子组件的大小大于容器，那子组件将越过容器边界显视。如果设置为true，即超出容器部份将不显视。

 

55、可以通过三种方法为容器增加滚动功能：1，增加HScrollBar/VscrollBar。2，把容器放到Scroller中。3，在容器使用的皮肤中加入Scroller。

 

56、在H/VScrollerBar中设置viewport中指定该bar的目标容器。当滑动滚动条时，滚动条会改变容器的verticalScrollPosition/HorizontalScrollPosition的值。

 

57、放在scroller中的容器的clipAndEnableScrolling的值为true。

 

58、只有实现了viewport接口的容器都才能使用scroller。如果容器没实现viewport，例如BorderContainer、SkinnableContainer，即可以在此容器内放置scroller然后再放实现了viewport的容器。也可以先在scroller内先放置group，然后再放置没实现viewport接口的容器。

 

59、mx组件容器默认就支持滚动，当clipContent为true而且子组件超出容器边界时，滚动条自动出现。如果需要滚动条一直出现，可以设置horizontalScrollPolicy和verticalScrollPolicy属性为true。

 

60、显视列表中对节点的操作方法，在Spark与mx组件中是不同的。主要的不同点是spark组件的方法名中大部份含有Element，而mx组件中则以Child代替。

 

61、在显视列表中调用numElements/numChildren方法得到的是直接子节点的数目。

 

62、flex/flash有三个坐标系统:全局(global),本地(local),内容(content)。

 

63、全局坐标是以舞台(stage)的左上角为坐标原点的坐标系统。在MouseEvent中有stageX和stageY属性就是全局坐标系统中的坐标轴。

 

64、本地坐标是相对于组件左上角的坐标。所有组件都有的mouseX与mouseY属性指的是本地坐标系统的值。MouseEvent中的localX与localY也是本地坐标系统的值。而拖放操作中的xOffset与yOffset也是。

 

65、内容坐标是是相对于组件内容的左上角。与全局和本地坐标不同的是内容坐标包括组件的内容区域。组件中的contentMouseX/contentMouseY属性是内容坐标的值。

 

66、在鼠标事件中的内容坐标与本地坐标是针对事件的目标对像，而目标对像并不是一定是你操作的对像。所以一般情况下你需要把本地坐标转化为全局坐标然后再把全局坐标转化为内容坐杆。

 

67、所有的可视化组件中有关坐标的属性。contentMouseX/contentMouseY：鼠标在组件中的内容坐标。

 

68、所有的可视化组件中有关坐标的方法：contentToGlobal/contentToLocal,globalToContent/globalToLocal,locatToContent/localToGlobal。

 

69、布局(layout)分两部份，一部份为尺寸(sizing)另一部份是定位(positioning)。

 

70、布局管理器(layout manager)通过三个阶段去布局你的组件。保证阶段（Commitment pass），测量阶段（Measurement Pass），布局阶段（Layout Pass)。在保证阶段，管理器先确认你设置的组件的一些与布局有关的值。此时管理器会调用各组件的commitProperties()。在测量阶段，管理器为各组件设置或计算一些尺寸相关的属性的默认值。此阶段管理器会调用各组件的measure()方法。在布局阶段，管理器会移动和设置组件以及相关的画图方法。此时管理器会调用各组件的updateDisplayList()。

 

71、flex在程序初始化时(initializes)时或在一些与布局相关的属性改变时会自动进行布局。

 

72、在某些时候你需要手动调用组件的validateNow()方法强制进行重新布局。但此方法是计算集中型的计算，所以要确宝在需要时才调用。

 

73、布局中常用的属性。x/y：相对于父容器的左上角坐标。在绝对布局中有效。height/width:调用像素值或百分比。top,bottom,left,right:该组件相对于父容器的上下左右距离。在约束布局/流布局中常常用到。这几个属性只在绝对布局中有效。

 

74、flex布局是不考虑组件是否处于可视状态。也就是说不论组件是否可视，它都会在区域中占空间。但你可以通过includeInLayout设置组件是否参与布局。要注意的是includeInLayout只影响组件是否处于容器的布局中而不影响组件是否处于可视状态。

 

75、布局中，adobe建议采用百份比的方式设置组件和容器的尺寸。

 

76、在自动布局容器中，x/y属性的设置是不起作用的。

 

77、Spacer是一个参与布局但不可见的控件。在一些规则布局的容器中Spacer可以起到占位的作用。另外如果把spacer的宽设为100%可以起到把左边元素各左布局，把右边的元素向右布局的作用。

 

78、虽然在自动布局容器中，设置组件的x和y不会起作用。但你可以通过效果(effects)暂时改变组件的位置和大小。典型，例如当用户鼠标移动组件中，组件大小变化原来的两位并移动到容器的最前面。

 

79、在自动布局容器中，如果你把autoLayout属性设置为false，即容器不会自动布局。但此属性在mx容器中有一些情况会失效。

 

80、组件的visible控制是否可见，而includeInLayout控件组件是否参与布局。

 

81、基于约束布局常用的属性top/bottom/left/right这四个属性分别代码该组件相对于父容器的上下左右的距离。baseline代表组件中文字（标题）的底线与容器顶的距离。verticalCenter/HorizontalCenter是指组件中心与容器中心的距离。这些属性常与一些比例的尺寸使用，做到流性布局的效果。这些属性中有一些是有冲突的，例如left/right与horizontalCenter。

 

82、Application中有两个独特的事件：applicationComplete和error。applicationComplete在所有初始化工作完成后被调用。error即在httpservice调用失败后被触发。

 

83、你可以在application标签中增加一个viewSourceURL属性，并指向一个文件。在运行过程中，在应用的任何一个空白地方右击都会出现一个查看源码的菜单。

 

84、在application中还有一些属性可以设置。frameRate:帧率,帧/秒。默认值为24。pageTitle：作用和html中的title一样。preloader：指向一个自定义进度条的swc或一个类。scriptRecursionLimit:定义as调用栈的深度，默认为100。scriptTimeLimit:在fp强制停止操作前，监听器能操作的时间。默认值也是最大值为60秒。usePreloader：是否使用默认的进度条。要使用进度条，app的宽度要大于160px。另外要注意的是上面的属性只能在mxml中被设置。

 

85、flex中有两个进度条。一个为DownloadProgressBar(MX),另一个为SparkDownloadProgressBar(Spark)。你可以通过扩展以上类去实现自定义的进度条，也可以通过继承Sprite，并实现IPreloaderDisplay接口。另外需要注意一个问题，进度条应尽量小地引用类库中的类，这样可以减小进度条的大小。

 

86、为了改善性能和减小程序的大小，有一部份spark容器是不支持皮肤的。一般情况下，你使用Group和DataGroup去管理布局。使用SkinnableContainer/SkinnableDataContainer去管理布局及自定义皮肤。

 

87、关于VerticalLayout/HorizontalLayout中的verticalAlign/HorizontalALign属性。除了常规的top/bottom等对齐方式外，还有justify:设置子组件的高/宽和容器的高/宽一样。conentJustify:把全部子组件的高度设为各子组件中的最高组件的高度，或容器内容高度。

 

88、VerticalLayout.variableRowHeight：设置每一行的高度是否由各子组件确定。HorizontalColumnWidth:设置每一行的宽度是否由子组件确定。两者的默认值为ture。如果设置为false，则每一行的宽度由rowHeight决定。如果rowHeight没决定，则由VerticalLayout.typicalLayoutElement决 定。如是要各元素都很小，则宽度由第一个元素的高度决定。

 

89、控制栏(Control bar)的好处是当容器出现滚动时，控制栏的绝对位置始终不变。默认情况下，在Panel中的控制栏在panel的底部。如果需要改变控制栏的位置可以修改默认的PanelSkin。

 

90、TitleWindow是Panel的一个子类，只要用于弹出窗的使用。TitleWindow被设计为可拖放，右上角有默认的关闭按钮等。

 

91、可以使用PopUpManager.createPopUp(parent:DisplayObject,class:Class,modal:Boolean=false):IFlexDisplayObject。弹出窗口并不会阻止主窗口脚本的执行。使用removePopUp()方法移除弹出窗口。使用TitleWindow的常规流程为新建一个继承自TitleWindow的自定义组件。然后在上面定义一些事件处理。移除方法一般为PopUpManager.removePopUp(this)。的<s:TitleWindow close="PopUpManager.removePopUp(this)"。另外可以使用PopUpManager.centerPopUp(obj)的方式使弹出窗口剧中。

 

92、mouseDownOutside事件是用户在弹出窗口外点击时触发的事件。你可以使用该事件来关闭窗口。

 

93、TitleWindow与应用之间的数据交互。方法一：把在调用PopUpManager.createPopup时返回的结果转型为你的自定义组件titlewindow组件类型，然后直接调用里面的方法或属性传入相关的小组件或变量。方法二、另外也可以使用一个通用的方法。把过程信息放在一个单例或静态变量中。方法三、通过事件的方式传递数据。方法五：在组件内直接用parentApplication等属性引用父组件。上面五个方法的耦合程序不同，可重用性不同，易用性也不同。在不同的情景中可以按需求选择合适的方法传输数据。

 

94、客户端编程与服务端编程不同。服务端是多线程，多用户，所以一个类通常有多个实例。但客户端的一个类在同一时间内通常只有一个实例，此时如果用静态变量或单例可以让编程模型更简单。

 

95、dataprivider需要一个实现了IList接口的对像作为数据来源。实现了IList接口的对像有：ArrayList,ArrayCollection,XMLListCollection。

 

96、DataGroup/SkinnableDataContainer需要条目渲染器(item renderer)来显视条目。你需要配置默认的或自定义的条目渲染器来显视数据。flex提供两个默认的条目渲染器：spark.skins.spark.DefaultItemRenderer/DefaultComplexItemRenderer。

 

97、DefaultItemRenderer:对应每一个数据条目用一个label来显视。对于简单的String/Number数据可以使用DefaultItemRenderer。

 

98、DefaultComplexItemRenderer:把每一个条目放在一个单独的DataGroup中。如果数据项全是可视化组件时，可以使用这个条目渲染器。

 

99、可以通过dataProvider直接增加/删除数据。

 

100、在DataGroup/SkinnableDataContainer中使用虚拟化技术。每条数据的显视都需要一个对应的条目渲染器。当数据多时，性能会大幅下降。

 

101、使用虚拟布局(virtual layout),只为可视化的元素建立条目渲染器然后重用而不是为每个条目都建立渲染器，这种做法可以提升性能。使用虚拟布局需要把容器的useVirtualLayout设为ture。只在DataGroup/SkinnableDataContainer中的V/H/TLayout布局中支持useVirtureLayout。

 

102、可以用itemRenderer属性指定一个数据容器的条目渲染器，另外也可以使用itemRendererFunction动态决定每一个条目的渲染器。

 

103、数据容器采用条目渲染器的优先级从高到低如下：itemRendererFunctin->itemRenderer->item(如果实现了IVisualElement或DisplayObject本身。如果上面的都没有或不符合，那会报错。

 

104、可以用一个独立的文件自定义itemRender也可以直接在数据容器内实现itemRender。

 

105、List类型的控件，如果dataPrivider的数据是简单类型，如String/Number时，List会直接显视该对像。如果是复杂类型，你需要指定labelField/labelFunction或重写itemToLabel()方法。

 

106、list类组件的事件。caretChange:焦点从一个选项到另一个选项。change：选择项由手动触发变化。changing：选择项改变前发出的事件，此事件发生时可调用preventDefault()阻止选择项的变化。valueComit:编程方式触发选择项变化。以上的事件都是spark.events.IndexChangeEvent的子类。

 

107、List系统组件中支持布局的设置。这样使原来只支持垂直布局的List系列组件可以变为水平或方格布局。

 

108、List系列组件中的一些属性。requireSelection:如果为true，即List默认会把第一个选项设为被选项。如果为false，第一个选项为空。默认为false。selectedIndex:当前被选择的项的顺序，从零开始。如果requireSelecttion为false，可以把selectedIndex设为-1，表示不选中。selectedItem:当前被选中的项。

 

109、caret item意思是当前聚焦项。它可能与selectedItem为同一项，也可能不是。

 

110、List系列组件是SkinnableDataContainer的子类。SkinnableDataContainer没有默认的itemRenderer，但List系列组件有。下面是List系列组件所对应的itemRenderer。ButtonBar:ButtonBarButton;ComboBox:DefaultItemRenderer;DropDownList:DefaultItemRenderer;List:DefaultItemRenderer;TabBar:ButtonBarButton。

 

111、在List组件中，你可以把allowMultipleSelection设为true，这样用户按着ctrl键可以选择多个项。

 

112、List组件中的selectedIndices/selectedItems为被选中的序号和项，它们均为Vector对像。

 

113、ButtonBar和TabBar的作用类似于单选按钮，被点击时会发出itemClick事件。

 

114、ButtonBar/TabBar可以把一个数组付值给dataprivider。这样就是一组简单的按钮，也可以把一个mx的ViewStack付给dataPrivider。这样ButtonBar/TabBar就会直接控制这组ViewStack。

 

115、DropDownList和ComboBox的区别：ComboBox是DropDownList的子类。DropDownList就是一个纯单选的。而ComboBox除了选择外还可以手填。DropDownList中的prompt属性是没被选中时显视的文件。DropDownList的主要事件有：close/open。

 

116、在ComboBox中，如果你写入的值与集合中的不匹配，在change事件中，那selectedIndex的值为-3，对应的变量为:ComboBox.CUSTOM_SELECTED_ITEM。然后会调用ComboBox.labelToItemFunction方法把这个值转化为对像。所以如果你的集合为非简单元素，那你需要重写labelToItemFunction方法。

 

117、在一个导航容器中可以使用WideRight效果在creationCompleteEffect中。然后在各子容器中的showEffec中使用WideUp,hideEffect中使用WideDown。这样的效果比较生动。

 

118、DateChooser可以通过selectableRange设定可选日期范围，disabledRanges设置不可选日期范围，disableDays设置不可选的天。另外可以通过dayNames属性设置显视星期的文字。通过formatString可以设置日期的格式，例如：MM/DD/YYYY。另外可以通过parseFunction方法或inputFormat把输入的文字转化为日期对像。

 

119、运行时加载图片支持以下格式：GIF/JPEG/PNG/SWF。在编译时加载支持GIF/JPEG/PNG/SVG/SWF。也就是说SVG文件只支持编译时加载。另外SVG文件会受一些限制，例如不支持滤境、脚本等。

 

200、image控件中，如果想运行时加载图片，可以在source里指定路径，例如：source="url"。如果想在编译时加载图片，可以使用Embed，代码如下：source="@Embed(source='assets/logo.jpg')"。对于同一张图片，无论你引入多小次，图片也只会被加载一次。

 

201、如果不设置width/height，image默认下会以图片的大小来显视。在设置width/height的情况下，根据scaleContent的值来决定是否放大或缩小图像到width/height的大小，另外根据maintainAspectRatio来决定是否改变横宽比例。

 

202、在一幅图片中的rollOverEffect/rollOutEffect使用Reside效果会起到移到放大，离开缩小的效果。

 

203、PopUpAnchor是一个弹出控件。它的作用是把它里面的控件显视在应用的最前端而它本身没有任何外观。一般在以下几种情景中会用到：一、在页面的某个地方显视操作回馈信息。二、类似搜索引擎中的相关提示框。双击某控件时，弹出的编辑小窗口。

 

204、PopUpAnchor的displayPopUp控制它是否可见。PopUpAnchor里面组件的高宽先由popUpWidthMatchesAnchorWidth属性决定，然后是里面组件的宽度。另外可以通过popUpPosition设置组件弹出时处于PopUpAnchor的位置。如果PopUpAnchor与Effect一起使用，效果会更好。

 

205、进度条(ProgressBar)有两种，一种是显视具体进度的(Determinate)，另一种是不显视具体进度的(Indeterminate)。

 

206、ProgressBar有三种模式event(默认),polled,manual。event模式会通过source属性中对应对像的progress/complete转变状态。polled模式会通过bytesLoaded/bytesTotal转变状态。manual模式会通过手动设置maxinum/mininum转变状态。

 

207、ProgressBar有一个label属性，默认值为LOADING xx%。这个属性可以手动设置，其中有四个占位符%1:已读字节数，%2:总字节数，%3:已完成的百份比，%%：%符串。

 

208、单选按钮(RadioButton)，可以通过设置groupName属性把相同组的单选按钮归为一组。另外也可以定义一个<s:RadiioButtonGroup>，然后在单选按钮中设置group指定。后者的好处在于可以把相关事件设置统一设在group中。另外，RadioButtonGroup如果在mxml中定义，那要定义在<fx:Declarations>中。

 

209、NumericStepper是一个数字控件，Spinner是NumericStepper的父类，可以用click事件联合Spinner配合其它控件使用。

 

210、VideoDisplay是播放多媒体的控件，它没有边框及相关按钮。控制尺寸的属性有：maintainAspectRatio/height/width。按制播放的方法有：close/load/pause/play/stop。在VideoDisplay中可放入cuePoints（name/time）元素，同时在VideoDisplay中注册cuePoint事件，每当影片播放到指定点时，将触发cuePoint事件。如果是播放影片，可以在source属性在设置路径，如果是摄像头，可以调用attachCamera(cam)方法。

 

211、VideoPlay是拥用默认按钮的视频播放器。

 

212、flex的文件控件有五个Label、RichText、RichEditableText、TextArea、TextInput。其中前四个为多行，最后一个为单行。前两个为只读，后三个为可编辑。

 

213、MX文字控件的格式主要通过style和htmlText控制，而spark的文件控件格式主要通过FTE(Flash Text Engine)和TLF(Text Layout Framework)。

 

214、用于显视文字的主要控件有三个：Label,RichText,RichEditableText。三者中，左边最轻量级同时功能也最少，右边的相反。

 

215、在支持tlf的控件中，可以直接在控件的textFlow节点中放一下TextFlow节点。TextFlow节点下可以放置类html的标签（标签的命外空间为<s:)。另外你也可以直接设置控件的text属性，这样控件会忽略一些<p>等标签。如果你使用content属性，TLF会解悉并转化为TextFlow对像。另外你也可以使用html标签文本放在一个xml对像中，然后使用TextFlowUtil.importFromXML(xml:XML)或TextConverter.importToFlow(str:String,type:String)转化为TextFlow对像。

 

216、在mxml中相关的TLF元素如果包含一些特殊字符例如<,>等，你可以使用相关的转义字符代替，否则，你需要在相关标签中使用<![CDATA[]]>，在as中需要使用转义符\或转义。

 

217、当你需要在一个容器中放置多个相同类型的组件时，可以使用Repeater。用法是在一个容器内放置一个Repeater，然后在Repeater内放置一个组件，例如<mx:VBox><mx:Repeater><mx:Label>。Repeater需要设置一个dataprivider。而里面的组件可以通过repeater的ID.currentItem来引用当前组件代表的dataPrivider中的当前对像。