Here is an example of how to add borders to rows in the tree component. I have
been pondering over this for a couple of days. Did try to find some stuff on
the internet also, but couldn’t find anything on adding borders to the rows.
Finally, I wrote this small cellrenderer class (treeRowCellRenderer.as). This
class assumes that a movieclip (with necessary graphics) by the name of “border”
exists inside the main movieclip to which this class is linked.
treeRowCellRenderer.as (download)
class treeRowCellRenderer extends mx.core.UIComponent {
var border : MovieClip; // the reference to the custom border movieclip
var label; //the label to be used for text
var owner; // the row that contains this cell
var listOwner : MovieClip; // the reference we receive to the list
var getCellIndex : Function; // the function we receive from the list
var getDataLabel : Function; // the function we receive from the list
// empty constructor
function treeRowCellRenderer(){
}
// UIObject expects you to fill in createChildren by instantiating
// all the movie clip assets you might need upon initialization.
// Here, it’s just a label.
function createChildren():Void {
// createLabel is a useful method of UIObject–all components use this
var c = label=createLabel(“label”, 10);
// links the style of the label to the
// style of the grid
c.styleName = listOwner;
c.selectable = false;
c.tabEnabled = false;
c.background = false;
c.border = false;
}
function size():Void {
// __width and __height are the underlying variables
// of the getter/setters .width and .height
var c = label;
c._width = __width;
c._height = __height;
// manage border —————————-
var r = border;
r._x = -_x;
r._width = __width+_x;
r._height = listOwner.rowHeight
}
function getPreferredHeight():Number {
/* The cell is given a property, “owner”,
that references the row. It’s always preferred
that the cell take up most of the row’s height.
*/
return owner.__height-4;
}
function setValue(str:String, item:Object, sel:Boolean):Void {
var c = label;
var r = border;
if(str == ” “) {
r._visible = false;
}
// manage text and text color ————————–
var textCol = owner.getStyle(sel == “normal” ? “color” : “textSelectedColor”);
c.textColor = textCol;
c.text = str;
}