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

目次 ≪ 5.1.4. アクションを設定する 5.1.6. アプリケーションの動作を確認する ≫

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

次に、アプリケーション画面に配置した各エレメントにプロパティを設定をします。

エレメント固有プロパティを設定する
共通プロパティを設定する
スタイルプロパティを設定する
イベントプロパティを設定する

5.1.5.1. エレメント固有プロパティを設定する ¶

エレメント固有プロパティの設定を行います。

はじめに、フォームのコンテナ部分のエレメントのプロパティを設定します。

「フォームコンテナ」エレメントの「エレメント固有」プロパティを以下のとおりに設定します。
- containerType :
  「固定値」
  
  「90% (wide)」
図：「フォームコンテナ」エレメント - 「エレメント固有」プロパティの設定

次に、見出し部分のエレメントのプロパティを設定します。

「フォームコンテナ」エレメント内 - 「見出しレベル2」エレメントを以下のとおりに設定します。
- textContent :
  「変数値」
  
  $i18n.schedule_registration
図：「見出しレベル2」エレメント - 「エレメント固有」プロパティの設定

次に、フォーム部分のエレメントのプロパティを設定します。

「入力フォーム用テーブル」エレメント - 1段目の「見出しセル」エレメントを以下のとおりに設定します。
- textContent :
  「変数値」
  
  $i18n.type
図：「見出しセル」エレメント - 「エレメント固有」プロパティの設定
同様に、他の「見出しセル」エレメントを以下のとおりに設定します。
- 2段目の「見出しセル」エレメント :
  required :
  
  「固定値」
  
  チェックを入れる
  
  textContent :
  
  「変数値」
  
  $i18n.title
- 3段目の「見出しセル」エレメント :
  required :
  
  「固定値」
  
  チェックを入れる
  
  textContent :
  
  「変数値」
  
  $i18n.period
- 4段目の「見出しセル」エレメント :
  required :
  
  「固定値」
  
  チェックを入れる
  
  textContent :
  
  「変数値」
  
  $i18n.participant
図：「エレメント固有」プロパティの設定後の「見出しセル」エレメント
「入力フォーム用テーブル」エレメント - 1段目の「データセル」エレメント - 左の「ラジオボタン」エレメントを以下のとおりに設定します。
- textContent :
  「変数値」
  
  $i18n.schedule
- name :
  「固定値」
  
  scheduleType
- value :
  「固定値」
  
  schedule
- selected :
  「変数値」
  
  $variable.requestData.scheduleType
図：「ラジオボタン」エレメント - 「エレメント固有」プロパティの設定
同様に、右の「ラジオボタン」エレメントを以下のとおりに設定します。
- textContent :
  「変数値」
  
  $i18n.event
- name :
  「固定値」
  
  scheduleType
- value :
  「固定値」
  
  event
- selected :
  「変数値」
  
  $variable.requestData.scheduleType
図：「ラジオボタン」エレメント - 「エレメント固有」プロパティの設定
「入力フォーム用テーブル」エレメント - 2段目の「データセル」エレメント - 「テキスト入力」エレメントを以下のとおりに設定します。
- value :
  「変数値」
  
  $variable.requestData.title
図：「テキスト入力」エレメント - 「エレメント固有」プロパティの設定
「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 左の「日付入力」エレメントを以下のとおりに設定します。
- value :
  $variable.requestData.startDate
図：「日付入力」エレメント - 「エレメント固有」プロパティの設定
同様に、右の「日付入力」エレメントを以下のとおりに設定します。
- value :
  $variable.requestData.endDate
図：「日付入力」エレメント - 「エレメント固有」プロパティの設定
「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 左の「プルダウン」エレメントを以下のとおりに設定します。
- labels :
  「変数値」
  
  $variable.timePicker
- values :
  「変数値」
  
  $variable.timePicker
- value :
  「変数値」
  
  $variable.requestData.startTime
図：「プルダウン」エレメント - 「エレメント固有」プロパティの設定
同様に、右の「プルダウン」エレメントを以下のとおりに設定します。
- labels :
  「変数値」
  
  $variable.timePicker
- values :
  「変数値」
  
  $variable.timePicker
- value :
  「変数値」
  
  $variable.requestData.endTime
図：「プルダウン」エレメント - 「エレメント固有」プロパティの設定
「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 「ラベル」エレメントを以下のとおりに設定します。
- textContent :
  「固定値」
  
  -
図：「ラベル」エレメント - 「エレメント固有」プロパティの設定
「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 上の「ボックス」エレメント内 - 「テキストエリア」エレメントを以下のとおりに設定します。
- readonly :
  「固定値」
  
  チェックを入れる
- value :
  「変数値」
  
  $variable.participantsList
図：「テキストエリア」エレメント - 「エレメント固有」プロパティの設定
「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 下の「ボックス」エレメント内 - 左の「フレックスコンテナ」エレメント内 - 「ボタン」エレメントを以下のとおりに設定します。
- style :
  「固定値」
  
  「button」
- value :
  「変数値」
  
  $i18n.select_user
図：「ボタン」エレメント - 「エレメント固有」プロパティの設定
同様に、右の「フレックスコンテナ」エレメント内 - 「アイコン」エレメントを以下のとおりに設定します。
- iconClass :
  「im-ui-icon-common-16-clear」
図：「アイコン」エレメント - 「エレメント固有」プロパティの設定

最後に、登録ボタン部分のエレメントのプロパティを設定します。

「フォームコンテナ」エレメント内 - 「オペレーションパーツ」エレメント - 「ボタン」エレメントを以下のとおりに設定します。
- value :
  「変数値」
  
  $i18n.register
