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

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>

效果如下：