ボタン コントロール

概要

ボタン コントロールの共通のクラスは次のとおりです。：
RadioFrame コントロールは RadioButton の構成をまとめます。
これらのボタン コントロールのタイプについては、いくつかの共通する特別なボタンのステータスプロパティの説明の後で説明します。

ボタンのステータス

ボタンのグラフィカル インターフェイスのデザインでは、さまざまな状況が反映されるように固有の外観を適用するのが一般的です。
この情報のほとんどは、rollover?、pointer-pressed?、grabbed?、focus? などのブール値フィールドを含む補助データ構造に格納されます。
結果として CommandButton、CheckButton および RadioButton オブジェクトは、常に以下のステータスのいずれかであると見なされます。
次の例では、ボタンのいくつかのステータスがどのように表示されるかを示しています。ボタンにキーボードのフォーカスがある場合 (ボタンが現在押されているか、またはタブ キーを介して選択されている場合)、外観がどのように変更するかを確認してください。ただし、無効のボタンはキーボードのフォーカスを得られません。

例: ボタンステータスの表示
{Dialog
    {spaced-hbox
        valign="bottom",
        {CommandButton
            height = 0.3in,
            label="Press me!"
        },
        {CommandButton
            height = 0.3in,
            label="Don't press me!",
            enabled? = false
        },
        {CheckButton
            height = 0.3in,
            label = "Checked",
            value = true
        },
        {CheckButton
            height = 0.3in,
            label = "Disabled",
            enabled? = false
        },
        {CheckButton
            height = 0.3in,
            label = "Checked and disabled",
            value = true,
            enabled? = false
        }
    }
}
ボタンのステータスによってその形を変更するボタンにリアクティブ ラベルをアタッチすることもできます。ボタンの label プロパティにテキストまたはグラフィカル オブジェクトを割り当てる代わりに reactive-label プロパティを使用して、ステータスが変わる場合に異なるラベルを割り当てます。次の例は、いくつかのリアクティブ ラベルを示しています。

例: リアクティブ ラベル
{CommandButton
    reactive-label=
    {ReactiveLabel
        label = {text default},
        label-disabled = {tiny (disabled)},
        label-pressed = {big pressed},
        label-rollover = {italic press me}
    }
}
{radio-buttons
    {RadioButton
        radio-value="first",
        label = "a plain label"
    },
    {RadioButton radio-value="second",
        reactive-label=
        {ReactiveLabel
            label = "a reactive label",
            label-checked = {text color="red", SELECTED},
            label-disabled = "(disabled)",
            label-disabled-checked = "(DISABLED)",
            label-pressed = "pressed!",
            label-pressed-checked = "PRESSED!",
            label-rollover = "rolled-over",
            label-rollover-checked = "ROLLED-OVER"
        }
    }
}

コマンド ボタン

CommandButton 上でユーザがマウスをクリックしてリリースした場合、ボタンは Action イベントを起動します。Action イベントのダイナミックイベントハンドラーをアタッチすることができます。他の Control とは異なり CommandButton はそれに関連付けられた現在の (またはコミットされた) 値はありません。
次の例では、CommandButton がただ 1 つのコンポーネントとして Dialog コンテナに存在する場合を示しています。ダイナミック イベント ハンドラが CommandButton にアタッチされています。CommandButton で Action イベントが発生するときに実行されます。イベント ハンドラは次を実行します。
例の中では CommandButton.style は rollover に設定されています。そのためボタンのビジュアルはポインタがボタンの上に移動したときに現れます。

例: ロールオーバースタイルのコマンド ボタン
{value
    let df:Dialog =
    {Dialog width = 5cm,
        height = 3cm,
        border-width = 2pt,
        border-color = "black",
        valign = "center",
        {CommandButton label = "Button",
            style = "rollover",
            width = 3cm,
            border-width = 2pt,
            || Attach a dynamic event handler to handle
            || Action events
            {on Action at b:CommandButton do
                set b.label = {bold color = "cadetblue", Pressed}
                set df.use-look-and-feel?=false
                set df.background = "cadetblue"}
        }
    }
    df
}

