Flex - Tab Tree

Flex - Tab Tree

幾年前很流行 Flash Tab Menu 組件
乍看之下，很像是 Accordion 組件
實際上是比較接近 Tree 組件

以下修改 Tree 組件行為，讓它變得比較類似 Tab Menu
不同深度節點有不同的背景色
相同深度下的節點同時只能打開一個

package com.ticore.uicomponents {

 import mx.controls.treeClasses.TreeItemRenderer;

 

 public class TreeItemRenderer extends mx.controls.treeClasses.TreeItemRenderer {

  

  override protected function commitProperties():void {

   super.commitProperties();

  }

 

  override protected function updateDisplayList(unscaledWidth:Number,

               unscaledHeight:Number):void {

   

   super.updateDisplayList(unscaledWidth, unscaledHeight);

   

   if (listData) {

    var fillAlpha:Number;

    var fillColor:Number;

    switch (listData['depth']) {

     case 1:

      fillAlpha = 0.8;

      fillColor = 0xFFD0D0;

      break;

     case 2:

      fillAlpha = 0.6;

      fillColor = 0xD0FFD0;

      break;

     case 3:

      fillAlpha = 0.4;

      fillColor = 0xD0D0FF;

      break;

    }

    

    this.graphics.clear();

    this.graphics.lineStyle(1, 0x808080, 0.5, true);

    this.graphics.beginFill(fillColor, fillAlpha);

    this.graphics.drawRect(0, 0, unscaledWidth - 1, unscaledHeight - 1);

    this.graphics.endFill();

   }

   

  }

 }

}

 

 

 

 

 

 

 

 

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

  backgroundColor="#F0F0F0" layout="horizontal">

 <mx:Script>

  <![CDATA[

   import mx.collections.ICollectionView;

   import mx.events.TreeEvent;

   

   

   private var openingItem:Object;

   

   public function onItemOpen(evtObj:TreeEvent):void{

    openingItem = evtObj.item;

    // callLater(handleCoseItems);

    setTimeout(handleCoseItems, 100);

   }

   

   public function handleCoseItems():void{

    var item:Object = openingItem;

    var parentItems:Object = tree.getParentItem(item) == null ? objData : tree.getParentItem(item);

    

    for (var i:Number = 0 ; i < parentItems.children.length ; ++i) {

     var siblingItem:Object = parentItems.children[i];

     if (siblingItem != item) {

      if (tree.isItemOpen(siblingItem)) {

       tree.expandItem(siblingItem, false, true);

      }

     }

    }

   }

   

   [Bindable]

   public var objData:Object ={children: [

    {label: "Node", children: [

     {label: "Node 1", children: [{label: "Node 1"}, {label: "Node 2"}, {label: "Node 3"}]},

     {label: "Node 2", children: [{label: "Node 1"}, {label: "Node 2"}, {label: "Node 3"}]},

     {label: "Node 3", children: [{label: "Node 1"}, {label: "Node 2"}, {label: "Node 3"}]},

    ]},

    {label: "Node", children: [

     {label: "Node 1", children: [{label: "Node 1"}, {label: "Node 2"}, {label: "Node 3"}]},

     {label: "Node 2", children: [{label: "Node 1"}, {label: "Node 2"}, {label: "Node 3"}]},

     {label: "Node 3", children: [{label: "Node 1"}, {label: "Node 2"}, {label: "Node 3"}]},

    ]},

    {label: "Node", children: [

     {label: "Node 1", children: [{label: "Node 1"}, {label: "Node 2"}, {label: "Node 3"}]},

     {label: "Node 2", children: [{label: "Node 1"}, {label: "Node 2"}, {label: "Node 3"}]},

     {label: "Node 3", children: [{label: "Node 1"}, {label: "Node 2"}, {label: "Node 3"}]},

    ]},

   ]};

  ]]>

 </mx:Script>

 <mx:Tree id="tree" width="100%" height="100%" indentation="0" showRoot="false"

   folderClosedIcon="{null}" folderOpenIcon="{null}" defaultLeafIcon="{null}"

   itemOpen="onItemOpen(event)" dataProvider="{objData}"

   verticalScrollPolicy="auto" fontSize="14" backgroundAlpha="0"

   paddingBottom="1" paddingTop="1" paddingLeft="0" paddingRight="0"

   labelField="label" itemRenderer="com.ticore.uicomponents.TreeItemRenderer" >

 </mx:Tree>

</mx:Application>

<!-- Ticore's Blog - http://ticore.blogspot.com/ -->

原文： http://ticore.blogspot.com/2008/04/flex-tab-tree.html