TreeItem Renderer

Nadir_Hussain

Dear All,
i want to implement group layers in TOc.where i can handle layer visibility.For this i make a tree  control with customitemrenderer.when normal renderer(no customrenderer) tree control shows me layer but as i try to update custom renderer it shows me tree parent but as i click the folder icon open but nothing visible.the code is below.
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
       xmlns:s="library://ns.adobe.com/flex/spark"
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:viewer="com.esri.viewer.*"
       xmlns:esri="http://www.esri.com/2008/ags"
       width="400" height="406" direction="inherit" fontFamily="Times New Roman"
       fontStyle="italic" verticalAlign="middle" widgetConfigLoaded="init()">
    <fx:Script>
private function init():void
            {
                var strLayer:String;
if (configXML) // checking for valid content in the configuration file
                {
    CursorManager.removeBusyCursor();
   if(map.loaded)
   {
  tree1.itemRenderer=new ClassFactory(widgets.myTOC.myCustomTreeRenderer);
  }
}
}
<viewer:WidgetTemplate id="TOC" y="82"  height="350" layoutDirection="rtl" symbolColor="#000000">
 
  <viewer:layout>
   <s:VerticalLayout/>
  </viewer:layout>
  <s:BorderContainer height="98%" width="98%" x="0"  backgroundAlpha="0.34" backgroundColor="#000000"
         borderColor="#FFFFFF"   borderWeight="3" color="#FFFFFF" cornerRadius="5"
         dropShadowVisible="true">
   <mx:Tree id="tree1" labelField="@label" showRoot="true" width="100%" height="100%">
    <mx:XMLListCollection id="MailBox">
     <fx:XMLList>
      <node label="Map Layers">
          <GroupLayer label="Vector Layer">
            <Vlayer label="V1" checked="0" />
            <Vlayer label="V2" checked="0" />
            <Vlayer label="V3" checked="0" />
            <Vlayer label="V4" checked="0" />
           </GroupLayer>
        <GroupLayer label="Raster Layer">
         <Rlayer label="R1" checked="0" />
         <Rlayer label="R2" checked="0" />
         <Rlayer label="R3" checked="0" />
         <Rlayer label="R4" checked="0" />
            </GroupLayer>
         <GroupLayer label="Satelite Images">
         <Slayer label="S1" checked="0" />
         <Slayer label="S2" checked="0" />
         <Slayer label="S3" checked="0" />
         <Slayer label="S4" checked="0" />
            </GroupLayer>
      </node>
     </fx:XMLList>
    </mx:XMLListCollection>
   </mx:Tree>

  </s:BorderContainer>
   </viewer:WidgetTemplate>

</viewer:BaseWidget>


Custom itemrender is this
package widgets.myTOC
{
import com.esri.viewer.layouts.A5_Landscape;

import flash.events.Event;
import flash.events.MouseEvent;

import mx.controls.CheckBox;
import mx.controls.treeClasses.*;
import mx.controls.treeClasses.TreeItemRenderer;
import mx.controls.treeClasses.TreeListData;
import mx.states.AddChild;
import mx.controls.Alert;

public class myCustomTreeRenderer extends TreeItemRenderer
{
  public var chkBox:CheckBox;
  public var itemXml:XML;
  public function myCustomTreeRenderer()
  {
   super();
      this.mouseEnabled =false;
  }

  override public function  set data(value:Object):void
  {
         
   if(value!=null)
    super.data=value;
  
   this.itemXml=XML(value);
   if(this.itemXml.@checked=="1")
            this.chkBox.selected=true;
   else
    this.chkBox.selected=false;
  }
 
  override protected function createChildren():void
  {
   super.createChildren();
   chkBox=new CheckBox();
   chkBox.addEventListener(MouseEvent.CLICK,handleCheckBoxEvent);
   AddChild(chkBox);
  }
 
  override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
  {
   super.updateDisplayList(unscaledWidth,unscaledHeight);
  
   if(super.data)
   {
    var treeListData:TreeListData=TreeListData(super.listData);
    if(treeListData.hasChildren)
    {
      chkBox.visible=false;
    }
    else
    {
     chkBox.visible=true;
    }
   }
   if(chkBox.visible)
   {
     this.chkBox.x=super.label.x;
     super.label.x=this.chkBox.x+17;
     this.chkBox.y=super.label.y+8;
   }
  }
 
  private function handleCheckBoxEvent(evt:MouseEvent):void
  {
               if(this.chkBox.selected)
       this.itemXml.@checked="1"
      Alert.show(this.itemXml.@label+"");
  }
}
}

please help espesially @Mr Robert.i will be thankful to you.Thanks again to all.

