TWaver最大的优点之一是“
灵活的定制功能”。光说不练不行，来个例子演练一下：定制Tree节点的标签。
- 默认Tree和Network上的标签显示的是网元的name属性，设置Styles.TREE_LABEL属性后，可以让Tree显示Styles.TREE_LABEL的值，以达到Tree和Network显示不同标签的目的
- 如果觉得这样还不够，可以设置Tree#labelFunction，比如下面的代码可以让Node显示name，Link显示Styles.TREE_LABEL：
1 tree.labelFunction = function(e:IElement):String{
2 if(e is Link){
3 return e.getStyle(Styles.TREE_LABEL);
4 }else{
5 return e.name;
6 }
7 }
既然TWaver这么灵活，那Tree的展开合并图标能定制么？
先来看看用最原始的方式：
- 先定义2个class：
1 [Embed(source="assets/plus.png")]
2 [Bindable]
3 public var plus:Class;
4
5 [Embed(source="assets/minus.png")]
6 [Bindable]
7 public var minus:Class;
- 再设置Tree的disclosureOpenIcon和disclosureClosedIcon属性为上面定义的class
1 <tw:Tree id="tree2" width="100%" height="100%" disclosureOpenIcon="{minus}"
2 disclosureClosedIcon="{plus}"/>
效果如下：
有同学就要问了，这样还是不够灵活，资源文件直接嵌入了SWF中，如果想换个图标，还得重新编译打包上传一把。这好说，可以用css定制组件样式（
其实css也要编译成swf，这点adobe完全没有考虑到用户的实际需求，换个颜色还得编译swf，以后有时间给大家说说如何不编译swf也能用css定制样式），但是偏偏disclosureOpenIcon和disclosureClosedIcon无法用css定制样式。从mx.controls.Tree的源代码中可以看到
1 [Style(name="disclosureOpenIcon", type="Class", format="EmbeddedFile", inherit="no")]
2 [Style(name="disclosureClosedIcon", type="Class", format="EmbeddedFile", inherit="no")]
3
这说明，disclosureOpenIcon和disclosureClosedIcon的style类型为class，css可以加载class？肯定不行，不信邪的同学可以试试：
1 <mx:Style>
2 Tree {
3 disclosureOpenIcon: "assets/minus.png";
4 disclosureClosedIcon: "assets/plus.png";
5 }
6 </mx:Style>
运行程序会得到下面的错误：
TypeError: Error #1034: Type Coercion failed: cannot convert “assets/plus.png” to Class.
at mx.controls::Tree/initListData()[C:\autobuild\3.5.0\frameworks\projects\framework\src\mx\controls\Tree.as:2663]
那我们就定义两个class，但是这两个class是什么class？我们来分析一下：
- 既然是图片，我们就继承Image组件吧。
- 既然是class，说明mx内部会不停地new这个class，所以图片资源要缓存起来。
- 加载图片是异步的，所以要等图片加载完成后，再注册这个class。
因此就有了这2个类的定义：
1 package {
2 import flash.display.Bitmap;
3 import flash.display.Loader;
4
5 import mx.controls.Image;
6
7 public class disclosureOpenIcon extends Image {
8 public static const loader:Loader = new Loader();
9
10 public function disclosureOpenIcon() {
11 this.source = new Bitmap(Bitmap(loader.content).bitmapData);
12 this.width = loader.content.width;
13 this.height = loader.content.height;
14 }
15 }
16 }
17
18 package {
19 import flash.display.Bitmap;
20 import flash.display.Loader;
21
22 import mx.controls.Image;
23
24 public class disclosureClosedIcon extends Image {
25 public static const loader:Loader = new Loader();
26
27 public function disclosureClosedIcon() {
28 this.source = new Bitmap(Bitmap(loader.content).bitmapData);
29 this.width = loader.content.width;
30 this.height = loader.content.height;
31 }
32 }
33 }
下面是定制Tree展开合并图标的代码：
1 private static function registTreeDisclosureIcon(tree:UIComponent):void {
2 registClassStyle(tree, disclosureOpenIcon, "assets/minus.png");
3 registClassStyle(tree, disclosureClosedIcon, "assets/plus.png");
4 }
5
6 private static function registClassStyle(component:UIComponent, clazz:Class, value:String):void {
7 if(clazz["loader"].content == null){
8 clazz["loader"].contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event):void {
9 component.setStyle(getQualifiedClassName(clazz), clazz);
10 });
11 clazz["loader"].load(new URLRequest(value), new LoaderContext(true));
12 }
13 }
如果想全局注册，可以考虑下面的代码：
1 private static function registTreeDisclosureIcon():void {
2 var css:CSSStyleDeclaration = StyleManager.getStyleDeclaration("Tree");
3 registClassStyle(css, disclosureOpenIcon, "assets/minus.png");
4 registClassStyle(css, disclosureClosedIcon, "assets/plus.png");
5 }
6
7 private static function registClassStyle(css:CSSStyleDeclaration, clazz:Class, value:String):void {
8 if(clazz["loader"].content == null){
9 clazz["loader"].contentLoaderInfo.addEventListener(Event.COMPLETE, function(e:Event):void {
10 css.setStyle(getQualifiedClassName(clazz), clazz);
11 });
12 clazz["loader"].load(new URLRequest(value), new LoaderContext(true));
13 }
14 }
最后看看摆脱mx.controls.Tree的
FastTree怎么定制展开合并图标，比如下面的代码就让展开合并图标颠倒了：
1 tree4.expandIcon = "collapsed_icon";
2 tree4.collapseIcon = "expanded_icon";
本文完整代码见附件：
TreeDisclosureIcon