[flexcoders] Tree Leaf Renderer (TreeItemRenderer)

[Anthony Lee]

Hi All,

I'd like to present Tree leaves as value pairs with the first value in
a fixed width space. ie. simple columns.

I attempted to extend TreeItemRender and swap the default
label:UITextField with a VBox containing two UITextFields but am
coming up against a few problems, not the least of which is that I
can't override these:

mx_internal function getLabel():UITextField
protected var label:UITextField

Do I have to write a whole new renderer just for this?

Any tips appreciated.

tonio

//---------------------------------------Attempted
Solution-------------------------------------//

package components
{
        import mx.controls.treeClasses.TreeItemRenderer;
        import mx.controls.treeClasses.TreeListData;
        import mx.containers.VBox;
        import mx.core.UITextField;

        public class TwoColTreeItemRenderer extends TreeItemRenderer
        {
        public function TwoColTreeItemRenderer() {
            super();
        }

        override protected function createChildren():void
                {       
                        if (!label)
                        {
                                label = new TwoColLabel() as UITextField; //<-- 
Bad idea, I know :(
                                label.styleName = this;
                                addChild(label);
                        }
                        
                        //hopefully creating the label before calling super
                        //will prevent the same block from running in the super 
method
                        //fingers crossed
                        super.createChildren();
                }
        }
}

package components
{
        import mx.containers.VBox;
        import mx.controls.Label;
        import mx.core.UITextField;
        
        public class TwoColLabel extends VBox
        {
                private var _label1:UITextField;
                private var _label2:UITextField;
                private var _style:Object;
                private var _text:String;
                private var _multiline:Boolean;
                private var _wordWrap:Boolean;
                
                public var delimiter:String = "::";
                public var colWidth:Number = 30;
                
                public function TwoColLabel():void
                {
                        super();
                        this.verticalScrollPolicy = "off";
                        this.horizontalScrollPolicy = "off";
                        _label1 = new UITextField();
                        _label2 = new UITextField();
                }

        
                override public function set styleName(value:Object):void
                {
                        _label1.styleName = _label2.styleName = _style = value; 
                }
                
                override public function get styleName():Object
                {
                        return _style;
                }
                
                public function set text(value:String):void
                {
                        _text = value;
                        var index:Number        = _text.indexOf(delimiter);
                        if (index>0){
                                _label1.text            = _text.substr(0, 
index);
                                _label1.width           = colWidth;
                                _label2.text            = 
_text.substr(index+(delimiter.length));
                        } else {
                                _label1.text            = _text;
                                _label2.width           = 0;
                        }
                }
                
                public function get text():String
                {
                        return _text;
                }
                
                public function set multiline(value:Boolean):void
                {
                        _multiline = value;
                        _label1.multiline = _multiline;
                        _label2.multiline = _multiline;
                }
                
                public function get multiline():Boolean
                {
                        return _multiline;      
                }
                
                public function set wordWrap(value:Boolean):void
                {
                        _wordWrap = value;
                        _label1.multiline = _wordWrap;
                        _label2.multiline = _wordWrap;  
                }
                
                public function get wordWrap():Boolean
                {
                        return _wordWrap;       
                }
                
                public function get textWidth():Number{
                        return _label1.textWidth+_label2.textWidth;     
                }
                
                public function set setColor(color:uint):void
                {
                        _label1.setColor(color);
                        _label2.setColor(color);
                }
        }
}