rscheitlin

Nadir,

   Ok so here is what I got working. You have a long road ahead of you if you intend to design your own TOC widget and I can not say that I will be able to help you with code for this all the time.

myCustomTreeRenderer

package widgets.myTOC
{
    import flash.events.Event;
    import flash.events.MouseEvent;
    
    import mx.controls.CheckBox;
    import mx.controls.treeClasses.*;
    import mx.controls.treeClasses.TreeItemRenderer;
    import mx.controls.treeClasses.TreeListData;
    import mx.states.AddChild;
    import mx.controls.Alert;
    
    public class myCustomTreeRenderer extends TreeItemRenderer
    {
        public var chkBox:CheckBox;
        public var itemXml:XML;
        public function myCustomTreeRenderer()
        {
            super();
            mouseEnabled = false;
        }
        
        override public function set data(value:Object):void
        {
            if(value != null)
                super.data = value;
            
            itemXml = XML(value);
            if(itemXml.@checked == "1")
                chkBox.selected = true;
            else
                chkBox.selected = false;
        }
        
        override protected function createChildren():void
        {
            super.createChildren();
            chkBox = new CheckBox();
            chkBox.addEventListener(MouseEvent.CLICK,handleCheckBoxEvent);
            AddChild(chkBox);
        }
        
        override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            
            if(super.data){
                var treeListData:TreeListData=TreeListData(super.listData);
                if(treeListData.hasChildren)
                    chkBox.visible = false;
                else
                    chkBox.visible = true;
            }
            if(chkBox.visible){
                chkBox.x = super.label.x;
                super.label.x = chkBox.x+17;
                chkBox.y = super.label.y+8;
            }
        }
        
        private function handleCheckBoxEvent(evt:MouseEvent):void
        {
            if(chkBox.selected)
                itemXml.@checked="1";
            Alert.show(itemXml.@label+"");
        }
    }
}

The Widget:

<?xml version="1.0" encoding="utf-8"?>
<viewer:BaseWidget xmlns:fx="http://ns.adobe.com/mxml/2009"
                   xmlns:s="library://ns.adobe.com/flex/spark"
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   xmlns:viewer="com.esri.viewer.*"
                   xmlns:esri="http://www.esri.com/2008/ags"
                   width="400" height="406"
                   direction="inherit"
                   fontFamily="Times New Roman" fontStyle="italic"
                   verticalAlign="middle" widgetConfigLoaded="init()">
    <fx:Script>
        private function init():void
        {
            var strLayer:String;
            if (configXML){ // checking for valid content in the configuration file
                //CursorManager.removeBusyCursor();
                if(map.loaded)
                    tree1.itemRenderer = new ClassFactory(widgets.myTOC.myCustomTreeRenderer);
            }
        }
    </fx:Script>
        <viewer:WidgetTemplate id="TOC" y="82" height="350" layoutDirection="rtl" symbolColor="#000000">
            <viewer:layout>
                <s:VerticalLayout/>
            </viewer:layout>
            <s:BorderContainer height="98%" width="98%" x="0" backgroundAlpha="0.34" backgroundColor="#000000"
                               borderColor="#FFFFFF" borderWeight="3" color="#FFFFFF" cornerRadius="5"
                               dropShadowVisible="true">
                <mx:Tree id="tree1" labelField="@label" showRoot="true" width="100%" height="100%">
                    <mx:XMLListCollection id="MailBox">
                        <fx:XMLList>
                            <node label="Map Layers">
                                <GroupLayer label="Vector Layer">
                                    <Vlayer label="V1" checked="0" />
                                    <Vlayer label="V2" checked="0" />
                                    <Vlayer label="V3" checked="0" />
                                    <Vlayer label="V4" checked="0" />
                                </GroupLayer>
                                <GroupLayer label="Raster Layer">
                                    <Rlayer label="R1" checked="0" />
                                    <Rlayer label="R2" checked="0" />
                                    <Rlayer label="R3" checked="0" />
                                    <Rlayer label="R4" checked="0" />
                                </GroupLayer>
                                <GroupLayer label="Satelite Images">
                                    <Slayer label="S1" checked="0" />
                                    <Slayer label="S2" checked="0" />
                                    <Slayer label="S3" checked="0" />
                                    <Slayer label="S4" checked="0" />
                                </GroupLayer>
                            </node>
                        </fx:XMLList>
                    </mx:XMLListCollection>
                </mx:Tree>
            </s:BorderContainer>
        </viewer:WidgetTemplate>
</viewer:BaseWidget>

Don't forget to click the Mark as answer check on this post and to click the top arrow (promote) as shown below: