Hi Everyone,

Here's a first cut at adding lines to the Flex tree.

The lines looks quite good and are well positioned in the tree.  I am
happy with this.  However, the problem that I am having is if a parent
folder is opened, closed and then reopened again, extra lines are
drawn in the child's folder.  I don't know why this is happening.
Perhaps this is a bug in the Tree component or I am missing something.
If someone sees the solution, please enlighten me with your changes.

Below is the entire code.

Cheers,

Tim

----- Begin:  test.mxml --------------------------

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  xmlns="*">

    <mx:Script>
        <![CDATA[
   
            import mx.collections.*;
           
              [Bindable]
            public var xmlBalanced:XML =
                <root label="main">
                    <node label="Containers">
                        <node label="DividedBoxClasses">
                            <node label="BoxDivider"
data="">                         </node>
                        <node label="GridClasses">
                            <node label="GridRow" data="">                             <node label="GridItem" data="">                             <node label="Other File" data="">                         </node>
                    </node>
                    <node label="Data">
                        <node label="Messages">
                            <node label="DataMessage"
data="">                             <node label="SequenceMessage"
data="">                                       <node label="Data1">
                                          <node label="Messages1">
                                              <node label="DataMessage"
data="">                                               <node label="SequenceMessage"
data="">                                           </node>
                                          <node label="Events">
                                              <node label="ConflictEvents"
data="">                                               <node label="CommitFaultEvent"
data="">                                           </node>
                                      </node>
                        </node>
                        <node label="Events">
                            <node label="ConflictEvents"
data="">                             <node label="CommitFaultEvent"
data="">                         </node>
                    </node>
                </root>;
   

        ]]>
    </mx:Script>



    <mx:Tree id="compBalanced" dataProvider="{xmlBalanced}"
          itemEditor="TreeEditor"
        labelField="@label" width="400" height="500"
        itemRenderer="MyTreeItemRenderer"/>
</mx:Application>

-------- End: test.xml --------------------------


-------- Begin: MyTreeItemRenderer.as -----------

