熟悉html和css的朋友们都知道,伪类是用来设置组件在不同状态下的样式。
test1.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|Button:up{
color: #FF0000;
}
s|Button:down{
color: #FF00FF;
}
s|Button:over{
color: #0000FF;
}
</fx:Style>
<s:VGroup>
<s:Button label="button"/>
</s:VGroup>
</s:Application>
执行结果:
鼠标在按钮上移入、移出、按下、弹开,看看有什么变化。
编译器自动生成代码:
var conditions:Array;
var condition:CSSCondition;
var selector:CSSSelector;
selector = null;
conditions = null;
conditions = [];
condition = new CSSCondition("pseudo", "up");
conditions.push(condition);
selector = new CSSSelector("spark.components.Button", conditions, selector);
// spark.components.Button:up
style = styleManager.getStyleDeclaration("spark.components.Button:up");
if (!style)
{
style = new CSSStyleDeclaration(selector, styleManager);
}
if (style.factory == null)
{
style.factory = function():void
{
this.color = 0xff0000;
};
}
selector = null;
conditions = null;
conditions = [];
condition = new CSSCondition("pseudo", "down");
conditions.push(condition);
selector = new CSSSelector("spark.components.Button", conditions, selector);
// spark.components.Button:down
style = styleManager.getStyleDeclaration("spark.components.Button:down");
if (!style)
{
style = new CSSStyleDeclaration(selector, styleManager);
}
if (style.factory == null)
{
style.factory = function():void
{
this.color = 0xff00ff;
};
}
selector = null;
conditions = null;
conditions = [];
condition = new CSSCondition("pseudo", "over");
conditions.push(condition);
selector = new CSSSelector("spark.components.Button", conditions, selector);
// spark.components.Button:over
style = styleManager.getStyleDeclaration("spark.components.Button:over");
if (!style)
{
style = new CSSStyleDeclaration(selector, styleManager);
}
if (style.factory == null)
{
style.factory = function():void
{
this.color = 0x0000ff;
};
}
可见,每种状态都被转换为独立的AS代码。