Home >
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]); // 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:
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.
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Comments
Leave a comment