IM-BloomMaker for Accel Platform IM-BloomMaker チュートリアルガイド 第2版 2019-12-01

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

ここから、スケジュール登録を行うアプリケーション画面の作成を開始します。
「デザイナ」画面を利用し、アプリケーションを構成するエレメントを配置します。

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

はじめに、レイアウトに分類されるエレメントを配置します。
  1. 「レイアウト(imui)」に分類されるエレメントの一覧から、「フォームコンテナ」をドラッグ&ドロップでコンテナに配置します。

    ../../../_images/schedule_registration_placement_element_01.png
    図:「フォームコンテナ」エレメントの配置
  2. 配置した「フォームコンテナ」エレメント内の「入力フォーム用テーブル」エレメントを選択します。

    「エレメント固有」プロパティを以下のとおりに設定します。
    • rowCount : 4
    ../../../_images/schedule_registration_placement_element_02.png
    図:「入力フォーム用テーブル」エレメント - 「エレメント固有」プロパティの設定
  3. 「レイアウト」に分類されるエレメントの一覧から、「ボックス」を以下のとおりに配置します。

    • 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント内に2つ配置
    ../../../_images/schedule_registration_placement_element_03.png
    図:「ボックス」エレメントの配置
  4. 「レイアウト」に分類されるエレメントの一覧から、「フレックスコンテナ」を以下のとおりに配置します。

    • 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 下側の「ボックス」エレメント内に1つ配置
    ../../../_images/schedule_registration_placement_element_04.png
    図:「フレックスコンテナ」エレメントの配置
  5. 「フレックスコンテナ」エレメントを選択します。

    「エレメント固有」プロパティを以下のとおりに設定します。
    • elementCount : 2
    ../../../_images/schedule_registration_placement_element_05.png
    図:「フレックスコンテナ」エレメント - 「エレメント固有」プロパティの設定
以上で、レイアウトに分類されるエレメントの配置が完了しました。
次に、フォーム部品に分類されるエレメントを配置します。
  1. 「フォーム部品」に分類されるエレメントの一覧から、「ラジオボタン」を以下のとおりに配置します。

    • 「入力フォーム用テーブル」エレメント - 1段目の「データセル」エレメント内に2つ配置
    ../../../_images/schedule_registration_placement_element_06.png
    図:「ラジオボタン」エレメントの配置
  2. 「フォーム部品」に分類されるエレメントの一覧から、「テキスト入力」を以下のとおりに配置します。

    • 「入力フォーム用テーブル」エレメント - 2段目の「データセル」エレメント内に1つ配置
    ../../../_images/schedule_registration_placement_element_07.png
    図:「テキスト入力」エレメントの配置
  3. 「フォーム部品(imui)」に分類されるエレメントの一覧から、「日付入力」を以下のとおりに配置します。

    • 「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント内に2つ配置
    ../../../_images/schedule_registration_placement_element_08.png
    図:「日付入力」エレメントの配置
  4. 「フォーム部品」に分類されるエレメントの一覧から、「プルダウン」を以下のとおりに配置します。

    • 「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 各「日付入力」エレメントの右に1つずつ配置
    ../../../_images/schedule_registration_placement_element_09.png
    図:「プルダウン」エレメントの配置
  5. 「フォーム部品」に分類されるエレメントの一覧から、「テキストエリア」を以下のとおりに配置します。

    • 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 上側の「ボックス」エレメント内に1つ配置
    ../../../_images/schedule_registration_placement_element_10.png
    図:「テキストエリア」エレメントの配置
  6. 「フォーム部品(imui)」に分類されるエレメントの一覧から、「ボタン」を以下のとおりに配置します。

    • 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 左側の「フレックスコンテナ」エレメント内に1つ配置
    ../../../_images/schedule_registration_placement_element_11.png
    図:「ボタン」エレメントの配置
  7. 「フォーム部品(imui)」に分類されるエレメントの一覧から、「オペレーションパーツ」を以下のとおりに配置します。

    • 「フォームコンテナ」エレメント内 - 「入力フォーム用テーブル」エレメントの下に1つ配置
    ../../../_images/schedule_registration_placement_element_12.png
    図:「オペレーションパーツ」エレメントの配置
  8. 「オペレーションパーツ」エレメント内の左側の「ボタン」エレメントを選択します。

    ツールバーから、「削除」アイコンをクリックします。
    ../../../_images/schedule_registration_placement_element_13.png
    図:「ボタン」エレメントの削除
以上で、フォーム部品に分類されるエレメントの配置が完了しました。
最後に、汎用、および、パーツに分類されるエレメントを配置します。
  1. 「汎用」に分類されるエレメントの一覧から、「ラベル」を以下のとおりに配置します。

    • 「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 1つ目の「プルダウン」エレメントの右側に1つ配置
    ../../../_images/schedule_registration_placement_element_14.png
    図:「ラベル」エレメントの配置
  2. 「パーツ(imui)」に分類されるエレメントの一覧から、「アイコン」を以下のとおりに配置します。

    • 「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 「フレックスコンテナ」エレメント - 右側のエレメント内に1つ配置
    ../../../_images/schedule_registration_placement_element_15.png
    図:「アイコン」エレメントの配置
以上で、エレメントの配置が完了しました。
次節「変数、定数を定義する」では、作成するアプリケーション画面の変数、および、定数を定義します。