データ記述子と階層データプロバイダ構造 -- Flex 2.01

Tree およびメニューコントロールで使用する階層データは、データ記述子クラスを使用して解析および操作できる形式であることが必要です。"データ記述子" は、階層コントロールとデータプロバイダオブジェクト間のインターフェイスを提供するクラスです。データ記述子はコントロールに固有のメソッドのセットを実装しており、データプロバイダの内容と構造を決定するほか、データの取得、追加、削除、およびコントロールに固有のデータプロパティの変更を行います。

Flex では、階層コントロールのために次の 2 種類のデータ記述子インターフェイスが定義されています。

Flex フレームワークには、両方のインターフェイスを実装する DefaultDataDescriptor クラスが用意されています。dataDescriptor プロパティを使用して、デフォルトの記述子構造に適合しないデータモデルを処理するカスタムデータ記述子クラスを指定できます。

サブトピック

データ記述子メソッドとソースの要件

両インターフェイスのメソッドと DefaultDataDescriptor クラスの動作を次の表に示します。インターフェイス / メソッド項目の 1 行目は、そのメソッドが ITreeDataDescriptor インターフェイス、IMenuDataDescriptor インターフェイス、またはその両方のいずれに属するか、つまりそのメソッドがツリー、メニュー、またはその両方のいずれで使用されるかを示します。

次の例の Object は、Tree コントロールのデフォルトのデータプロバイダ構造に従っており、DefaultDataDescriptor クラスによって正しく処理されます。

インターフェイス / メソッド	戻り値	DefaultDataDescriptor の動作
両方 hasChildrent(node, [model])	ノードが子に分岐しているかどうかを示すブール値	XML では、ノードが少なくとも 1 つの子エレメントを持つ場合に `true` を返します。その他のオブジェクトでは、ノードの `children` フィールドが空でない場合に `true` を返します。
両方 getChildren(node, [collection])	ノードの子	XML では、子エレメントを持つ XMLListCollection を返します。その他のオブジェクトでは、ノードの `children` フィールドの内容を返します。
両方 isBranch(node, [collection])	ノードがブランチであるかどうか	XML では、ノードが少なくとも 1 つの子を持つ場合、またはノードが `isBranch` 属性を持つ場合に true を返します。その他のオブジェクトでは、ノードが `isBranch` フィールドを持つ場合に `true` を返します。
両方 getData(node, [collection])	ノードデータ	ノードを返します。
両方 addChildAt(node, child, index, [model])	処理が成功したかどうかを示すブール値	すべての場合で、現在インデックスの位置にあるノードの前に子オブジェクトとしてノードを挿入します。
両方 removeChildAt (node, index, [model])	処理が成功したかどうかを示すブール値	すべての場合で、インデックス位置にあるノードの子を削除します。
IMenuDataDescriptor getType(node)	メニューノードタイプを表すストリング。有効な値は `check`、`radio`、および `separator` です。	XML では、ノードの `type` 属性の値を返します。その他のオブジェクトでは、ノードの `type` フィールドの内容を返します。
IMenuDataDescriptor isEnabled(node)	メニューノードが有効かどうかを示すブール値	XML では、ノードの `enabled` 属性の値を返します。その他のオブジェクトでは、ノードの `enabled` フィールドの内容を返します。
IMenuDataDescriptor setEnabled(node, value)		XML では、ノードの `enabled` 属性の値を `true` または `false` に設定します。その他のオブジェクトでは、ノードの `enabled` フィールドの内容を設定します。
IMenuDataDescriptor isToggled(node)	メニューノードが選択されているかどうかを示すブール値	XML では、ノードの `selected` 属性の値を返します。その他のオブジェクトでは、ノードの `enabled` フィールドの内容を返します。
IMenuDataDescriptor setToggled(node, value)		XML では、ノードの `selected` 属性の値を `true` または `false` に設定します。その他のオブジェクトでは、ノードの `enabled` フィールドの内容を設定します。
IMenuDataDescriptor getGroupName (node)	ノードが属するラジオボタングループの名前	XML では、ノードの `groupName` 属性の値を返します。その他のオブジェクトでは、ノードの `groupName` フィールドの内容を返します。

[Bindable]
public var fileSystemStructure:Object = 
    {label:"mx", children: [
        {label:"Containers", children: [
            {label:"Accordian", children:[]},
            {label:"DividedBox", children: [
                {label:"BoxDivider.as", data:"BoxDivider.as"}, 
                {label:"BoxUniter.as", data:"BoxUniter.as"}]},
            {label: "Grid", children:[]}]},
        {label: "Controls", children: [
            {label: "Alert", data: "Alert.as"},
            {label: "Styles", children: [
                {label: "AlertForm.as", data:"AlertForm.as"}]},
            {label: "Tree", data: "Tree.as"},
            {label: "Button", data: "Button.as"}]},
        {label: "Core", children:[]}
    ]};

