简单介绍Flex alert样式的设置

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