サポート > リポジトリ > レイアウト > 入れ子レイアウトと隠しレイアウト

縦並びと横並びの組み合わせや、レイアウトの中に別のレイアウトを入れ子にして指定することができます。

縦並びレイアウト内に、横並びレイアウトを組み合わせる例を図1に示します。

図1 縦並びレイアウト内の横並びレイアウト

レイアウト設計

横並びと縦並びを組み合わせたレイアウトから続けます。

新しいグループを用意し、「郵便番号」と「住所」項目をドラッグ&ドロップで移動します。

図2 新しいグループを用意する
図3 ドラッグ&ドロップで項目を移動する

このグループをマウスで選択し、ドラッグ&ドロップで「会社情報」グループの中へ配置します。

図4 グループの中にグループを配置する

このグループを選択し、左側の設定欄を修正します。

ラベルを空欄とし、並び方向を横にします。表示比率は「30%,70%」と入力します。

その後、「四角で囲む」を解除します。

図5 設定欄の値を修正する
「四角で囲む」を解除すると、ラベルの変更が行えなくなります。そのため最初にラベルを空欄とし、最後に「四角で囲む」を解除するとよいでしょう。

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

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

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

リポジトリの確認

ここまでの設定が、どのようにリポジトリに反映されたかを確認します。

入れ子の構造

「会社情報」というレイアウト内に、さらにレイアウト「*P3」が設定されていることがわかります。
レイアウトの入れ子は「>」文字を使って表現されます。

レイアウト>レイアウト

レイアウトの入れ子は何層にわたって行うことができます。

隠しレイアウト

ラベルを空欄とし、さらに「四角で囲む」を解除したとき、レイアウト名の先頭に「*」が付与されます。これは隠しレイアウトとなり、表示時にパネルが用意されません。レイアウトの並びを縦、横、縦...と入れ子にして組み合わせるときに、隠しレイアウトは効果を発揮します。

アスタリスク「*」のあとに続くレイアウト名は英数字の組み合わせで表現します。標準では "P" が用いられます。

図7 リポジトリの確認 (1)
図8 リポジトリの確認 (2)

全体を横並びとし、入れ子内のレイアウトを縦並びとした例を図9に示します。

図9 横並びと縦並びの組み合わせ

レイアウト設計

「横並びと縦並びを組み合わせたレイアウト」から続けます。

図10の会社情報グループを変更していきます。

図10 会社情報グループ

新しいグループを二つ用意します。

図11 新しいグループを用意する

会社情報グループにあった4つの項目を、新しいグループ内に移動します。

図12 4つの項目を移動する

会社情報グループ内の入れ子グループとします。

図13 ドラッグ&ドロップで入れ子構造とする

会社情報グループ全体を選択し、横並びとします。比率は「50%,50%」とします。

図14

入れ子内の新規グループを選択し、ラベルを空白とします。

図15 ラベルを空白とする

「四角で囲む」を解除します。

図16 四角で囲むを解除する

もう一つのグループも同様にします。すべての設定が終わったら「レイアウト設定保存」を行います。

図17 レイアウト設定を保存する

リポジトリの確認

ここまでの設定が、どのようにリポジトリに反映されたかを確認します。

二つの隠しレイアウト *P3 と *P4 が用意されていることがわかります。アスタリスク「*」に続くレイアウト名は表示時にパネルが用意されません。

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

隠しレイアウトは「四角で囲む」も解除されています。

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

「顧客」レイアウトの中に隠しレイアウトと「会社」レイアウトを混在させた例を説明します。

図20 隠しレイアウトの混在

レイアウト設計

今回用いるモデルを図21に示します。

図21 サンプルモデル

初期状態は、項目が順序よく整列されています。

図22 初期のレイアウト

3つのグループを用意します。

図23 3つのグループを用意する

それぞれのグループに項目を配置します。

図24 グループに項目を配置する

「新規グループ1」と「新規グループ3」は、ラベルを空白とし、「四角で囲む」を解除します。「新規グループ2」は、ラベルを「会社」に変更します。

図25 新規グループ1の設定
図26 新規グループ2の設定
図27 新規グループ3の設定

全体を囲むグループ「顧客」を用意します。

図28 「顧客」グループを用意する

すでに用意した3つのグループを「顧客」グループの内部に配置します。

図29 顧客グループへの配置

並び方向を横とし、表示比率を33%,34%,33%とします。ここまでの設定を保存します。

図30 並び方向と表示比率の設定

リポジトリの確認

ここまでの設定が、どのようにリポジトリに反映されたかを確認します。レイアウト名は隠しレイアウトが含まれていることがわかります。

図31 レイアウト名の確認

グループの表示方法と並び方向も設定が反映されていることを確認できます。

図32 グループの表示方法の確認

隠しレイアウトを横並び(比率50%,50%)とし、その中にレイアウトを入れ子にして設定しています。

図33 隠しレイアウトの中に入れ子構造でレイアウトを横並びで配置する

レイアウト設計

初期状態のレイアウトを図34とします。

図34 初期状態のレイアウト

「顧客」グループと「会社」グループを用意します。

図35 「顧客」グループと「会社」グループを用意する

図36

それぞれのグループに項目を配置します。

図37 グループ内に項目を配置する

全体を収容するグループを作成します。

図38 もう一つのグループを用意する

全体を収容するグループのラベルを空白とします。横並びで表示比率を50%,50%とします。

図39 ラベル、並び、表示比率の設定

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

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

図40 レイアウト設定を保存する

もっとも外側のレイアウトを隠しレイアウトにする

今回の設定は、さらにこのあとリポジトリを直接、編集する箇所があります。「リポジトリ」タブを開きます。レイアウト名はそのまま利用します。

図41 リポジトリの内容を確認する (1)

「グループ・タブ」タブを開きます。図42のようになっています。

図42 リポジトリの内容を確認する (2)

ラベル幅を「0%」と明記します。

隠しレイアウト(ここでは *P3)の内部のレイアウトがすべて「ラベル幅0%」の場合、隠しレイアウトを囲う枠が非表示になります。
図43 グループのラベル幅を手動で修正する
Wagby Developer Day 2018