http://blog.minidx.com/2009/11/05/3021.html

下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Halo_Alert_borderSkin_test"
  3. xmlns:fx="http://ns.adobe.com/mxml/2009"
  4. xmlns:s="library://ns.adobe.com/flex/spark"
  5. xmlns:mx="library://ns.adobe.com/flex/halo">
  6.  
  7. <fx:Style>
  8. @namespace s "library://ns.adobe.com/flex/spark";
  9. @namespace mx "library://ns.adobe.com/flex/halo";
  10.  
  11. mx|Alert {
  12. borderSkin: ClassReference("skins.CustomPanelBorderSkin");
  13. }
  14. </fx:Style>
  15.  
  16. <fx:Script>
  17. <![CDATA[
  18. import mx.controls.Alert;
  19.  
  20. protected function btn_clickHandler(evt:MouseEvent):void {
  21. var a:Alert = Alert.show("The quick brown fox jumps over the lazy dog", "Alert title");
  22. a.status = mx_internal::VERSION;
  23. }
  24. ]]>
  25. </fx:Script>
  26.  
  27. <mx:ApplicationControlBar width="100%" cornerRadius="0">
  28. <s:Button id="btn"
  29. label="Launch Alert"
  30. click="btn_clickHandler(event);" />
  31. </mx:ApplicationControlBar>
  32.  
  33. </s:Application>

下面为skins/CustomPanelBorderSkin.mxml的代码:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomPanelBorderSkin"
  3. xmlns:fx="http://ns.adobe.com/mxml/2009"
  4. xmlns:s="library://ns.adobe.com/flex/spark"
  5. implements="mx.core.IRectangularBorder">
  6.  
  7. <fx:Script>
  8. <![CDATA[
  9. import mx.core.EdgeMetrics;
  10. import mx.core.IUIComponent;
  11.  
  12. /* Define the skin elements that should not be colorized.
  13. For panel, border and title backround are skinned, but the content area and title text are not. */
  14. static private const exclusions:Array = ["background"];
  15. override public function get colorizeExclusions():Array {
  16. return exclusions;
  17. }
  18.  
  19. /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
  20. static private const contentFill:Array = [];
  21. override public function get contentItems():Array {
  22. return contentFill
  23. };
  24.  
  25. private var _metrics:EdgeMetrics = new EdgeMetrics(1, 32, 1, 1);
  26. public function get borderMetrics():EdgeMetrics {
  27. var hasPanelParent:Boolean = isPanel(parent);
  28. var controlBar:IUIComponent = hasPanelParent ? Object(parent).mx_internal::_controlBar : null;
  29. if (controlBar && controlBar.includeInLayout) {
  30. _metrics.bottom = controlBar.getExplicitOrMeasuredHeight() + 1;
  31. } else {
  32. _metrics.bottom = 1;
  33. }
  34. return _metrics;
  35. }
  36.  
  37. public function get backgroundImageBounds():Rectangle {
  38. return null;
  39. }
  40.  
  41. public function set backgroundImageBounds(value:Rectangle):void {
  42. }
  43.  
  44. public function get hasBackgroundImage():Boolean {
  45. return false;
  46. }
  47.  
  48. public function layoutBackgroundImage():void {
  49. }
  50.  
  51. override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
  52. var em:EdgeMetrics = borderMetrics;
  53. if (em.bottom > 1) {
  54. cbbg.height = em.bottom - 1;
  55. cbdiv.bottom = cbbg.height;
  56. cbbg.visible = cbdiv.visible = true;
  57. } else {
  58. cbbg.visible = cbdiv.visible = false;
  59. }
  60. super.updateDisplayList(unscaledWidth, unscaledHeight);
  61. }
  62.  
  63. private static var panels:Object = {};
  64.  
  65. private static function isPanel(parent:Object):Boolean {
  66. var s:String = getQualifiedClassName(parent);
  67. if (panels[s] == 1) {
  68. return true;
  69. }
  70. if (panels[s] == 0) {
  71. return false;
  72. }
  73. if (s == "mx.containers::Panel") {
  74. panels[s] == 1;
  75. return true;
  76. }
  77. var x:XML = describeType(parent);
  78. var xmllist:XMLList = x.extendsClass.(@type == "mx.containers::Panel");
  79. if (xmllist.length() == 0) {
  80. panels[s] = 0;
  81. return false;
  82. }
  83. panels[s] = 1;
  84. return true;
  85. }
  86. ]]>
  87. </fx:Script>
  88.  
  89. <!-- drop shadow -->
  90. <s:Rect left="0" top="0" right="0" bottom="0">
  91. <s:filters>
  92. <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
  93. </s:filters>
  94. <s:fill>
  95. <s:SolidColor color="0" />
  96. </s:fill>
  97. </s:Rect>
  98.  
  99. <!-- layer 1: border -->
  100. <s:Rect left="0" right="0" top="0" bottom="0">
  101. <s:stroke>
  102. <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
  103. </s:stroke>
  104. </s:Rect>
  105.  
  106. <!-- layer 2: background fill -->
  107. <s:Rect id="background" left="1" top="1" right="1" bottom="1" alpha="0.6">
  108. <s:fill>
  109. <s:BitmapFill source="@Embed('assets/pattern_158.gif')" />
  110. </s:fill>
  111. </s:Rect>
  112.  
  113. <!-- layer 3: title bar fill -->
  114. <s:Rect left="1" right="1" top="1" height="30">
  115. <s:fill>
  116. <s:LinearGradient rotation="90">
  117. <s:GradientEntry color="0xE2E2E2" />
  118. <s:GradientEntry color="0xD9D9D9" />
  119. </s:LinearGradient>
  120. </s:fill>
  121. </s:Rect>
  122.  
  123. <!-- layer 4: title bar highlight -->
  124. <s:Rect left="1" right="1" top="1" height="30">
  125. <s:stroke>
  126. <s:LinearGradientStroke rotation="90" weight="1">
  127. <s:GradientEntry color="0xEAEAEA" />
  128. <s:GradientEntry color="0xD9D9D9" />
  129. </s:LinearGradientStroke>
  130. </s:stroke>
  131. </s:Rect>
  132. <s:Rect left="1" right="1" top="31" height="1">
  133. <s:fill>
  134. <s:SolidColor color="0xC0C0C0" />
  135. </s:fill>
  136. </s:Rect>
  137.  
  138. <!-- layer 5: control bar background -->
  139. <s:Rect id="cbbg" left="1" right="1" bottom="1" height="20">
  140. <s:fill>
  141. <s:SolidColor color="0xE8E8E8" />
  142. </s:fill>
  143. </s:Rect>
  144.  
  145. <!-- layer 6: control bar divider line -->
  146. <s:Rect id="cbdiv" left="1" right="1" bottom="20" height="1">
  147. <s:fill>
  148. <s:SolidColor color="0xCDCDCD" />
  149. </s:fill>
  150. </s:Rect>
  151.  
  152. </s:SparkSkin>

效果如下：

flex中如何设置Alert背景图片的例子_alert