1.概要

テキストボックスは、アプリユーザーが文字を入力できるコントロールです。テキストボックスに入力された内容をデータベースに格納したり、取得した内容を判定して処理を分岐させたりすることもできます。
以下では、「2.開発の手引き」にて、テキストボックスでよく使う機能にかかわるサンプルプログラムがダウンロードできるほか、「3.パラメーター」では、テキストボックスに設定するパラメーターのリファレンスを記載しています。

2.開発の手引き

この記事では、テキストボックスを使いこなすうえでよく使うパラメーター設定をご紹介します。解説に使用しているサンプルプロジェクトは以下よりダウンロードできますので、ぜひご活用ください。

control_text.zip

2-1.プレースホルダー付きテキストを作成する

2-1-1.プレースホルダーを設定する

プレースホルダーの設定をすることで、テキストボックスに何も入力されていないときにメッセージを表示させておくことができます。入力内容のガイドなどを記入するのに便利です。
プロパティーエリアの「データ」＞「プレースホルダー」からテキストボックスに表示させたい内容を設定してください。同様に「データ」＞「内容」からはテキストボックスの初期値を設定することができます。

2-1-2.デザインを設定する

テキストボックスのデザインはプロパティーエリアの「デザイン」＞「色と形」から設定します。

ここでは、通常時のフォント色と枠線色を紺色に、プレースホルダーを薄灰色に設定します。

テキストの折り返しと複数行入力にチェック、表示内容を左上揃え、厚みを大きく設定します。

2-2.入力内容に対してエラーメッセージを表示する

2-2-1.エラーメッセージ出力ロジックの作成

パスワードやファイル名など特定の文字を入力してほしくないときなどに、入力サフィックスを設定することで検知することができます。また、検知した時にエラーメッセージを出力するロジックを設定することで、特定の1文字の入力が検出された際にエラーメッセージを表示させることができます。

2-2-2.ロジックの作成

テキストボックスの設定に入る前に、テキストボックスに設定するロジックを作成します。

「処理」設計機能から、「メッセージ」/「メッセージボックスを表示」ロジックを設定します。

ロジックは以下内容となっております。「”！”は使用できません」というメッセージが表示されます。

2-2-3.テキストボックスとロジックの紐づけ

「画面」設計機能に戻り、配置したテキストボックスを選択してプロパティーエリアの「オブジェクト」＞「動作設定」の「特定サフィックス検出時処理」に、上で作成したロジックを設定して、「特定サフィックス(16進数)」を"21"とします。
これにより、テキストボックスの入力内容の末尾に"!"（エクスクラメーションマーク）が入力された際に「特定サフィックス検出時処理」が実行されるように設定されます。

なお、21とは、"!" を 16進数のASCIIコードに変換した値となります。
"!"以外でもエラーチェックを実装したい場合は、その文字に該当するASCIIコードを設定してください。
ASCIIコードについては、以下を参考ください。
ウィキペディア　JIS X 0201
https://ja.wikipedia.org/wiki/JIS_X_0201

2-2-4.グラデーション

背景色をグラデーション設定してあります。
配置したテキストボックスを選択してプロパティーエリアの「デザイン」＞「色と形」の「通常」行の「背景色」列のカラーを選択し、「グラデーション」より設定をします。

2-2-5.背景画像有り

配置したテキストボックスを選択してプロパティーエリアの「デザイン」＞「画像」　にて、標準画像をクリックして、画像ファイルを選択します。

左下の位置、下かつ右揃えに設定しています。

内接フィットを選択することで、テキストコントロールの縦横幅の小さいほうに合わせて、
画像が縦横比を維持したまま縮小表示されます。

2-3.その他の動作設定

半角や全角などの「入力内容」を制限したり、入力できる文字列の長さなども設定できます。
また、「パスワード」にチェックを入れることでテキストボックスの内容が●表記で不可視化されます。
「ポップアップ入力」にチェックを入れた場合は、テキストボックスに入力するためのウインドウがポップアップ表示されます。

2-4.データベースと連携させる

2-4-1.テーブルを用意する

データベースと連携させるため、テーブルを作成します。サンプルプロジェクトでは「商品マスタ」として定義しています。

作成したテーブルの「設計」で「項目名」と「物理項目名」と「型」をそれぞれ登録します。

格納データに、以下のようにデータを準備しておきます。

フォームにデータフォームの設定をします。
フォームのコントロールが配置されていない箇所をクリックし、「データ」＞「内容」の「テーブル名」に 上記で作成した「商品マスタ」を設定します。

2-4-2.商品マスタテーブルの内容を表に表示

データベースの内容をリアルタイムに表示するためのビューとしての表を準備します。

表コントロールを作成し、「データ」＞「内容」から「フォーム」を選択します。

前述の格納データで、3件のデータを作成したので、表示件数は3を設定します。

表示項目ボタンを押すと「表示項目の設定」画面が表示されるので、下図のように設定します。

2-4-3.データフォームを設定する

テキストを選択し、データ＞内容　で　フォームを選択します。
フィールド名は　価格　を設定します。

3.パラメーター

パラメーターを変更することで、簡単にテキストボックスの位置や大きさ、色や形、表示する画像などを設定することができますので、それらを活用して、デザイン性に富んだ、わかりやすい画面を作成してみましょう。
また、画面操作時に呼び出す動作を設定することで、アプリユーザーがテキストボックスに入力をするとき、入力をした際に、アプリにさまざまな動作を実行させることができます。

オブジェクト

テキストボックスの基本情報や動作設定は「オブジェクト」から設定します。テキストボックスを非活性にしておくことで、アプリユーザーが特定の操作等をした際にだけ有効になるテキストボックスを設置することも可能です。

基本情報

動作設定

【注意】IME制御について

Microsoft IME(日本語)以外のIMEをお使いの場合は、IME制御機能の動作保証対象外です。

【注意】入力内容を数値のみとした場合

入力内容が数値のみである場合でも、アラビア数字以外にいくつかの文字が入力できます。どの文字が入力可能かはOSによって異なります。

可否

データ

テキストボックスに表示させるテキストや画像に関する設定は「データ」から行います。直接入力のほか、フォームやデータベースから抽出したテキストを表示させることもできます。

内容

値入力

テキストボックス内の文字表示を、直接入力する場合に設定します。

フォーム

テキストボックス内の文字表示を、データフォームを用いて入力する場合に設定します。

テーブル

テキストボックス内の文字表示を、あらかじめ設定するのではなく、データベースを用いて入力する場合に設定します。

プレースホルダー

値入力

プレースホルダーの文字表示を、直接入力する場合に設定します。

フォーム

プレースホルダーの文字表示を、データフォームを用いて入力する場合に設定します。

テーブル

プレースホルダーの文字表示を、あらかじめ設定するのではなく、データベースを用いて入力する場合に設定します。

デザイン

スタイルによらずテキストボックスの色や形、画像の設定を行うには「デザイン」を変更します。テキストボックスのデザインを細かく設定できます。

色と形

変更イメージ

文字の縦配置／横配置（例）

文字：左上揃えの場合                    文字：中央揃えの場合　　　　　　　文字：右下揃えの場合

 

グラデーション（例）

画像

画像の表示位置（例）

画像の単辺フィット（例）

罫線