IM-BloomMaker for Accel Platform IM-BloomMaker チュートリアルガイド 第6版 2024-06-01

4.2.4. レイアウトを設定する

アプリケーションの画面レイアウトの設定を行います。

4.2.4.1. 大まかなレイアウトを決める

「メインエリアのレイアウトを選択してください。」の下に、レイアウトの一覧が表示されています。
  1. 今回は、後述の「レイアウトを細かく調整する」の説明のために、左上(分割なし)を選択します。

    ../../../../_images/layout_selection_01.png
    図:レイアウトの選択
  2. ページ中央に、エリア一つだけのレイアウトが作成されます。

    ../../../../_images/layout_selection_02.png
    図:レイアウト選択後

4.2.4.2. レイアウトを細かく調整する

今回作成する画面は、上部に検索エリア、下部に一覧が表示されるレイアウトのため、エリアが二つ必要です。
  1. 上記の手順で作成されたエリアをクリックして選択し、右クリックします。

  2. 表示された右クリックメニューから「部品エリア」>「下に部品を追加」をクリックします。

    ../../../../_images/layout_selection_03.png
    図:部品エリアの追加
  3. 選択したエリアの下に新しいエリアが作成されます。

    ../../../../_images/layout_selection_04.png
    図:右クリックメニュー操作後
次節「部品を配置する」では、各エリアに部品を配置していきます。