mx|Alert{
borderSkin:ClassReference("skins.AlertSkin");
buttonStyleName: "alertButton";
}
.alertButton {
upSkin: Embed(source="flexlib/assets/assets.swf",symbol="Button_upskin");
downSkin: Embed(source="flexlib/assets/assets.swf",symbol="Button_downskin");
overSkin: Embed(source="flexlib/assets/assets.swf",symbol="Button_overskin");
disabledSkin: Embed(source="flexlib/assets/assets.swf",symbol="Button_disabledskin");
}
上面的这段CSS样式。一共设置flex Alert的两个部分,一个是皮肤,一个是按钮。先说按钮,下面这个是标识按钮的样式。我们是通过载入SWF中的库文件达到获取按钮的各状态皮肤。
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="CustomPanelBorderSkin"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
implements="mx.core.IRectangularBorder">
<fx:Script>
<![CDATA[
import mx.core.EdgeMetrics;
import mx.core.IUIComponent;
static private const exclusions:Array = ["background"];
override public function get colorizeExclusions():Array {
return exclusions;
}
static private const contentFill:Array = [];
override public function get contentItems():Array {
return contentFill
};
private var _metrics:EdgeMetrics = new EdgeMetrics(1, 32, 1, 1);
public function get borderMetrics():EdgeMetrics {
var hasPanelParent:Boolean = isPanel(parent);
var controlBar:IUIComponent = hasPanelParent ? Object(parent).mx_internal::_controlBar : null;
if (controlBar && controlBar.includeInLayout) {
_metrics.bottom = controlBar.getExplicitOrMeasuredHeight() + 1;
} else {
_metrics.bottom = 1;
}
return _metrics;
}
public function get backgroundImageBounds():Rectangle {
return null;
}
public function set backgroundImageBounds(value:Rectangle):void {
}
public function get hasBackgroundImage():Boolean {
return false;
}
public function layoutBackgroundImage():void {
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
var em:EdgeMetrics = borderMetrics;
if (em.bottom > 1) {
cbbg.height = em.bottom - 1;
cbdiv.bottom = cbbg.height;
cbbg.visible = cbdiv.visible = true;
} else {
cbbg.visible = cbdiv.visible = false;
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
}
private static var panels:Object = {};
private static function isPanel(parent:Object):Boolean {
var s:String = getQualifiedClassName(parent);
if (panels[s] == 1) {
return true;
}
if (panels[s] == 0) {
return false;
}
if (s == "mx.containers::Panel") {
panels[s] == 1;
return true;
}
var x:XML = describeType(parent);
var xmllist:XMLList = x.extendsClass.(@type == "mx.containers::Panel");
if (xmllist.length() == 0) {
panels[s] = 0;
return false;
}
panels[s] = 1;
return true;
}
]]>
</fx:Script>
<!-- 阴影 -->
<s:Rect left="0" top="0" right="0" bottom="0">
<s:filters>
<s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
</s:filters>
<s:fill>
<s:SolidColor color="0" />
</s:fill>
</s:Rect>
<!-- layer 1:边框-->
<s:Rect left="0" right="0" top="0" bottom="0">
<s:stroke>
<s:SolidColorStroke color="0xAECDF6" alpha="1" weight="1" />
</s:stroke>
</s:Rect>
<!-- layer 2: 背景色-->
<s:Rect id="background" left="1" top="1" right="1" bottom="1" alpha="1">
<s:fill>
<s:SolidColor color="0xFFFFFF"/>
</s:fill>
</s:Rect>
<!-- layer 3: 标题栏-->
<s:Rect left="1" right="1" top="1" height="30">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xe8f0fc" />
<s:GradientEntry color="0xd0e7ff" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- layer 4:标题栏高亮-->
<s:Rect left="1" right="1" top="1" height="30">
<s:stroke>
<s:LinearGradientStroke rotation="90" weight="1">
<s:GradientEntry color="0xe8f0fc" />
<s:GradientEntry color="0xd0e7ff" />
</s:LinearGradientStroke>
</s:stroke>
</s:Rect>
<s:Rect left="1" right="1" top="31" height="1">
<s:fill>
<s:SolidColor color="0xC0C0C0" />
</s:fill>
</s:Rect>
<!-- layer 5: 控制栏背景色-->
<s:Rect id="cbbg" left="1" right="1" bottom="1" height="20">
<s:fill>
<s:SolidColor color="0xE8E8E8" />
</s:fill>
</s:Rect>
<!-- layer 6: 控制栏分割线-->
<s:Rect id="cbdiv" left="1" right="1" bottom="20" height="1">
<s:fill>
<s:SolidColor color="0xCDCDCD" />
</s:fill>
</s:Rect>
</s:SparkSkin>
这段文字是Alert的皮肤设置,这个是应用在Flash Builder4以上版本的。
更多关于flex alert的信息,可查询天地会http://bbs.9ria.com/thread-98412-1-1.html