チェック ボタン

ユーザーが CheckButton オブジェクトに入力すると、2 とおりの結果のいずれかが生成されます。したがって、その value プロパティは true または false のいずれかです。
ユーザーが CheckButton を選択または選択解除すると、value プロパティが変更して CheckButton 自体で ValueChanged と ValueFinished の両方のイベントが発生します。
次の例では、2 つのダイナミック イベント ハンドラを CheckButton にアタッチして ValueChanged および ValueFinished イベントを処理します。ユーザーが CheckButton を選択または選択解除するたびに、value プロパティに格納されている現在値がラベルに表示されます。モーダル ダイアログが閉じた後で別のダイアログがポップアップ表示され、ValueFinished イベントが発生したことも示します。

例: チェックボタンによる ValueFinished イベントの発生
{CommandButton
    label = "click here",
    {on Action do
        || shortcut procedure for creating a modal
        || popup dialog
        {popup-message
            {VBox
                {CheckButton
                    label = "My CheckButton",
                    || Attach dynamic event handler
                    {on ValueChanged at cb:CheckButton do
                        set cb.label = cb.value
                    },
                    {on ValueFinished do
                        {popup-message "ValueFinished was fired!"}
                    }
                }
            }
        }
    }
}

ラジオ ボタン

複数のアイテムから 1 つだけ選択するようにユーザーに要求する場合、RadioButton と RadioFrame クラスを使用できます。ラジオ ボタンは 1 つの RadioFrame にグループ化されます。ラジオ ボタンは、それぞれ選択可能な項目を表わします。各グループで選択できるラジオ ボタンは最高 1 つです。
CheckButton と同様に、RadioButton の value プロパティは、現在選択されているかどうかによって true または false になります。興味深いことに、各 RadioButton には radio-value プロパティがあり、選択されたラジオ ボタンのこの値は、その親の RadioFrame の value プロパティ値になります。Dialog で役に立つのはこの RadioFrame.value プロパティです。
RadioFrame を初期化する際に、最初に表示されるときにどの RadioButton が選択されているか (選択されている場合) を選ぶことができます。これには、RadioFrame の value プロパティを該当するボタンの radio-value に設定します。
RadioFrame には has-value? プロパティもあり、この既定値は false で、RadioFrame が値を持っているかどうか (および、可能な場合は選択されているラジオ ボタン) をアプリケーションに示します。値の選択をユーザーに求める場合にコントロールの値を初期化しないで、既定でラジオ ボタンが選択されていないステータスにすることができます。ユーザーが値を選択すると has-value? が自動的に true になります。その他の場合はコントロールに初期値が与えられ、has-value? は最初から true になります。
1 つのボタンが選択されると、同じ RadioFrame に属する他のボタンが選択されるまで、普通ではそれが選択されたステータスになります。プログラムで RadioFrame の unset-value メソッドを呼び出してボタンを選択解除することもできます。このメソッドは、すべてのラジオ ボタンを選択解除して has-value? を false にリセットします。
次の例では、3 つの RadioButton を含む RadioFrame を示しています。これらのラジオ ボタンを選択する前と後で Show Current Values をクリックして、オブジェクトの value プロパティと個々のボタンの radio-value プロパティの現在値を確認します。

例: ラジオ ボタンの値
{value
    ||Create 3 RadioButtons, 1 RadioFrame, and 1 Button
    let rb1:RadioButton = {RadioButton label = "one", radio-value = 1}
    let rb2:RadioButton = {RadioButton label = "two", radio-value = 2}
    let rb3:RadioButton = {RadioButton label = "three", radio-value = 3}
    ||RadioFrame holds the RadioButtons
    let rf:RadioFrame =
        {RadioFrame
            {spaced-vbox rb1, rb2, rb3}
        }

    ||Button pops up a dialog displaying the value properties
    let b:CommandButton =
        {CommandButton
            label = "Show Current Values",
            {on Action do
                {popup-message
                    {spaced-vbox
                        {format
                            "1st Radio Button's Value: %s", rb1.value},
                        {format
                            "1st Radio Button's Radio Value: %s", rb1.radio-value},
                        {format
                            "2nd Radio Button's Value: %s", rb2.value},
                        {format
                            "2nd Radio Button's Radio Value: %s", rb2.radio-value},
                        {format
                            "3rd Radio Button's Value: %s", rb3.value},
                        {format
                            "3rd Radio Button's Radio Value: %s", rb3.radio-value},
                        {format
                            "RadioFrame's Value: %s", rf.value},
                        {format
                            "RadioFrame's Has-value? flag: %s", rf.has-value?}
                    }
                }
            }
        } ||CommandButton
    ||Use VBox to hold text, RadioFrame, and Button
    {spaced-vbox
        "Which number do you prefer?",
        rf,
        b
    }
}

