「縦並び」「横並び」レイアウトによって画面レイアウトを設計することができます。

レイアウトを指定しない場合、モデル項目の並びがそのまま画面に反映されます。(図1,図2)

図1 レイアウトを指定しないモデル定義
図2 標準の画面レイアウト

画面例

横並びレイアウトを設定した例を図3に示します。
「顧客名称」と「顧客カナ」項目が「個人情報」というパネルの中で、横に並んでいます。
並び比率は50%,50%となっています。

図3 横並びレイアウトの例

定義方法

「レイアウト名」のタブを開きます。レイアウト名「個人情報」を、レイアウトを指定したい項目に記入します。

図3 横並びレイアウトの指定 (1)

続いて「グループ・タブ」のタブを開きます。ギアアイコンから新規を選び、レイアウト入力欄を用意します。(図4,図5)

図4 横並びレイアウトの指定 (2)
図5 横並びレイアウトの指定 (3)

レイアウト名は図3で指定した名称を選択できます。
ここで「並び方向」を「横」とし、表示比率を「50%,50%」と入力します。

図6 横並びレイアウトの指定 (4)
Wagbyのレイアウト指定は比率で設定します。

画面例

次に縦並びレイアウトを指定した例を図8に示します。「個人情報」というパネル内で、項目が縦に並びます。

図8 縦並びレイアウトの例

定義方法

図6の設定で、並び方向を「縦」とします。縦並びの場合、表示比率は無視されますので空白とします。

図9 縦並びレイアウトの指定
図9を設定せずにビルドしても図8のように表示されます。(省略時は「縦並び」となります。)

画面例

一つの画面で、横並びレイアウトと縦並びレイアウトを混在させることができます。(図10)

図10 横並びレイアウトと縦並びレイアウトの混在

定義方法

項目毎に、レイアウト名を設定し、並び方向を決めます。(図11,図12)

図11 横並びレイアウトと縦並びレイアウトの定義(1)
図12 横並びレイアウトと縦並びレイアウトの定義(2)
レイアウト名は連続して並べる必要があります。図11において、複数のレイアウト名をばらばらに配置することはできません。

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

図13 Webブラウザの画面サイズを小さくした例
このため、異なる画面解像度のPCやタブレットで閲覧しても、ほぼ同じ画面イメージで操作することができます。