図：「ボタン」エレメント - 「エレメント固有」プロパティの設定

以上で、エレメント固有プロパティの設定が完了しました。

5.1.5.2. 共通プロパティを設定する ¶

共通プロパティの設定を行います。

「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 左の「プルダウン」エレメントを以下のとおりに設定します。
- 表示 / 非表示 :
  「変数値」
  
  $variable.showTimePicker
図：「プルダウン」エレメント - 「共通」プロパティの設定
同様に、右の「プルダウン」エレメントを以下のとおりに設定します。
- 表示 / 非表示 :
  「変数値」
  
  $variable.showTimePicker
図：「プルダウン」エレメント - 「共通」プロパティの設定

コラム

「表示 / 非表示」プロパティでは、画面にエレメントを表示するか指定します。

真偽値の変数「$variable.showTimePicker」を設定することで、表示 / 非表示を制御できます。

以上で、共通プロパティの設定が完了しました。

5.1.5.3. スタイルプロパティを設定する ¶

スタイルプロパティの設定を行います。

「入力フォーム用テーブル」エレメント - 1段目の「データセル」エレメント - 左の「ラジオボタン」エレメントを以下のとおりに設定します。
- 「余白」プロパティ :
  外余白（右） :
  
  「固定値」
  
  0.4em
図：「ラジオボタン」エレメント - 「余白」プロパティの設定
「入力フォーム用テーブル」エレメント - 2段目の「データセル」エレメント - 左の「テキスト入力」エレメントを以下のとおりに設定します。
- 「幅・高さ」プロパティ :
  横幅 :
  
  「固定値」
  
  90%
図：「テキスト入力」エレメント - 「幅・高さ」プロパティの設定
「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント - 各エレメントを以下のとおりに設定します。
- 左右の「日付入力」エレメント
  「余白」プロパティ :
  
  外余白（右） :
  
  「固定値」
  
  0.4em
- 左の「プルダウン」エレメント
  「余白」プロパティ :
  
  外余白（右） :
  
  「固定値」
  
  0.4em
- 「ラベル」エレメント
  「余白」プロパティ :
  
  外余白（右） :
  
  「固定値」
  
  0.4em
図：「余白」プロパティ設定後の「入力フォーム用テーブル」エレメント - 3段目の「データセル」エレメント
「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 上の「ボックス」エレメント内 - 「テキストエリア」エレメントを以下のとおりに設定します。
- 「幅・高さ」プロパティ :
  横幅 :
  
  「固定値」
  
  100%
図：「テキストエリア」エレメント - 「幅・高さ」プロパティの設定
「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 下の「ボックス」エレメントを以下のとおりに設定します。
- 「余白」プロパティ :
  外余白（上） :
  
  「固定値」
  
  10px
図：「ボックス」エレメント - 「余白」プロパティの設定
「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 下の「ボックス」エレメント内 - 右の「フレックスコンテナ」エレメントを以下のとおりに設定します。
- 「テキストスタイル」プロパティ :
  横揃え :
  
  「固定値」
  
  「end」
図：「フレックスコンテナ」エレメント - 「テキストスタイル」プロパティの設定

以上で、スタイルプロパティの設定が完了しました。

5.1.5.4. イベントプロパティを設定する ¶

イベントプロパティの設定を行います。

はじめに、ページ読み込み時のイベントを設定します。

ページ読み込み時のイベントは、「コンテナ」に対して設定できます。

「デザイナ」画面上部、ヘッダ内の「コンテナを選択」アイコンをクリックします。

図：ヘッダ - 「コンテナを選択」アイコン
「イベント」プロパティを以下のとおりに設定します。
- ページ読み込み時 : 「Set Time Picker」
図：「コンテナ」 - 「イベント」プロパティの設定

以上で、ページ読み込み時のイベントの設定が完了しました。

次に、各エレメントに対してイベントプロパティを設定します。

「入力フォーム用テーブル」エレメント - 1段目の「データセル」エレメント - 左の「ラジオボタン」エレメントを以下のとおりに設定します。
- 入力値変更時 : 「Switch Display of Term Item」
図：「ラジオボタン」エレメント - 「イベント」プロパティの設定
同様に、右の「ラジオボタン」エレメントを以下のとおりに設定します。
- 入力値変更時 : 「Switch Display of Term Item」
図：「ラジオボタン」エレメント - 「イベント」プロパティの設定
「入力フォーム用テーブル」エレメント - 4段目の「データセル」エレメント - 下の「ボックス」エレメント内 - 左の「フレックスコンテナ」エレメント内 - 「ボタン」エレメントを以下のとおりに設定します。
- クリック時 : 「Select User」
図：「ボタン」エレメント - 「イベント」プロパティの設定
同様に、右の「フレックスコンテナ」エレメント内 - 「アイコン」エレメントを以下のとおりに設定します。
- クリック時 : 「Clear Participants」
図：「アイコン」エレメント - 「イベント」プロパティの設定
「フォームコンテナ」エレメント内 - 「ボックス」エレメント - 「ボタン」エレメントを以下のとおりに設定します。
- クリック時 : 「Confirm Input Contents」
図：「ボタン」エレメント - 「イベント」プロパティの設定

以上で、アプリケーション画面に配置した各エレメントのプロパティの設定が完了しました。

次節「アプリケーションの動作を確認する」では、作成したアプリケーションを実行し、実行結果の確認を行います。

目次 ≪ 5.1.4. アクションを設定する 5.1.6. アプリケーションの動作を確認する ≫