テキスト コントロール

概要

Curl® 言語では、テキスト コントロールの作成に使用可能な以下のクラスを提供しています。
TextDisplay 以外のコントロールではすべてユーザーがテキストを編集できます。テキスト コントロールは、文字の入力、backspace と delete キーによる文字の削除、ctrl+z と ctrl+y による「元に戻す」と「やり直し」、カーソルによる位置決め、および選択されたテキストのドラッグ アンド ドロップといった基本的な編集作業をサポートします。PasswordField では「切り取り」と「貼り付け」の動作を禁止しています。「パスワード フィールド」を参照してください。

テキスト フィールド

TextField を使用すると、ユーザーはテキストをダイアログまたはアプレットに入力することができます。各 TextField は一度にテキストを 1 行表示します。
ユーザーがテキスト フィールドに入力すると、TextField の value プロパティが変化し、TextField 自身が TextField イベントを起動します。テキスト フィールド内で切り抜き、コピー、または貼り付けを行うと、ValueChanged も起動されます。
TextField.value の現在の値は、テキスト フィールド内の現在のテキストと関連づけられています。TextField の value プロパティをプログラムから設定すると、フィールドに表示されているテキストも変化します。
ユーザーが Enter キーを押すと、ValueFinished イベントが起動した後に TextField 自身が Action イベントが起動します。変更後にフォーカスがテキスト フィールドから移動すると、ValueFinished イベントも起動されます。
次の例では TextField で起動した最後のイベントが表示されます。ボタンを押すと、イベントが起動せずに値が変わります。

例: テキスト フィールドでのデータ入力
{let last-event:Frame = 
    {Frame width = 4in, margin = 2px, background = "silver"}
}
{let field:TextField = 
    {TextField
        {on e:Action at tf:TextField do
            {last-event.add replace?=true, 
                {format "event=%s value=\"%s\"", e, tf.value}
            }
        },
        {on e:DialogEvent at tf:TextField do
            {last-event.add replace?=true, 
                {format "event=%s value=\"%s\"", e, tf.value}
            }
        }
    }
}

{HBox spacing = 6px,
    field, 
    {CommandButton
        label = "Set Value",
        {on Action do
            set field.value = "new value"
        }
    },
    last-event
}
TextField の値は常に String です。String.to-int や String.to-double などのメソッドを使用して、TextField の値を数に変換することができます。次の例では、TextField の値を使って Distance などの数値情報を入力する方法について説明します。

例: TextField を使用して数値を入力
{let
    frame:Frame = {Frame {Fill height = 5mm}},
    fill-width:#Distance ||Global variable for a Distance value
}

{value frame}

{spaced-hbox
    {text The bar is},
    {TextField
        width = 22mm,
        value = "enter a number",
        {on ValueFinished at tf:TextField do
            {if {tf.value.to-double} <= 999999 then

                ||'to-double' メソッドはTextField の値 (tf.value) で呼び出されます。
                ||Distance型に変換するために 1 distance の単位を掛け算します。

                {set fill-width = {tf.value.to-double} * 1mm}
                {frame.add
                    {Fill
                        height = 5mm,
                        width = fill-width,
                        background = "red"
                    },
                    replace? = true
                }
             else
                {popup-message "Please be reasonable!"}
            }
        }
    },
    {text millimeters long.}}

テキスト ディスプレイ

TextDisplay はテキストをダイアログに表示します。TextField と同様に、TextDisplay はテキストを 1 行表示できますが、そのテキストを編集することはできません。
value プロパティを使用して TextDisplay の現在の値にアクセスしたり値を設定することができます。
TextDisplay は表示するためのものであり、ユーザーの入力が目的ではありません。そのため、コンポーネントのナビゲーションでは省略されます。
次の例では、TextDisplay の値は TextField の現在の値に設定されます。

