レイアウト(基本編)

最終更新日: 2024年12月27日

Wagby Developer Day 2026

はじめに

アプリケーションの画面設計は、項目毎の位置、大きさ、隣の項目との関係性などを指定して行っていきます。
使いやすいアプリケーションデザインを実現する、細やかな設計が行えます。

レイアウトを定義した新規登録画面の例

スクリーンエディタ設定一覧

レイアウト設計に関する設定項目は以下の通りです。

基本的な操作
項目の移動など、スクリーンエディタの基本操作を説明しています。
入れ子レイアウトと隠しレイアウト
縦並びと横並びの組み合わせや、レイアウトの中に別のレイアウトを入れ子にして指定することができます。
ウィザードとタブレイアウト
一画面に多くの項目がある場合、ウィザードまたはタブレイアウトで整理することができます。
タイトルペイン
複数の項目をタイトルペインに格納し、表示と非表示を切り替えることができます。
検索条件の並び順
検索条件の並び順を変更する方法を説明します。
範囲検索条件の入力欄のレイアウト
検索画面の範囲指定項目は均等割り付けと左寄せのいずれかを指定できます。
検索条件部の段組レイアウト
一覧表示の各項目を複数行にまたがって表示することができます。
検索条件欄を折り畳む
検索条件欄を折り畳んで表示するレイアウトを説明します。
検索条件のタブレイアウト
検索条件部にタブレイアウトを適用する方法を説明します。
一覧表示の並び順
一覧表示の並び順を変更する方法を説明します。
一覧表示 - 複数段一行明細(多段)レイアウト
一覧表示の各項目を複数行にまたがって表示することができます。
繰り返しコンテナ - 列幅の調整
繰り返しコンテナの列幅を調整することができます。
繰り返しコンテナ - スクロールバーの表示(と幅、高さの設定)
繰り返しコンテナの表示領域を固定とし、縦・横スクロールバーを表示します。
繰り返しコンテナ、外部キー子モデル一覧を任意の位置に配置する
繰り返しコンテナまたは外部キー子モデル一覧の位置を指定する方法を説明します。