由于Label控件没有borderStyle属性,也就是它不支持边框与背景图.所以我们可以通过扩展Label控件来实现边框与背景图!其他不支持边框或者背景的控件如:Text、Image用同样方法可以扩展它。下面运用到自定义Flex控件的[Style]元素标签。
下表描述了[Style]元数据标签的属性：
选项 | 类型 | 描述 |
name | String | (必须) 指定样式名称。 |
type | String | 指定样式属性值的数据类型。如果类型不是一个像Number、Date这样的ActionScript类型，就要使用 packageName.className。 |
arrayType | String | 如果type是Array，那么arrayType指定Array元素的数据类型。如果类型不是一个像Number、Date这样的ActionScript类型，就要使用 packageName.className。 |
format | String | 指定属性单元。比如，如果你指定类型为”Number”，你可能指定format=”Length”表示该样式定义像素长度。或者，你指定type=”uint”，设置format=”Color”，表示该样式定义一个RGB颜色。 |
enumeration | String | 指定该样式属性可能的枚举列表值。 |
inherit | String | 指定该属性是否为继承的。有效的值为yes和no。该属性引用CSS继承结构，而非面向对象的继承结构。所有的子类都自动用面向对象的继承从超类继承定义的样式属性。一些样式属性以CSS继承的方式继承样式属性。如果你在父容器上定义了一个可继承的样式属性，它的孩子都会继承该样式属性。比如，如果你把一个Panel容器的fontFamily定义成Times，该容器的所有孩子都会使用Times作为fontFamily，除非它们覆盖了这个属性。如果设置了非可继承的样式，比如在父容器上设置textDecoration，那么只有这个父容器而非它的孩子使用这个样式。 |
states | String | 对于皮肤属性，你可以使用这个样式指定组件多种状态中的一种状态。例如，Slider.thumbSkin样式的定义使用下面的[Style]元数据标签：[Style(name="thumbSkin", type="Class", inherit="no", states="disabled, down, over, up")] 这一行说明你可以使用Slider.thumbSkin样式指定Slider控件的disable, down, over, 和 up 的状态。 |
LabelBorder.as
1. package
2. {
3. import mx.controls.Label;
4. //自定义样式
5. [Style(name="borderColor", type="uint", format="Color", inherit="no")]
6. [Style(name="borderWidth", type="Number", format="Length", inherit="no")]
7. [Style(name = "borderAlpha", type = "Number", format = "Length", inherit = "no")]
8.
9. public class LabelBorder extends Label
10. {
11. public function LabelBorder()
12. {
13. super();
14. }
15.
16. override protected function updateDisplayList(w:Number, h:Number):void
17. {
18. super.updateDisplayList(w, h);
19. graphics.clear();
20. graphics.lineStyle(getStyle('borderWidth'), getStyle('borderColor'), getStyle('borderAlpha'), false);
21. var x:Number = -(getStyle('borderWidth') / 2);
22. var y:Number = -(getStyle('borderWidth') / 2);
23. var width:Number = textWidth + getStyle('borderWidth') + 3;
24. var height:Number = textHeight + getStyle('borderWidth');
25. graphics.drawRect(x, y, width, height);
26. }
27. }
28. }
LabelImage.as
1. package
2. {
3. import mx.controls.Label;
4. import flash.display.Loader;
5. import flash.net.URLRequest;
6. //自定义背景属性
7. [Style(name="imgPath", type="String", inherit="no")]
8.
9. public class LabelImage extends Label
10. {
11. private var _loader:Loader = new Loader();
12.
13. public function LabelImage()
14. {
15. super();
16. }
17.
18. override protected function updateDisplayList(w:Number, h:Number):void
19. {
20. super.updateDisplayList(w, h);
21. _loader.load(new URLRequest(getStyle('imgPath')));
22. addChild(_loader);
23. _loader.x = -15;
24. setChildIndex(_loader, 0);
25. }
26. }
27. }LabelBorderDemo.mxml
1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:jian="*" layout="absolute">
3. <jian:LabelBorder
4. x="180" y="62"
5. text="这里是扩展的自定义标签"
6. borderAlpha="{aBar.value}"
7. borderWidth="{wBar.value}"
8. borderColor="{colorTool.selectedColor}" />
9. <jian:LabelImage text="这里是自定义背景标签" imgPath="mood.gif" x="180" y="100" />
10.
11. <mx:Label x="500" y="10" text="边框颜色:" />
12. <mx:Label x="500" y="50" text="边框透明度:" />
13. <mx:Label x="500" y="100" text="边框宽度:" />
14.
15. <mx:ColorPicker id="colorTool" x="570" y="10" color="#FDFDFD" />
16. <mx:HSlider id="aBar" x="500" y="70" minimum="0" maximum="1" value="1" snapInterval="0.1" liveDragging="true" />
17. <mx:HSlider id="wBar" x="500" y="120" minimum="0" maximum="6" snapInterval="1" value="1" liveDragging="true"/>
18. </mx:Application>