例: TextDisplay を使用したデータの変更
{let td:TextDisplay =
    {TextDisplay value = "Display Snack"},
    vb:VBox = {VBox}
}
{CommandButton
    label = "click here",
    {on Action do
        {popup-message owner=null,
            {spaced-vbox
                {text Enter your favorite snack and press {bold Enter}.},
                {TextField width = 1.5in,
                    || ダイナミック イベント ハンドラ を加えます
                    {on ValueFinished at tf:TextField do
                        ||"Display Snack" の値を
                        ||TextField の現在の値と入れ替えます
                        set td.value = tf.value
                    }
                },
                td
            }
        }
    }
}

パスワード フィールド

PasswordField コントロールの目的は、ユーザーがパスワードまたは機密データを画面に表示せずに入力できるフィールドを提供することです。
各 PasswordField には、入力されたそれぞれの文字の代わりにエコー文字が画面の PasswordField に表示されるので、ユーザーはそれまでに入力した文字の数を把握することができます。既定のエコー文字は記号の * です。
セキュリティ上の理由から、パスワード フィールドのテキストの切り取りやコピーを行っても何も起きません。ユーザーができるのはパスワードをフィールドに貼り付けることだけです。テキストを貼り付けた場所には、エコー文字だけが表示されます。
ユーザーがパスワード フィールドに文字を入力するか、または Backspace キーを押すたびに、PasswordField の value プロパティも更新されます。画面上のエコーを追加および削除するとこのフィールドも更新されます。これらの要素により、コントロール自身が ValueChanged イベントを起動し、その PasswordField.pending-value? プロパティを true に設定します。パスワード フィールド内で貼り付けを行うと、ValueChanged も起動されます。
PasswordField.value の現在の値は、テキスト フィールドに入力されたテキストと関連づけられています。PasswordField の value プロパティをプログラムから設定すると、フィールドに表示されるテキストも変化しますが、該当する数のエコー文字が表示されるだけです。
ユーザーが Enter キーを押すと、PasswordField 自身が ValueFinished イベントを起動し、続いて Action イベントが起動し、その PasswordField.pending-value? プロパティが false になります。変更後にフォーカスがテキスト フィールドから移動すると、ValueFinished イベントも起動されますが、Action イベントは起動されません。
パスワード フィールドはテキストの prompt プロパティに入る文字列を表示しますが、エコー文字は表示しません。ユーザーにどの値を入力するかのヒントは、prompt を使用してください。さらに、PasswordField を初期化するときに、高さや幅などの通常のグラフィカル オプションを指定することができます。
プロパティ既定説明
max-chars-1フィールドに入力される最大文字数
echo-char'*'ユーザーがフィールドに他の文字を入力するごとに画面に表示される既定の文字
promptnull最初に表示するString
valuenull必要な場合は事前ロードされたパスワード
次の例は、ダイアログをポップアップして、入力したパスワードを表示するパスワード フィールドを示しています。

例: PasswordField の使用
{spaced-vbox
    {text Enter a password, up to 8 characters long, in the box below.},
    {text (Any characters after the first 8 will be ignored.)},
    {PasswordField
        max-chars = 8,
        width = 1.0in,
        {on ValueFinished at pf:PasswordField do
            {popup-message title = "Password Spy",
                {text The password just entered was: {br} {value pf.value}.}
            }
        }
    }
}

テキスト領域

