メニューベースのコントロールでは、次のような特性を備えたデータプロバイダを使用して、メニューの構造と内容を指定します。

• ほとんどの場合データプロバイダは階層型ですが、単一レベルのメニューも指定できます。
• 個々のメニューアイテムには、その外観と動作を決定するフィールドが含まれています。メニューベースのコントロールには、ラベルテキスト、アイコン、メニューアイテムのタイプ、およびアイテムの状態を定義するフィールドがあります。有効なフィールドについては、メニュー項目情報の指定と使用を参照してください。

メニューのデータプロバイダについて

メニューベースのコントロールの dataProvider プロパティで、メニューの構造と内容を定義するオブジェクトを指定します。メニューの内容が動的に変わる場合、データプロバイダを変更してメニューを変化させます。

通常、メニューベースのコントロールは、ネストしたオブジェクトの配列や XML などの階層的なデータプロバイダからデータを取得します。動的に変化するデータをメニューに表示するには、ArrayCollection や XMLListCollection などの ICollectionView インターフェイスを実装しているオブジェクトを使用します。

メニューベースのコントロールは、データ記述子を使用してデータプロバイダの内容を解析および操作します。デフォルトでは、メニューベースのコントロールは DefaultDataDescriptor クラスの記述子を使用しますが、独自のクラスを作成して、そのクラスを Menu コントロールの dataDescriptor プロパティに指定することもできます。

DefaultDataDescriptor クラスでは、次の種類のデータを使用できます。

XML 

有効な XML テキストを含むストリング、あるいは有効な E4X 形式の XML データを含む <mx:XML> または <mx:XMLList> の各コンパイル時タグか XML オブジェクトまたは XMLList オブジェクトのいずれか。

その他のオブジェクト 

アイテムの配列、またはアイテムの配列を含むオブジェクトで、ノードの子が children という名前のアイテムに含まれているもの。<mx:Model> コンパイル時タグを使用して、データバインディングをサポートするネストされたオブジェクトを作成できますが、その場合はTree およびメニューコントロールでの <mx:Model> タグの使用で定義された構造に従う必要があります。

コレクション  

ArrayCollection クラスや XMLListCollection クラスなどの ICollectionView インターフェイスを実装していて、そのデータソースが上記の 2 つの項目のいずれかで指定された構造に適合しているオブジェクト。DefaultDataDescriptor クラスには、コレクションを効率的に処理できるコードが含まれています。メニューのデータが動的に変わる場合は、コレクションをデータプロバイダとして使用してください。それ以外を使用すると、メニューのデータが更新されずに古くなります。

DefaultDataDescriptor でサポートされる形式の詳細など、階層オブジェクトやデータ記述子の詳細については、データ記述子と階層データ構造を参照してください。

すべてのデータ駆動型コントロールと同様に、データプロバイダの内容が動的に変化し、その変化をメニューに反映させる必要がある場合は、データソースには ArrayCollection オブジェクトや XMLListCollection オブジェクトなどのコレクションを使用してください。メニューを変更するには、基となっているコレクションを変更します。メニューの外観は、それに従って自動的に変わります。

XML データ内のノード（メニューアイテム）タグはどのような名前でもかまいません。このトピックの多くの例では、すべてのメニュー項目に <node> を使用するか、または、最上位のアイテムに <menuItem> タグ、サブメニューのアイテムに <subMenuItem> などのタグを使用しますが、<person> や <address> などのデータを識別できるタグ名を使用する方が現実に即しています。メニューを処理するコードは XML を読み取って、ネストされたノード間の関係に応じて階層を表示します。詳細については、メニュー項目情報の指定と使用を参照してください。

ほとんどのメニューの最上位には、単一のルートアイテムではなく、複数のアイテムがあります。<mx:XML> タグで作成された XML オブジェクトなどには、単一のルートノードが必要です。ルートのあるデータプロバイダを使用するメニューを表示する際に、そのルートを非表示にするには、Menu、PopUpMenuButton、または MenuBar の showRoot プロパティを false に設定します。

メニュー項目情報の指定と使用

メニュー項目の表示方法と使用法は、メニューベースのコントロールのデータプロバイダにある情報によって決まります。メニューの内容にアクセスする、またはメニューの内容を変更するには、データプロバイダの内容を変更します。

メニューベースのクラスでは、IMenuDataDescriptor インターフェイスのメソッドを使用して、メニューの動作や内容を定義するデータプロバイダの情報にアクセスして操作します。Flex では、このインターフェイスを実装している DefaultDataDescriptor クラスが用意されています。dataDescriptor プロパティを設定しないと、メニューベースのコントロールでは DefaultDataDescriptor クラスを使用します。

メニュー項目のタイプ

データプロバイダのそれぞれの項目では、アイテムのタイプと、タイプ特有のメニューアイテム情報を指定できます。メニューベースのクラスでは、次のアイテムのタイプ（type フィールドの値）を使用できます。

normal 

（デフォルト）normal タイプのアイテムを選択すると、change イベントがトリガされます。ただしアイテムに子が設定されている場合は、サブメニューが開きます。

Check 

check タイプのアイテムを選択すると、メニューアイテムの toggled プロパティの値が true から false に、またはその逆に切り替わります。メニューアイテムに true が設定されている状態では、メニューのアイテムラベルの横にチェックマークが表示されます。

radio  

