2 Replies Latest reply on Mar 12, 2010 6:30 AM by sundaresan@J2se

    Adding image for the selected Tree leaf???

    sundaresan@J2se

      Hi All,
               I am working with flex tree component in which i have to add
      an arrow image for the  selected leaf node. I tried to do this using itemclick event
      but cant make it. can you help me out in doing this???

       

      Note: I have written custom Tree and TreeItemRenderer...

       

      -Sundar

        • 1. Re: Adding image for the selected Tree leaf???
          Matt Le Fevre Level 4

          I gave it a try and got a working example, there must be an easier and better way to do this:

           

          Main app:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
          
              <mx:Script>
                  <![CDATA[
                      
                      public function refresh():void
                      {
                          for each (var item:Object in myTree.dataProvider)
                          {
                                 item.@vis = false;
                          }
                          myTree.selectedItem.@vis = true;
                      }
                  ]]>
              </mx:Script>
          
          
          
              <mx:XMLList xmlns="" id="testData"> 
              <group label="Grains" vis="false"/> 
              <group label="Dairy" vis="false"/> 
              <group label="Fruits" vis="false"/> 
              <group label="Meats" vis="false"/>
              <group label="Nuts" vis="false"/> 
              </mx:XMLList>
          
          
              <mx:Tree id="myTree" width="300" height="300" labelField="@label" itemRenderer="treeRend" itemClick="refresh()" dataProvider="{testData}"/> 
              
          </mx:Application>
          

           

           

          treeRend.mxml

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="30">
          
              <mx:Script>
                  <![CDATA[
                      
                      public function checkVis(value:String):Boolean
                      {
                          var blah:Boolean = false;
                          trace(value)
                          if (value == "true")
                          {
                              blah = true;
                          }
                          return blah;
                      }
                  ]]>
              </mx:Script>
              <mx:HBox width="100%" height="100%">
                  <mx:Image width="30" height="30" source="http://www.conexusmagazine.ca/images/arrow2.jpg" scaleContent="true" visible="{checkVis(data.@vis)}"/>
                  <mx:Label text="{data.@label}"/>
              </mx:HBox>
              
          </mx:Canvas>
          
          
          • 2. Re: Adding image for the selected Tree leaf???
            sundaresan@J2se Level 1

            Thanks for ur reply Grizzzzzzzzz,

                                                            is there a way to identify the selected leaf from within MyTreeItemRenderer(Extends TreeItemRenderer)?

                                                           If this is possible,i can add the image to the selected leaf of the tree.

             

            Right now i am assigning images to all the leaf nodes of the tree as follows:

            ***************************************************************************************

             

            public

             

             

             

             

             

            class MyTreeItemRenderer extends TreeItemRenderer

            {

                

            /**

            * Override to draw a line in case current item is a leaf.

            */

             

            override protected function updateDisplayList(

            unscaledWidth:Number, unscaledHeight:Number):

            void

            {

             

             

            // Call super method

             

            super.updateDisplayList(unscaledWidth, unscaledHeight);

             

            if(super.data)

            {

             

            if(TreeListData(super.listData).hasChildren)

            {

             

            // logic for parent node comes here

            }

            else{

             

             

            //Adding leaf Image

            //Logic to add images to leaf

             

            myImage.source = leafImage;

            myImage.x =

            super.label.x;

            //The above code adds images to all leaf nodes. CAN I ADD THIS IMAGE ONLY TO THE SELECTED LEAF NODE???

            //HOW TO FIND THE SELECTED LEAF NODE FROM HERE??? SO THAT SELECTED LEAF WILL BE ADDED WITH THE IMAGE???

            }

            }

            }

            }

             

            //The above code adds images to all leaf nodes. CAN I ADD THIS IMAGE ONLY TO THE SELECTED LEAF NODE???

            //HOW TO FIND THE SELECTED LEAF NODE FROM HERE??? SO THAT SELECTED LEAF WILL BE ADDED WITH THE IMAGE???

             

             

            THANKS,

            SUNDAR