学习FlashCS3的内置组件（二）更改组件的外观

学习FlashCS3的内置组件（⼆）更改组件的外观
⼀.在创作时更改组件外观
Flash CS3组件是基于 placeStateFLA 的⽤户界⾯组件,使得⽤户可以⽅便的在创作时进⾏⾃定义.当⼀个组件被添加到舞台上时,就可以直接双击组件,进⼊组件外观的编辑帧,编辑帧中是组件所使⽤的所有外观的列表,⽤户可以通过双击直接修改相应外观,也可以进⼊库-
>Component Assets->XXSkins ⽂件夹(XX是组件名),这⾥就是组件相应部分的外观.
内置组件的所有外观都是⼀个MovieClip类的⼦类,组件使⽤新的 new 运算符⽅法在运⾏时载⼊外观,实现外观的更改.所有外观都开启了九切⽚缩放,使得组件在进⾏缩放时,外观不会产⽣变形.当⽤户更改了外观时,组件的实时预览不会发⽣相应的更改,但是运⾏后所有同类组件的外观都将得到更改.
这⾥要注意的⼀点是,有些组件的内部使⽤了其它组件,⽐如List组件内部使⽤了滚动条(ScrollBar),TextArea组件同样使⽤了滚动条,当⽤户更改了List组件的滚动条某些外观,TextArea组件的滚动条相应部分也将得到更改.
如果只想改变List组件滚动条的某些外观,⽽不想使TextArea组件滚动条的相应部分得到更改,请参见下⾯的"在运⾏时更改组件外观".
⼆.在运⾏时更改组件外观
当因为某些原因需要在运⾏时更改组件外观,⽐如只更改某⼀个组件⽽不是同⼀类组件的外观,或需要动态的改变外观(更换⽪肤),或需要动态的载⼊外观,这时,就需要使⽤Actionscrīpt代码改变外观.
1.更改某个组件的外观
要更改某个组件的外观,使⽤的是组件的setStyle⽅法,由于该⽅法继承⾃UIComponent,所以所有组件都可以使⽤该⽅法在运⾏时更改外观. setStyle函数的⽤法:
public function setStyle(style:String, value:Object):void
对此组件实例设置样式属性。

该样式可能会覆盖以全局⽅式设置的样式。

参数
style:String — 样式属性的名称。

value:Object — 样式的值。

在帮助->Actionscrīpt 3.0语⾔和组件参考中组件类的页⾯中,有样式⼀栏,这⾥就是组件的所有外观及与外观有关的属性."样式"列下就是所有可以作为style参数传⼊setStyle函数的属性,"说明"列中,"类型"和"格式"指明了该样式的类型,"默认值"是该属性的默认值.
例如,假如想要更改某个List组件滚动条的ThumbIcon,List组件的滚动条的ThumbIcon样式名是thumbIcon,类型是Class(该样式是继承⾃BaseScrollPane的,需要选中"显⽰继承的样式").
于是,我们复制⼀个"ScrollBar_thumbIcon"元件并命名为"myThumbIcon",并将颜⾊更改为红⾊,类名为"myThumbIcon",同样继承⾃MovieClip.
然后,将⼀个List命名为"myList",并在时间轴上添加如下代码:
myList.setStyle("thumbIcon","myThumbIcon");
运⾏,你会发现只有myList组件的thumbIcon发⽣了变化.
2.更改某类组件的外观
有时候,你可能想同时更改某⼀类组件的外观,这是就需要⽤到StyleManager类.
StyleMananger类位于fl.managers包中,专门⽤于管理组件的样式.这⾥要⽤到的⽅法是setComponentStyle⽅法.
setComponentStyle函数的⽤法:
public static function setComponentStyle(component:Object, name:String, style:Object):void
在某个组件类型的所有实例上设置样式，例如，在 Button 组件的所有实例上，或在 ComboBox 组件的所有实例上。

参数
component:Object — 组件类型的例⼦为 Button 或 ComboBox。

此参数还接受⽤于标识⼀个组件类型的所有实例的组件实例或类。

name:String — 要设置的样式的名称。

style:Object — 说明要设置的样式的样式对象。

由于这个⽅法是静态⽅法,所以我们直接通过StyleManager.setComponentStyle来调⽤.
例如,我们同样设置List组件的thumbIcon样式.
在时间轴上添加如下代码:
import fl.managers.StyleManager;
import fl.controls.List;
StyleManager.setComponentStyle(List,"thumbIcon","myThumbIcon");
运⾏,你会发现所有List组件的thumbIcon发⽣了变化,但TextArea的滚动条并未发⽣变化.
3.更改所有组件的外观
当然,同时更改所有组件的某个外观也是可以的,就是使⽤StyleManager.setStyle⽅法.
setStyle函数的⽤法:
public static function setStyle(name:String, style:Object):void
为⽂档中的所有⽤户界⾯组件设置全局样式。

参数
name:String — 命名要设置的样式的字符串值。

style:Object — 要设置的样式对象。

还是上⾯的例⼦,我们把代码换成
import fl.managers.StyleManager;;
StyleManager.setStyle("thumbIcon","myThumbIcon");
运⾏,你会发现所有组件的thumbIcon发⽣了变化.
4.StyleManager的其它函数
StyleManager有许多函数,功能也各不相同.
(1) clearComponentStyle () ⽅法
public static function clearComponentStyle(component:Object, name:String):void
component:Object — 要删除样式的组件的名称。

name:String — 要删除的样式的名称。

从指定组件中删除样式。

