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