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

4.9. エレメントのプロパティを設定する

次に、配置した各エレメントにプロパティを設定します。

4.9.1. プロパティを設定する

プロパティは、コンテナ上の設定を行いたいエレメントをクリックすることで、エレメントごとに設定できる内容のプロパティが表示されます。
ここでは、配置した各エレメントに対してプロパティを設定していきます。
はじめに、「New Page #1」ページの各エレメントのプロパティを設定します。
  1. 「デザイナ」画面左部、コンテナヘッダから「New Page #1」を選択します。

  2. 「テキスト入力」エレメントをクリックします。

    ../../../_images/set_element_property_01.png
    図:「テキスト入力」エレメント
  3. 「デザイナ」画面右側に「テキスト入力」エレメントに関するプロパティが表示されます。

    ../../../_images/set_element_property_02.png
    図:「テキスト入力」エレメントのプロパティ
  4. 「エレメント固有」プロパティを以下のとおりに設定します。

    • value :

      • 変数値を選択
      • $variable.input_text
    ../../../_images/set_element_property_03.png
    図:「テキスト入力」エレメント - 「エレメント固有」プロパティの設定
    変数はテキストボックスにある「検索」アイコンから「変数セレクタ」を開くことで、選択ができます。
    ../../../_images/set_element_property_04.png
    図:変数セレクタ
  5. 「ボタン」エレメントをクリックします。

  6. 「デザイナ」画面右側に「ボタン」エレメントに関するプロパティが表示されます。

  7. 「エレメント固有」プロパティを以下のとおりに設定します。

    • value :

      • 固定値を選択
      • ダイアログを開く
    ../../../_images/set_element_property_05.png
    図:「ボタン」エレメント - 「エレメント固有」プロパティの設定
  8. 「イベント」プロパティを以下のとおりに設定します。

    • クリック時 : 「ダイアログを開く」
    ../../../_images/set_element_property_06.png

    図:「ボタン」エレメント - 「イベント」プロパティの設定

以上で、「New Page #1」ページの各エレメントのプロパティ設定が完了しました。
プロパティに設定した内容は自動で保持されます(プロパティごとに保存アクションを行う必要はありません)。
次に、「New Page #2」ページの各エレメントのプロパティを設定します。
  1. 「デザイナ」画面左部、コンテナヘッダから「New Page #2」を選択します。

  2. 「見出しレベル1」エレメントをクリックします。

  3. 「デザイナ」画面右側に「見出しレベル1」エレメントに関するプロパティが表示されます。

  4. 「エレメント固有」プロパティを以下のとおりに設定します。

    • textContent :

      • 変数値を選択
      • $variable.input_text
    ../../../_images/set_element_property_07.png
    図:「見出しレベル1」エレメント - 「エレメント固有」プロパティの設定
  5. 「ボタン」エレメントをクリックします。

  6. 「デザイナ」画面右側に「ボタン」エレメントに関するプロパティが表示されます。

  7. 「エレメント固有」プロパティを以下のとおりに設定します。

    • value :

      • 固定値を選択
      • ダイアログを閉じる
    ../../../_images/set_element_property_08.png
    図:「ボタン」エレメント - 「エレメント固有」プロパティの設定
  8. 「イベント」プロパティを以下のとおりに設定します。

    • クリック時 : 「ダイアログを閉じる」
    ../../../_images/set_element_property_09.png
    図:「ボタン」エレメント - 「イベント」プロパティの設定
以上で、プロパティ設定が全て完了しました。
次節「プレビュー画面を表示する」では、作成したアプリケーション画面の見た目や動作を確認するための、「プレビュー」画面の表示方法を説明します。