当你想清除某个组件的某项样式时,就可以使⽤这个函数(StyleManager.clearComponentStyle(组件的引⽤,样式名)),它的效果与在组件上直接调⽤clearStyle(style)是相同的.
如果组件的某个样式被清除了,则会使⽤默认的样式,或是组件类样式和全局组件样式.
(2) clearStyle () ⽅法
public static function clearStyle(name:String):void
参数 name:String — 要删除的全局样式的名称。

从⽂档中的所有⽤户界⾯组件中删除全局样式。

如果你设定了全局组件样式,那么就可以⽤这个函数清除全局样式.使⽤StyleManager.clearComponentStyle(样式名)来清除样式.
(3) getComponentStyle () ⽅法
public static function getComponentStyle(component:Object, name:String):Object
参数
component:Object — 要在其上查找所请求样式的组件实例的名称。

name:String — 要检索的样式的名称。

返回 Object — 指定组件的所请求样式。

如果没有找到指定的样式，此函数返回 null。

获取在特定组件上存在的样式。

它的效果与在组件上直接调⽤getStyle(style)是相同的.使⽤StyleManager.getComponentStyle(组件的引⽤,样式名)来获取样式.
(4) getStyle () ⽅法
public static function getStyle(name:String):Object
参数 name:String — 要检索的样式的名称。

返回 Object — 检索的全局样式的值。

按名称获取全局样式。

你可以获取⼀个全局样式,如果设定了的话.使⽤StyleManager.getStyle(样式名)来获取样式.
(5) setComponentStyle () ⽅法
(6) setStyle () ⽅法
registerInstance () ⽅法⽤于向样式管理器注册组件,这个⼯作已经由UIComponent⾃动做了,所以我们完全⽆需理会这个函数. StyleManager类包含了⼀个⾮常好的⽰例,直观的演⽰了实例样式,组件类样式和全局组件样式.
具体的源代码请参见帮助->Actionscrīpt 3.0语⾔和组件参考中StyleManager类的⽰例.
5.关于在运⾏时更改组件外观的特殊说明
第⼀点:在运⾏时更改组件外观会导致性能降低!即使Flash CS3的组件使⽤了全新的架构,使性能的降低⼤⼤减少,但是还是会拖慢程序,所以如果很在乎运⾏速度的话尽量不要在运⾏时更改组件外观.当然,性能降低是与组件的数⽬有关的,⽽且,不会使性能有明显的降低(基本感觉不到).
第⼆点:当使⽤setStyle更改组件外观时(包括使⽤StyleManager的相关⽅法),组件会在下⼀次刷新屏幕时⼀并更改外观,所以有时候会出现明明调⽤了setStyle⽅法,但是组件的外观还是没有发⽣改变的问题.这时,就需要⼿动调⽤组件的drawNow⽅法,强制组件⽴即刷新.
第三点:三种⽤AS更改外观的⽅法是有先后顺序的,具体的顺序是实例样式(实例上调⽤setStyle⽅法) > 组件类样式(使⽤StyleManager.setComponentStyle⽅法) > 全局组件样式(使⽤StyleManager.setStyle⽅法),就是说实例样式会覆盖组件类样式(如果存在实例样式的话),组件类样式会覆盖全局组件样式(如果存在组件类样式的话).在实际的使⽤中需要注意.
第四点:组件中是存在继承的关系和组合关系的,就是说有些组件类继承了其它的组件类(⽐如List类继承⾃SelectableList类),也有些组件内部使⽤了其它组件(例如ComboBox组件的下拉框就是⼀个List组件).
当更改⼀个⽗类的某些样式后,⼦类的相应样式不会得到更改!这点与v2版的组件有所不同,就是说你不能通过改变SelectableList类的样式,来同时改变所有列表类组件(都继承于SelectableList类)的相应样式,你只能⼀个组件类,⼀个组件类的去修改.
当更改内部组件类的某些样式后(⽐如更改了List组件的某些样式),外部组件的相应样式却不会得到更改(就是ComboBox组件的下拉框的样式不会更改,这是由于ComboBox组件内部使⽤实例样式覆盖了List组件的样式),所以要更改内部组件的样式,只有更改外部组件的相应样式(就是更改ComboBox组件的相应样式).
三.组件样式类型和格式的说明
不同的样式有不同的类型,可以设置的值也不同
Class类型:这⼀般是组件的外观元件所使⽤的类型,可以直接传⼊某个类(例如List的cellRenderer样式值为
fl.contols.listClasses.CellRenderer),也可以传⼊⼀个字符串,该字符串指⽰外观的类(例如上例的"myThumbIcon"),还可以直接传⼊⼀个DisplayObject实例的引⽤(⼀般是Sprite或MovieClip等DisplayObject⼦类的实例),这样组件直接使⽤这个DisplayObject实例作为相应外观(如果有多个组件使⽤同⼀个DisplayObject实例,则会产⽣错误的显⽰).
但是⼀般情况下,如果要指⽰⼀个外观类,最好传⼊字符串(就像使⽤Actionscrīpt 2.0 中的链接字符串⼀样),如果要指定⼀个内部类或组件(⽐如List的cellRenderer样式值,这个样式指定List该使⽤那个组件来实现单元格渲染),最好直接把类传过去.
还有,凡是传⼊字符串的,把引号去掉同样可以,就是直接传⼊了那个类.
Number类型:这是⼀般的数字,只要传⼊⼀个数字即可.Length格式指⽰该值设定的是某段长度,Time格式指⽰该值设定的是某段时间. flash.text.TextFormat类型:这⾥必须传⼊⼀个TextFormat对象,指⽰⼀个⽂本格式化对象.
组件的外观更改就到这⾥结束了,在以后的章节中,我会介绍各种UI组件的使⽤,属性与⽅法.。