Radio button script component


ラジオ ボタンにより、ユーザーは選択肢の一式からオプションを 1 つ選択することができます。

  1. Click the Radio Button icon on the component toolbar. 

  2. [テキスト] プロパティを変えて、「ラベル」を記述的なものに代えます。オプションで変数の値を埋め込むには、立方体のアイコンをクリックします。

  3. そのページにさらにラジオ ボタンを追加するには、ステップ 1 と 2 を繰り返します。

    more-radio-buttons

  4. ラジオ ボタンが選択されている状態で、[詳細] をクリックします。の下で、文字列変数を選択します。実行時にユーザーがこのボタンをクリックすると、変数は固有の値を格納します。必要に応じて、[新しい変数を作成する] をクリックして新規変数を定義します。

    IMPORTANT— Assign the same Value variable to all radio buttons in a set.

  5. [選択した値のテキスト] ボックスに固有の文字列を入力します。このテキストは、エージェントの選択を示します。例えば、MyChoice には、[30 歳未満] のラジオ ボタンがクリックされると、30 歳より若いが格納されます。逆に、[30 歳以上] がクリックされていると、値を30 歳以上に設定できます。

    set_radio_button_value2

    IMPORTANT— Assign a different Selected Value Text to each radio button in a set.

    ヒント:選択した値のテキストを表示するには、読み取り専用のテキスト コンポーネントをページに追加します。次に、立方体アイコンをクリックして、に割り当てた変数を選択します。

    図は、ラジオ ボタンがクリックされたときに割り当てられた値を表示する方法を示しています

    [プレビュー] をクリックします。各ラジオ ボタンをクリックすると変数の値が変わります。

    図は、フォームがプレビューされたときの変数値を示しています

    このテクニックに関する詳細は、「波括弧を使って変数値を表示」を参照してください。

  6. オプションで、エージェントがラジオ ボタンをクリックしたときに実行するアクションを割り当てます。[詳細] タブで [アクションを変更] の下にある [アクションが選択されていません] をクリックします。 

    Note: Change actions assigned to radio buttons run every time that the value of the variable assigned to the radio button changes. For example, if four radio buttons are part of a set that is associated with the same variable, then all four change actions attempt to run every time an agent selects any of the four buttons in the set. Therefore, we recommend using custom actions with radio buttons instead of assigning a different change action to each radio button.  
  7. オプションで、その他のプロパティを設定します。

    一般



    フォントの設定によりテキストの外観を変更します。フォント フェイスとサイズを変更します。太字、斜体、下線を組み合わせて適用します。囲まれているコンテナー内のテキストを両端揃えにします。

    アイテム 説明

    フォント フェイス

    選択できるフォントを含むリストを表示します。次に、コントロールのすべてのテキストを選択したタイプフェイスに設定します。

    font-size

    フォント サイズを選択したポイント数に設定します。

    font-bold

    コンポーネントのテキストに太字を適用します。

    font-italic

    コンポーネントのテキストに斜体を適用します。

    font-underline

    コンポーネントのテキストに下線を付けます。
    justification-left 親コンテナーを基準にして、コンポーネントを左揃えにします。
    justification-center 親コンテナーを基準にして、コンポーネントを中央揃えにします。
    justification-right 親コンテナーを基準にして、コンポーネントを右揃えにします。



    テキスト カラーを以下のいずれかに設定します。

    settings-bg-color-popup2
    • デフォルト — デフォルトのカラーを割り当てます。

    • カラー — 一般色のパレットからカラーを選択するか、RGB 値を入力して独自のカラーを選択するか、カラー ピッカーをスペクトルの新しい位置に移動して独自のカラーを選択できます。[選択] をクリックし、現在の選択内容を割り当てます。

      settings-text-color-popup-colors

    • 変数 — 文字列変数に含むカラーを割り当てます。例えば、濃青色を割り当てるには、以下の手順を実行します。

      1. [変数] タブをクリックします。

      2. [+] をクリックして変数を追加します。

        図は、新しい変数を追加するボタンを示しています

      3. Select String as the type of value the new variable stores.

      4. [名前] ボックスに記述的な名前を入力します。

      5. Set Default Value to 0000FF or #0000FF—which is the hexadecimal code for dark blue.

        select-color-in-variable

      6. 適用]をクリックします。
      7. このカラー プロパティに変数を割り当てます。

        mycolor-variable




    Several components have a Text property that you can change, usually by double-clicking the component in design mode:

    • ボタン — ダブルクリックすると、「送信」という名前を別の名前に変更できます。

    • ラジオ ボタン または チェックボックス — ダブルクリックすると、「ラベル」をより記述的な名前に変更できます。

    • Read-only text—to change the text displayed in a read-only text component, click the component, then type text in the box.



    値は選択した変数にコンポーネントをバインドします。例えば、テキスト入力コンポーネントを変数にバインドすると、入力ボックスには常にその変数の値が表示され、指定したプレースホルダー テキストは無視されます。変数はユーザーが入力したテキストで自動的に更新されます。ただし、検証処理の対象となります。

    例えばラジオ ボタンなどの他のコントロールでは、[値] とともに [選択した値のテキスト] 設定を使用します。実行時にラジオ ボタンが選択されていると、その [選択した値のテキスト] は変数の新しい値になります。これにより、各ラジオ ボタンは同じ変数に別の値を割り当てることができます。

    カレンダー コントロールが変数にバインドされていると、その値はコントロールにより選択された日付に設定されます。変数は視覚コントロールの値をプリセットしたり、コントロールにより設定できるため、バインドは頻繁に使用される強力な方法です。




    [選択した値] プロパティで設定されたテキストは、ラジオボタンが選択されると、バインドされるの文字列変数に割り当てられます。バインド変数は、値の設定を使って設定されます。

    例えば、あるフォームにラジオボタンが 2 つあり、両方共 myChoice という名前の文字列変数にバインドされているとします。最初のラジオボタンの [選択した値のテキスト] ボックスが "Dogs"で、2 番目が "Cats" である場合、ランタイム時の myMyChoice の値は:

    selected-value-example

    • ラジオ ボタンが選択されるまでの MyChoice のデフォルト値。

    • 最初のラジオ ボタンが選択されると、"Dogs"。

    • 2 番目のラジオ ボタンが選択されると、"Cats"。

    自分の作業をテスト

    テキスト フィールドに {{MyChoice}} を埋め込む場合は、プレビュー モードでこれがどのように機能するか見ることができます。ページに変数を表示するテクニックに慣れていない場合は、「波括弧を使って変数値を表示」を参照してください。

    selected-value-before-preview

    プレビュー モードで、 ラジオ ボタンが選択されたときの MyChoice の値は "Dogs" または "Cats" になります。

    selected-value-property-previewed



    レイアウト



    幅は、固定サイズに設定したり、表示内容の必要性に応じて拡大することができます。またはサイズ調整に影響を与える加重を使って、他のコンポーネントに比べてできる限り多くのスペースを使用することができます。

    設定 説明
    settings-sizing-auto-size 自動サイズ変更により、コンポーネントの内容に従って、そのサイズを縮小または拡大できます。例えば、ラベルの幅はテキストの量に応じて拡大することができます。
    settings-sizing-stretch

    ストレッチでは、サイズ調整に影響を与える加重を使い、他のコンポーネントと比べてできる限り多くのスペースを 1 つのコンポーネントに使用できます。

    2 つのコンポーネントがストレッチに設定されていると、デフォルトでどちらのコンポーネントにも残りのスペースの 50% が割り当てられます。この比率は加重値を変更して調整できます。

    For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.

    settings-sizing-pixels ピクセルで固定サイズを設定します。ボックスに整数を入力するか、上向き矢印か下向き矢印を使ってサイズを増加または減少します。コンポーネントにフォーカスがあると、これらの矢印が表示されます。



    高さは、固定サイズに設定したり、表示内容の必要性に応じて高くすることができます。またはサイズ調整に影響を与える加重を使って、他のコンポーネントに比べてできる限り多くのスペースを使用することができます。

    設定 説明
    settings-sizing-auto-size 自動サイズ変更により、コンポーネントの内容に従って、そのサイズを縮小または拡大できます。
    settings-sizing-pixels ピクセルで固定サイズを設定します。ボックスに整数を入力するか、上向き矢印か下向き矢印を使ってサイズを増加または減少します。コンポーネントにフォーカスがあると、これらの矢印が表示されます。
    settings-sizing-stretch

    ストレッチでは、サイズ調整に影響を与える加重を使い、他のコンポーネントと比べてできる限り多くのスペースを 1 つのコンポーネントに使用できます。

    2 つのコンポーネントがストレッチに設定されていると、デフォルトでどちらのコンポーネントにも残りのスペースの 50% が割り当てられます。この比率は加重値を変更して調整できます。

    For example, if you set one component to a weight of 200, and the other to a weight of 100, then the first component occupies two thirds of the remaining space, while the other only takes one third. The first component appears twice the size of the other component, since its weight was two times the second component's weight.




    コンポーネントは、親コンテナーを基準にして、左揃え、右揃え、中央揃えにできます。

    ヒント: 親コンテナーの高さ設定が [自動サイズ変更] に設定されている場合、コンポーネントは垂直方向を基準にして中央揃えにすることはできません。これを修正するには、親コンテナーの高さを [ストレッチ] にするか、ピクセルで固定の高さに設定します。 
    設定
    align-left2 align-left-example2
    align-center2 align-center-example2
    align-right2 align-right-example2
    align-start align-start-example
    align-vertical-center align-vertical-center-example
    align-vertical-end align-vertical-end-example



    境界線の周りの上下左右のスペースに設定されている余白。

    画像は、余白、境界線、およびスペース設定の関係を示しています

    1. To optionally update all margin values at once, press the Set All button for Margin in the properties panel.

      すべて設定ボタンの画像

    2. 余白の値フィールドをクリックします。そのフィールドにスピン コントロールが表示されます。

    3. Use the spin control to increase or decrease the margin. If Set All was selected, the change is applied to all margins.

      settings-margin-spinner

      コンポーネントは新しい余白設定に応じて即座に再配置されます。




    ブール型 (True または False) 変数の値に基づいて、コンポーネントを表示または非表示にします。

    1. [レイアウト] プロパティ グループをクリックします。[表示可能] の下にある [変数を選択] をクリックします。
    2. Select a variable, or optionally create a new Yes/No variable and then assign that new variable to the Visible property.
    3. At runtime, the component is visible when the value of the variable is True. Conversely it is hidden when the variable's value is False.


    詳細



    値は選択した変数にコンポーネントをバインドします。例えば、テキスト入力コンポーネントを変数にバインドすると、入力ボックスには常にその変数の値が表示され、指定したプレースホルダー テキストは無視されます。変数はユーザーが入力したテキストで自動的に更新されます。ただし、検証処理の対象となります。

    例えばラジオ ボタンなどの他のコントロールでは、[値] とともに [選択した値のテキスト] 設定を使用します。実行時にラジオ ボタンが選択されていると、その [選択した値のテキスト] は変数の新しい値になります。これにより、各ラジオ ボタンは同じ変数に別の値を割り当てることができます。

    カレンダー コントロールが変数にバインドされていると、その値はコントロールにより選択された日付に設定されます。変数は視覚コントロールの値をプリセットしたり、コントロールにより設定できるため、バインドは頻繁に使用される強力な方法です。




    [選択した値] プロパティで設定されたテキストは、ラジオボタンが選択されると、バインドされるの文字列変数に割り当てられます。バインド変数は、値の設定を使って設定されます。

    例えば、あるフォームにラジオボタンが 2 つあり、両方共 myChoice という名前の文字列変数にバインドされているとします。最初のラジオボタンの [選択した値のテキスト] ボックスが "Dogs"で、2 番目が "Cats" である場合、ランタイム時の myMyChoice の値は:

    selected-value-example

    • ラジオ ボタンが選択されるまでの MyChoice のデフォルト値。

    • 最初のラジオ ボタンが選択されると、"Dogs"。

    • 2 番目のラジオ ボタンが選択されると、"Cats"。

    自分の作業をテスト

    テキスト フィールドに {{MyChoice}} を埋め込む場合は、プレビュー モードでこれがどのように機能するか見ることができます。ページに変数を表示するテクニックに慣れていない場合は、「波括弧を使って変数値を表示」を参照してください。

    selected-value-before-preview

    プレビュー モードで、 ラジオ ボタンが選択されたときの MyChoice の値は "Dogs" または "Cats" になります。

    selected-value-property-previewed




    コンポーネントは既定値ではすべて有効です。[無効] プロパティは True/False 変数をコンポーネントにバインドし、変数の実行値に基づいて、コンポーネントを無効または有効にします。

    1. True/False 変数を作成するには、[変数] タブをクリックします。

    2. [+] をクリックして変数を追加します。

      図は、新しい変数を追加するボタンを示しています

    3. データ タイプとして [True/False] を選択します。

      図は、変数のデータ タイプを示しています

    4. [名前] ボックスに記述的な名前を入力します。

      currently-enabled-variable

    5. [デフォルト値] を [True] または [False] に設定します。

      • 変数が True の場合、コンポーネントは無効になります。

      • 変数が False の場合、コンポーネントは有効になります。

    6. [適用] をクリックし、変数を保存します。
    7. [無効] プロパティに変数を割り当てます。[無効] の下にある [変数を選択] をクリックします。

      disabled-property-setting

    8. True/False 変数を選択します。

      currently-enabled-variable-selected

    9. 設定をテストするには、[プレビュー] をクリックします。



    [アクションを変更] プロパティにより、このコンポーネントの状態や値が変更されると実行されるアクションを設定できます。

    change-action-button

    You can select a Scripter action, an Outbound Action, or a custom action. Outbound actions are not available unless the Outbound property is enabled. 



    表示



    フォントの設定によりテキストの外観を変更します。フォント フェイスとサイズを変更します。太字、斜体、下線を組み合わせて適用します。囲まれているコンテナー内のテキストを両端揃えにします。

    アイテム 説明

    フォント フェイス

    選択できるフォントを含むリストを表示します。次に、コントロールのすべてのテキストを選択したタイプフェイスに設定します。

    font-size

    フォント サイズを選択したポイント数に設定します。

    font-bold

    コンポーネントのテキストに太字を適用します。

    font-italic

    コンポーネントのテキストに斜体を適用します。

    font-underline

    コンポーネントのテキストに下線を付けます。
    justification-left 親コンテナーを基準にして、コンポーネントを左揃えにします。
    justification-center 親コンテナーを基準にして、コンポーネントを中央揃えにします。
    justification-right 親コンテナーを基準にして、コンポーネントを右揃えにします。



    テキスト カラーを以下のいずれかに設定します。

    settings-bg-color-popup2
    • デフォルト — デフォルトのカラーを割り当てます。

    • カラー — 一般色のパレットからカラーを選択するか、RGB 値を入力して独自のカラーを選択するか、カラー ピッカーをスペクトルの新しい位置に移動して独自のカラーを選択できます。[選択] をクリックし、現在の選択内容を割り当てます。

      settings-text-color-popup-colors

    • 変数 — 文字列変数に含むカラーを割り当てます。例えば、濃青色を割り当てるには、以下の手順を実行します。

      1. [変数] タブをクリックします。

      2. [+] をクリックして変数を追加します。

        図は、新しい変数を追加するボタンを示しています

      3. Select String as the type of value the new variable stores.

      4. [名前] ボックスに記述的な名前を入力します。

      5. Set Default Value to 0000FF or #0000FF—which is the hexadecimal code for dark blue.

        select-color-in-variable

      6. 適用]をクリックします。
      7. このカラー プロパティに変数を割り当てます。

        mycolor-variable