4 Replies Latest reply on Oct 2, 2009 9:37 AM by flexrocker

    Populate flex tree control on demand using HTTPService (Flex 3)

    flexrocker Level 1

      First, I am sorry if the same post is already posted here but after spending 30 minutes or may be more I could not find the solution.

       

      By the way I have two problems. 1.) I am new to flex which I know if my own problem and soon I will handle it.

      2.) This is major problem for me. I have to populate Tree control from database and I used HTTPService to get the data from database.

       

      I created a object of HTTPService and on load of Tree control I am calling a function which calls the HTTP URL and returns me the first level of node for my Tree.

      When I click on any node a function is called again using HTTPService and result is appended to the currently selected node. The same goes until n level and it works fine. I was happy with my results. I am stuck in new problem. The problem is if the tree is already populated on my browser and I make some add/update/delete any node or child node, the flex doesn't make a call to HTTP URL and I am not getting updated data.

       

      The mxml code is below (this code has some extra things too).

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      layout="vertical"  backgroundGradientAlphas="[1.0, 1.0]"
      backgroundGradientColors="[#000000, #868686]" >
      <mx:Script>
        <![CDATA[
         import mx.utils.StringUtil;
         import mx.rpc.http.HTTPService;
         import mx.events.ListEvent;
         import mx.binding.utils.BindingUtils;
         import mx.controls.Alert;
         import mx.rpc.events.FaultEvent;
         import mx.collections.XMLListCollection;
         import mx.utils.ObjectProxy;
         import mx.collections.ArrayCollection;
         import mx.rpc.events.ResultEvent;
         import mx.utils.ArrayUtil;
              
         [Bindable]
         public var datalist:XMLListCollection = new XMLListCollection();
        
         [Bindable]
         public var xmlFromDatabase:HTTPService=new HTTPService();

         [Bindable]
         private var xmlForChildren:HTTPService;
        
         private function resultHandler( event:ResultEvent ):void
         {
             var x:XML = event.result as XML;   
             var xl:XMLList = XMLList( x );
         }  
        
         private function faultHandler( event:FaultEvent ):void
         {
          Alert.show(event.message.toString());
         }  
        
         private function display():void
         {
          var params:Object = {};
          params["parent"] = "0";

          xmlFromDatabase.url = "http://localhost:8080/GrailsFlex/department/tree";
          xmlFromDatabase.method = "GET";
          xmlFromDatabase.resultFormat = "e4x";
          xmlFromDatabase.useProxy = false;
          xmlFromDatabase.send(params);
          xmlFromDatabase.addEventListener(ResultEvent.RESULT,displyTree,false,0,false);
         }
        
        
         private function displyTree(event:ResultEvent):void
         {
          XMLtree1.dataProvider =  event.result;
          XMLtree1.labelField = "@name";
         }
        
         private function getChilds(event:ListEvent):void
         {
          try
          {
           var xmlTree:Tree = event.currentTarget as Tree;
          
           var node:XML = xmlTree.selectedItem as XML
          
           var params:Object = {};
          
           params["parent"] = node.@id;
           
           xmlForChildren = new HTTPService();
           xmlForChildren.url = "http://localhost:8080/GrailsFlex/department/tree";
          
          
           xmlForChildren.method = "GET";
           xmlForChildren.resultFormat = "e4x";
           xmlForChildren.useProxy = false;
           xmlForChildren.send(params);
          
           xmlForChildren.addEventListener(ResultEvent.RESULT,appendChild,false,0,false);
           xmlForChildren.addEventListener(ListEvent.ITEM_CLICK,getChilds,false,0,false);
          }
          catch (E:Error)
          {
           Alert.show("getChilds Error:-- " + E.message);
          }
         }
        
         private function deleteTreeNode(xmlItem:XML):void
         {
          var xmlParent:XML = XML(xmlItem).parent();
         
          if (xmlParent.@parent == null || StringUtil.trim(xmlParent.@parent) == "")
          {
           xmlParent.@parent = "0";
          }
         
          if (xmlParent.@parent != "0")
          {
           //Recursive call until I get reach to children of root node
           deleteTreeNode(xmlParent);
          }
          else
          {
           // Now I am at root.
           var xmlRoot:XML = XML(xmlParent).parent();

           var bActualRoot:Boolean = false;

           if (xmlRoot == null)
           {
            xmlRoot = xmlParent;
            bActualRoot = true;
           }
          
           if (bActualRoot)
           {
            if (xmlRoot.@parent == "0")
            {
             try
             {
              for each (var xl:XML in xmlParent.children())
              {
               if (xl.@name != xmlItem.@name)
               {
                for (var cn:int=xl.children().length()-1; cn >=0; cn--)
                {
                 delete xl.children()[cn];
                }
               }
              }
             }
             catch (ex:Error)
             {
              Alert.show("error Real Root: " + ex.toString());
             }
            }
           }
           else
           {
            for each (var nodexm:XML in xmlRoot.children() )
            {
             if (nodexm.@name != xmlParent.@name )
             {
              try
              {
               for (var cu:int=nodexm.children().length()-1; cu >=0; cu--)
               {
                delete nodexm.children()[cu];
               }
              }
              catch (ex:Error)
              {
               Alert.show("error No Real Root: " + ex.toString());
              }
             }
            
            }
           }
          
          
          }
         }
        
         private function appendChild(event:ResultEvent):void
         {
         
          var node:XML = event.result as XML
         
          var sItem: XML = XMLtree1.selectedItem as XML;
         
          if (sItem.children().length() > 0)
          {
           delete sItem.children();
          }
         
         
          for(var i:int=0; i < node.children().length(); i++)
          {
                          var item:XML = node.children()[i];

                          XMLtree1.selectedItem.appendChild(item);
                          XMLtree1.expandItem(XMLtree1.selectedItem,true,true);
                      }
         
          deleteTreeNode(XML(XMLtree1.selectedItem));
         }
        ]]>
      </mx:Script>



      <mx:Tree id="XMLtree1" width="350" height="470"
            showRoot="false" creationComplete="display()" itemClick="getChilds(event)"  />
                
                
      </mx:Application>

      Thanks in advance