Flex / Lazy loading of a treeview with webservice

I searched for many days but i didn't find the answer on google, so i post my own solution to this problem, how to populate a treeview with webservice for each level, with lazy loading ?

Solution is in 3 words :

• disableAutoUpdate
• enableAutoUpdate
• itemUpdated

First, thanks to http://www.mail-archive.com/flexcoders@yahoogroups.com/msg62360.html for give me a way to do it. It didn't work for webservice but was a good begining.
So now ,the source !

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:comp="*"
    paddingTop="0"
    width="100%"
    height="100%"
    layout="horizontal"
    styleName="plain" pageTitle="XXX"
    creationComplete="creationCompleteHandler()"
>

   
     <fx:Script>
        <![CDATA[
            import MyLib.*;
           
            import mx.collections.ArrayCollection;
            import mx.containers.TitleWindow;
            import mx.controls.treeClasses.TreeListData;
            import mx.events.ListEvent;
            import mx.events.TreeEvent;
            import mx.rpc.events.ResultEvent;
            import mx.utils.ObjectProxy;
            [Bindable]
            private var acSiteTreeList:ArrayCollection;
            protected var obj:Object;
           
            private function creationCompleteHandler():void
            {
                acSiteTreeList=new ArrayCollection();
                for(var i:int=0;i<8;i++)
                {
                    obj=new Object();
                    obj["type"]="site";
                    obj["children"]=new ArrayCollection();
                    //fetch is a property in the dataprovider to check if I have fetched the child nodes previously
                    obj["fetch"]=false;
                    obj["label"]="Site "+i.toString();
                    acSiteTreeList.addItem(obj);
                }
            }

            protected var MyEvent:TreeEvent;
            private function setView(event:TreeEvent):void
            {
                if(event.item.type=="site" && event.item.fetch==false)
                {
                    acSiteTreeList.disableAutoUpdate();
                    MyEvent=event;
                    //update the dataprovider
                    obj=new Object();
                    obj["type"]="site";
                    obj["children"]=new ArrayCollection();
                    obj["fetch"]=false;
                    var o:Object=new Object();
                    o["id"]=1;
                    SelectSite.send(o);
                }
            }
                   
            protected function SelectSiteResult(event:ResultEvent):void
            {
                var r:XML=XML(event.result);
                if (obj["fetch"]==false)
                {
                    obj["type"]="site";
                    obj["children"]=new ArrayCollection();
                    obj["fetch"]=false;
                    obj["label"]=r.item[0].Name;
                    MyEvent.item.children.addItem(obj);
                    acSiteTreeList.itemUpdated(obj);
                    acSiteTreeList.enableAutoUpdate();
                }
            }
           

        ]]>
    </fx:Script>
    <fx:Declarations>
    <mx:HTTPService id="SelectSite"
                    url="http://XX.XX.XX.XX/SelectSite.php" resultFormat="e4x"
                    result="SelectSiteResult(event)" showBusyCursor="true"/>
    </fx:Declarations>
   
         <mx:Canvas width="100%" height="100%">
                  <mx:Tree id="tree" x="42" y="37" width="311" height="337" dataProvider="{acSiteTreeList}" itemOpen="setView(event)"></mx:Tree>
         </mx:Canvas>
</mx:Application>


Don't understand? post a comment !