PopUpButton コントロールは、次の 2 つの水平方向のボタンから構成されるコントロールです。つまり、メインボタン、およびアイコンのみのポップアップボタンと呼ばれる小さなボタンです。メインボタンは Button コントロールです。

ポップアップボタンは、クリックすると、ポップアップコントロールと呼ばれる 2 番目のコントロールが開きます。PopUpButton コントロール外の場所またはポップアップコントロール内をクリックすると、ポップアップコントロールが閉じます。

PopUpButton コントロールは、Button コントロールにポップアップコントロールのインターフェイスを追加します。PopUpButton コントロールの一般的な使用法の 1 つとして、ポップアップボタンで、メインボタンの機能やラベルを変更する List コントロールや Menu コントロールを開くことが挙げられます。次の例は、Menu コントロールを使用しています。

この例では、メールを Inbox フォルダ、Sent Items フォルダ、または Trash フォルダに配置するかどうかを選択できます。この選択は、メインボタンの右側にある小さなポップアップボタンをクリックして、表示されるポップアップメニューからボタンをクリックして行います。メインボタンのテキストは、実行するアクションを示します。ユーザーがメニューの別のアイテムを選択するたびにこのテキストは変わります。

PopUpButton コントロールは、メニューの表示だけでなく、任意の Flex コントロールをポップアップコントロールとして表示できます。例えば、ユーザーがドキュメントを確認用に送信できるワークフローアプリケーションでは、部門構成を視覚的に表したものとして Tree コントロールを使用できます。PopUpButton コントロールのポップアップボタンでは、メッセージの受信者を選択できるツリーが表示されます。

ポップアップするコントロールは、メインボタンの外観やアクションに影響を与えないようにする必要があります。代わりに、このコントロールに独自のアクションを設定できます。例えば、メインボタンが最後のアクションのみを取り消し、ポップアップコントロールが複数のアクションを選択によって取り消すことができる List コントロールとなっている場合、取り消し用の PopUpButton コントロールを作成できます。

この PopUpButton コントロールは、Button コントロールのサブクラスであり、toggle プロパティや選択したボタンのスタイルを除き、Button コントロールのプロパティ、スタイル、イベントおよびメソッドのすべてを継承します。

コントロールには、次のような特性があります。

• popUp プロパティは、ポップアップコントロール（List や Menu など）を指定します。
• open() メソッドと close() メソッドを使用すると、ポップアップボタンを使用せずに、ポップアップコントロールをプログラムで開いたり閉じたりできます。
• ポップアップコントロールが開いたり閉じたりすると、open イベントと close イベントが送出されます。
• PopUpButton コントロールの外観を定義するには、popUpSkin と arrowButtonWidth のスタイルプロパティを使用します。

詳細な説明については、『Adobe Flex リファレンスガイド』の「PopUpButton」を参照してください。

PopUpButton コントロールの作成

次の例に示すように <mx:PopUpButton> タグを使用して、MXML で PopUpButton コントロールを定義します。MXML で他の場所（別のタグ内または ActionScript ブロック内）にあるコンポーネントを参照する場合は、id 値を指定します。

次の例では、PopUpButton コントロールを使用して Menu コントロールを開いています。Menu コントロールやポップアップコントロールは、一度開くと通常どおり機能します。ユーザーがメニューアイテムを選択する時点を認識するには、次の例に示すように、Menu コントロールの change イベントにイベントリスナーを定義します。

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

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

            private var myMenu:Menu;

            // Initialize the Menu control, 
            // and specify it as the pop up object
            // of the PopUpButton control. 
            private function initMenu():void {
                myMenu = new Menu();
                var dp:Object = [
                  {label: "New Folder"}, 
                  {label: "Sent Items"}, 
                  {label: "Inbox"}
                ];        
                myMenu.dataProvider = dp;
                myMenu.addEventListener("itemClick", changeHandler);
                popB.popUp = myMenu;
            }

            // Define the event listener for the Menu control's change event. 
            private function changeHandler(event:MenuEvent):void {
                var label:String = event.label;        
                popTypeB.text=String("Moved to " + label);
                popB.label = "Put in: " + label;
                popB.close();
            }
        ]]>
    </mx:Script>

    <mx:VBox>
        <mx:Label text="Main button mimics the last selected menuItem."/>
        <mx:PopUpButton id="popB" 
            label="Edit"  
            width="135"
            creationComplete="initMenu();"/>
        
        <mx:Spacer height="50"/>
        <mx:TextInput id="popTypeB"/>
    </mx:VBox>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ユーザーの操作

PopUpButton コントロールを移動するには、次の方法を使用します。

• マウスを PopUpButton コントロールの任意の場所の上に移動すると、ボタンの境界とメインボタンやポップアップボタンがハイライト表示されます。
• ボタンをクリックすると、click イベントが送出されます。
• ポップアップボタンをクリックすると、ポップアップコントロールがポップアップ表示され、open イベントが送出されます。
• PopUpButton コントロール外の場所またはポップアップコントロール内をクリックすると、ポップアップコントロールが閉じ、close イベントが送出されます。

次のキーストロークを使用すると、ユーザーは PopUpButton コントロールを移動できます。