Flex Label组件扩展边框与背景

由于Label控件没有borderStyle属性,也就是它不支持边框与背景图.所以我们可以通过扩展Label控件来实现边框与背景图!其他不 支持边框或者背景的控件如:Text、Image用同样方法可以扩展它。下面运用到自定义Flex控件的[Style]元素标签。

下表描述了[Style]元数据标签的属性：

table { padding: 0px; margin: 0px; border-left: 1px solid rgb(193, 218, 215); width: 728px; }th { border-right: 1px solid rgb(193, 218, 215); padding: 6px 6px 6px 12px; border-top: 1px solid rgb(193, 218, 215); background: none no-repeat scroll 0% 0% rgb(202, 232, 234); font: bold 12px "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif; text-transform: uppercase; color: rgb(79, 107, 114); border-bottom: 1px solid rgb(193, 218, 215); letter-spacing: 2px; text-align: center; }td { border-right: 1px solid rgb(193, 218, 215); padding: 6px 6px 6px 12px; font-size: 12px; background: none repeat scroll 0% 0% rgb(255, 255, 255); color: rgb(79, 107, 114); border-bottom: 1px solid rgb(193, 218, 215); }#totalbar { visibility: hidden; }#onlinebar { visibility: hidden; }#category { visibility: hidden; }#FCRadar { visibility: hidden; }#daypic { visibility: hidden; }

选项 类型 描述

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>