数値入力用のコンポーエンとについて説明・紹介します。
TNumberBoxコンポーネント
TNumberBoxコンポーネントは、RAD Studio 10.4.2からVCLコントロールとしてサポートされました。
- 整数、小数点、通貨値の入力サポート
- スピンボタン、編集ボックス、ドロップダウンリストなどの機能
- ユーザー入力の検証とフォーマット
- 値の制限設定
- プロンプトとヒントの設定
- 読み取り専用モードの設定
TNumberBoxコンポーネントは、ユーザー入力を簡素化し、エラーを減らすのに役立つ便利なコンポーネントです。
- YouTubeで、「TNumberBox」の詳細な説明動画がありました。
山下修の「ワンポイント講座」8 – Delphi / C++Builderのコンポーネント「TNumberBox」の便利機能
主なプロパティ
以下、主なプロパティの一覧です。
主なプロパティ | 種別 | 説明 |
---|---|---|
Alignment | published | コントロールが、そのコンテナ(親コントロール)内にどのように配置されるかを決定します。(taLeftJustify, taCenter, taRightJustify) |
Mode | published | どの制御モードで動作させるか定義することができ、次の列挙に基づいています。TNumberBoxMode = (nbmInteger, nbmFloat, nbmCurrency) |
Value | published | Value は、数字ボックスの現在値を表します。 |
ValueInt | public | 現在の値を整数で表示 |
ValueInt64 | public | 現在の値を64ビットの整数で表示 |
ValueFloat | public | 現在の値を、Decimalプロパティを使用して丸められたExtended値として表示 |
ValueCurrency | public | 現在の値を10進数=2で丸めてExtended値として表示 |
CurrencyFormat | published | nbcfPrefix, nbcfPostfix, nbcfPrefixSpace, nbcfPostfixSpace, nbcfNoneのどれかの値を取ります。 |
CurrencyString | published | 現在の値を10進数=2で丸めてExtended値として表示 |
Decimal | published | 小数点以下の桁数を定義 |
AcceptExpressions | published | trueの時、数値入力フィールドに対して数式(例えば「3+4」や「5*6」など)の入力を許可します。 |
DisplayFormat | published | データベース対応コントロールで表示するため、数値フィールドの値をどのような書式にするかを決定します。 |
SmallStep | published | スピンボタン、Up/Downキー、マウスホイールでValueプロパティが変化する量を定義 |
LargeStep | published | Page Up/Page Downキーで Value プロパティが変化する量を定義します |
MaxValue | published | 最大値を定義 |
MinValue | published | 最小値を定義 |
SpinButtonOptions | published | スピンボタンのオプションを定義し、ButtonWidth、Placement、RepeatTimerInterval、ShowInlineDividers、異なる矢印の色などのサブプロパティを含むデータ構造体 |
UseNaNValue | published | 空のテキストでNaN値を使用 |
UseMouseWheel | published | SmallStepプロパティを使用してマウスホイールで値を変更するか否かの設定 |
UseUpDownKeys | published | Page Up/Page Downキーで値の変更を許可するか否かの設定 |
NegativeValueColor | published | 負の数の時の色を指定します。 |
ReadOnly | published | ユーザーが編集コントロールのテキストを変更できるかどうかを決定します。 |
Wrap | published | 最大値から最小値へのインクリメントと逆インクリメントを有効にするか否かの設定 |
ShowHint | published | ShowHint は、マウス カーソルがコントロール上に移動した際、ヘルプのヒントを表示するかどうかを示します。 |
Hint | published | Hint は、ユーザーがコントロールにマウス ポインタを合わせたときに表示されるテキスト文字列を含みます。 |
Name | published | コードで参照されている、コンポーネントの名前を示します。 |
Tag | published | NativeInt 整数値をコンポーネントの一部として保持します。 |
各モードの設定方法
整数モード
整数の入力は、Modeプロパティの値を、nbmInteger か、nbmInt64 に設定します。
以下は、整数の入力モード時の基本的なプロパティの設定項目です。
プロパティ | 設定 |
---|---|
Mode | nbmInteger nbmInt64 |
Alignment | taRightJustify |
Value | デフォルト値を入力します。 |
MaxValue | 最大値を定義 |
MinValue | 最小値を定義 |
SmallStep | スピンボタン、Up/Downキー、マウスホイールでValueプロパティが変化する量を定義します。 |
LargeStep | Page Up/Page Downキーで Value プロパティが変化する量を定義します。 |
小数点モード
小数点の入力は、Modeプロパティの値を、nbmFloat に設定します。少数点以下何桁表示するかは、Decimalプロパティで設定します。
ロパティ | 設定 |
---|---|
Mode | nbmFloat |
Decimal | 小数点以下の桁数を入力します。 |
Alignment | taRightJustify |
Value | デフォルト値を入力します。 |
MaxValue | 最大値を定義 |
MinValue | 最小値を定義 |
SmallStep | スピンボタン、Up/Downキー、マウスホイールでValueプロパティが変化する量を定義します。 |
LargeStep | Page Up/Page Downキーで Value プロパティが変化する量を定義します |
通貨モード
通貨値は、Modeプロパティの値を、nbmCurrencyに設定します。CurrencyStringプロパティで、単位の文字を指定し、CurrencyFormatプロパティで表示位置を指定します。
プロパティ | 設定 |
---|---|
Mode | nbmCurrency |
CurrencyString | 円の場合は、””を設定します。 |
CurrencyFormat | 円の場合は、前に””を付けるので、nbcfPrefixかnbcfPrefixSpaceに設定します。 |
Decimal | 小数点以下の桁数を入力します。 |
Alignment | taRightJustify |
Value | デフォルト値を入力します。 |
MaxValue | 最大値を定義 |
MinValue | 最小値を定義 |
SmallStep | スピンボタン、Up/Downキー、マウスホイールでValueプロパティが変化する量を定義します。 |
LargeStep | Page Up/Page Downキーで Value プロパティが変化する量を定義します |
通貨値の応用
筆者は、通貨モードを、”%”、”dot”、”DPI”等の表示に使用しています。
以下は、”%”表示の時の設定例です。
プロパティ | 設定 |
---|---|
Mode | nbmCurrency |
CurrencyString | “%”を設定します。 |
CurrencyFormat | %の場合は、数値の後に付けるので、nbcfPostfixか、nbcfPostfixSpaceを設定します。 |
Decimal | 小数点以下の桁数を入力します。 |
Alignment | taRightJustify |
Value | デフォルト値を入力します。 |
MaxValue | 最大値を定義 |
MinValue | 最小値を定義 |
SmallStep | スピンボタン、Up/Downキー、マウスホイールでValueプロパティが変化する量を定義します。 |
LargeStep | Page Up/Page Downキーで Value プロパティが変化する量を定義します。 |
TNumberBoxの表示
TNumberBoxの整数、小数点、通貨モードの表示例です。一番下は、通貨モードを使用して”%”表示した例です。
AcceptExpressionsプロパティ
TNumberコンポーネントのAcceptExpressions
プロパティは、コンポーネントに割り当てられる値をExpressionエディタで編集可能かどうかを制御します。
AcceptExpressionsプロパティを有効にすると、ユーザは40+2のような式を入力でき、コントロールはそれを結果に置き換えます。さらに乗算、除算、加算、減算などの基本的な方程式のインライン計算をサポートしています(括弧の使用が可能です)。記号+と-の両方を二項演算と単項演算の両方として使用できるため、例えば、-23または+ 23と入力したり、55+23あるいは55-23と書くこともできますし、53++23や53–23のように組み合わせることもできますが、これは 53 – (-23) として評価されます。
スピンボタンの表示
スピンボタンのオプション(TNumberBoxコントロールのSpinButtonOptionsの Placementプロパティで設定)の変更が行えます。
Placementプロパティは、以下の値のどれかを設定します。
TNumberBoxSpinButtonPlacement | 説明 |
---|---|
nbspNone | 表示なし |
nbspCompact | 左右に矢印を表示 |
nbspInline | 上下に矢印を表示 |
DisplayFormatプロパティ
数値フィールドの値をデータベース対応コントロールに表示する際の形式を決定します。
フィールドを表示する際の自動形式設定をオーバーライドするには、DisplayFormat プロパティを使用します。
DisplayFormat プロパティの値は、次の表に示す指定子を使用して数値データの形式を設定する文字列です。
指定子 | 意味 |
---|---|
0 | 数字を表すプレースホルダ。 書式設定対象の値で、書式文字列内の “0” が出現する位置に数字がある場合、その数字が出力文字列にコピーされます。 それ以外の場合は、出力文字列のその位置に “0” が格納されます。 |
# | 数字を表すプレースホルダ。 書式設定対象の値で、書式文字列内の “#” が出現する位置に数字がある場合、その数字が出力文字列にコピーされます。 それ以外の場合は、出力文字列のその位置に何も格納されません。 |
.(ピリオド) | 小数点。 書式文字列内の最初の “.” 文字によって、書式指定対象の値の小数点位置が決定します。それ以降の “.” 文字は無視されます。 出力文字列での小数点の区切りとして使われる実際の文字は、DecimalSeparator グローバル変数によって決まります。 DecimalSeparator のデフォルト値は、Windows の [コントロール パネル] の [地域] 設定セクションの [数値] タブで指定されています。 |
,(カンマ) | 桁区切り記号。 書式文字列に 1 つ以上 “,” 文字が含まれている場合、出力には小数点の左側の 3 桁ごとの各グループの間に桁区切り記号が挿入されます。 書式文字列内の “,” 文字の位置と数は、桁区切り記号の使用を指定するということ以外は、出力に影響しません。 出力で桁区切り記号として使われる実際の文字は、ThousandSeparator グローバル変数によって決まります。 ThousandSeparator のデフォルト値は、Windows の [コントロール パネル] の [地域] 設定セクションの [数値] タブで指定されています。 |
E+ | 科学表記。 書式文字列内に、”E+”、”E-“、”e+”、”e-” のいずれかの文字列が含まれている場合、その数値は科学表記を使ってフォーマットされます。 最大 4 個の “0” 文字のグループを “E+”、”E-“、”e+”、または “e-” の直後に続けることで、指数内の最小桁数を決定できます。 “E+” と “e+” の形式では、正の指数にはプラス記号が出力され、負の指数にはマイナス記号が出力されます。 “E-” と “e-” を使用すると、負の指数の場合にのみマイナス記号が出力されます。 |
‘xx’ または “xx” | 一重引用符または二重引用符で囲まれた文字は、そのまま出力され、形式指定の影響を受けません。 |
;(セミコロン) | 書式文字列内で、正の数、負の数、0 のためのセクションを区切ります。 |
書式文字列内の小数点より前にある左端の “0” と、書式文字列内の小数点より後の右端の “0” の位置によって、出力文字列に常に表示される桁数の範囲が決まります。
形式を適用する数値は常に、小数点より右側にある、数字を表すプレースホルダ(”0″ または “#”)の数分の、少数位に丸められます。 書式文字列に小数点が含まれていない場合、書式指定対象の値は、それに最も近い整数に丸められます。
書式を適用する数値の小数点記号より左側の桁数が、書式文字列内の “.” 文字の左側にある数字を表すプレースホルダの数より多い場合、最初の数字を表すプレースホルダの前に桁を追加して出力されます。
さまざまな書式文字列の結果を次の表に示します。
DisplayFormat | 値 | 結果 | コメント |
---|---|---|---|
#.## | 12.2 | 12.2 | 小数点より左に 1 桁追加されています。 |
#.00 | 2.5 | 2.50 | 0 が追加されています。 このフィールドは、常に小数点以下 2 桁まで表示されます。 |
00.## | .006 | 00.01 | 小数点の左に 0 が 2 つ追加されて、小数点以下 2 桁に丸められています。 |
上記の表の設定を行った、TNumberBoxコンポーネントの表示例です。
一番下は、DisplayFormatプロパティに、「,##0″%”」、Valueプロパティに、「123456」を設定しています。DisplayFormatプロパティヲ使用しても、”%”の表示が可能です。また、”,”を設定する事で、3桁毎に”,”表示できます。
- DisplayFormatのヘルプです。
HEX入力可能なTNumberEditコンポーネント
NumberEditコンポーネントは、HEX入力も可能な数値入力を行うための編集ボックスコントロールです。
ダウンロード:TNumberEdit
機能
NumberEditコンポーネントの主な機能は以下のとおりです。
- 実数の入力に対応
- 小数点以下の桁数の指定
- 3桁ごとのコンマを表示できる
- 最大値、最小値を指定できる
- 16進数の入力に対応(整数のみ)
- 整数部分の最大桁数を指定できる
対応するDelphi/C++Builderのバージョン
Delphi XE3 以降(VCLのみ) 32ビット/64ビットとありますが、ソースが公開されているので、C++Builderで使用可能です。
主なプロパティ
以下、主なプロパティです。
名前 | スコープ | 概要 |
---|---|---|
Alignment | published | 編集コントロール内での数値の水平位置揃え方法を指定する。 |
AllowKeys | published | ユーザーが矢印キーの上下を押して、数値をインクリメント(デクリメント)できるかどうか指定する。 |
AsInt64 | public | 入力された数値をInt64型整数として読み取ったり、設定したりする。 |
AsInteger | public | 入力された数値をInteger型整数として読み取ったり、設定したりする。 |
AsText | public | (読み取り専用)入力された数値を文字列として読み取る。 |
Comma | published | 3桁ごとのコンマを付けるかどうか指定する。 |
Figure | published | 小数点以下の桁数(10進数)、または表示桁数(16進数)を指定する。 |
Fixed | published | 小数点以下の桁数を固定して表示するかどうかを指定する。 |
FormattedText | public | (読み取り専用)コンマなどの書式を含めて、コントロールに表示されているとおりの文字列を取得する。 |
Increment | published | 矢印キーの上下を押したとき、インクリメント(デクリメント)される数を指定する。 |
Limit | published | 入力できる数値の最大値と最小値を有効にするかどうか指定する。 |
LimitOptions | published | 最大値と最小値のどちらを有効にするかを指定する。 |
MaxLength | published | 入力可能な最大文字数を指定する。 |
Max | published | 入力可能な数値の最大値を指定する。 |
MaxIntLength | published | 数値の整数部分の最大桁数を指定する。 |
Min | published | 入力可能な数値の最小値を指定する。 |
NumberType | published | 数値を10進数で表すか、16進数で表すかを指定する。 |
ReadOnly | published | ユーザーが数値を変更できないようにするかどうか指定する。 |
RoundMode | published | 小数点以下の部分の処理を切り捨て、切り上げ、または四捨五入のいずれにするかを指定する。 |
ShowHint | published | ポップアップヒントを表示するかどうか指定する。 |
TextHint | published | 編集コントロールが空の場合に表示される文字列を指定する。 |
ValidMinus | published | 16進数で入力するとき、マイナス記号の表示を有効にするかどうか指定する。 |
Value | published | 編集コントロールに入力された数値を取得、または編集コントロールに表示する数値を指定する。 |
Visible | published | コントロールを画面に表示するかどうか指定する。 |
Wrap | published | 最大値を超えてインクリメントしたとき数値を最小値にするか、または最小値を超えてデクリメントしたとき数値を最大値にするか指定する。 |
各モードの指定
Decimal(10進数)
10進数の入力は、NumberTypeプロパティにntDecimalを設定します。
プロパティ | 設定 |
---|---|
NumberType | ntDecimal |
Value | 編集コントロールに入力された数値を取得、または編集コントロールに表示する数値を指定する。 |
HEX(16進数)
HEX(16進数)入力するには、NumberTypeプロパティにntHexを設定します。
桁数は、Figureプロパティで指定可能です。
プロパティ | 設定 |
---|---|
NumberType | ntHex |
Figure | 表示桁数(16進数)を指定する。 |
Value | 編集コントロールに入力された数値を取得、または編集コントロールに表示する数値を指定する。 |
小数点
小数点の入力の設定例です。Fixedプロパティをtrueに設定して、Figureプロパティで少数点以下の桁数を設定します。
プロパティ | 設定 |
---|---|
NumberType | ntDecimal |
Fixed | trueにして、小数点以下の桁数を指定する |
Figure | 小数点以下の桁数(10進数)を指定する。 |
Value | 編集コントロールに入力された数値を取得、または編集コントロールに表示する数値を指定する。 |
最大値、最小値の設定
最大値、最小値の設定を行こうにするには、Limitプロパティと、LimitOptionsプロパティをtrueにする必要があります。
プロパティ | 設定 |
---|---|
Limit | trueに設定 |
LimitOptions(loMax) | true:最大値を有効 |
LimitOptions(loMin) | true:最小値を有効 |
Max | 入力可能な数値の最大値を指定する。 |
Min | 入力可能な数値の最小値を指定する。 |
修正点
筆者は、以下のTextToValueメソッド内の、StrToInt(‘$’ + S); を StrToInt64(‘$’ + S); に修正して使用しています。
function TNumberEdit.TextToValue(var S: string): Extended;
begin
if FValidMinus then
begin
if S[1] = '-' then
Result := -StrToInt64('$' + Copy(S, 2, Length(S) - 1))
else
Result := StrToInt64('$' + S);
end
else
Result := StrToInt64('$' + S); // Result := StrToInt('$' + S); 2020/04/03
end;
UpDownボタンの追加
筆者は、以前からみずさんが公開してくれていたTUpdownNumberEditコンポーネントを使用しています。ただ、現在、残念ながら公開されていないようです。TUpdownNumberEditコンポーネントは、TNumberEditコンポーネントに、UpDownボタンを追加したコンポーネントです。
TNumberEditコンポーネント+TUpDownコンポーネント(Win32にあります)で、同等の表示・動作が可能です。
TUpDownコンポーネントの使い方
「Win32」の中に、TUpDownコンポーネントはあります。Drag&Dropします。
Associateプロパティで、関連付けるコンポーネントを選択します。AlignButtonプロパティで、右側に表示するか、左側に表示するかを選択します。また、矢印キーをクリックした時の増減量は、Incrementプロパティで設定します。また、最大値、最小値の設定もしておきましょう。
これで、矢印キーで、TNumbertEditの値が増減できます。
- 主なプロパティ
プロパティ | スコープ | 概要 |
---|---|---|
AlignButton | published | 対象コントロールと相対するアップダウンコントロールの位置を指定します。 |
Associate | published | アップダウンコントロールの対象コントロールを指定します。 |
Increment | published | 〔↑〕または〔↓〕キーが 1 回押されたときに Position 値が変化する量を指定します。 |
Max | published | Position プロパティの最大値を指定します。 |
Min | published | Position プロパティの最小値を指定します。 |