PopUpMenuButton は、小さなボタンで Menu コントロールをポップアップさせる PopUpButton コントロールです。ユーザーがポップアップメニューからアイテムを選択すると、PopUpButton のメインボタンの表示が、選択したメニューアイテムのアイコンとラベルに変わります。Menu コントロールや MenuBar コントロールとは異なり、PopUpMenuButton は単一レベルのメニューのみをサポートします。

詳細については、『Adobe Flex リファレンスガイド』を参照してください。Menu コントロールの詳細については、Menu コントロールのイベントを参照してください。PopUpButton コントロールの詳細については、PopUpButton コントロールを参照してください。

PopUpMenuButton コントロールについて

次の例は、ポップアップボタンをクリックする前とクリックした後の PopUpMenuButton コントロールです。

PopUpMenuButton は以下のように動作します。

• 小さいボタン（デフォルトでは v アイコンで表示されます）をクリックすると、ボタンの下にポップアップメニューが表示されます。
• ポップアップメニューからアイテムを選択すると、PopUpMenuButton のメインボタンのラベルが選択したアイテムのラベルに変わり、PopUpMenuButton コントロールによって MenuEvent.CHANGE イベントが送出されます。
• メインボタンをクリックすると、PopUpMenuButton コントロールによって MenuEvent.CHANGE イベントと MouseEvent.ITEM_CLICK イベントが送出されます。

PopUpMenuButton イベントの処理の詳細については、PopUpMenuButton コントロールのイベントを参照してください。

PopUpMenuButton コントロールを使用すると、ポップアップメニューからアイテムを選択することによって、メインボタンの機能を変更することができます。最後に選択したアイテムが、メインボタンのアイテムになります。

ユーザー操作が多数あり、同一のオプションが頻繁に選択される傾向があるものの、アプリケーションデベロッパーはどのオプションをデフォルトにすべきか推測できない場合に、このビヘイビアは役立ちます。テキストエディタのコントロールバーでは、間隔などのオプションにこうしたコントロールが頻繁に使用されています。間隔などのオプションには、頻繁に使用される設定があるものの、デベロッパーは事前にその値を判別できません。例えば Microsoft Word では、線の間隔や境界線、テキストやハイライトの色などの指定に、こうしたコントロールを使用しています。

PopUpButton コントロールを使用すると、PopUpMenuButton とはビヘイビアの異なるポップアップメニューボタンを作成できます。例えば、ユーザーがメニューアイテムを選択したときに、メインボタンのデフォルトアクションを変更しないボタンを作成することができます。詳細については、PopUpButton コントロールを参照してください。

PopUpMenuButton コントロールの作成

MXML では PopUpMenuButton コントロールを <mx:PopUpMenuButton> タグで定義します。MXML アプリケーションの他の場所（他のタグまたは ActionScript ブロック）にあるコンポーネントを参照する場合は、id の値を指定します。

PopUpMenuButton コントロールのデータは、dataProvider プロパティで指定します。構造や内容などの有効なデータプロバイダについては、メニューの構造とデータの定義を参照してください。

デフォルトでは、最初に選択されたアイテムが、ポップアップメニューの dataProvider の最初のアイテムになります。またメインボタンのデフォルトラベルが、アイテムのラベルになります。デフォルトラベルは labelField プロパティまたは labelFunction プロパティで決まります。メインボタンの最初のラベルに特定のアイテムのラベルと機能を設定するには、次のように、PopUpMenuButton コントロールの creationComplete イベントのリスナを作成して、Menu サブコントロールの selectedIndex プロパティを設定します。

Menu(MyPopUpControl.popUp).selectedIndex=2;

PopUpMenuButton コントロールの popUp プロパティのタイプは Menu ではなく IUIComponent になっているので、このプロパティを Menu にキャストする必要があります。

PopUpMenuButton の label プロパティを使用して、メインボタンのラベルを設定することもできます。詳細については、label プロパティの使用を参照してください。

ポップアップメニューが閉じると、選択内容や関連プロパティは失われます。

例：PopUpMenuButton コントロールの作成

次の例では、E4X 形式の XML データプロバイダを使用して PopUpMenuButton コントロールを作成します。

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

    <mx:Script>
        <![CDATA[
            import mx.controls.Menu
            
            // The initData function sets the initial value of the button 
            // label by setting the Menu subcontrol's selectedIndex property.
            // You must cast the popUp property to a Menu.
            private function initData():void {
                Menu(pb2.popUp).selectedIndex=2;
            }
        ]]>
    </mx:Script>

    <mx:XML format="e4x" id="dp2"> 
        <root>
            <editItem label="Cut"/> 
            <editItem label="Copy"/> 
            <editItem label="Paste"/> 
            <separator type="separator"/>
            <editItem label="Delete"/> 
        </root>
    </mx:XML>

    <mx:PopUpMenuButton id="pb2" 
        dataProvider="{dp2}" 
        labelField="@label" 
        showRoot="false" 
        creationComplete="initData();"/>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では E4X 形式の XML データソースを使用しているので、E4X @ 属性指定子シンタックスでラベルフィールドを指定し、データプロバイダのルートノードを非表示にするようコントロールに指示する必要があります。

label プロパティの使用

PopUpMenuButton コントロールの label プロパティを使用すると、メインボタンのラベルの内容を指定できます。また、labelField プロパティまたは labelFunction プロパティで決められた、ポップアップメニューのラベルを上書きすることもできます。固定部分と可変部分のあるメインボタンのラベルを作成する場合に、label プロパティは役立ちます。例えば、メールの「Send to:」ボタンの宛先部分のテキストのみをポップアップメニューで制御するようにすると、メインボタンのラベルは、メニューからどちらが選択されたかによって決まるため、「Send to: Inbox」または「Send to: Trash」になります。

動的な label プロパティを使用するには、PopUpMenuButton コントロールの change イベントリスナーを使用して、イベントの label プロパティを基にラベルを設定します。次に例を示します。

<?xml version="1.0"?>
<!-- menus/PopUpMenuButtonLabel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="600" width="600">

    <mx:Script>
        <![CDATA[
            import mx.events.MenuEvent;
            
            public function itemClickHandler(event:MenuEvent):void {
                event.currentTarget.label= "Send to: " + event.label;
            }

            [Bindable] 
            public var menuData:Array = [
                {label: "Inbox", data: "inbox"},
                {label: "Calendar", data: "calendar"}, 
                {label: "Sent", data: "sent"},
                {label: "Deleted Items", data: "deleted"},
                {label: "Spam", data: "spam"}
            ];
        ]]>
    </mx:Script>

    <mx:PopUpMenuButton id="p1" 
        showRoot="true" 
        dataProvider="{menuData}" 
        label="Send to: Inbox" 
        itemClick="itemClickHandler(event);"/>    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

PopUpMenuButton のユーザー操作

PopUpMenuButton コントロールのメインボタンとポップアップボタンのユーザー操作は、PopUpButton コントロールの場合と同じです。ポップアップメニューのユーザー操作は Menu コントロールと同じです。PopUpButton のユーザー操作の詳細については、ユーザーの操作を参照してください。Menu コントロールのユーザー操作の詳細については、Menu コントロールのユーザー操作を参照してください。