スクリーンエディタを用いてマウス操作で項目を配置することができます。

ここでは図1のモデル定義を用いて、レイアウトの定義方法を学びます。

図1 サンプルのモデル定義

レイアウトの定義

画面レイアウトの設計は、"レイアウト" タブで行います。

タブ説明
検索 検索画面のレイアウトイメージを編集するスクリーンエディタです。[後述]
一覧 一覧表示画面のレイアウトイメージを編集するスクリーンエディタです。[後述]
詳細 詳細画面のレイアウトイメージを編集するスクリーンエディタです。このレイアウトは登録、更新画面でも用いられます。このページで説明します。
リポジトリ 検索、一覧、詳細タブでレイアウトした情報は、すべてリポジトリに反映されます。リポジトリを直接、操作してレイアウトを定義することもできます。つまりレイアウト定義はスクリーンエディタもしくはリポジトリ編集の両方を行き来しながら設計できる、2-Way方式となっています。

ここではレイアウトタブの詳細タブを開きます。標準では、モデル項目の並びがそのまま画面に反映されています。

図2 レイアウト定義のためのスクリーンエディタ

ビルドしたアプリケーションは、図2の画面と同様のイメージとなっています。

図3 ビルドしたアプリケーションの画面

スクリーンエディタの画面と、実際にビルドしたアプリケーション画面との違い

スクリーンエディタは、各項目の「配置」に特化して編集できるようになっています。 そのため、配色(CSS) や各種ボタン、そして項目の入力フィールド長などはビルドしたアプリケーションで確認するようになっています。

複数の項目を「グループ」内に配置し、これを横に並べるというレイアウトデザインです。

図4では「顧客氏名」と「顧客カナ」項目が「個人情報」というグループの中で横に並んでいます。

図4 横並びの例

レイアウト設計

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

図5 グループの追加

右側のレイアウト画面部に、グループ(パネル)が用意されます。

図6 グループが用意された

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

図7 グループを選択する

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

図8 グループ名を変更する (1)
図9 グループ名を変更する (2)

レイアウト画面部に配置された項目およびグループは、ドラッグ&ドロップ操作で配置を変更することができます。ここでは「個人情報」グループを上部に配置してみます。

図10 ドラッグ&ドロップで配置を入れ替える

さらに、「顧客氏名」と「顧客カナ」項目をドラッグ&ドロップで「個人情報」グループ内に配置します。

図11 項目をグループ内に配置する (1)
図12 項目をグループ内に配置する (2)
図13 項目をグループ内に配置する (3)

再び「個人情報」グループ全体をマウスで選択します。左側の設定欄が有効になります。

図14 グループを選択する

「並び方向」を「横」とし、表示比率を「50%,50%」と入力します。

図15 並び方向と比率を指定する (1)
Wagbyの項目配置は絶対座標ではなく、比率で設定します。

表示比率を入力してタブキーを押すことで、レイアウト画面に反映されます。

図16 並び方向と比率を指定する (2)

スクリーンエディタの編集を保存する

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

図17 レイアウト設定を保存する
ご注意ください。「レイアウト設定保存」ボタンを押下せずに他の画面に切り替えた場合、これまでの編集内容は反映されません。

リポジトリの確認

ここまでの設定が、どのようにリポジトリに反映されたかを確認します。「リポジトリ」タブを開きます。「レイアウト名」タブには、グループ名として入力した値がレイアウト名に反映されていることがわかります。「表示順」は、レイアウト画面での項目の並び順序が反映されています。

図18 リポジトリの確認 (1)

さらに「グループ・タブ」を確認します。レイアウト名「個人情報」の設定欄が反映されていることがわかります。

図19 リポジトリの確認 (2)
開発者はこのリポジトリを直接、入力することもできます。ここで入力した値は、「詳細」タブを開くとレイアウト画面に反映されています。

項目を縦に並べた例を図20に示します。

図20 項目の縦並び

レイアウト設計

グループの並び方向を「縦」とします。縦並びの場合、表示比率は無視されます。

図21 並び方向の指定
並び方向の標準は「縦」となっています。

一つの画面に、横並びと縦並びの項目を混在させることができます。

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

レイアウト設計

図17で、「個人情報」グループに項目を横並びで設定しました。この続きとして説明します。「会社情報」を格納する新しいグループを用意します。ラベル名は「会社情報」とします。

図23 新しいグループ「会社情報」を用意する (1)
図24 新しいグループ「会社情報」を用意する (2)

項目をドラッグ&ドロップし、会社情報グループ内に配置します。

図25 ドラッグ&ドロップで項目を配置する (1)
図26 ドラッグ&ドロップで項目を配置する (2)

「会社情報」グループを選択し、ドラッグ&ドロップして位置を変えます。

図27 ドラッグ&ドロップで会社情報グループの位置を変更する (1)
図28 ドラッグ&ドロップで会社情報グループの位置を変更する (2)

スクリーンエディタの編集を保存する

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

図29 レイアウト設定保存ボタン
ご注意ください。「レイアウト設定保存」ボタンを押下せずに他の画面に切り替えた場合、これまでの編集内容は反映されません。

リポジトリの確認

ここまでの設定が、どのようにリポジトリに反映されたかを確認します。「レイアウト名」には「個人情報」と「会社情報」がそれぞれ設定されています。

図30 リポジトリの確認 (1)

「グループ・タブ」を確認します。レイアウト名「個人情報」「会社情報」の設定がそれぞれ反映されていることがわかります。

図31 リポジトリの確認 (2)

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

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