flex包含一个基于组件的开发模型

、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://flex/spark“; s|BorderContainerborderColor:red;。13、效果（effect）是组件在一段时间内的视觉或听觉上的变化，例如退色，位移等。14、数据绑定是源属性(source)发生变化时，目的(destination)属性会自动产生变化。15、flex 提供了三种数据绑定的方式。第一种是在 mxml 中使用括号在目的属性中对源属性进行绑定。第二种是在 mxml 中使用标签对源属性与目标属性进行绑定。第三种是在 as 中使用 BindingUtils 方法对源属性与目标属性进行绑定。16、数据绑定符可以直接对属性进行引用 ，也可以对方法进行引用。例如：obj.text.toUperCase()17、数据绑定符和两种方式对数据进行绑定是从编译时就开始的。而 BindingUtils 即在运行时才开始绑定。18、可绑定符的意思是当对应的属性变化时，会触发数据绑定事件，通知绑定的目标属性。19、当源对像分发 initialize 事件以及在源对像变化时都会触发数据绑定事件。20、如果你创建一个对像，并想让它可以成为数据绑定的源，那属性前面必需加上Bindable/Bindable(“eventname“)/Bindable(event=“eventname“)标签。当你直接使用Bindable标签时，实质上等价于Bindable(“propertyChange“)。当属性发生改变时，flex 会分发propertyChange 事件给绑定于此属性的绑定目标对像。21、通过标签或 BindingUtils 可以把多个源属性绑定到一个目标对像。绑定后，任意一个源发生改变时，目标对像都会被更新。22、双向绑定,数据的任意一方发生变化时，另一方都会被通知并改变。数据绑定表达式：。数据绑定标签:。另外样式、效果、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、在数据绑定符()和数据绑定标签()中，你可以使用 as 表达式。例如Number(obj.text)*6/7和 ex4 表达式。但不能在BindingUtils.bingProperty()/bindSetter()中使用。31、as 中的方法绑定接口。BindingUtils.bindSetter(funToCall,sourceObj,sourceOperty):ChangeWatcher。32、你可以使用ChangeWatcher.watch(“sourceobj“,“perty“,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)。的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:已完成的百份比，%：%符串。