Flex中Tree控件基本用法

主要实现了以XML为数据源将其绑定Tree控件上, 添加, 修改结点. 根据属性设置结点的图标. 设置Tree控件的水平滚动条等.

        其实也挺简单的, 只是我这几天在学习Flex过程中, 感觉好资料比较少. 一个<<Flex_QuickStart.pdf>很好, 但是很快就看完了, 对Flex有了一个基本的了解, 但是离我们的技术需求还太远.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
   <![CDATA[   
    // 图标的相对地址   // 注意: 文件夹之间一定要用"/"分隔,而不能用"\"分隔!
    [Embed(source="flexQQIcon/boy.gif")]
    [Bindable]
    public var boyIcon:Class;
   
    [Embed(source="flexQQIcon/girl.gif")]
    [Bindable]
    public var girlIcon:Class;
  
    // 根据结点的属性设置节点图标
    private function SetIcon(item:Object):*
    {
     var xml:XML = item as XML;
    
     if(xml.attribute("sex")=="男")
     {
      return boyIcon;
     }
     else
     {
      return girlIcon;
     }   
    }
  
    // Tree控件的数据源
    [Bindable]
    public var jpXml:XML= 
     <member jpname="祖先" sex="男">
      <member jpname="胡迪" sex="男">      
      </member>    
      <member jpname="胡俊" sex="男">       
      </member> 
      <member jpname="胡三" sex="女">       
      </member>    
     </member> 
    
   public function AddMember():void
   {
    var newMember:XML = 
     <member jpname="胡易衡" sex="男">       
      </member> 
  
    //// 在根结点的第一个子结点前面加一个子第一个子结点  
    //jpXml.appendChild(newMember);
    //// 在根结点的最后一个子结点前面加一个子第一个子结点
    //jpXml.prependChild(newMember);
      
    // 给结点添加一个子结点     // 添加子女
    jpXml.member.(@jpname=="胡俊").appendChild(newMember);  
  
    // 给结点添加一个兄弟结点    // 先找到该结点父结点,然后添加给该父结点添加子结点
    //jpXml.member.(@jpname=="胡俊").parent().appendChild(newMember); 
   
    // 修改结点的值
    //jpXml.member.(@jpname=="胡俊").@jpname="姓名修改";   
    txrXml.text= jpXml.member.(@jpname=="胡俊").@jpname;   // 用于测试     
   }   
   ]]>
</mx:Script>


<mx:Tree x="27" y="81" width="107" height="300" id="treeXml"
   dataProvider="{jpXml}" labelField="@jpname" showDataTips="true"
     iconFunction="SetIcon" horizontalScrollPolicy="on"></mx:Tree>
<mx:Button x="65" y="40" label="Button" id="btnXml" click="AddMember()" />
<mx:TextArea x="151" y="83" width="258" height="237" id="txrXml"/>
  
</mx:Application>