TextArea を使用すると、ユーザーは複数行のプレーン テキストをダイアログまたはアプレットに入力することができます。各 TextArea はテキストの入力だけでなくテキストの表示もサポートしています。表示する複数行のテキストが所定のスペースに入りきらない場合は、垂直スクロールバーが表示されます。コントロールの値は文字列です。
TextArea.value の現在の値は、TextArea 内の現在のテキストと関連づけられています。TextArea の value プロパティをプログラムから設定すると、そこに表示されているテキストも変化します。
ユーザーはテキスト領域にテキストを入力するか、CTRL-v を使用してテキストに貼り付けることにより、TextArea オブジェクトに入力を追加します。テキストは自動的に次の行へ折り返され、単語間で分割されます。TextArea の形状が変化すると再び折り返されます。ユーザーが明示的に改行を入力した場合、その改行は保持されます。
ユーザーがテキスト領域に入力すると、TextArea の value プロパティが変化し、ValueChanged 自身が ValueChanged イベントを起動します。TextArea 内で切り抜きまたは貼り付け操作を行うと、ValueChanged も起動されます。
TextField とは異なり、TextArea はユーザーが Enter キーを押しても値の入力が完了した信号であるとは解釈しません。そのため、Action やイベントは起動しません。代わりに、カーソルを次の新しい行に移動してさらにデータを入力できるようにします。テキストの入力を終了するには、ユーザーはウィンドウの他の部分をマウスでクリックしてフォーカスを TextArea の外へ移動する必要があります。この動作により ValueFinished イベントが起動されます。
次の例では、任意の量のテキストを TextArea に入力します。ユーザーがテキスト領域から離れた場所でマウスのボタンをクリックすると、コントロールの値がポップアップ ダイアログ ボックスに表示されます。

例: テキスト領域でのデータ入力
{let experience:any,
    vb:VBox = {VBox}
}
{spaced-vbox
    background = {FillPattern.get-beige},
    {text Describe your prior experience in the space below:},
    {TextArea
        height = 2cm,
        prompt = "PRIOR EXPERIENCE: ",

        || Attach dynamic event handler
        {on ValueFinished at ta:TextArea do
            set experience = ta.value
            {vb.add
                {text
                    color = "blue",
                    {value experience}
                }
            }
            {popup-message
                modal? = true,
                vb
            }
        }
    }
}

リッチテキスト領域

RichTextArea はテキストフォーマッティングを複数行にわたるテキストに適用することができます。 入力、テキストの表示、イベントハンドリングに関しては、TextArea の動作と似ています。 テキスト領域 を参照してください。 さらに、RichTextArea には、ユーザーが次の非ローカルテキストオプション値を指定できるパネルが提供されています。



RichTextArea 内でのこのパネルの表示または非表示はローカルオプションの display-formatting-panel? を使用して操作することができます。
RichTextArea コントロールの値は RichTextString になります。 RichTextArea は RichTextStringを表示できる唯一のコントロールです。 RichTextArea にはメソッドの format-as-curl-source-fragment と format-as-html-fragment が提供されています。 これらのメソッドはそれぞれ Curl ソースコードまたは HTML マークアップを含む文字列をリターンします。 format-as-curl-source-fragment でリターンされた文字列は、 evaluate を使用して評価し、フォーマットされたテキストをレンダーすることができます。
RichTextArea は RichTextString を表示することのできる唯一のコントロールです。 リッチテキストを別のコンテキストで使用する場合は、それをまずコード文字列に変換して処理する必要があります。
次の例は、前で使われた TextArea の例を書き換えてリッチテキストが使用できるようになっていますす。 ポップアップ メッセージにあるテキストは、format-as-curl-source-fragment によってリターンされたを評価した結果が表示されていることに注意してください。
WritableTextSelectionContext から継承されるコマンドの paste、delete そして cut に加えて RichTextArea は、フォーマットパネルからユーザが設定できるオプションと匹敵する以下のコマンドを提供します。

例: リッチテキスト領域にデータを入力
{spaced-vbox
    background = {FillPattern.get-beige},
    {text Describe your prior experience in the space below:},
    {RichTextArea
        height = 2cm,
        prompt = {RichTextString.from-string "PRIOR EXPERIENCE: "},
        || Attach dynamic event handler
        {on ValueFinished at rta:RichTextArea do
            {popup-message
                modal? = true,
                {evaluate
                    {rta.format-as-curl-source-fragment}
                }
            }
        }
    }
}
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.