Mar 28, 2007 - Synchronized Trees
Expand, collapse or select node is duplicated in second tree

This is a quick, simple example.  Note: if you set the "animate" arg in expandItem = true, you will see some strange bugs.  Setting that arg to false seems to have stopped the bugs

Tracy

<?xml version="1.0" encoding="utf-8"?>
<!-- Synchronized Trees example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="100%">

<mx:Script><![CDATA[
  import mx.events.TreeEvent;
 
  private function onChangeTree1(oEvent:Event):void
  {
    var xmlSelected:XML = XML(tree1.selectedItem);  //get the selected item, cast as xml
    tree2.selectedItem = xmlSelected;               //set the tree2 selected item
  }//onChangeTree1
 
  /** TreeEvent gives us access to the dataProvider Item, in this case XML */
  private function onOpenClose(oEvent:TreeEvent, bOpen:Boolean):void
  {
    var xmlNode:XML = XML(oEvent.item);  //cast the tree1 item as xml
    tree2.expandItem(xmlNode,bOpen);      //expand the node on tree2
  }//onOpenClose
    
]]></mx:Script>

  <mx:Panel title="Synchronized Tree Example" height="100%" width="100%"
      paddingTop="10" paddingLeft="10" paddingRight="10" paddingBottom="10">
    <mx:HDividedBox width="100%" height="100%">
        <mx:Tree id="tree1" width="50%" height="100%" labelField="@label"
            showRoot="false" dataProvider="{treeData}"
            change="onChangeTree1(event)"
            itemOpen="onOpenClose(event, true)"
            itemClose="onOpenClose(event, false)"
        />
        <mx:Tree id="tree2" width="50%" height="100%" labelField="@label"
            showRoot="false" dataProvider="{treeData}"
        />
    </mx:HDividedBox>
  </mx:Panel>
 
  <mx:XMLList id="treeData">
    <node label="root">
      <node label="Mail Box">
        <node label="Inbox">
          <node label="Marketing"/>
          <node label="Personal"/>
        </node>
        <node label="Outbox">
          <node label="Professional"/>
        </node>
        <node label="Spam"/>
        <node label="Sent"/>
      </node>
      <node label="Saved">
        <node label="Work">
          <node label="Hardware"/>
          <node label="Software"/>
        </node> 
        <node label="Personal">
          <node label="Home"/>
          <node label="Shopping">
            <node label="Christmas"/>
            <node label="Birthday"/>
          </node>
        </node>                  
      </node>  
    </node>
  </mx:XMLList> 
</mx:Application>