基本構成

レイアウトの定義方法

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

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

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

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

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

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

項目を横に並べる

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

設定方法

1. 「レイアウト > 詳細」タブを開き、左側の設定欄にある「グループ」の「追加」ボタンをクリックします。

   

2. 「追加」ボタンをクリックすると、右側のレイアウト画面部にグループ（パネル）が用意されます。

   

3. レイアウト画面部のグループをクリックして選択します。
   選択すると、左側の設定欄にある「グループ」の詳細を入力できるようになります。

   

4. 設定欄の「ラベル」を変更し、Tabキーを押します。
   Tabキーを押すと、レイアウト画面部の名称が変更されます。
   ここでは「個人情報」というグループ名に変更しています。

   

5. レイアウト画面部に配置された項目およびグループは、ドラッグ&ドロップ操作で配置場所を移動できます。
   「個人情報」グループをドラッグ&ドロップで上部に配置します。

   

6. 「顧客氏名」と「顧客カナ」項目をドラッグ&ドロップで「個人情報」グループ内に配置します。 （Ctrlキーを押しながら項目をクリックすると、複数選択ができます）

   

   表示比率は自動で設定されます。
   （自動で設定されない場合は、手動で表示幅を設定してください。%で指定します。）
   入力後にTabキーを押すことで、レイアウト画面に反映されます。

   重要

   • 表示幅が未設定のときは縦並びとして解釈されます。表示比率の設定を忘れないようにしてください。
   • 表示比率は合計が100%となるように設定してください。

   

   幅をpxで指定する 9.2.0

   R9.2.0では表示幅をpxで指定することもできます。（CSSレイアウトのみ）

   

スクリーンエディタの設定内容を保存する

左側の設定欄の上部にある「レイアウト設定保存」ボタンをクリックし、編集内容を保存します。
この操作により、リポジトリに反映されます。

項目を縦に並べる

項目を縦に並べた例です。

設定方法

先述の横並びの設定と同じようにスクリーンエディタ上でグループをクリックし、グループの並び方向を「縦」とします。
縦並びの場合、表示比率は無視されます。

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

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

画面サイズを変えてみる

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

隠し項目の扱い

隠し項目の設定は詳細画面と登録・更新系画面でそれぞれ用意されています。

• 出力制御>詳細画面>隠し項目にする
• 入力制御>隠し項目

更新系、詳細画面両方とも隠し項目の場合(以下の条件に合致する)にのみ「レイアウト>詳細」設定画面の隠し項目欄に配置されます。

• 「入力制御>隠し項目」の全画面か、登録、更新、コピー登録の全てがチェックされている。
• 「出力制御>詳細画面>共通」の隠し項目にチェックされている。

更新系、詳細画面どちらか一方のみ隠し項目設定されている項目は、項目が薄く表示されます。

配置されている項目を隠し項目欄へドラッグアンドドロップする

レイアウト設定画面に配置されている項目を隠し項目欄へドラッグアンドドロップしてレイアウトを保存すると、次のようになります。

• 「入力制御>隠し項目」の全画面がチェックされます。
• 「出力制御>詳細画面>共通」の隠し項目にする、がチェックされます。
• レイアウト名、表示順がクリアされます。

隠し項目欄に配置されている項目をレイアウト設定画面へドラッグアンドドロップする

レイアウト設定画面の隠し項目欄に配置されている項目をレイアウト設定画面へドラッグアンドドロップしてレイアウトを保存すると、次のようになります。

• 「入力制御>隠し項目」の全画面、登録、更新、コピー登録が解除されます。
• 「出力制御>詳細画面>共通」の隠し項目にする、が解除されます。

ドラッグ&ドロップ操作について

ドラッグ&ドロップがうまくいかない場合

スクリーンエディタ上でドラッグ&ドロップの操作がうまく行えないときは、ドラッグ後、一度領域の外に出してから置きたい位置へドロップすると移動できます。

複数のグループを作成後、グループを移動する場合

グループをドラッグし、他のグループの上を通過するとグレーの枠線内のエリアがドロップ可能なエリアと認識されなくなり、ドラッグしているグループのアイコンが赤になります。
アイコンが赤色の時はドロップできません。
この場合も上記と同様に、ドラッグしているカーソルを一度枠線の外に出してから戻すとグレーの枠線内が黄色で表示されるようになります。
あわせて、ドラッグしているグループのアイコンがドロップ可能であることを示す緑になります。

項目を追加したときの対応

すでにレイアウトを調整したモデルに新たに項目を追加・削除したとき、追加した項目はレイアウト未設定のため標準では画面の最下部に配置されます。

項目の追加や削除を行ったときは再度、レイアウト設定画面を開き、項目を適切に配置したあと「レイアウト設定保存」ボタンを押してください。

レイアウトの初期化9.2.0

「レイアウト初期化」ボタンを押すと、設定したレイアウトを最初の状態に戻すことができます。

レイアウト初期化の実行と同時に、レイアウトが保存されます。再度「レイアウト保存」ボタンを押す必要はありません。