Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コンテナについて > コンテナの使用 > デフォルトボタンの定義

デフォルトボタンの定義

コンテナに対してデフォルトの Button コントロールを定義するには、対象のコンテナの defaultButton プロパティを使用します。いずれかのコントロールにフォーカスがあるときに Enter キーを押すと、あたかもそのボタンが明示的にクリックされたかのように、デフォルトの Button コントロールがアクティブになります。

たとえば、ユーザー名とパスワード入力用の TextInput コントロールと送信用の Button コントロールを備えたログインフォームを作成するとします。通常は、ユーザー名を入力し、Tab キーでパスワードフィールドに移動してパスワードを入力した後、Enter キーを押すと、ログイン情報が送信されます。Button コントロールを明示的にクリックする必要はありません。このようなユーザーインターフェイスを定義するには、次のように、Form コントロールの defaultButton プロパティを送信用 Button コントロールの id に設定します。

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

    <mx:Script>
        <![CDATA[
            public function submitLogin():void {
                text1.text="You just tried to log in";
            }
        ]]>
    </mx:Script>

    <mx:Panel title="Default Button Example">

        <mx:Form defaultButton="{mySubmitBtn}">
            <mx:FormItem label="Username">
                <mx:TextInput id="username" 
                    width="100"/>
            </mx:FormItem>
            <mx:FormItem label="Password">
                <mx:TextInput id="password" 
                    width="100" 
                    displayAsPassword="true"/>
            </mx:FormItem>
            <mx:FormItem>
                <mx:Button id="mySubmitBtn" 
                    label="Login" 
                    click="submitLogin();"/>
            </mx:FormItem>
        </mx:Form>
        <mx:Text id="text1" width="150"/>
    </mx:Panel>
</mx:Application>

メモ

ComboBox コントロールでは、Enter キーは特別な目的があります。ComboBox コントロールのドロップダウンリストが展開されているときに Enter キーを押すと、その ComboBox コントロールで現在ハイライト表示されているアイテムが選択されます。このとき、デフォルトボタンはアクティブになりません。また、カーソルが TextArea コントロールにあるときに Enter キーを押すと、改行が追加されます。このときもデフォルトボタンはアクティブになりません。

Flex 2.01