0 Replies Latest reply on Aug 22, 2009 5:40 AM by VinodhaPalanisamy

    How to add child node and child items into a parent node in tree in Flex? (CustomClass)

    VinodhaPalanisamy

      Hi all ,

              Here, i have given 2 files to add child node and child items into a parent node in tree in flex. Here, i have used a custom class. This class, to

       

       

       

      getChildren(),

      isBranch(),

      hasChildren(),

      getData(),

       

       

       

      addChildAt(),

      removeChildAt().

       

      1.MyCustomTreeDataDescriptor.as

      2.TreeAddChild.mxml

       

      1.MyCustomTreeDataDescriptor.as

       

      package

      // myComponents/MyCustomTreeDataDescriptor.as

      {

      import

       

      mx.collections.ArrayCollection;

      import

       

      mx.collections.CursorBookmark;

      import

       

      mx.collections.ICollectionView;

      import

       

      mx.collections.IViewCursor;

      import

       

      mx.controls.Alert;

      import

       

      mx.controls.treeClasses.*;

      import

       

      mx.events.CollectionEvent;

      import

       

      mx.events.CollectionEventKind;

       

      public

       

      class MyCustomTreeDataDescriptor implements ITreeDataDescriptor

      {

       

       

      // The getChildren method requires the node to be an Object

       

      // with a children field.

       

      // If the field contains an ArrayCollection, it returns the field

       

      // Otherwise, it wraps the field in an ArrayCollection.

       

      public function getChildren(node:Object,

      model:Object=

      null):ICollectionView

      {

       

      try

      {

       

      if (node is Object) {

       

      if(node.children is ArrayCollection){

       

      return node.children;

      }

      else{

       

      return new ArrayCollection(node.children);

      }

      }

      }

       

      catch (e:Error) {

       

      trace("[Descriptor] exception checking for getChildren");

      }

       

      return null;

      }

       

       

      // The isBranch method simply returns true if the node is an

       

      // Object with a children field.

       

      // It does not support empty branches, but does support null children

       

      // fields.

       

      public function isBranch(node:Object, model:Object=null):Boolean {

       

      try {

       

      if (node is Object) {

       

      if (node.children != null) {

       

      return true;

      }

      }

      }

       

      catch (e:Error) {

       

      trace("[Descriptor] exception checking for isBranch");

      }

       

      return false;

      }

       

       

      // The hasChildren method Returns true if the

       

      // node actually has children.

       

      public function hasChildren(node:Object, model:Object=null):Boolean {

       

      if (node == null)

       

      return false;

       

      var children:ICollectionView = getChildren(node, model);

       

      try {

       

      if (children.length > 0)

       

      return true;

      }

       

      catch (e:Error) {

      }

       

      return false;

      }

       

      // The getData method simply returns the node as an Object.

       

      public function getData(node:Object, model:Object=null):Object {

       

      try {

       

      return node;

      }

       

      catch (e:Error) {

      }

       

      return null;

      }

       

       

      // The addChildAt method does the following:

       

      // If the parent parameter is null or undefined, inserts

       

      // the child parameter as the first child of the model parameter.

       

      // If the parent parameter is an Object and has a children field,

       

      // adds the child parameter to it at the index parameter location.

       

      // It does not add a child to a terminal node if it does not have

       

      // a children field.

       

      public function addChildAt(parent:Object, child:Object, index:int,

      model:Object=

      null):Boolean {

       

      var event:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);

      event.kind = CollectionEventKind.ADD;

      event.items = [child];

      event.location = index;

       

      if (!parent) {

       

      var iterator:IViewCursor = model.createCursor();

      iterator.seek(CursorBookmark.FIRST, index);

      iterator.insert(child);

      }

       

      else if (parent is Object) {

       

      if (parent.children != null) {

       

      if(parent.children is ArrayCollection) {

      parent.children.addItemAt(child, index);

       

      if (model){

      model.dispatchEvent(event);

      model.itemUpdated(parent);

      }

       

      return true;

      }

       

      else {

      parent.children.splice(index, 0, child);

       

      if (model)

      model.dispatchEvent(event);

       

      return true;

      }

      }

      }

       

      return false;

      }

       

       

      // The removeChildAt method does the following:

       

      // If the parent parameter is null or undefined,

       

      // removes the child at the specified index

       

      // in the model.

       

      // If the parent parameter is an Object and has a children field,

       

      // removes the child at the index parameter location in the parent.

       

      public function removeChildAt(parent:Object, child:Object, index:int, model:Object=null):Boolean

      {

       

      var event:CollectionEvent = new CollectionEvent(CollectionEvent.COLLECTION_CHANGE);

      event.kind = CollectionEventKind.REMOVE;

      event.items = [child];

      event.location = index;

       

       

      //handle top level where there is no parent

       

      if (!parent)

      {

      Alert.show(

      "not sparent");

       

      var iterator:IViewCursor = model.createCursor();

      iterator.seek(CursorBookmark.FIRST, index);

      iterator.remove();

       

      if (model)

      model.dispatchEvent(event);

       

      return true;

      }

       

      else if (parent is Object)

      {

      Alert.show(

      "parent");

       

      if (parent.children != undefined)

      {

      parent.children.splice(index, 1);

       

      if (model)

      model.dispatchEvent(event);

       

      return true;

      }

      }

       

      return false;

      }

       

      }

      }

       

       

      2.TreeAddChild.mxml

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application

       

      xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"

      >

      <mx:Script>

      <![CDATA[

       

       

      import

      mx.events.ListEvent;

       

       

      import

      mx.controls.Alert;

       

       

      import

      mx.collections.IViewCursor;

       

       

      import

      mx.controls.treeClasses.ITreeDataDescriptor;

       

       

      import

      mx.controls.treeClasses.TreeListData;

       

       

      import

      mx.controls.treeClasses.TreeItemRenderer;

       

       

      import

      mx.events.TreeEvent;

       

       

      import

      mx.collections.ArrayCollection;

       

       

      var locationAC:ArrayCollection = new

      ArrayCollection();

       

       

      public var treeLocationObj:Object = new

      Object();

       

       

      public var groupAC:ArrayCollection = new

      ArrayCollection();

       

       

      public var resourceAC:ArrayCollection = new

      ArrayCollection();

       

       

      // To load parent nodes like 'Locations', when we run project

       

       

      public function init():

      void

      {

       

       

      var locTreeObj1:Object = {label:"Jayanagar 7th Block", id:"1", children:new

      ArrayCollection()};

      locationAC.addItem(locTreeObj1);

       

       

      var locTreeObj2:Object = {label:"BTM Layout", id:"2", children:new

      ArrayCollection()};

      locationAC.addItem(locTreeObj2);

       

       

      var locTreeObj3:Object = {label:"Chennimalai", id:"3", children:new

      ArrayCollection()};

      locationAC.addItem(locTreeObj3);

      }

       

       

       

      //Get node object as TreeEvent

       

       

      private function addChildren(event:TreeEvent):

      void

      {

      treeLocationObj = event.item;

      getLocationId(event.item[

       

      "id"

      ]);

      }

       

       

       

      public function getLocationId(id:String):

      void

      {

       

       

      //To get depth of a particular node (treeLocationObj)

       

       

      var

      d:int = TreeListData(TreeItemRenderer(tree.itemToItemRenderer(treeLocationObj)).listData).depth;

       

       

      var

      str:String = TreeListData(TreeItemRenderer(tree.itemToItemRenderer(treeLocationObj)).listData).label;

       

       

      if

      (d == 1)

      {

       

       

      //Construct arraycollection

      groupAC =

       

      new

      ArrayCollection();

       

       

      var groupObj1:Object = {label:"IdeasGroup", id:"1", children:new

      ArrayCollection()};

      groupAC.addItem(groupObj1);

       

       

      var groupObj2:Object = {label:"ItrxGroup", id:"2", children:new

      ArrayCollection()};

      groupAC.addItem(groupObj2);

      loadChildGroup();

      }

       

       

      if

      (d == 2)

      {

      getGroupId(id);

      }

      }

       

       

       

      private function loadChildGroup():

      void

      {

      removeChildItems(treeLocationObj);

       

       

      for (var

      i:int=0; i < groupAC.length; i++)

      {

      tree.dataDescriptor.addChildAt(treeLocationObj, groupAC.getItemAt(i), 0, locationAC);

      }

      }

       

       

       

      public function getGroupId(id:String):

      void

      {

      resourceAC =

       

      new

      ArrayCollection();

       

       

      var resourceObj1:Object = {label:"Vinodha", id:"1"

      };

      resourceAC.addItem(resourceObj1);

       

       

      var resourceObj2:Object = {label:"Bhuvanesh", id:"2"

      }

      resourceAC.addItem(resourceObj2);

      addChildItem();

      }

       

       

       

      private function removeChildItems(parentNode:Object):

      void

      {

       

       

      var

      descriptor:ITreeDataDescriptor = tree.dataDescriptor;

       

       

      var

      childItems:Object;

       

       

      var

      cursor:IViewCursor;

       

       

      var

      hasChild:Boolean = descriptor.hasChildren(parentNode, locationAC);

       

       

      if

      (hasChild)

      {

      childItems = descriptor.getChildren(parentNode);

       

       

      if

      (childItems)

      {

      cursor = childItems.createCursor();

       

       

      while

      (!cursor.afterLast)

      {

      cursor.remove();

      }

      }

      }

      }

       

       

       

      private function addChildItem():

      void

      {

      removeChildItems(treeLocationObj);

       

       

      for (var

      i:int = 0; i< resourceAC.length; i++)

      {

      tree.dataDescriptor.addChildAt(treeLocationObj, resourceAC.getItemAt(i), 0, locationAC);

      }

      }

       

       

       

      private function removeItems(event:TreeEvent):

      void

      {

       

       

      //var ind:int = TreeListData(TreeItemRenderer(tree.itemToItemRenderer(event.item)).listData).rowIndex;

       

       

      var

      descriptor:ITreeDataDescriptor = tree.dataDescriptor;

       

       

      var

      childItems:Object;

       

       

      var

      cursor:IViewCursor;

       

       

      //var childItem:Object;

      childItems = descriptor.getChildren(event.item);

       

       

      if

      (childItems)

      {

      cursor = childItems.createCursor();

       

       

      while

      (!cursor.afterLast)

      {

       

       

      //childItem = cursor.current;

      cursor.remove();

      }

      }

      }

       

       

       

      public function getResourceID(event:ListEvent):

      void

      {

      Alert.show(

       

      "ID:"+ event.currentTarget.selectedItem["id"

      ]);

      Alert.show(

       

      "label:"+event.currentTarget.selectedItem["label"

      ]);

      }

      ]]>

      </mx:Script>

       

       

      <mx:Tree x="71" y="45" id="tree" dataProvider="{locationAC}

      " itemOpen="addChildren(event)"

      itemClose="removeItems(event)" dataDescriptor="

       

      {new MyCustomTreeDataDescriptor()}" itemClick="getResourceID(event)"

      ></mx:Tree>

       

      </mx:Application>