radio タイプのアイテムは RadioButton コントロールに非常に似ていて、グループ単位で機能します。同一グループのラジオメニューアイテムは、一度に 1 つしか選択できません。このセクションの例では、3 つのサブメニューアイテムを「one」というグループのラジオボタンとして定義しています。

選択されたラジオアイテムの toggled プロパティは true に設定され、同一グループのこれ以外のラジオアイテムの toggled プロパティは false に設定されます。Menu コントロールでは、選択されているラジオボタンの隣に塗りつぶされた円が表示されます。ラジオグループの selection プロパティが、選択されたメニューアイテムのラベルに設定されます。

separator 

separator タイプのアイテムは、メニュー内のアイテムを別々の表示グループに分ける単純な横線を描きます。

メニューの属性

メニューアイテムでは、アイテムの表示方法と動き方を決定する属性をいくつか指定できます。次の表では、指定できる属性とそのデータ型、さらにその目的と、メニューで DefaultDataDescriptor クラスを使用してデータプロバイダを解析する場合に、そのデータプロバイダが属性をどのように表示するかを一覧で説明します。

メニューベースのコントロールは、これ以外のオブジェクトフィールドや XML 属性をすべて無視するため、これらをアプリケーション特有のデータとして使用できます。

例：配列をメニューのデータプロバイダとして使用する

次の例では、配列をデータプロバイダとして使用するメニューと、そのメニュー特性をデータプロバイダに定義する方法を示しています。同じメニュー構造を XML に指定するアプリケーションについては、例：単純な Menu コントロールの作成を参照してください。

<?xml version="1.0"?>
<!-- menus/ArrayDataProvider.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute">

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu;

            // Method to create an Array-based menu. 
            private function createAndShow():void {
                // The third parameter sets the showRoot property to false.
                // You must set this property in the createMenu method, 
                // not later.
                var myMenu:Menu = Menu.createMenu(null, menuData, true);
                myMenu.show(10, 10);
            }

            // The Array data provider
            [Bindable] 
            public var menuData:Array = [
                {label: "MenuItem A", children: [
                    {label: "SubMenuItem A-1", enabled: false},
                    {label: "SubMenuItem A-2", type: "normal"} 
                    ]},
                {label: "MenuItem B", type: "check", toggled: true},
                {label: "MenuItem C", type: "check", toggled: false},
                {type: "separator"},
                {label: "MenuItem D", children: [
                    {label: "SubMenuItem D-1", type: "radio", 
                        groupName: "g1"},
                    {label: "SubMenuItem D-2", type: "radio", 
                        groupName: "g1", toggled: true}, 
                    {label: "SubMenuItem D-3", type: "radio", 
                        groupName: "g1"} 
                    ]} 
                ];
        ]]>
    </mx:Script>

    <!-- Button control to create and open the menu. -->
    <mx:Button x="300" y="10" 
        label="Open Menu" 
        click="createAndShow();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

次の図は、上記のコードによって作成されたコントロールです。MenuItem D が開き、チェックアイテム B とラジオアイテム D-2 が選択されています。

例：XML メニューデータプロバイダおよびアイコン

次の例では、XML をデータプロバイダとして使用するメニューコントロールを表示し、コントロール内のアイテムのカスタムアイコンを指定します。

<?xml version="1.0"?>
<!-- SimpleMenuControlIcon.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

    <mx:Script>
        <![CDATA[
            // Import the Menu control.
            import mx.controls.Menu;
    
            [Bindable]
            [Embed(source="assets/topIcon.jpg")]
            public var myTopIcon:Class;
    
            [Bindable]
            [Embed(source="assets/radioIcon.jpg")]
            public var myRadioIcon:Class;
    
            [Bindable]
            [Embed(source="assets/checkIcon.gif")]
            public var myCheckIcon:Class;

            // Create and display the Menu control.
            private function createAndShow():void {
                var myMenu:Menu = Menu.createMenu(null, myMenuData, false);
                myMenu.labelField="@label";

                // Specify the check icon.
                myMenu.setStyle('checkIcon', myCheckIcon);

                // Specify the radio button icon.
                myMenu.setStyle('radioIcon', myRadioIcon);

                // Specify the icon for the topmenu items.
                myMenu.iconField="@icon";
                myMenu.show(10, 10);
            }
        ]]>
    </mx:Script>

    <!-- Define the menu data. -->
    <mx:XML format="e4x" id="myMenuData">
        <root>
            <menuitem label="MenuItem A" icon="myTopIcon">
                <menuitem label="SubMenuItem A-1" enabled="false"/>
                <menuitem label="SubMenuItem A-2"/>
            </menuitem>
            <menuitem label="MenuItem B" type="check" toggled="true"/>
            <menuitem label="MenuItem C" type="check" toggled="false" 
                icon="myTopIcon"/>
            <menuitem type="separator"/>     
            <menuitem label="MenuItem D" icon="myTopIcon">
                <menuitem label="SubMenuItem D-1" type="radio" 
                    groupName="one"/>
                <menuitem label="SubMenuItem D-2" type="radio" 
                    groupName="one" toggled="true"/>
                <menuitem label="SubMenuItem D-3" type="radio" 
                    groupName="one"/>
            </menuitem>
        </root>
    </mx:XML>

    <mx:VBox>
        <!-- Define a Button control to open the menu -->
        <mx:Button id="myButton" 
            label="Open Menu" 
            click="createAndShow();"/>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。