package  {

    import mx.controls.treeClasses.*;
    import mx.collections.*
    import flash.display.Sprite;
  

    public class MyTreeItemRenderer extends TreeItemRenderer {

      private var isLast:Boolean;
      private var lineArr:Array =new Array();
        // Define the constructor.
        public function MyTreeItemRenderer() {
            super();
        }
       
        // Override the set method for the data property
        // to set the font color and style of each node.
        override public function set data(value:Object):void {
            super.data = "">             if(TreeListData(super.listData).hasChildren) {
                setStyle("color", 0xff0000);
                setStyle("fontWeight", 'bold');
            }
            else {
                setStyle("color", 0x000000);
                setStyle("fontWeight", 'normal');
            } 
           
        }

     
          public function makeLastChildArr(node:Object,
requestedLevel:Number, startLevel:Number):Boolean {
               
                trace("isLastChild = " + node.toXMLString() + "
requestedLevel = " + requestedLevel + " startLevel = " + startLevel);
                        var isLastFlag:Boolean = false;

                        var parentNode:XML = node.parent();
                        var grandParNode:XML = parentNode.parent();
                        var children:XMLList = grandParNode.children();
                        var noOfChildren:Number = children.length();

                        trace("parentNode = " + parentNode.toXMLString() + "
grandParNode = " + grandParNode.toXMLString() + " noOfChildren = " +
noOfChildren);
                        //trace("foundNode = " + children[noOfChildren -1] + ", Node = " +
node.toXMLString() );
                 
                        if ( parentNode == children[noOfChildren -1]){
                              trace("foundNode = " + children[noOfChildren -1] + ", Node = " +
node.toXMLString );
                              isLastFlag = true;
                        }
                 
                       
                        lineArr.push(isLastFlag);
                       
                        if (requestedLevel !=  startLevel){
                              makeLastChildArr(node.parent(), requestedLevel, startLevel - 1);
                        }
                       
                        return isLastFlag;
            }
           
        // Override the updateDisplayList() method
        // to set the text for each tree node.       
       override protected function
updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            if(super.data) {
                 
                        var node:Object = TreeListData(super.listData).item;

                        var depth:Number = TreeListData(super.listData).depth;
                        var indent:Number = TreeListData(super.listData).indent ;
                       
                        lineArr =new Array();
                       
                if(TreeListData(super.listData).hasChildren) {
                    var tmp:XMLList = new
XMLList(TreeListData(super.listData).item);
                    var myStr:int = tmp[0].children().length();
                    super.label.text =
TreeListData(super.listData).text + "(" + myStr + ")";
                    graphics.lineStyle(.7, 0x999999,.3,false,"NONE");

                              trace("depth = " + TreeListData(super.listData).depth + ", open =
" + TreeListData(super.listData).open + ", rowIndex = " +
TreeListData(super.listData).rowIndex);
                             
                             
                             
                             
                              //trace("icon = " + TreeListData(super.listData).icon );
                             
                             
                              if ( depth > 2){
                                    makeLastChildArr(node,depth,depth);
                                    if (depth >3){
                                          makeLastChildArr(node,3,depth);
                                    }
                                   
                                    //trace("isLastChild = " + isLast + " i=" + i);
                                    trace("lineArrLen = " + lineArr.length );
           
                                    lineArr = lineArr.reverse();
                                    for (var i:Number=0;i< lineArr.length;i++){
                                          trace("lineArr = " + lineArr[i] + " i=" + i);
                                         
                                    }
                             
                                    for(var i:Number=1;i<=depth;i++){
                                         
                                          var parentDropLine:Boolean = false;
                                         
                                          TreeListData(super.listData);
     
                                          if(i == depth ){
                                                graphics.lineStyle(.7, 0x999999,.3,false,"NONE");
                                               
                                                var offset:Number = indent + 6.5;
                                                trace("Indent = " + indent);
                                                trace("depthLeaf = " + depth + ", i = " + i + " offset=" +
offset);
                                                graphics.moveTo(offset,-8);
                                                graphics.lineTo(offset,2);
                                          }
                                          else { // Preceding lines
                                                if (i != 1 ){ // don't draw first line
                                                      isLast = lineArr[i-2]; // pull out from correct index of
lineArray
                                                      if (!isLast){ // draw line if corresponding parent is not
lastchild
                                                            graphics.lineStyle(.7, 0x999999,.3,false,"NONE");
                                                            var offset:Number = i*13.5;
                                                            if (i == 2){offset = 23}
                                                            trace("depth = " + depth + ", i = " + i + ", offset = " +
offset );
                                                            graphics.moveTo(offset,-8);
                                                            graphics.lineTo(offset,14);
                                                      }//if
                                                }//if
                                          }//else
                                    }//for
                              }// > 2
                             
                              else if ( depth == 2){
                                    offset = 23;
                                    graphics.moveTo(offset,-8);
                                    graphics.lineTo(offset,2);
                                   
                              }
                }
                else{

                              makeLastChildArr(node,3,depth);
                              //trace("isLastChild = " + isLast + " i=" + i);
                              trace("lineArrLen = " + lineArr.length );
     
                              lineArr = lineArr.reverse();
                              for (var i:Number=0;i< lineArr.length;i++){
                                    trace("lineArr = " + lineArr[i] + " i=" + i);
                                   
                              }

                              for(var i:Number=1;i<=depth;i++){
                                   
                                    var parentDropLine:Boolean = false;
                                   
                                    TreeListData(super.listData);

                                    if(i == depth ){
                                          graphics.lineStyle(.7, 0x999999,.3,false,"NONE");
                                          var offset:Number = indent + 6.5;

                                          trace("Indent = " + indent);
                                          trace("depthLeaf = " + depth + ", i = " + i + " offset=" + offset);
                                         
                                          graphics.moveTo(offset,-8);
                                          graphics.lineTo(offset,10);
                                          graphics.moveTo(offset,10);
                                          graphics.lineTo(offset + 10,10);
                                    }
                                    else { // Preceding lines
                                          if (i != 1 ){ // don't draw first line
                                                isLast = lineArr[i-2]; // pull out from correct index of lineArray
                                                if (!isLast){ // draw line if corresponding parent is not
lastchild
                                                     
                                                      graphics.lineStyle(.7, 0x999999,.3,false,"NONE");
                                                      var offset:Number = i*17 - 11;
                                                      if (i == 2){offset = 23}
                                                      trace("depth = " + depth + ", i = " + i + ", offset = " +
offset );
                                                      //var sp:Sprite = new Sprite();
                                                      graphics.moveTo(offset,-8);
                                                      graphics.lineTo(offset,14);
                                                      //this.addChild(sp);
                                                     
                                                }//if

                                               
                                          }//if
                                    }//else
                              }//for
                             
                }
               

                             
            }// super data
          }
      }
}


-------- End: MyTreeItemRenderer.as -----------






--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com




SPONSORED LINKS
Web site design development Computer software development Software design and development
Macromedia flex Software development best practice


YAHOO! GROUPS LINKS




Reply via email to