flex样式,Flex样式工作原理

播放头前进到第二桢,docFrameHandler 函数开始执行。
首先会执行很多Singleton.registerClass方法,然后执行有[Mixin]元标签的类的
public static function init(fbs:IFlexModuleFactory):void 方法
Flex编译器编译时会生成很多 有[Mixin]元标签的类 其中大部分类都与样式有关,象下面这些
程序代码
"_alertButtonStyleStyle", "_ScrollBarStyle",
"_activeTabStyleStyle", "_textAreaHScrollBarStyleStyle",
"_ToolTipStyle", "_advancedDataGridStylesStyle",
"_comboDropdownStyle", "_comboDropDownStyle",
"_ContainerStyle", "_textAreaVScrollBarStyleStyle",
"_linkButtonStyleStyle", "_globalStyle", "_windowStatusStyle",
"_windowStylesStyle", "_activeButtonStyleStyle",
"_errorTipStyle", "_richTextEditorTextAreaStyleStyle",
"_CursorManagerStyle", "_todayStyleStyle", "_dateFieldPopupStyle",
"_plainStyle", "_dataGridStylesStyle", "_ApplicationStyle",
"_headerDateTextStyle", "_ButtonStyle", "_VScrollBarStyle",
"_popUpMenuStyle", "_swatchPanelTextFieldStyle",
"_opaquePanelStyle", "_weekDayStyleStyle", "_headerDragProxyStyleStyle"
类,他们的作用就是把样式信息注册到 StyleManager,这样在生成组件的时候组件能得到自己的样式信息。
flex builder 安装目录下的 sdks\3.0.0\frameworks\libs 目录有一个framework.swc 文件,你用Winrar 打开会看到 defaults.css这个文件。Defaults.css文件定义了flex组件的默认样式,这里的每一个css选择符(selector)就对应上面的一个类。其实上面的那些类是flex编译器按照这个defaults.css 文件在编译时自动生成的。
下面就是其生成的_ButtonStyle 类:
程序代码
package
{
import flash.display.Sprite;
import mx.core.IFlexModuleFactory;
import mx.core.mx_internal;
import mx.styles.CSSStyleDeclaration;
import mx.styles.StyleManager;
import mx.skins.halo.ButtonSkin;
[ExcludeClass]
public class _ButtonStyle
{
public static function init(fbs:IFlexModuleFactory):void
{
var style:CSSStyleDeclaration = StyleManager.getStyleDeclaration("Button");
if (!style)
{
style = new CSSStyleDeclaration();
StyleManager.setStyleDeclaration("Button", style, false);
}
if (style.defaultFactory == null)
{
style.defaultFactory = function():void
{
this.paddingTop = 2;
this.textAlign = "center";
this.skin = mx.skins.halo.ButtonSkin;
this.paddingLeft = 10;
this.fontWeight = "bold";
this.cornerRadius = 4;
this.paddingRight = 10;
this.verticalGap = 2;
this.horizontalGap = 2;
this.paddingBottom = 2;
};
}
}
}
}
看完了就明白了吧,也就是说当这些类的 init(fbs:IFlexModuleFactory)方法执行完后,我们就可以通过 StyleManager.getStyleDeclaration(selector:String):CSSStyleDeclaration 方法获得在 defaluts.css文件中定义的样式信息。
需要注意的是如果你在编译时添加了其他的主题,那么主题的样式会覆盖 defaluts.css文件中的样式。
假如你的主题 中定义了
程序代码
Button
{
cornerRadius: 8;
}
那么你的 _ButtonStyle类中的 this.cornerRadius = 8; 而不是 this.cornerRadius = 4;
当然你在主题中添加的新的css选择符在编译时也会生成相对应的类。比如你在主题中增加了
程序代码
.flashshe
{
color: #ff0000;
}
那么编译器编译时会生成一个
http://www.cnblogs.com/sevenyuan/archive/2010/02/02/1661561.html
Tags:  flex工作流 flex样式表 flex4样式 flex原理 flex样式

延伸阅读

最新评论

发表评论