Archive for the Flex Category

模型-视图-呈现器(MVP)

网上有人问MVP设计模式,不是最有价值球员,是Web开发中的一种名词,有很多人介绍这种设计模式,但没有给出中文的说法,这里的P是一个中间人的角色,本人不才杜撰了一个名词:呈现器,MVP也就成了模型-视图-呈现器设计模式,下面是stackoverflow上某人对MVP的解释,虽然说的是Web开发,但对于其他应用也有价值,故这里翻译如下:

原文:http://stackoverflow.com/questions/2056/what-are-mvp-and-mvc-and-what-is-the-difference
翻译:sam sha – ycoder.com

Model-View-Presenter – 模型-视图-呈现器

在MVP中,呈现器包含视图的UI业务逻辑,所有视图的调用直接委托给呈现器,呈现器使用接口与视图对话,避免了与视图的直接耦合,这意味着可以模拟视图组件进行单元测试。MVP中有一个特点,它存在很多个双向派发,比如,当点击“保存”按钮,事件委托呈现器“OnSave”方法,当完成保存,呈现器将通过接口回调视图,这样这个视图可以显示保存已完成。

MVP倾向于一种非常自然的模式实现Web Forms呈现的分离,原因是视图总是被ASP.NET运行器最先创建,你可以找到更多关于两者的资料

译:localToGlobal vs. contentToGlobal in Flex

原文:http://rjria.blogspot.com/2008/05/localtoglobal-vs-contenttoglobal-in.html(需要翻墙)

翻译:Sam Sha – ycoder.com

localToGlobal vs. contentToGlobal in Flex

如果你从未听过Flex中有一组被称为contentToGlobal 和 globalToContent的函数(这是Sean Christmann 和我今天下午作些”黑客”时发现的),如果你曾经使用过globalToLocal或者localToGlobal,或许你可以使用与之相似的”content”版本代替,下面来说为什么。
让我们假设你的程序有两个红色方块,一个在根层或者在应用程序层次的场景上,另一个嵌套在一个x位置为5px的组件中。应用程序层次的方块设置x位置为 x=10,如果我们希望使两个方块位于相同的X坐标,则另一个嵌套在组件中的方块需要设置x为5,这样组合加起来就是10px。

定制Flex Spark组件外观

Flex3到Flex4,增加了Spark组件,这是Flex的一次重要升级,基本上组件全部重写了一套,为了保持向下兼容,出现了同一组件两套实现并存的现象,虽然说Spark组件中也可嵌入MX组件,但实际使用常会遇到些小麻烦,例如mx:Tree滚动条异常,透明背景无法监听鼠标事件等等,如果你使用定制的组件,写法稍有不规范,就会出现Spark下显示异常,比如之前定制的圆角文本输入框就是如此,不得不在Spark下重新实现。

Flex组件生命周期

flex组件从创建到销毁经历7个状态,这些阶段又可以分成四个阶段(出生、发育、成熟、死亡)

出生

构造(Constructio):

初始化flex组件对象,例如下面的代码,其所做的动作包括分配内存空间等等,构造会很快的完成,不需要对组件布局,没有风格设置,没有孩子被添加,不会参与到display list。

var button:Button = new Button();

添加(Addition):

parent.addChild(button);

组件创建出来,被添加父容器,程序将依次调用addingChild(), $addChild(), childAdded()。

addingChild: 这一步的执行也不是很重,所做的工作包括设置孩子的parent引用以及设置document引用,定义布局管理对象,设置字体,开始样式准备和样式管理

$addChild: 是flashPlayer的低级别的函数,所做的工作是将该组件添加到flash player 的display list

childAdded: 完成添加工作,派发child添加完成的事件,如果此时还没有完成对组件的初始化,则程序进入“初始化阶段”,也就是调用initialize()方法

初始化(Initialization):

程序以此调用:createChildren()/childrenCreated()/initializeAccessibility()/initializationComplete(),比如创建一个按钮,其自身包括一个文本框组件,这个文本框就是在createChildren()中被添加。

发育和成熟:

发育

无效和生效周期提供了一个分离的过程,使属性的设置和属性变化后的处理过程相分离,这种分离的设计可以保证重的处理被推迟执行,避免不必要的运算。

无效(Invalidation):

无效组件包括三种,无效属性,无效大小,无效显示列表(invalidateProperties/size/displayList),三个函数分别在组件属性变化,大小变化,绘制变化时调用。调用无效后,组件并不会立即重新绘制,而是三种没有先后关系,可以单独调用,也可以一起调用,比如按钮设置button.enabled = false,就会调用invalidateProperties();和invalidateDisplayList();,但不需要调用invalidateSize()因为这个属性变化不会影响按钮的大小。

生效(Validation):

组件无效后并不会立即生效,而是在RENDER 事件时才会生效,与无效的三个方法(invalidateProperties/size/displayList)对应的是commit property, measure, update display list,外加layout chrome方法
生效的调用是按顺序的,这样可以保证数据的正确性。

成熟

更新(Update):

组件从无效的生效的转还过程就是更新的阶段,这也是flex组件生命周期最主要的阶段。

死亡

移除(Removal):

移除通常就是从父节点上删除或者是这个组件的父容器的父容器被删除,以此类推。通常是在parent.removeChild(button)之后。

参阅:

http://flexcomps.wordpress.com/2008/05/09/flex-component-life-cycle/
http://www.developmentarc.com/site/sites/default/files/understanding_the_flex_3_lifecycle_v1.0.pdf

Flex – 动态切换CSS风格

增加动态切换风格
注意以下几点:
1、css文件编译成swf
css文件,右键选择Compile CSS toSWF

2、使用StyleManager.loadStyleDeclarations(url , update)动态加载css文件

注意,调用此函数后,StyleManager.getStyleDeclaration("")并不能立即返回新的样式属性,需要callLater
if("Default" == event.item){
StyleManager.loadStyleDeclarations("Default.swf",true);
}else if("Blue" == event.item){
StyleManager.loadStyleDeclarations("Blue.swf",true);
}
this.callLater(function():void{
resetDemoNodeStyle();
resetMainScreenStyle();
});

Flex – 圆角TextInput RoundCornerTextInput

Flex – 圆角TextInput  RoundCornerTextInput
RoundCornerTextInputDemo.mxml

Flex – 沿曲线走 – 二次贝塞尔曲线算法,微积分没白学终于派上用场

Flex – 沿曲线走 – 二次贝塞尔曲线算法,微积分没白学终于派上用场

http://zh.wikipedia.org/wiki/%E8%B2%9D%E8%8C%B2%E6%9B%B2%E7%B7%9A

http://cid-24183f266c78caa8.skydrive.live.com/embedicon.aspx/Code/ArrowTest.swf

Flex鱼眼