1.概要

サブフォームは、画面の中にサブ画面を作成することができるコントロールです。

アプリ画面の特定の領域にスクロール表示のコンテンツを配置する場合や、特定の領域だけコンテンツを切り替えたい場合などに便利です。

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

また、サブフォーム内でサブ画面をリスト形式で繰り返し表示させることも可能です。具体的な実装方法については、「サブ画面を繰り返し表示させる」を参照ください。

2.開発の手引き

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

control_subform.zip

2-1.画面内にスクロール領域を作成する

サブフォームを使うことで、縦スクロールができるサブ画面を実装することができます。

2-1-1.サブフォームを配置し、初期値を設定する

コントロールバーの「サブフォーム」を選択して画面上でドラッグしてサブフォームを配置します。
配置したサブフォームを選択した状態で、プロパティーエリアの「オブジェクト」＞「基本設定」から「幅」と「高さ」を設定します。当サンプルでは幅を450、高さを510と設定します。

 2-1-2.サブフォーム用の画面を作成する

2-1-1で作成したサブフォーム領域に表示させるための画面を作成します。名称は、「10_サブフォーム緑」とします。

画面設計機能から新規画面を作成し、作成した画面を選択した状態で、プロパティーエリアの「オブジェクト」＞「基本情報」から「幅」と「高さ」を設定します。当サンプルでは幅を450、高さを830と設定します。

縦スクロール可能にするために、今回は高さをサブフォームより大きな値に設定します。

また、左右にスクロールしないようにするため、横幅はサブフォームと画面を揃えます。

2-1-3.サブフォーム用のヘッダーとフッターを作成する

サブフォームにはヘッダーとフッターをつけることができます。

ヘッダー用の画面と、フッター用の画面をそれぞれ追加し、プロパティーエリアの「オブジェクト」＞「基本情報」から「幅」と「高さ」を設定します。当サンプルではいずれも幅を450、高さを30と設定します。

こちらも横幅はサブフォーム領域と揃えます。

2-1-4.サブフォームに画面を表示する

サブフォームを選択した状態で、プロパティーエリアの「オブジェクト」＞「動作設定」から、サブフォームに表示する画面を割り当てることができます。

ここではまず、「10_サブフォーム緑」画面がサブフォーム内に表示されるように設定します。

レイアウトは、作成した画面のサイズとします。

ここまでの設定にて、縦スクロールが可能なサブフォームが実装されます。

2-2.特定の領域だけ表示を切り替える

ロジックを活用することで、サブフォーム領域に表示させるサブ画面を切り替えることができます。

2-2-1.サブフォーム用の画面を作成する

「11_サブフォーム赤」という画面を追加します。

追加した画面を選択した状態で、プロパティーエリアの「オブジェクト」＞「基本情報」から「幅」と「高さ」を設定します。当サンプルでは幅を450、高さを450と設定します。
こちらはスクロールしないタイプのため、高さをサブフォームより小さな値に設定しています。
また、左右にスクロールしないようにするため、横幅はサブフォームと画面を揃えます。

2-2-2.サブフォーム内画面の表示を切り替える処理を作成する

2-1-3の設定によって、画面起動時は「10_サブフォーム緑」がサブフォーム領域に表示されるようになっていますが、切替ボタンを押すことで、表示するサブフォームを切り替えられるようにします。

処理設計画面を開き、新規に「02_サブフォーム赤に切り替える」というファイルを作成し、以下の要領でロジックを設定します。

#1のロジックにて、サブフォーム領域に表示させる画面（遷移先）を、「11_サブフォーム赤」に変更しています。パラメーター設定の詳細は以下のとおりです。

ここで作成した処理は、メイン画面に配置した「サブフォーム赤に切替」ボタンの実行処理に設定します。 

同様に「01_サブフォーム緑に切り替える」というロジックファイルを追加し、以下の要領でロジックを設定します。

#1のロジックにて、サブフォームの中身を、「10_サブフォーム緑」に変更しています。なお、パラメーターの設定は以下のとおりです。

以上でロジックが完成しました。 作成したロジックは、「サブフォーム緑に切替」ボタンの実行処理として設定します。 

2-3.サブフォームに表示する画面とDBを紐づける

サブフォームに表示されている画面は、通常の画面と同じようにデータフォームの設定ができます。

データフォームは、通常1画面に1つしか設定できませんが、サブフォームを応用することで、1つの親画面に複数のサブフォームを紐づけることができるので、複数のテーブルに対して更新を行う画面を作ることができます。

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

DB設計画面から新規のテーブルを作成します。サンプルプロジェクトでは。「01_table_green」として作成しています。
作成したテーブルの「設計」で「項目名」と「物理項目名」と「型」をそれぞれ以下の要領で登録します。
このテーブルは緑色のサブフォーム用画面の入力1~入力9に紐づきます。

DB設計画面からもうひとつ新規のテーブルを作成します。サンプルプロジェクトでは。「02_table_red」として作成しています。
作成したテーブルの「設計」で「項目名」と「物理項目名」と「型」をそれぞれ以下の要領で登録します。
このテーブルは赤色のサブフォーム用画面の入力1~入力5に紐づきます。

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

画面設計画面から「10_サブフォーム緑」を選択したうえで、フォーム（画面）をクリックし、プロパティーエリアの「データ」＞「内容」からテーブル名に上記「2-3-1.テーブルを作成する」で作成したテーブル「01_table_green」を選択します。

画面のテキストボックスについても、カラムの設定をします。
テキスト1であれば、input1
テキスト9であれば、input9を選択します。 

同様に、画面設計画面から「11_サブフォーム赤」を選択し、フォームをクリックし、プロパティーエリアの「データ」＞「内容」からテーブル名に上記「2-3-1.テーブルを作成する」で作成したテーブル「02_table_red」を選択します。

画面のテキストボックスについても、カラムの設定をします。
テキスト1~テキスト5まで繰り返し設定をします。
テキスト1であれば、input1
テキスト5であれば、input5を選択します。

以上の設定を行うことにより、 各テキストボックスへの入力内容がテーブルに反映されるようになります。

3.パラメーター

パラメーターを変更することで、簡単にサブフォームの位置や大きさ、表示するフォームなどを設定することができますので、それらを活用して、デザイン性に富んだ、わかりやすい画面を作成してみましょう。

また、画面操作時に呼び出す動作を設定することで、アプリユーザーがサブフォームをスワイプした際に、アプリにさまざまな動作を実行させることができます。

オブジェクト

基本情報

動作設定

可否

デザイン

色と形