So…how hard can it be, right? After all, Flex offers to change your text style — using setStyle — to bold, italics, underlined…oh, but no strikethrough.

But I really needed that for my tree nodes, so here is how I did it.

First, my tree, as defined in a MXML file — well, a simplified version:

?View Code ACTIONSCRIPT
1
2
3
4

<mx:Tree id="outlinerTree" 
    height="100%" width="100%"
    itemRenderer="com.voilaweb.tfd.OutlinerRenderer"
    creationComplete="main_initOutliner();"/>

As you can see, I explicitely reference my renderer. Let’s have a look at OutlinerRenderer:

?Download OutlineRenderer.as
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

package com.voilaweb.tfd
{
	import mx.collections.*;
	import mx.controls.treeClasses.*;
 
	public class OutlinerRenderer extends TreeItemRenderer
	{
		override public function set data(value:Object):void
		{
			super.data = value;
		}
 
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			var startx:Number = data ? TreeListData(listData).indent : 0;
			if(disclosureIcon)
				startx += disclosureIcon.measuredWidth;
			if(icon)
				startx += icon.measuredWidth;
			graphics.clear();
			graphics.lineStyle(1, getStyle("color"));
			var y:Number = label.y + label.measuredHeight / 2;
			graphics.moveTo(startx, y);
			graphics.lineTo(startx + label.measuredWidth, y);
		}
	}
}

In a nuthsell, I let the parent paint the label, then add my own line to my graphic context. I use the label’s measurements to size my line.

For those of you new to ActionScript but familiar with Java: yes, it’s just like overriding the paint() method. In fact, ActionScript offers so many similarities with Java — renderers, editors, listeners, annotations… — that if you’ve ever written front-end code, you should give AS3 a try.

If you enjoyed this post, make sure you subscribe to my RSS feed!