基本構成

レイアウトの定義方法

ここでは下図のモデルを例に、レイアウトの定義方法を説明します。

画面レイアウトの設計は、モデル定義画面の「レイアウト」タブより行います。

デフォルトでは、各画面のモデル項目はモデル定義と同じ並び順で表示されるようになっています。

ビルドしたアプリケーションは図2と同じレイアウトが反映されます。

スクリーンエディタの画面とアプリケーション画面の違い

スクリーンエディタは、各項目の「配置」を編集する画面です。
そのため、配色（CSS） や各種ボタン、そして項目の入力フィールド長など実際の見た目はビルドしたアプリケーションで確認します。

項目を横に並べる

複数項目をグルーピングし、横並びで表示するレイアウトです。
下図では、「顧客氏名」と「顧客カナ」項目が「個人情報」というグループとして横並びに表示されています。

設定方法

スクリーンエディタを使った設定

スクリーンエディタを使って設定することができます。[詳細...]

リポジトリの設定

レイアウト名の欄にグループ名「個人情報」と入力します。また、表示順を設定します。

「グループ・タブ」を設定します。レイアウト名「個人情報」を「四角で囲む」とし、横並びで比率を指定します。比率はパーセント指定で、コンマ区切りとします。

項目を縦に並べる

複数項目をグルーピングし、縦並びで表示するレイアウトです。

設定方法

スクリーンエディタを使った設定

スクリーンエディタを使って設定することができます。[詳細...]

リポジトリの設定

1. モデルの編集画面で、「レイアウト」>「リポジトリ」>「レイアウト名」タブをクリックして開きます。

   

2. まずは、グループを作成します。
   グループ化したいモデル項目の「レイアウト名」欄にそれぞれグループ名を入力します。
   

   

3. 続いて、作成したグループの表示設定を行っていきます。
   「グループ・タブ」タブをクリックして開きます。
   ギアアイコン＞新規 をクリックしてグループを追加します。

   

4. 縦並びの設定をします。
   「レイアウト名」欄で先程追加したグループ名を選びます。
   「グループの表示方法」は「四角で囲む」、「並び方向」は「縦↓」を選択します。
   これで設定は完了です。

   

横並びと縦並びを組み合わせる

縦並びのグループと横並びのグループを組み合わせて、下図のようなレイアウトにすることができます。

設定方法

スクリーンエディタを使った設定

スクリーンエディタを使って設定することができます。[詳細...]

リポジトリの設定

「レイアウト名」には「個人情報」と「会社情報」をそれぞれ設定します。

「グループ・タブ」を確認します。レイアウト名「個人情報」「会社情報」の設定は図10のようにします。

画面サイズを変えてみる

画面レイアウトは比率で設定するため、画面サイズを拡大・縮小してもレイアウトイメージは変わりません。