コレクションマッシュアップレイアウトの作成とデータのバインド
コレクションウィジェットを使用するには、2 つのマッシュアップを作成する必要があります。
• コレクションウィジェットを含むコレクションマッシュアップ。このマッシュアップは、サービスからコレクションデータも取得します。
• コレクション内のセルごとにリピートされるセルマッシュアップ。これは、チャート、ダイヤル、テキストフィールドなどの各セル内のレイアウトとウィジェットを定義します。このマッシュアップは動的であり、コレクションからデータを渡すマッシュアップパラメータを含んでいます。そのコンテンツは、コレクションから提供されるデータに基づいて変化します。
以下のセクションでは、これら 2 つのマッシュアップを作成する方法とコレクションデータをバインドする方法について説明します。
コレクションセルのマッシュアップの作成
1. Composer で、「新規」をクリックし、「マッシュアップ」または「マスター」を選択します。「新規マッシュアップ」ウィンドウが開きます。
2. 「レスポンシブ」を選択し、「OK」をクリックします。
3. マッシュアップの名前を入力し、「保存」をクリックします。
4. 「設計」タブをクリックして Mashup Builder インタフェースを開きます。1 つのコンテナがある空のマッシュアップがキャンバスに表示されます。
5. マッシュアップに表示するウィジェット、サービス、および関数を追加します。
6. コレクションウィジェットからマッシュアップにデータを渡すマッシュアップパラメータを定義します。
a. 「エクスプローラ」パネルを使用してマッシュアップを選択してから、「プロパティ」パネルで 
をクリックします。
をクリックします。b. 「マッシュアップパラメータ」ダイアログボックスで、コレクションウィジェットからセルマッシュアップに渡すパラメータを定義します。
c. 「完了」をクリックしてから、「保存」をクリックします。
7. コレクションからのデータを使用しているウィジェット、サービス、または関数の入力として、前の手順で定義したパラメータをバインドします。
8. マッシュアップを保存します。
必要に応じて、この手順を繰り返して、空のセルまたは選択したセルに一意のマッシュアップを作成します。
コレクションマッシュアップの作成
1. Composer で、「新規」をクリックし、「マッシュアップ」または「マスター」を選択します。「新規マッシュアップ」ウィンドウが開きます。
2. 「レスポンシブ」を選択し、「OK」をクリックします。
3. マッシュアップの名前を入力し、「保存」をクリックします。
4. 「設計」タブをクリックして Mashup Builder インタフェースを開きます。1 つのコンテナがある空のマッシュアップがキャンバスに表示されます。
5. 「レイアウト」パネルを使用してマッシュアップのレイアウトを定義してから、「コレクション」ウィジェットをキャンバスに追加します。
6. マッシュアップを保存します。
コレクションウィジェットへのデータのバインド
コレクション内にデータを表示するには、コレクションデータが格納されているインフォテーブルを返すサービスを作成する必要があります。
1. Mashup Builder でコレクションマッシュアップを開きます。
2. 「データ」パネルで、コレクションデータが格納されているインフォテーブルを返すデータサービスを追加します。
3. データサービスの All Data プロパティをウィジェット Data プロパティにバインドします。
4. コレクションサービスをランタイムで実行するため、マッシュアップ Loaded プロパティなどのイベントをバインドします。
5. コレクションウィジェットをキャンバス上で選択するか、または「エクスプローラ」パネルを使用して選択してから、「プロパティ」パネルを開きます。
6. Mashup プロパティで、コレクションに対して作成したセルマッシュアップを選択します。
必要に応じて、EmptyMashup プロパティと SelectedCellMashup プロパティを使用して、空のセルまたは選択したセルに表示するマッシュアップを選択します。
7. MashupPropertyBinding プロパティで、セルマッシュアップで定義したマッシュアップのプロパティをコレクションのインフォテーブル列にバインドします。
a. 「追加」をクリックして、このプロパティの JSON 値を編集します。
b. セルマッシュアップの各マッシュアップパラメータを、コレクションデータのインフォテーブル列名にマッピングします。例:
{
"Prameter1": "Column1",
"Parameter2": "Column2"
}
"Prameter1": "Column1",
"Parameter2": "Column2"
}
c. 「完了」をクリックします。
デザインタイムでは、各セルのデータのプレビューがコレクションに表示されます。ランタイムでは、コレクションサービスからのデータが各セルマッシュアップのコンテンツ内に表示されます。