オブジェクトの場合、ルートは Object インスタンスであるため、(XML と同様に) 常に単一のルートが存在する必要があります。ネストされた Array を含む Array をデータプロバイダとして使用することもできます。この場合、プロバイダにはルートは存在せず、最上位の配列の各エレメントがコントロールの最上位に表示されます。

DefaultDataDescriptor は、整形式の XML ノードを適切に処理できます。ただし、isBranch() メソッドが true を返すのは、パラメータノードが子ノードを持つ場合、またはノードが値 true の isBranch 属性を持つ場合のみです。したがって、XML オブジェクトで、isBranch 属性を true に設定する以外の方法で空のブランチを示す場合は、カスタムデータ記述子を作成する必要があります。

DefaultDataDescriptor はコレクションを適切に処理します。たとえば、ノードの children プロパティが ICollectionView である場合、getChildren() メソッドは子を ICollectionView オブジェクトとして返します。

Tree およびメニューコントロールでの <mx:Model> タグの使用

<mx:Model> タグを使用して、MXML でデータプロバイダ構造を定義できます。Flex コンパイラは、このタグの内容を ActionScript オブジェクトの階層グラフに変換します。<mx:Model> タグには、ActionScript で Object データプロバイダを定義する場合と比べて、次の 2 つの利点があります。

データ記述子を使用するコントロールで <mx:Model> タグを使用するためには、コンパイラによって生成されるオブジェクトが、データ記述子と階層データプロバイダ構造にあるデータ記述子要件に適合している必要があります。また、XML オブジェクトと同様、タグが単一のルートエレメントを持つ必要があります。

ほとんどの場合、<mx:Model> タグを使用する代わりに、<mx:XML> タグまたは <mx:XMLList> タグを使用することを検討してください。これらのタグの説明は、XML データプロバイダの使用にあります。XML ベースのタグはエレメントへのデータバインディングをサポートしており、DefaultDataDescriptor クラスは整構造の XML をすべてサポートしています。したがって、ノード名がその機能を表すような、より自然な構造を使用でき、"children" という不自然なノード名にする必要がなくなります。

DefaultDataDescriptor クラスを使用するコントロールのデータプロバイダとして <mx:Model> タグを使用するためには、子ノードの名前がすべて "children" であることが必要です。この要件は Object を使用する場合とは異なります。Object を使用する場合は、子オブジェクトを含む配列の名前を children にします。

次のコードは、メニューのデータプロバイダとして <mx:Model> タグを使用し、タグ内でデータバインディングを指定する例を示します。また、メニュー構造を動的に変更する方法も示しています。

<?xml version="1.0"?>
<!-- dpcontrols\ModelWithMenu.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*">
    <mx:Script>
        <![CDATA[

            import mx.controls.Menu;
            public var productMenu:Menu;

            public function initMenu(): void
            {
                productMenu = Menu.createMenu(null, Products.Department);
                productMenu.setStyle("disabledColor", 0xCC3366);
                productMenu.show(10,10);
            }

        ]]>
    </mx:Script>

    <mx:Model id="Products">
        <Root>
            <Department label="Toys">
                <children label="Care Bear"/>
                <children label="GI Joe"/>
                <children label="Telly Tubbies"/>
            </Department>
            <Department label="Kitchen">
                <children label="Electronics">
                    <children label="Crock Pot"/>
                    <children label="Panini Grill"/>
                </children>
                <children label="Cookware">
                    <children label="Grill Pan"/>
                    <children label="Iron Skillet" enabled="false"/>
                </children>
            </Department>
            <!-- The items in this entry are bound to the form data -->
            <Department label="{menuName.text}">
                <children label="{item1.text}"/>
                <children label="{item2.text}"/>
                <children label="{item3.text}"/>
            </Department>
        </Root>
    </mx:Model>

    <mx:Button label="Show Products" click="initMenu()"/>
    <!-- If you change the contents of the form, the next time you 
        display the Menu, it will show the updated data in the last 
        main menu item. -->
    <mx:Form>
        <mx:FormItem label="Third Submenu title">
            <mx:TextInput id="menuName" text="Clothing"/>
        </mx:FormItem>
        <mx:FormItem label="Item 1">
            <mx:TextInput id="item1" text="Sweaters"/>
        </mx:FormItem>
        <mx:FormItem label="Item 2">
            <mx:TextInput id="item2" text="Shoes"/>
        </mx:FormItem>
        <mx:FormItem label="Item 3">
            <mx:TextInput id="item3" text="Jackets"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>