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:
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]);
matrix = matrix.concat([0, .25, 0, 0, 0]);
matrix = matrix.concat([0, 0, .25, 0, 0]);
matrix = matrix.concat([0, 0, 0, 1, 0]);
icon.filters = [ new ColorMatrixFilter( matrix) ]
break;
case 2:
matrix = matrix.concat([.25, 0, 0, 0, 0]);
matrix = matrix.concat([0, 1, 0, 0, 0]);
matrix = matrix.concat([0, 0, .25, 0, 0]);
matrix = matrix.concat([0, 0, 0, 1, 0]);
icon.filters = [ new ColorMatrixFilter( matrix) ]
break;
case 3:
matrix = matrix.concat([.25, 0, 0, 0, 0]);
matrix = matrix.concat([0, .25, 0, 0, 0]);
matrix = matrix.concat([0, 0, 1, 0, 0]);
matrix = matrix.concat([0, 0, 0, 1, 0]);
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:
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.发表于 @ 2008年04月28日 14:35:57|评论(loading...)|编辑