1.概要
コンボボックスは、選択肢リストより選択することで、あらかじめ指定した値を返したり、あらかじめ設定した動作を呼び出すことができるコントロールです。
以下では、「2.開発の手引き」にて、コンボボックスでよく使う機能にかかわるサンプルプログラムがダウンロードできるほか、「3.パラメーター」では、コンボボックスに設定するパラメーターのリファレンスを記載しています。
2.開発の手引き
この記事では、コンボボックスを使いこなすうえでよく使うパラメーター設定をご紹介します。解説に使用しているサンプルプロジェクトは以下よりダウンロードできますので、ぜひご活用ください。
2-1.選択肢を手入力で設定する
選択肢リストを手入力で設定するコンボボックスとなります。
DBの準備などが不要のため、手軽に利用できます。
2-1-1.コンボボックスを配置し、リストを設定する
コントロールバーの「コンボ」を選択して画面上でドラッグしてコンボボックスを配置します。
コンボボックスを選択した状態で、プロパティーエリアの「データ」＞「リスト」から「値入力」を選択します。次に「値入力」に、リストで表示させたい内容を、下図のように改行付きで入力します。
先頭に空白行を挿入を✔すると、選択肢リストの先頭に空白の選択肢が表示されます。
リストから選択した内容をリセットしたい場合は、先頭の空白を選択することで、もう一度未選択の状態に戻すことができます。
2-1-2.選択したリストの内容を表示する
選択肢を手入力で設定した場合は、値の選択で表示される内容＝選択された結果となります。
また、内容の表示は以下のように書式で変更ができます。
コンボボックスを選択した状態で、プロパティーエリアの「データ」＞「内容」から「書式」に 「0,000」と通貨表示のカンマ付き設定をします。
コンボボックスでの表示に桁区切りが付きます。
2-1-3.デザインを変更する
コンボボックスを選択した状態で、プロパティーエリアの「デザイン」＞「色と形」からコンボボックスのデザインを変更できます。
「通常」の「罫線／枠線」で指定した色が、コンボボックスの枠色となり、「通常」の「フォント」で指定した色が、コンボボックス内の文字の色となります。また、「丸み」を調整することで、コンボボックスの角に丸みをつけたりなくしたりすることができます。
2-2.コンボボックスとデータベースを連携する
コンボボックスとテーブルを紐づけることで、リストの値を手入力するのではなく、テーブルから取得してくることができるようになります。
また、コンボボックスでの選択結果をキーとしてテーブルを検索し、テーブルに格納された情報を以下のようにラベル等の他コントロールに表示させることができます。
2-2-1.テーブルを作成する
まずは、コンボボックスに紐づけるためのテーブルを作成するため、DB設計画面から新規のテーブルを作成します。サンプルプロジェクトでは。「tbl_ItemManager」として作成しています。
作成したテーブルの「設計」で「項目名」と「物理項目名」、「型」を、それぞれ以下の要領で登録します。
また、データの増減は今回のプロジェクトでは行わないものとするため、「初期データ」に以下を設定したうえで、起動時初期化のチェックボックスにチェックを付けます。
これにより、アプリ起動時にはテーブルへ自動的に初期データが投入されるようになります。
2-2-2.コンボボックスのリストにテーブルを紐づける
コンボボックスを選択した状態で、以下のプロパティーを設定します。
「データ」＞「リスト」から 「テーブル」を選択し、「テーブル名」、「キーフィルド名」および「値フィールド名」として、2-2-1で設定した項目名をそれぞれ以下の要領で設定します。
この段階で、コンボボックスの選択肢をテーブルから取得できるようになります。
2-2-3.テキストボックスに詳細を表示するロジック
続いて、コンボボックスで選択された内容に関連するデータをテキストボックスに表示させる処理を作成します。
処理設計画面から新規の処理を作成し、以下の要領でロジックを作成します。サンプルプロジェクトでは、「010_選択されたコンボでフィルタ」として作成しています。
#1でコンボボックスで選択された内容（キーフィールド名）を受け取り、#2と#3で受け取った値で「tbl_ItemManager」を絞り込み検索します。
#4~6は、3つのテキストボックスそれぞれに、検索結果を表示させえうロジックとなっています。
作成した処理をコンボボックスの実行処理に設定することで、コンボボックス選択時に処理が実行されます。
2-2-4.デザインの設定
コンボボックスを選択した状態で、プロパティーエリアの「デザイン」＞「色と形」からコンボボックスのデザインを変更できます。
2-1-3で説明した内容は省略します。
カラーパレットの「グラデーション」を選択することでグラデーションの設定をすることが可能です。
背景画像を設定する場合は、「デザイン」＞「画像」から設定を行ってください。
3.パラメーター
パラメーターを変更することで、簡単にコンボボックスの位置や大きさ、色や形、表示する画像などを設定することができますので、それらを活用して、デザイン性に富んだ、わかりやすい画面を作成してみましょう。
また、画面操作時に呼び出す動作を設定することで、アプリユーザーがコンボボックスをタッチしたりクリックしたりした際に、アプリにさまざまな動作を実行させることができます。
オブジェクト
基本情報
| 名称 | コントロール名を入力します。 処理ロジックからコンボボックスに動作を持たせる場合などは、 この名称でコンボボックスを指定します。 デフォルトでは「コンボ＋連番数字」のようになります。 |
|---|---|
| ポップアップ タイトル |
コンボリストのタイトルを指定します。 ポップアップタイトルが空欄の場合は、コントロールの名称が コンボリストのタイトルに表示されます。 |
| サイズ | コントロールの幅と高さを指定します。 |
| 位置 | コントロールの位置を左と上から指定します。 |
| 余白 | コントロールの余白を左と右と上と下から指定します。 |
| 種類 | コントロールの種類を表示します。 |
| スタイル | 予め用意された定義を選択することで、色や罫線等の各種プロパティを 一括で設定できます。 |
動作設定
| 実行処理 | 実行処理がある場合に選択します。 |
|---|---|
| 長押処理 | 長押処理がある場合に選択します。 |
| 押下瞬間時処理 | 押下した瞬間の処理がある場合に選択します。 |
| ピッカー／タップ時に 選択を完了(iOSのみ) |
ピッカーをタップした時に選択を完了する場合に選択します。 |
可否
| 使用可 | コントロールを使用可能にする場合にチェックします。 |
|---|---|
| 表示 | コントロールを表示する場合にチェックします。 |
データ
内容
値入力
コンボボックスに表示する値を入力する場合に選択します。
| 文字 | 表示内容を入力します。 |
|---|---|
| 書式 | 表示書式を入力します。 |
フォーム
コンボボックスに表示する値の取得先に、フォームで指定しているテーブルを使用する場合に選択します。
| フィールド名 | 表示内容の取得先のフィールドを選択します。 |
|---|---|
| 書式 | 表示書式を入力します。 |
| 使用可 | サブフォームリストにコンボボックスを配置した場合に、 各行ごとの使用可設定の取得先となるフィールドを選択します。 |
| 表示 | サブフォームリストにコンボボックスを配置した場合に、 各行ごとの表示設定の取得先となるフィールドを選択します。 |
| 前景色 | サブフォームリストにコンボボックスを配置した場合に、 各行ごとの前景色設定の取得先となるフィールドを選択します。 |
| 背景色 | サブフォームリストにコンボボックスを配置した場合に、 各行ごとの背景色設定の取得先となるフィールドを選択します。 |
テーブル
コンボボックスに表示する値の取得先に、テーブルを使用する場合に選択します。
| テーブル名 | 表示内容の取得先のテーブルを選択します。 |
|---|---|
| フィールド名 | 表示内容の取得先のフィールドを選択します。 |
| 書式 | 表示書式を入力します。 |
| 使用可 | サブフォームリストにコンボボックスを配置した場合に、 各行ごとの使用可設定の取得先となるフィールドを選択します。 |
| 表示 | サブフォームリストにコンボボックスを配置した場合に、 各行ごとの表示設定の取得先となるフィールドを選択します。 |
| 前景色 | サブフォームリストにコンボボックスを配置した場合に、 各行ごとの前景色設定の取得先となるフィールドを選択します。 |
| 背景色 | サブフォームリストにコンボボックスを配置した場合に、 各行ごとの背景色設定の取得先となるフィールドを選択します。 |
リスト
値入力
コンボリストに表示する値を入力する場合に選択します。
| 文字 | 表示内容を入力します。 |
|---|---|
| 表示リスト数 | 表示するリスト数を指定します。 |
| 先頭に空白行挿入 | 先頭に空白行を挿入したい場合にチェックします。 |
テーブル
コンボリストに表示する値の取得先に、テーブルを使用する場合に選択します。
| テーブル名 | コンボリストの取得先のテーブルを選択します。 |
|---|---|
| キーフィールド名 | コンボリストの取得先のキーフィールドを選択します。 |
| 値フィールド名 | コンボリストの取得先の値フィールドを選択します。 |
| 表示リスト数 | 表示するリスト数を指定します。 |
| 先頭に空白行挿入 | 先頭に空白行を挿入したい場合にチェックします。 |
デザイン
色と形
| フォント | フォントを指定します。 |
|---|---|
| サイズ | フォントのサイズを指定します。 |
| 太字 | 文字を太字にする場合にチェックします。 |
| 影 | 文字に影をつける場合にチェックします。 |
| 下線 | 文字の下線を[無し][下線][二重下線]の何れかから選択します。 |
| 取り消し線 | 文字に取り消し線をつける場合にチェックします。 |
| 折り返し | 文字を折り返して表示する場合にチェックします。 |
| 文字列を縮小して 全体を表示 |
表示内容がコントロール内に収まらない場合に |
| 縦配置 | 表示内容の文字位置を[上揃え][上下中央揃え][下揃え]の何れか 選択します。 |
| 横配置 | 表示内容の文字位置を[左揃え][左右中央揃え][右揃え]の何れか 選択します。 |
| 通常フォント | 前景色を指定します。 |
| 通常塗りつぶし | 背景色を指定します。 |
| 通常罫線／枠線 | 罫線と枠線の色を指定します。 |
| ボタンフォント | プルダウンボタンの前景色を指定します。 |
| ボタン塗りつぶし | プルダウンボタンの背景色を指定します。 |
| 使用不可フォント | 無効時の前景色を指定します。 |
| 使用不可塗りつぶし | 無効時の背景色を指定します。 |
| 使用不可罫線／枠線 | 無効時の罫線と枠線の色を指定します。 |
| 線の太さ | 線の太さを指定します。 |
| 丸み | 丸みを指定します。 |
| 厚み | 厚みを指定します。 |
変更イメージ
文字の縦配置／横配置（例）
|
|
|
|
通常塗りつぶしのグラデーション（例）
|
|
|
|
|
|
|
|
画像
| 標準画像 | コントロールに画像を貼り付けます。 |
|---|---|
| 画像削除 | コントロールから画像をクリアします。 |
| 押下画像 |
コントロールにチェック時の画像を貼り付けます。 設定した画像をクリアする場合は画像削除ボタンをクリックします。 |
| 無効標準画像 | コントロールに無効時画像を貼り付けます。
設定した画像をクリアする場合は画像削除ボタンをクリックします。 |
| 無効押下画像 | コントロールにチェック状態の無効時画像を貼り付けます。
設定した画像をクリアする場合は画像削除ボタンをクリックします。 |
| 画像の表示位置(垂直) | 画像の表示位置を[上揃え][上下中央揃え][下揃え]の何れか 選択します。 |
| 画像の表示位置(水平) | 画像の表示位置を[左揃え][左右中央揃え][右揃え]の何れか 選択します。 |
| 単辺フィット | 画像がコントロールにフィットするようにサイズを変更します。 [設定なし][内接フィット][外接フィット][縦横フィット]の何れか 選択します。 |
画像の表示位置（例）
|
|
|
|
|
|
|
|
|
|
|
|
|
|
罫線
| 上種類 | 上罫線の種類を指定します。 |
|---|---|
| 上色 | 上罫線の色を指定します。 |
| 下種類 | 下罫線の種類を指定します。 |
| 下色 | 下罫線の色を指定します。 |
| 左種類 | 左罫線の種類を指定します。 |
| 左色 | 左罫線の色を指定します。 |
| 右種類 | 右罫線の種類を指定します。 |
| 右色 | 右罫線の色を指定します。 |
| ＼種類 | ＼罫線の種類を指定します。 |
| ＼色 | ＼上罫線の色を指定します。 |
| ／種類 | ／罫線の種類を指定します。 |
| ／色 | ／上罫線の色を指定します。 |