一.在创作时更改组件外观
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组件的使用,属性与方法.