IM-BloomMaker for Accel Platform IM-BloomMaker チュートリアルガイド 初版 2019-08-30

4.6. エレメントを配置する

次に、アプリケーション画面を構成する「エレメント」を配置し、アプリケーション画面を構成します。

4.6.1. エレメントとは

アプリケーション画面を構成する部品を「エレメント」といいます。

4.6.2. エレメントを配置する

本チュートリアルで作成するアプリケーションを構成するエレメントを配置します。
エレメントを配置するには、エレメントパレットからアプリケーション画面に表示させたいエレメントをコンテナにドラッグ&ドロップします。
  1. 「デザイナ」画面左部、コンテナヘッダから「New Page #1」を選択します。

  2. 「デザイナ」画面左部、エレメントパレットから「フォーム部品」を選択しクリックします。

    ../../../_images/placement_element_01.png
    図:エレメントパレット - 「フォーム部品」
  3. 「フォーム部品」に分類されるエレメントの一覧が表示されます。

    ../../../_images/placement_element_02.png
    図:「フォーム部品」エレメントの一覧
  4. 表示されたエレメントの一覧から、「テキスト入力」をドラッグ&ドロップでコンテナに配置します。

    ../../../_images/placement_element_03.png
    図:「テキスト入力」エレメントの配置
  5. 同様に「フォーム部品」エレメントの一覧から、「ボタン」をドラッグ&ドロップでコンテナに配置します。

    ../../../_images/placement_element_04.png
    図:「ボタン」エレメントの配置
以上で、「New Page #1」ページのコンテナへのエレメントの配置が完了しました。
次に、「New Page #2」ページのコンテナへエレメントを配置します。
  1. 「デザイナ」画面左部、コンテナヘッダから「New Page #2」を選択します。

  2. 「デザイナ」画面左部、エレメントパレットから「レイアウト」を選択しクリックします。

    ../../../_images/placement_element_05.png
    図:エレメントパレット - 「レイアウト」
  3. 「レイアウト」に分類されるエレメントの一覧が表示されます。

    ../../../_images/placement_element_06.png
    図:「レイアウト」エレメントの一覧
  4. 表示されたエレメントの一覧から、「見出しレベル1」をドラッグ&ドロップでコンテナに配置します。

    ../../../_images/placement_element_07.png
    図:「見出しレベル1」エレメントの配置
  5. 「New Page #1」ページの手順と同様に「フォーム部品」エレメントの一覧から、「ボタン」をドラッグ&ドロップでコンテナに配置します。

    ../../../_images/placement_element_08.png
    図:「ボタン」エレメントの配置
以上で、全てのページのコンテナへのエレメントの配置が完了しました。
次節「変数を定義する」では、作成するアプリケーションの変数を設定します。