加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

flex容易被忽略的地方

发布时间:2020-12-15 01:04:06 所属栏目:百科 来源:网络整理
导读:?1、 flex 包含一个基于 组件 的 开发 模型,你只需要按需求继承现有的组件并扩展相关的方法就可开发你的 应用 。 2、可视化组件包括以下主要特性:尺寸、 事件 、样式、 效果 、皮肤。 3、flex定义了两套组件。一套为Spark,放在spark.*包下。一套为MX,放

?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

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

opUpManager.removePopUp(this)"。另外可以使用PopUpManager.centerPopUp(obj)的方式使弹出窗口剧中。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读