使用图形滤镜来扩展基本的组件
Andrew Trice
April 23, 2008 | Permalink | Comments (0)
在前面的帖子中我曾经讲到过如何使用图形滤镜，这篇博文中我将介绍如何使用这些滤镜来增强基本组件的能力，在本示例中我将展示如何使用滤镜来改变基本的TREE组件的外观
我曾经无数次的碰到过这个问题，那就是如何通过TREE图标来表示其当前的TREE展开状态
我总是在寻找将数据可视化的方法，这里有一个非常简单的方来来扩展一个基本的TREE组件的图标所蕴含的意味，我见过无数种的实现方式，但是我认为下面的是其中最简单的一种方法，它使用了 ColorMatrixFilter 来改变TREE文件夹的颜色，你可以使用这项技巧将一些文件夹分组到一起，采用特定的颜色来表示树的不同层次，根据文件夹或者是数据来改变树图标的现实状态，当然还有更多
下面就是：
<script type="text/javascript" src="http://www.tricedesigns.com/portfolio/colorfolders/swfobject.js"></script>
<script type="text/javascript"> var so = new SWFObject("http://www.tricedesigns.com/portfolio/colorfolders/TreeColors.swf", "TreeColors", "425", "260", "8", "#FFFFFF"); so.write("treecolo</script>
下面我就展示它是如何实现的，它使用了一个定制的ITEM RENDER，该render扩展了TREEITEMRENDER类，在commitProperties 方法中，应用了ColorMatrixFilter 过滤当前文件夹的图标，就是这么简单，而没有什么更换图标或者是替代之类的。
override protected function commitProperties(): void
... {
super.commitProperties();
if ( icon )
...{
var matrix:Array = new Array();
switch (TreeListData( listData ).depth )
...{
case 1:
matrix = matrix.concat([1, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, .25, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, .25, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
icon.filters = [ new ColorMatrixFilter( matrix) ]
break;
case 2:
matrix = matrix.concat([.25, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, 1, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, .25, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
icon.filters = [ new ColorMatrixFilter( matrix) ]
break;
case 3:
matrix = matrix.concat([.25, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, .25, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, 1, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
icon.filters = [ new ColorMatrixFilter( matrix) ]
break;
default:
icon.filters = [];
break;
}
}
}
当然这些代码在定制的TREE图标上也可以工作
<script type="text/javascript" src="http://www.tricedesigns.com/portfolio/colorfolders/swfobject.js"></script>
<script type="text/javascript"> var so = new SWFObject("http://www.tricedesigns.com/portfolio/colorfolders/CustomFolderTreeColors.swf", "CustomFolderTreeColors", "425", "260", "8", "#FFFFFF"); so.write("CustomFolderTreeColors");</script> 源代码链接：
http://www.tricedesigns.com/portfolio/colorfolders/srcview/index.html
http://www.tricedesigns.com/portfolio/colorfolders/srcview/TreeColors.zip.html
Note: There are 2 separate files in there "TreeColors.mxml" and "CustomFolderTreeColors". The only difference between these two are the specification of custom folder icons.
Using Graphics Filters to Extend Basic Components
Andrew Trice
April 23, 2008 | Permalink | Comments (0)
I've discussed graphics filters previously, and here's a trick to use them to extend the capabilities of basic Flex controls. In this example, graphics filters will be used to alter the appearance of a basic tree control. I've run into this scenario numerous times... How can you change the appearance of tree folder icons to imply meaning to the branches of the tree?
I'm always looking for ways to visualize data, and this is a very easy way to extend a basic tree control to add meaning to it. I've seen different implementations, but I think this is the easiest so far. This technique uses a ColorMatrixFilter to change the colors of the tree folders. You could use this technique to visually group specific folders together, show specific tree levels in specific colors, change color depending upon folder contents or data, etc... There are a lot of applications for this.
Here it is:
<script type="text/javascript" src="http://www.tricedesigns.com/portfolio/colorfolders/swfobject.js"></script>
<script type="text/javascript"> var so = new SWFObject("http://www.tricedesigns.com/portfolio/colorfolders/TreeColors.swf", "TreeColors", "425", "260", "8", "#FFFFFF"); so.write("treecolors");</script>
Now, here's how it works. It uses a custom item renderer that extends the TreeItemRenderer class. Within the commitProperties method, a ColorMatrixFilter is applied to the existing folder icon (the "icon" property). It's that simple... There is no custom drawing or image substitution necessary.
override protected function commitProperties():void
{
super.commitProperties();
if ( icon )
{
var matrix:Array = new Array();
switch (TreeListData( listData ).depth )
{
case 1:
matrix = matrix.concat([1, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, .25, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, .25, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
icon.filters = [ new ColorMatrixFilter( matrix) ]
break;
case 2:
matrix = matrix.concat([.25, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, 1, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, .25, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
icon.filters = [ new ColorMatrixFilter( matrix) ]
break;
case 3:
matrix = matrix.concat([.25, 0, 0, 0, 0]); // red
matrix = matrix.concat([0, .25, 0, 0, 0]); // green
matrix = matrix.concat([0, 0, 1, 0, 0]); // blue
matrix = matrix.concat([0, 0, 0, 1, 0]); // alpha
icon.filters = [ new ColorMatrixFilter( matrix) ]
break;
default:
icon.filters = [];
break;
}
}
} This will also work on top of custom folder icons, as you can see here:
<script type="text/javascript" src="http://www.tricedesigns.com/portfolio/colorfolders/swfobject.js"></script>
<script type="text/javascript"> var so = new SWFObject("http://www.tricedesigns.com/portfolio/colorfolders/CustomFolderTreeColors.swf", "CustomFolderTreeColors", "425", "260", "8", "#FFFFFF"); so.write("CustomFolderTreeColors");</script>
You can view the full source code here:
http://www.tricedesigns.com/portfolio/colorfolders/srcview/index.html
You can download the application source code here:
http://www.tricedesigns.com/portfolio/colorfolders/srcview/TreeColors.zip.html
Note: There are 2 separate files in there "TreeColors.mxml" and "CustomFolderTreeColors". The only difference between these two are the specification of custom folder icons.