PopUpButton コントロール -- Flex 2.01

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 コントロールのプロパティ、スタイル、イベント、およびメソッドのすべてを継承します。

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

PopUpButton コントロールには、次のデフォルトプロパティがあります。

プロパティ	デフォルト値
デフォルトサイズ	メインボタンのラベルとアイコン、およびポップアップボタンのアイコンを表示するのに十分なサイズです。
最小サイズ	0
最大サイズ	未定義

サブトピック

PopUpButton コントロールの作成

次の例のように、MXML で PopUpButton コントロールを定義するには、<mx: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>

ユーザーの操作

PopUpButton コントロールを移動するには、次のようにマウスを使用します。

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

キー	用途
スペースバー	メインボタンをクリックしたときと同様に動作します。
Ctrl + ↓ (下矢印)	ポップアップコントロールを開き、`open` イベントを起動します。ポップアップコントロールのキーボード処理が有効になります。
Ctrl + ↑ (上矢印)	ポップアップコントロールを閉じ、`close` イベントを起動します。