频道栏目
首页 > 程序开发 > 软件开发 > Java > 正文
替换TWaver中Tree展开合并图标
2012-06-18 14:39:38           
收藏   我要投稿

默认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}"/>
 效果如下:

\vc3VyZTE=" width="644" />
     有同学就要问了,这样还是不够灵活,资源文件直接嵌入了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";

 作者:TWaver

点击复制链接 与好友分享!回本站首页
相关TAG标签 图标
上一篇:开始serviceMix
下一篇:推荐使用concurrent包中的Atomic类
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站