v2 ui组件css style framework

css style尽可能的模拟了css样式的继承关系.但是样式接口却是暴露在外边的,这样在某些情况会造成使用者的一些困惑!

先做个例子
新建一fla,建两层as,comps,在as第一帧写
_root.color = 0xFF0000;
打开组件面板拖一个Button组件到comps第一帧,运行

会发现Button的字会变成红色,也就是_root.color定义的值.

这是因为color是一个css style,它直接作为一个样式对象的成员存在.

v2中样式对象有
_global.style
_global.style[UIClassName]
UI实例

继承优先等级是
UI实例 > _global.style[UIClassName] > UI实例._parent(直到_root) > _global.style

getStyle(styleName),就是通过该过程来获取指定的样式值的.

当一个UI实例,以及该实例的_global.style[UIClassName]的样式都没有明确定义的时候,就会查找该UI的父级,一直向上当查到_root时,那么_root.color就会成为该实例的color样式.

可以看到,隐藏了一个"UI实例._parent"的样式对象.
那么_root.color=0xFF0000;就成为了样式继承的一环.

不止是color,所有的全局样式都有可能会被使用者在父级中作为一个普通变量来使用,这是很危险的.
所有全局样式定义在mx.styles.StyleManager的静态对象中.

然而,并不是父级中无意定义了一个样式名的变量,就会马上改变组件的样式.要等到ui实例,再次绘制后,才会有所反应.就因为不是马上出现反应,这也将是出现问题后最大的困惑.

比如上面的例子
按F5,延长as和comps层,在as的最后一帧写,
_root.color=0xFF0000;
stop();
并把第一帧内代码删除,然后运行.
看到"Button"字的颜色没有变化.

这是因为,ui每次自动绘制,都是在该帧的最后才执行的.(通过doLater函数)
而ui每次被加载后,肯定要绘制一次.这里证明了开头的例子,Button为什么会变红.
然后根据用户不同的响应再做绘制(比如,拉动滚动条,或者点击了某个框)

由于接口暴露在外,实际上定义样式就是
样式对象.styleName = styleValue;

setStyle(styleName, styleValue);除了定义样式外,还马上驱动了绘制.

虽然as2的oop机制不尽人意,但样式的封装应该可以做得更好....唉.orz