1.概要

表は、Excelの行列のような表示形式で、データを一覧表示するコントロールです。
色や形を指定することでデザイン性の高い表にすることも可能です。

以下では、「2.開発の手引き」にて、表でよく使う機能をまとめたサンプルプログラムをダウンロードできるほか、「3.パラメーター」では、表に設定するパラメーターのリファレンスを記載しています。

2.開発の手引き

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

control_table.zip

2-1.テーブルを作成する

表コントロールの設定に入る前に、まずは表と紐づけるテーブルを作成します。

DB設計機能からファイルを新規作成し、作成したテーブルの「設計」から「項目名」、「物理項目名」および「型」を以下の要領でそれぞれ登録します。

作成したテーブルの「格納データ」で「Reload」をクリックしてから、値を入力していきます。
値を入力したら「Commit」をクリックして、入力した値を登録してください。

2-2.テーブル指定型の表を作成する

表を配置して、デザインを設定します。プロパティーエリアの「オブジェクト」＞「基本情報」＞「スタイル」から、ここでは灰色と白色の表を選択します。

2-1で作成したテーブルを表に紐づけます。紐づけを行うことで、テーブル内のデータが表に表示されるようになります。

プロパティーエリアの「データ」＞「内容」から「テーブル」を選択し、「テーブル名」に2-1で作成したテーブルを設定します。
「列ヘッダー」と「行ヘッダー」にチェックをつけます。

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

以上でテーブルの紐づけは完了です。

表をクリックした箇所の塗りつぶし色を変更することも可能です。

2-3.データフォーム型の表を作成する

2-3-1.データフォームの設定

2-2では、表コントロールとテーブルの紐づけを行いましたが、フォームとテーブルを紐づけることができます。

フォーム（アプリ画面）の何も無い箇所をクリックしてから、プロパティーエリアの「データ」＞「内容」から、「テーブル名」に2-1で作成したテーブルを設定します。

2-3-2.表とデータフォームの紐づけ

改めて表を選択し、「データ」＞「内容」から「フォーム」を選択すると、上でフォームに紐づけたテーブルのデータと表を紐づけることができます。

「列ヘッダー」と「行選択」にチェックをつけます。

上図の「表示項目」ボタンを押すと2-2と同様に「表示項目の設定」画面が起動されますので、表示する項目を設定します。

2-2と同じく、テーブル内のデータが表に表示されるようになります。

3.パラメーター

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

オブジェクト

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

基本情報

名称	表の名称です。処理ロジックから表に動作を持たせる場合などは、この名称で表を指定します。デフォルトでは「表＋連番数字」のようになります。
サイズ	表の幅と高さを1ピクセル単位で細かく指定することができます。
位置	表の位置を指定できます。画面の左上隅が起点になります。
余白	表を表示させない余白領域をつくることができます。表の左右上下からの距離で指定します。
種類	コントロールの種類が確認できます。変更はできません。
スタイル	予め用意されたスタイルから選択することで、色や罫線等のパラメーターを簡単に設定できます。

動作設定

実行処理	表をタッチまたはクリックし、離した後に実行される処理を設定します。
長押処理	表を長押し（1秒以上）した時に実行される処理を設定します。
押下瞬間時処理	表を押した瞬間に実行される処理を設定します。

可否

使用可	このチェックを外すことで表を非活性化（操作無効）することができます。一定の条件が満たされるまで押すことができない表を設置する際などに利用します。
表示	このチェックを外すと、表を非表示にすることができます。一定の条件が満たされるまで表示されない表を設置する際などに利用します。
バウンドする	このチェックを外すと、表のスクロールをバウンドしない設定にすることができます。表のスクロール範囲を限界値で停止させる際などに利用します。

データ

内容

表に表示させるテーブルのデータに関する設定は「データ」から行います。フォームやデータベースのデータを表示させることができます。

フォーム

表の中のデータの紐づけに、データフォームで指定しているテーブルを用いる場合に設定します。

表示行数	表のスクロールしない状態での最大行数を指定します。少数点を指定することで、スクロール可能であることを促すこともできます。
表示項目	[表示項目]押下により別ウィンドウが表示されます。表に表示する列をデータフォームで指定したテーブルのフィールドから設定します。
列ヘッダー	列ヘッダーを表示する場合にチェックします。
行ヘッダー	[表示項目]の1番上に設定したフィールドを、行ヘッダーとして表示する場合にチェックします。
行選択	表を押下時に一行を選択する場合にチェックします。

テーブル

表の中のデータの紐づけで、ローカルデータベースのテーブル名を直接指定する場合に選択します。

テーブル名	表示内容の取得先となるテーブルを選択します。
表示行数	表のスクロールしない状態での最大行数を指定します。少数点を設定することで、スクロール可能であることを促すこともできます。
表示項目	[表示項目]押下により別ウィンドウが表示されます。表に表示する列を指定したテーブルのフィールドから選択します。
列ヘッダー	列ヘッダーを表示する場合にチェックします。
行ヘッダー	[表示項目]の1番上に設定したフィールドを、行ヘッダーとして表示する場合にチェックします。
行選択	表を押下時に一行を選択する場合にチェックします。

デザイン

スタイルによらず表の色や形、表示する項目の設定を行うには「デザイン」を変更します。表のデザインを細かく設定できます。

色と形

フォント	フォントタイプを指定します。
サイズ	フォントのサイズを指定します。
太字	文字を太字にする場合にチェックします。
影	文字に影をつける場合にチェックします。
折り返し	文字を折り返して表示する場合にチェックします。
文字列を縮小して全体を表示	表示内容がコントロール内に収まらない場合に表示内容が収まるように自動でフォントのサイズを調整します。
縦配置	列ヘッダーの文字位置を[上揃え][上下中央揃え][下揃え]の何れか選択します。
横配置	列ヘッダーの文字位置を[左揃え][左右中央揃え][右揃え]の何れか選択します。
通常フォント	通常時のフォント色を指定します。
通常塗りつぶし	通常時の背景色を指定します。
通常罫線／枠線	通常時の罫線／枠線の色を指定します。
選択フォント	選択箇所のフォント色を指定します。未指定時は通常フォントの色と同様となります。
選択塗りつぶし	選択箇所の背景色を指定します。
選択罫線／枠線	選択箇所の枠線の色を指定します。
ヘッダーフォント	ヘッダー部分のフォント色を指定します。
ヘッダー塗りつぶし	ヘッダー部分の背景色を指定します。
ヘッダー罫線／枠線	ヘッダー部分の罫線／枠線の色を指定します。
偶数行	偶数行の背景色を指定します。
使用不可フォント	操作無効時のフォント色を指定します。
使用不可塗りつぶし	操作無効時の背景色を指定します。
使用不可罫線／枠線	操作無効時の罫線／枠線の色を指定します。
境界線	表の外枠に境界線を描画するか指定します。
縦罫線	セルを分割する縦罫線を描画するか指定します。
横罫線	セルを分割する横罫線を描画するか指定します。
罫線余白	セルを分割する罫線について、セルの左と上と右と下に罫線の余白を指定します。
区切り線幅	ヘッダーと明細部分を区切る線の幅を指定します。
線の太さ	線の太さを指定します。
丸み	丸みを指定します。
厚み	厚みを指定します。

変更イメージ

罫線余白（例）

このセクションの記事