FlexlibのTreeGridコンポーネントを利用してカスタマイズデータ構造を階層化ツリーデータグリッドを実現する

Flex 3のAdvanced DataGrid–新しく追加されたAdvanced DataGridコンポーネントを使用すると、階層データや基本的なピボットテーブルなどの頻繁に使用される機能をDataGridに追加できますが、データ構造をカスタマイズしたい場合、Advanced DataGridで実現するのは難しいですよね。オーブンソースのライブラリFlexLibのTreeGridでそれを簡単で実現できます。

FlexLibはオープンソースのMIT Licenseで配布され、Adobe Flex2、Flex3用のUIコンポーネントです。AdvancedForm（フォーム要素）, Base64Image（Base64）, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter（ハイライト表示）, HorizontalAxisDataSelector IconLoader, ImageMap（イメージマップ）, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid（ツリーグリッド）, FlowBox（フローボックス）, Docking ToolBar（ドッキングツールバー）, Flex Scheduling Framework（Flexスケジューリング）などコンポーネントが提供されています（どんどん増やしている）。

以下はサンプルのTGrid.mxmlソース：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
xmlns:code="http://code.google.com/p/flexlib/"
initialize="handleInitialize(event)"
>
<mx:Script>
<![CDATA[
import model.descriptors.HierarchyDataDescriptor;
import model.descriptors.FileDescriptor;
import mx.events.FlexEvent;
import mx.collections.ArrayCollection;
private function handleInitialize(event:FlexEvent):void{
var root:FileDescriptor = new FileDescriptor();
root.Name = "Home";
root.Size = "--";
root.Type = "Folder";
root.Children = new ArrayCollection();
for (var i:int = 0; i<10; i++){
var currentFile:FileDescriptor = new FileDescriptor();
currentFile.Name = "Item "+i;
currentFile.Size = (10*(i+1)) + " KB";
currentFile.Type = "File";
root.Children.addItem(currentFile);
}
list.dataDescriptor = new HierarchyDataDescriptor();
list.dataProvider = root;
}
]]>
</mx:Script>
<code:TreeGrid
id="list"
width="80%" height="100%"
disclosureClosedIcon="@Embed(source='/assets/icons/arrow_right.png')"
disclosureOpenIcon="@Embed(source='/assets/icons/arrow_down.png')"
folderOpenIcon="@Embed(source='/assets/icons/folder.png')"
folderClosedIcon="@Embed(source='/assets/icons/folder.png')"
defaultLeafIcon="@Embed(source='/assets/icons/page.png')"
>
<code:columns>
<code:TreeGridColumn dataField="Name" />
<mx:DataGridColumn dataField="Size" />
<mx:DataGridColumn dataField="Type" />
</code:columns>
</code:TreeGrid>
</mx:Application>

FileDescriptor.asのソース：

package model.descriptors
{
import mx.collections.ArrayCollection;
public class FileDescriptor
{
public function FileDescriptor(){}
public var Name:String;
public var Size:String;
public var Type:String;
public var Children:ArrayCollection;
}
}

HierarchyDataDescriptor.asのソース：

package model.descriptors
{
import mx.collections.ArrayCollection;
import mx.collections.ICollectionView;
import mx.controls.treeClasses.DefaultDataDescriptor;
public class HierarchyDataDescriptor extends DefaultDataDescriptor
{
public function HierarchyDataDescriptor()
{
super();
}
override public function getChildren(node:Object, model:Object=null):ICollectionView
{
return node.Children;
}
override public function hasChildren(node:Object, model:Object=null):Boolean
{
return node != null && node.Children != null && (node.Children as ArrayCollection) != null && (node.Children as ArrayCollection).length > 0;
}
override public function isBranch(node:Object, model:Object=null):Boolean
{
return hasChildren(node, model);
}
override public function getData(node:Object, model:Object=null):Object
{
return node;
}
}
}

※関連資料－Flex 3に新規追加された機能：

Adobe AIRのネイティブサポート–Flex 3では、新しいコンポーネントが導入され、Adobe AIR開発ツールがSDKとFlex Builderに組み込まれています。
永続フレームワークキャッシュ–Adobeプラットフォームコンポーネント用の新しいFlash Playerキャッシュを利用すると、Flex 3アプリケーションを50 KBに縮小できます。
Flex Builderの生産性向上–Flex Builder 3には、リファクタリングサポート、パフォーマンスとメモリを調整するための新しいプロファイラ、データアクセスのためのコード生成ツールがそれぞれ追加されました。
Creative Suite 3との統合–Flash CS3ユーザは、Flex Component Kit for Flash CS3を使用すると、Flexアプリケーションにシームレスに統合されるコンポーネントを構築できます。Flex Builder 3には、CS3アプリケーションからアセットをスキンとして読み込むための新しいウィザードが追加されています。
Advanced DataGrid–新しく追加されたAdvanced DataGridコンポーネントを使用すると、階層データや基本的なピボットテーブルなどの頻繁に使用される機能をDataGridに追加できます。
Flexオープンソース化に向けた最初の一歩-アドビでは、Flexをオープンソースプロジェクトにするための最初の取り組みとして、FlexとFlex Builderのバグトラッキングシステムのほか、詳細なロードマップ情報を公開しています。

デモ｜フルソースコード