由于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
-
package
-
{
-
import mx . controls . Label ;
-
//自定义样式
-
[ Style ( name = " borderColor " , type = " uint " , format = " Color " , inherit = " no " )]
-
[ Style ( name = " borderWidth " , type = " Number " , format = " Length " , inherit = " no " )]
-
[ Style ( name = " borderAlpha " , type = " Number " , format = " Length " , inherit = " no " )]
-
-
public class LabelBorder extends Label
-
{
-
public function LabelBorder ()
-
{
-
super () ;
-
}
-
-
override protected function updateDisplayList ( w : Number , h : Number ) : void
-
{
-
super . updateDisplayList ( w , h ) ;
-
graphics . clear () ;
-
graphics . lineStyle ( getStyle ( ' borderWidth ' ) , getStyle ( ' borderColor ' ) , getStyle ( ' borderAlpha ' ) , false ) ;
-
var x : Number = - ( getStyle ( ' borderWidth ' ) / 2);
-
var y:Number = -(getStyle('borderWidth') / 2 ) ;
-
var width : Number = textWidth + getStyle ( ' borderWidth ' ) + 3 ;
-
var height : Number = textHeight + getStyle ( ' borderWidth ' ) ;
-
graphics . drawRect ( x , y , width , height ) ;
-
}
-
}
-
}
LabelImage.as
-
package
-
{
-
import mx . controls . Label ;
-
import flash . display . Loader ;
-
import flash . net . URLRequest ;
-
//自定义背景属性
-
[ Style ( name = " imgPath " , type = " String " , inherit = " no " )]
-
-
public class LabelImage extends Label
-
{
-
private var _loader : Loader = new Loader () ;
-
-
public function LabelImage ()
-
{
-
super () ;
-
}
-
-
override protected function updateDisplayList ( w : Number , h : Number ) : void
-
{
-
super . updateDisplayList ( w , h ) ;
-
_loader . load ( new URLRequest ( getStyle ( ' imgPath ' ))) ;
-
addChild ( _loader ) ;
-
_loader . x = - 15 ;
-
setChildIndex ( _loader , 0 ) ;
-
}
-
}
-
}
LabelBorderDemo.mxml
-
<? xml version = " 1.0 " encoding = " utf-8 " ?>
-
< mx : Application xmlns : mx = " http://www.adobe.com/2006/mxml " xmlns : jian = " * " layout = " absolute " >
-
< jian : LabelBorder
-
x = " 180 " y = " 62 "
-
text = " 这里是扩展的自定义标签 "
-
borderAlpha = " {aBar.value} "
-
borderWidth = " {wBar.value} "
-
borderColor = " {colorTool.selectedColor} " / >
-
<jian:LabelImage text="这里是自定义背景标签" imgPath="mood.gif" x="180" y="100" / >
-
-
< mx : Label x = " 500 " y = " 10 " text = " 边框颜色: " / >
-
<mx:Label x="500" y="50" text="边框透明度:" / >
-
< mx : Label x = " 500 " y = " 100 " text = " 边框宽度: " / >
-
-
<mx:ColorPicker id="colorTool" x="570" y="10" color="#FDFDFD" / >
-
< mx : HSlider id = " aBar " x = " 500 " y = " 70 " minimum = " 0 " maximum = " 1 " value = " 1 " snapInterval = " 0.1 " liveDragging = " true " / >
-
<mx:HSlider id="wBar" x="500" y="120" minimum="0" maximum="6" snapInterval="1" value="1" liveDragging="true" / >
-
< / mx:Application>
分享到:
相关推荐
Flex 组件Flex 组件Flex 组件Flex 组件Flex 组件
Flex 组件边框线样式:边框、标题 、内容区域;
《Flex 3 组件实例与应用(2009版)》(PDF)《Flex 3 组件实例与应用(2009版)》(PDF)《Flex 3 组件实例与应用(2009版)》(PDF)《Flex 3 组件实例与应用(2009版)》(PDF)《Flex 3 组件实例与应用(2009版...
Flex3组件介绍,包含flex3的所有组件介绍并有例子
很通用的Flex 分页组件,经过本人测试,可以应用到项目中,很方便
研究Flex 组件声明周期,了解组件的生成步骤
一些flex组件的用法! flex组件用法。 自定义控件
Flex开发的代边框Box以及自定义代checkBox的容器,可根据自己的需求拓展功能,同时支持点击缩小容器效果,只是个实现思路。
描述了怎样把Flex组件保存为本地png图片
flex各组件对应的样式属性大全 整合的各组件样式,中文描述!
Flex 3 组件的帮助文档,解压后近4兆。
flex 自定义组件,UI,flex 自定义组件。
flex 高级自定义组件 需要重写的方法,以及为什么要重写,何时调用等。
JSP调用Flex4组件演示代码 FLEX4源码项目 JSP WEB源码项目 非常经典的演示DEMO,完全测试成功。
这个是我一直在用的针对于组件全屏的一个类,这里是页面上的某个组件全屏,而不是整个页面全屏。 这是原始的库了,里面少了一个针对按下ESC键的处理,这个在使用的时候可以自己加,另外一个问题就是由于这个库是FLEX...
详解Flex4的系统组件与基本组件。让你在应用的时候知道用什么.
flex 重写组件
flex 各组件对应的样式属性上各组件对应的样式属性 themeColor 主题颜色:如果对色彩样式配置不想过多的去设置的话,themeColor是一个选择。它可以让你选择一种基本色彩,然后组件的边框,外观等色彩将会以此色彩为...
flex组件的详细介绍,对每一个组件都有示例代码,即看即用,并附有所有组件效果图。
这是一个开源的对flex的扩展的一系列有用的组件, 功能非常强大,里面包含 : 帮助文档、开发包、例子,欢迎大家来学习。 好东西。。。。