6 Replies Latest reply on Jul 25, 2007 2:59 AM by akosiwong

    Custom TreeItemRenderer to display a label followed by an icon/image

    ReLLiK75
      Hi all...

      I posted this over on the flex coders group and got no response. Maybe someone where will help me....

      I've been playing around with the code that's been floating around
      to render a checkbox next to each item in a tree control, but
      I'm not having any luck accomplishing the task of getting an image
      to display after a label in a tree control instead of the checkbox.

      I'm using a shared object to store information about different items
      in a tree and I'd like to put a little "comments" icon next to an
      item in the tree that has a shared object associated with it.

      I can't change the branch/leaf icons as I'm already using custom icons
      and they must remain as they are. Can the labelFunction be used to
      return an object containing my label and my icon instead of just a
      string?

      If not, can someone point me in the direction with a few lines of
      code from the updateDisplayList function that will help me
      accomplish my task?

      Thanks!
      Wayne
        • 1. Re: Custom TreeItemRenderer to display a label followed by an icon/image
          jtan Level 1
          Wayne,

          Here was a posting on flexcoders that should help you get started:
          http://www.mail-archive.com/flexcoders@yahoogroups.com/msg33271.html

          You'll have to mess around with the example some. I'm working on creating a working example and I'll post it when I'm done. But, just as a reminder, the rows in a List based component are recycled, so be sure to use the set data function to set the selected property of your CheckBox or to hide/show it depending on your data.

          I hope this helps.
          Joan Lafferty
          Flex SDK QA
          • 2. Re: Custom TreeItemRenderer to display a label followed by an icon/image
            ReLLiK75 Level 1
            Hi Joan...

            Thanks for the reply. Actually, I'm trying to insert an image--not a checkbox-- following the label in my tree. That thread you referenced over in flex coders is the bit of code I started playing with to try to get the image to display instead of the checkbox. I also found some code over on Mac Martine's blog that used custom icons preceding the label (although I keep getting errors everytime I try to view the code on his site now). I figured between the checkbox example and Mac Martine's example I'd be able to pull something together, but am just not having much luck.

            Wayne
            • 3. Re: Custom TreeItemRenderer to display a label followed by an icon/image
              jtan Level 1
              Wayne,

              This isn't exactly what you want, but, I am using this itemRenderer to put a different image before a label in a Tree. The image is different depending on whether the item has children or not. This is similar to what Mac was doing on his blog post. Try it out.

              package {

              import flash.display.DisplayObject;
              import flash.events.MouseEvent;
              import flash.xml.*;

              import mx.controls.Image;
              import mx.controls.Tree;
              import mx.controls.listClasses.*;
              import mx.controls.treeClasses.*;
              import mx.core.IDataRenderer;


              public class MyImageItemRenderer extends TreeItemRenderer
              {

              protected var myImage:Image;
              private var listOwner:Tree;
              private var folderCbX:uint = 32;
              private var leafCbX:uint = 40;
              private var margin:uint = 15;

              override protected function createChildren():void
              {
              super.createChildren();

              myImage = new Image();
              myImage.width = 20;
              myImage.height = 20;
              addChild(myImage);
              myImage.setStyle( "verticalAlign", "middle" );
              }

              private var _data:Object;

              override public function set data(value:Object):void
              {
              _data = value;
              super.data = value;

              if(value != null)
              {
              if(TreeListData(super.listData).hasChildren)
              {
              myImage.source = "branch.jpg";
              }
              else
              {
              myImage.source = "leaf.jpg";
              }
              }
              }

              private var _listData:TreeListData;

              override public function set listData(value:BaseListData):void
              {
              _listData = TreeListData(value);
              super.listData = value;
              }

              override protected function commitProperties():void
              {
              super.commitProperties();

              if (icon)
              {
              if(!TreeListData(listData).hasChildren)
              {
              removeChild(DisplayObject(icon));
              icon = null;
              }
              }

              }

              override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
              {
              super.updateDisplayList(unscaledWidth, unscaledHeight);

              if(_listData)
              {
              var dataDepth:int = TreeListData(listData).depth - 1;
              myImage.x = ((TreeListData(listData).hasChildren) ? folderCbX : leafCbX) + (dataDepth * folderCbX);
              myImage.y = 2;
              super.label.x = myImage.x + myImage.width + margin;

              }
              }
              }
              }

              HTH,
              Joan
              • 4. Re: Custom TreeItemRenderer to display a label followed by an icon/image
                ReLLiK75 Level 1
                Hi Joan,

                Thanks so much...with some minor modifications, I was able to achieve exactly what I needed!

                Wayne
                • 5. Re: Custom TreeItemRenderer to display a label followed by an icon/image
                  romanczar Level 1
                  Hi!
                  I have a similar problem. i want to use an itemrenderer that displays a second icon at the end of the "row" on the right side.

                  This is a "delete" icon and has to communicate with the trees outerDocument.

                  I managed to insert the icon but it is not listening on click events and therefore does not call an functions, neither test functions in the renderer, nor functions in the outerDocument/parentDocument

                  Any idea?
                  • 6. Re: Custom TreeItemRenderer to display a label followed by an icon/image
                    akosiwong
                    <?xml version="1.0" encoding="iso-8859-1"?>
                    <!-- itemRenderers\tree\MainTreeItemRenderer.mxml -->
                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
                    initialize="initCollections();">

                    <mx:Script>
                    <![CDATA[

                    import mx.collections.*;

                    public var xmlBalanced:XMLList =
                    <>
                    <node label="Friends">
                    <node label="Wong" data="Wong.as" status="1"/>
                    <node label="Bong" data="Bong.as" status="1"/>
                    <node label="Jong" data="Jong.as" status="1"/>
                    <node label="****" data="****.as" status="1"/>
                    <node label="Gong" data="Gong.as" status="1"/>
                    </node>
                    <node label="Officemates">
                    <node label="Wong1" data="Wong1.as" status="0"/>
                    <node label="Bong1" data="Bong1.as" status="0"/>
                    <node label="Jong1" data="Jong1.as" status="0"/>
                    <node label="****1" data="****1.as" status="0"/>
                    <node label="Gong1" data="Gong1.as" status="0"/>
                    </node>
                    </>;

                    [Bindable]
                    public var xlcBalanced:XMLListCollection;

                    private function initCollections():void {
                    xlcBalanced = new XMLListCollection(xmlBalanced);
                    }
                    ]]>
                    </mx:Script>

                    <mx:Text width="400"
                    text="The nodes with children are in bold red text, with the number of children in parenthesis.)"/>

                    <mx:Tree id="compBalanced"
                    width="400" height="500"
                    dataProvider="{xlcBalanced}"
                    labelField="@label"
                    itemRenderer="MyImageItemRenderer"
                    />
                    </mx:Application>


                    i want to change the image depending on the status, is this possible??? tnx