ラジオ オプション

RadioButton.radio-value プロパティは、RadioButton を初期化するときに指定する最も重要なオプションです。これは、ボタンが選択されたときにその値を RadioFrame に与えるからです。既定値は null です。
RadioButton.label オプションは RadioButton の横に表示されるラベルを指定します。既定値はボタンのradio-value プロパティからコピーされます。
RadioButton.value プロパティは、現在ボタンが選択されている場合は true の値、それ以外の場合は false になります。コードから直接に設定しません。コントロールの操作あるいは RadioFrame.value を直接リセットすることによって新しいボタンが選択されると値が自動的に変わります。
RadioButton.radio-frame プロパティは、 RadioFrame および RadioButton の両方に適用される非ローカル オプションです。ラジオ ボタンで設定する場合はボタンが属する RadioFrame を指定します。通常 RadioFrame では、これを最初に作成するときに自動的に設定されます。ラジオ フレームを初期化すると radio-frame プロパティをフレーム自体に設定します。これにより、フレームに含まれるラジオ ボタンが同じradio-frame 値にアクセスできるようになります。
次の表では、これらの主要な RadioButton と RadioFrame のオプションの要約を示しています。
オプション既定
説明
RadioFrame.has-value?falseラジオ ボタン コンテナが値を持つかどうか、および有効なラジオ ボタンがあるかどうか (可能な場合) を指定します。このプロパティはコンテナの value プロパティに関連して動作します。
  • true ：ラジオ ボタンの 1 つが常に有効である必要があります。
    有効なラジオ ボタンは、コンテナのvalue プロパティによって指定されます。インストール中の value プロパティが null の場合、Curl® 実行環境 はラジオ ボタンの 1 つを任意に選択します。
  • false ：いずれのラジオ ボタンも有効にする必要はありません。
    呼び出しの際に value が有効なラジオ ボタンの値に設定されている場合、has-value? は無視されそのラジオ ボタンが有効になります。
RadioButton.labelnullラジオ ボタンに伴う表示。通常はテキストですが、これ以外も可能です。
RadioButton.radio-framenullラジオ ボタンを含む RadioFrame。
RadioButton.radio-valuenullボタンが選択されているときの RadioFrame の値。
RadioButton.valuefalsetrue または false。ボタンが現在選択されているかどうかに依存します。
RadioFrame.valuenull現在選択されている RadioButton の radio-value (選択されている場合)。
RadioFrame.selected-buttonnull現在選択されている RadioButton (選択されている場合)。

ラジオ ボタンのショートカット

Curl 言語には、radio-buttons、つまりラジオ フレーム内で複数のラジオ ボタンを作成して水平または垂直方向に配置するためのショートカット プロシージャがあります。これは RadioFrame オブジェクトを返します。
radio-buttons を使用して次の項目を指定します。
次の例では、前述の例のよりシンプルなバージョンを示します。

例: radio-buttons ショートカットの使用
{Dialog
    {radio-buttons
        || Comment out the following line to have no initial value set
        value = "three",
        "one",
        "two",
        "three"
    }
}
Copyright © 1998-2019 SCSK Corporation. All rights reserved.
Curl, the Curl logo, Surge, and the Surge logo are trademarks of SCSK Corporation. that are registered in the United States. Surge Lab, the Surge Lab logo, and the Surge Lab Visual Layout Editor (VLE) logo are trademarks of SCSK Corporation.