コレクションウィジェット
コレクションウィジェットは、一連のリピートされたマッシュアップをコレクション内に格納できる高度なウィジェットです。コレクションウィジェットではインフォテーブルサービスを使用して、ビジュアルコンテンツを動的に定義します。コレクションウィジェットはリピーターウィジェットと似ていますが、含まれているプロパティの数が多く、より多くのオプションと高いパフォーマンスを提供します。リピーターウィジェットの代わりに、コレクションウィジェットを使用することをお勧めします。
主な機能
• 60 個を超えるプロパティで、スペース、パディング、ヘッダー、フッター、セクション、アニメーションなどを詳細に制御できます。
• すべてのセルに動的データを追加する機能が含まれています
• リピーターウィジェットよりパフォーマンスは高くなります。メモリ使用量を改善するために、コレクションウィジェットはビジュアリゼーション用の情報を大量にキャッシュします。ランタイムでブラウズおよびスクロールするときに、リピーターウィジェットよりも迅速でスムーズな動きになります。
コレクションウィジェットでは、次の 2 つのビューを使用できます。
• フローレイアウト: レスポンシブな、水平ラップ。このレイアウトは、リピーターウィジェットに非常によく似ています。
• テーブルレイアウト: 縦方向に積み上げられ、1 行ごとに 1 つのマッシュアップを表示できます。
使用法の概要
MashupPropertyBinding はコレクションウィジェットにおける重要なプロパティです。データの受け渡しができるように、インフォテーブルのフィールド名とマッシュアップのパラメータを関連付ける JSON 文字列を指定する必要があります。例:
{
"events": "eventsName",
"min_temp": "minTemp",
"max_temp": "maxTemp",
"precipitation": "precipitation",
"image": "image",
"wind": "wind",
"sourceType": "sourceType",
"date": "date",
"week": "week",
"id": "rowId"
}
"events": "eventsName",
"min_temp": "minTemp",
"max_temp": "maxTemp",
"precipitation": "precipitation",
"image": "image",
"wind": "wind",
"sourceType": "sourceType",
"date": "date",
"week": "week",
"id": "rowId"
}
オプションの MashupGlobalPropertyBinding を使用すると、コレクション内のすべてのセルで同じように表示する必要がある変数データ (製品名など) を渡すための、ユーザー定義のカスタムプロパティを追加できます。組み込みマッシュアップの一部にする必要があったり、MashupPropertyBinding を使用して各行にサービスを通して冗長に受け渡しを行う必要があるデータの場合は、このオプションの使用を検討してください。
MashupGlobalPropertyBinding でも同じ JSON フォーマットを使用しますが、各エントリにはキーとして (ユーザー定義の) 一意のプロパティ名を含み、ThingWorx ベースタイプ (STRING、NUMBER、BOOLEAN など) を値として含む必要があります。MashupGlobalPropertyBinding フィールドからタブアウトすると、すべてのエントリがバインド可能なカスタムプロパティをコレクションウィジェットに提供します。
ウィジェットへのデータの設定
次のいずれかの方法によって、ランタイムでウィジェットにマッシュアップが表示されるようにコレクションウィジェットを設定できます。
• プロパティをマッシュアップ名に設定することで、マッシュアップを定義します。
• Mashup 名前プロパティへのバインドを作成します。
• サービスを使用して、各セルのマッシュアップ名を指定します。
• セルの選択時、またはセルが空の場合に表示するマッシュアップを定義します。
ItemLoadBehavior プロパティを使用して、データのロード方法を指定できます。デフォルトでは、このプロパティは「ロード/アンロード」に設定されていて、コレクション内の表示されているアイテムについてのみデータがロードされます。OnLoad イベントを使用するマッシュアップでこのオプションを使用すると、サーバーに対して一度に多数の呼び出しが行われる可能性があります。これによってパフォーマンスの問題が発生することがありますが、ランタイムでウィジェットが最初にロードされるときにすべてのデータをロードすることによって改善できます。すべてのアイテムのデータをロードするには、このプロパティを「すべてロード」オプションに設定します。
 |
各コレクションマッシュアップセル内でサービスを実行することは避けてください。コレクション内のセルごとに複数のサービスを繰り返し実行するには、多数のネットワークリクエストが必要です。親マッシュアップが初期化されるときにコレクションマッシュアップ内のサービスが繰り返し実行されるため、各セルがロードすることによって重大なパフォーマンスの問題が生じる可能性があります。パフォーマンスの問題を防止するには、親マッシュアップでデータサービスを実行してから、マッシュアップパラメータと MashupPropertyBinding プロパティを使用してデータを組み込みマッシュアップに渡します。パラメータの操作の詳細については、マッシュアップパラメータの設定を参照してください。
|
セルの折り返しの無効化
デフォルトでは、レイアウト内にすべてのセルを表示するために十分な水平スペースがない場合、コレクションウィジェット内のセルが新しい行に折り返されます。ウィジェットの DisableWrapping プロパティを true に設定することで、折り返しを無効にできます。折り返しが無効になっている場合、セルは 1 行に表示され、ビューポートの外側にあるセルは水平スクロールバーを使用して表示できます。次のイメージは、折り返しが無効になっているコレクションウィジェットを示しています。
ブラウザの既知の制限
コレクションウィジェットは、Chrome および Firefox では高速で実行およびロードされます。Edge でも十分に機能します。Internet Explorer 11 ではロード時間が長くなり、パフォーマンスが低くなります。
プロパティ
一般的なウィジェットのプロパティについては、ウィジェットを参照してください。次の表は、コレクションウィジェットに固有のプロパティの説明を示しています。
プロパティ名 | 説明 | ベースタイプ | デフォルト値 | バインド可能か(Y/N) | ローカライズ可能か(Y/N) | ||
|---|---|---|---|---|---|---|---|
Data | ウィジェットのデータソースを表します。
| INFOTABLE | 該当なし | Y | N | ||
ItemLoadBehavior | コレクションウィジェット内のアイテムのデータのロード方法を指定します。次のいずれかのオプションを選択できます。 • ロード/アンロード - コレクション内のブラウザページをスクロールまたはサイズ変更したときにデータをロードします。表示されていないアイテムのデータはアンロードされます。
• すべてロード - ウィジェット内のすべてのアイテムのデータをロードします。 | STRING | ロード/アンロード | N | N | ||
View | レイアウトタイプ。オプションは Flow と Table です。フローはレスポンシブ、テーブルはグリッド状で 1 行ごとに 1 つのマッシュアップを表示できます。 | STRING | フロー | Y | N | ||
Mashup | データアイテムに使用するマッシュアップ。 | MASHUPNAME | 該当なし | Y | N | ||
MashupHeight | デフォルトのセル高さ。 | INTEGER | 120 | N | N | ||
MashupWidth | デフォルトのセル幅。 | INTEGER | 400 | N | N | ||
UIDField | コレクションアイテムの一意の識別子を表します。並べ替えで最適な結果を得るには、NUMBER ベースタイプにする必要があります。アイテムを一意に識別する、任意のタイプのフィールドを使用できます。既存のサービスを使用する場合、「プライマリキー」部分が選択されているフィールドがあれば、そのフィールドを UIDField に使用します。プライマリキーが定義されていない場合は、サービスを使用して、既存のインフォテーブルを、GUID または NUMBER ベースタイプのプライマリキーに設定されているフィールドを含む新しいインフォテーブルと組み合わせることを検討してください。GUID フィールドを含むデータシェイプの追加が必要となる場合もあります。 | INFOTABLE | 該当なし | N | N | ||
SortField | 設定またはバインドされている場合、セクションコンテンツの並べ替え基準となるインフォテーブルフィールド (Data プロパティで指定) を識別します。並べ替えはクライアント側で実行され、ソースインフォテーブルやデータセットにバインドされているその他のウィジェットには影響しません。このオプションは必須ではありませんが、サービスが毎回特定の順序で行を返す保証はありません。これを UIDField と同じフィールドに設定することを検討してください。 | INFOTABLE | 該当なし | Y | N | ||
SortAscending | SortField とともに使用します。有効になっている場合、並べ替えは昇順で実行され、そうでない場合は降順で実行されます。 | BOOLEAN | 該当なし | Y | N | ||
SectionField | オプション。アイテムのグループ化に使用するセクション識別子を表します。設定されている場合、アイテムはセクション別にグループ化されます。1 つのセクションのみサポートされます。セクションは、SectionField にある共通の値によって行をグループ分けします。たとえば、これを使用して、週番号フィールドを含む行を、週セクションにグループ分けできます。次にヘッダーとフッターを使用して、各週の最初と最後を示すことができます。 | INFOTABLE | 該当なし | N | N | ||
SectionInsetLeft | セクションを使用する場合に、セクションコンテンツを左にインデント (視覚的に分離する) 方法です。 | INTEGER | 0 | N | N | ||
SectionInsetTop | セクションを使用する場合に、セクションコンテンツを上にインデント (視覚的に分離する) 方法です。 | INTEGER | 0 | N | N | ||
SectionInsetRight | セクションを使用する場合に、セクションコンテンツを右にインデント (視覚的に分離する) 方法です。 | INTEGER | 0 | N | N | ||
SectionInsetBottom | セクションを使用する場合に、セクションコンテンツを下にインデント (視覚的に分離する) 方法です。 | INTEGER | 0 | N | N | ||
LeftAlignFinalRow | 有効な場合、各セクションの最後の行が中央揃えではなく左揃えになります。 | BOOLEAN | 該当なし | N | N | ||
FlowLayoutGravity | その行におけるセルの流れを制御します。 「エッジ」、「等間隔」、「中央」、「拡張」などのオプションがあります。 「エッジ」: セルは最も近い側面に揃えられ、そうでない場合は、セル同士の均等な間隔が維持されます。 「等間隔」: セル自体とセルを含むウィジェットの側面との間で、セル同士の均等な間隔が維持されます。 「中央」: セルは使用可能な幅の中で中央揃えされ、行の中に収まるかぎり多くのセルが表示されます。 「拡張」: セルは使用可能な幅を埋めるように拡張され、MashupWidth プロパティの設定を超える場合もあります。 | STRING | 該当なし | N | N | ||
FlowLayoutAlignment | フローレイアウトで使用する必要があります。その行におけるセルの縦方向の整列方法を制御します。 このプロパティは、セルの高さが異なる場合に、縦方向の整列を制御するのに役立ちます。CellHeightField プロパティを介してサービスからセルの高さを取得する場合や、MashupNameField プロパティを使用して UseMashupDimensions プロパティを true に設定する場合などが想定されます。 「上」: 隣接するセルを行の上に揃えます。 「中央」: 隣接するセルを行の中央に揃えます。 「下」: 隣接するセルを行の下に揃えます。 「拡張」: 隣接するセルの高さを、最も高いセルに揃えます。 | STRING | センター | N | N | ||
FlowLayoutContentGravity | フローレイアウトで使用する必要があります。コンテンツのサイズがコレクションビューよりも小さい場合に、コレクションビュー内でのコンテンツの縦方向の整列方法を制御します。 使用可能なオプションは、「上」、「中央」、「下」です。 「上」: セルは、上から領域を埋めていきます。 「中央」: セルは、垂直方向中央から領域を埋めていきます。 「下」: セルは、下から領域を埋めていきます。 | STRING | 該当なし | N | N | ||
RowSpacing | ヘッダー、行、フッター間の間隔を制御します。 | INTEGER | 44 | N | N | ||
MinimumSpacing | セル間の水平間隔の最小値を制御します。 | ||||||
TopPadding | 上部マージンと 1 つ目のアイテムの間のパディングを制御します。 | INTEGER | 22 | N | N | ||
BottomPadding | 下部マージンと最後のアイテムの間のパディングを制御します。 | INTEGER | 22 | N | N | ||
MashupNameField | データアイテムに使用するマッシュアップ名を指定します。設定した場合、このプロパティは Mashup および SelectedFieldMashup での選択よりも優先されます。 | ||||||
PinHeadersToTop | 有効な場合、ユーザーがコンテンツをスクロールするときに、現在表示されているセクションヘッダーが、ウィジェットの上端に固定されます。 | BOOLEAN | 該当なし | N | N | ||
PinFootersToBottom | 有効な場合、ユーザーがコンテンツをスクロールするときに、現在表示されているセクションフッターが、ウィジェットの下端に固定されます。 | BOOLEAN | 該当なし | N | N | ||
MashupPropertyBinding | インフォテーブルフィールド名をマッシュアップパラメータと関連付ける JSON 文字列です。各キー名は、各組み込みマッシュアップへのデータ提供に使用するインフォテーブルフィールドでなければなりません。各値は、コレクションウィジェットの組み込みマッシュアップ内のウィジェットにバインドされている、対応するマッシュアップパラメータの名前でなければなりません。
| STRING | 該当なし | N | N | ||
MashupGlobalPropertyBinding | オプション。バインド可能なカスタムプロパティの作成に使用する JSON 文字列。このプロパティは、製品名やグローバルステータスインジケータなど、すべての組み込みマッシュアップで同じにする必要があるデータを動的にバインドするために役立ちます。各キー名には、ウィジェットに追加する任意の有効なプロパティ名を使用できます。各値は、追加時にプロパティに割り当てるデータ型にする必要があります ("STRING"、"NUMBER"、"BOOLEAN" など)。ユーザーが MashupGlobalPropertyBinding プロパティからタブアウトし、プロパティが検証されるとすぐに、ウィジェットにプロパティが追加されます。プロパティウィンドウを下にスクロールするか、プロパティフィルタにその名前を入力します。これは、ウィジェット内の組み込みマッシュアップのマッシュアップパラメータに渡すために、データをカスタムプロパティとバインドする場合に使用できます。 | STRING | 該当なし | N | N | ||
CellWidthField | サービスからセルのデフォルト幅を定義するフィールドです。この値は CellWidth よりも優先されます。 | ||||||
CellHeightField | サービスからセルのデフォルトの高さを定義するフィールドです。この値は CellHeight よりも優先されます。 | ||||||
CellMashupSelectedField | オプション。指定した場合、バインド先のオブジェクトの選択した状態を受け取るマッシュアップパラメータを表します。これにより、ウィジェットの各セルの選択状態を示すために使用するインフォテーブルフィールドを識別できます。 | STRING | 該当なし | N | N | ||
UseMashupDimensions | オプション。MashupNameField プロパティおよび静的セルマッシュアップとともに使用する必要があります。それを含むマッシュアップに、セルサイズが一致するようになります。 | ||||||
AllowSelection | 有効な場合、セルを選択できます。そうでない場合、セルはこのコレクションウィジェットによって選択できません。 | BOOLEAN | 該当なし | N | N | ||
MultiSelect | 複数選択が可能になります。コレクションウィジェットでの複数選択では CTRL + click や SHIFT + click は必要ありません。クリックして必要な数のセルを選択し、選択解除するセルをクリックします。マウスによる範囲選択はサポートされていません。 | BOOLEAN | 該当なし | N | N | ||
HasSelectedCells | このコレクションウィジェットで選択されたセルが 1 つ以上ある場合は、常に true に設定されます。 | BOOLEAN | false | Y | N | ||
SelectedCellsCount | コレクションビューで選択されたセルの数が表示されます。 | INTEGER | 0 | Y | N | ||
ScrollsToSelectedCell | 選択の変更を有効にして、最初に選択されたセルにコレクションがスクロールするようにします。 | BOOLEAN | 該当なし | N | N | ||
AutoSelectFirstCell | データが更新されたときにセルが 1 つも選択されていなければ、コレクションウィジェットは使用可能な 1 つ目のセルを自動的に選択します。 | BOOLEAN | 該当なし | N | N | ||
SelectedItems | 現在選択されているセルを設定するバインドをサービスから提供します。複数選択の中で最新の選択がコレクション内で更新されます。 | INFOTABLE | 該当なし | Y | N | ||
SelectedMashupName | オプション。設定された場合、CellSelectedStyle をオーバーライドします。ランタイムでセルが選択されたときに、Mashup または MashupFieldName プロパティで定義されたマッシュアップと置き換えられるマッシュアップを定義します。ほとんどの場合、SelectedMashup はデフォルトのマッシュアップと同じ寸法です。デフォルトのマッシュアップよりも少ない (一部)、同じだけ (すべて) の、またはそれより多いマッシュアップパラメータを持つことがあります。この機能のユースケースは、セルの選択時にデータのより詳細なビューを提示したり、提示されたデータに対する追加の選択オプションやフィルタオプションを明らかにしたりするためのものです。 | MASHUPNAME | 該当なし | N | N | ||
HandleSelectionUpdates | 有効な場合、コレクションはそのデータサービスに対する選択の更新を受信および転送します。1 つのマッシュアップ内の共通のサービスを共有するデータウィジェットが互いの選択を更新するために役立つ方法を切り替えます。たとえば、グリッド行をクリックすると、同じサービスにバインドされているチャートポイントがハイライトされます。 | BOOLEAN | 該当なし | N | N | ||
CellStyle | セルの背景を制御します。スタイルの背景色プロパティだけが使用されます。 | STYLE | 該当なし | N | N | ||
CellAlternateStyle | セルの代替背景を制御します。スタイルの背景色プロパティだけが使用されます。 CellAlternateStyle 背景色を設定しない場合、すべてのセルで CellStyle 背景色が使用されます。 | STYLE | 該当なし | N | N | ||
CellSelectedStyle | 選択したセルの背景色を制御します。スタイルの背景色プロパティだけが使用されます。 | STYLE | 該当なし | N | N | ||
CellHoverStyle | セルにカーソルを合わせたときのセルの背景色を制御します。スタイルの背景色プロパティだけが使用されます。 | STYLE | 該当なし | N | N | ||
CellActiveStyle | セルを選択したときのセルの背景色を制御します。スタイルの背景色プロパティだけが使用されます。 | STYLE | 該当なし | N | N | ||
RippleEffectStyle | UseRippleEffect プロパティとともに使用する必要があります。このスタイルの背景色プロパティだけが使用され、リップルアニメーション効果に適用されます。 | STYLE | 該当なし | N | N | ||
UseRippleEffect | 有効な場合、セルをクリックしたときにリップルアニメーション効果が使用されます。このオプションを使用した場合、セルのオーバーフロープロパティが非表示に設定されます。リップル効果は、背景色のあるマッシュアップを含まないセルの部分のみに表示されます (透過的に設定する必要があります)。 | BOOLEAN | 該当なし | N | N | ||
CellBorderRadius | セルに適用するオプションの境界半径。この値が空でない文字列 (例: 12px) に設定されている場合、セルのオーバーフロープロパティが非表示に設定されます。 | STRING | 該当なし | N | N | ||
CellBoxShadow | 空でない文字列に設定されている場合、これはセルのボックスのシャドウとして使用されます。シャドウの設定寸法は、次に示す CSS ボックス-シャドウの仕様と構文に従います。 box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; シャドウが隣接するセルと重なり合わないように、シャドウの寸法は間隔のプロパティと関連付けて考慮する必要があります。
| STRING | 該当なし | N | N | ||
CellPointer | オプション。デフォルトのブラウザのカーソル動作に依存するのではなく、セルにカーソルを合わせたときのマウスポインタの表示を明示的に設定します。 | STRING | Auto | N | N | ||
CellMenuStates | オプション。セルを右クリックすることでメニューにアクセスできるようにします。メニューの選択項目は、このプロパティで選択した状態定義によって定義されます。これを使用して、ほかマッシュアップに移動できるようになります。 | STATEDEFINITION | DefaultMenuStates | N | N | ||
CellMenuStatesIconSize | CellMenuStates プロパティとともに使用する必要があります。メニューアイコンがこのサイズに設定されます。最大値は 64 です。 | INTEGER | 該当なし | N | N | ||
CellMenuStatesIconGravity | CellMenuStates プロパティとともに使用する必要があります。アイコンをメニューエントリのテキストに固定する方法を制御します。オプションは、左、右、上、下です。 | STRING | 該当なし | N | N | ||
CellMenuStatesOrientation | CellMenuStates プロパティとともに使用する必要があります。メニューエントリのレイアウト方法を制御します。オプションは、水平または垂直です。 | STRING | 該当なし | N | N | ||
ShowHeaders | 有効でありセクションを使用している場合、各セクションにヘッダーが付きます。 | BOOLEAN | 該当なし | N | N | ||
HeaderMashupName | ヘッダーに使用するマッシュアップ。SectionField および ShowHeaders プロパティとともに使用する必要があります。スクロールバーを表示せずにレイアウトにはめ込んでしまう問題を回避するために、ヘッダーマッシュアップはレスポンシブにする必要があります。 | MASHUPNAME | 該当なし | N | N | ||
HeaderSectionParam | ヘッダーマッシュアップに設定する必要があるマッシュアップパラメータで、SectionField プロパティで定義したコレクションウィジェットのセクションフィールドから値を受け取ります。 | STRING | 該当なし | N | N | ||
HeaderHeight | ヘッダーマッシュアップの高さ。 | INTEGER | 44 | N | N | ||
ShowFooters | 有効でありセクションを使用している場合、各セクションにフッターが付きます。 | BOOLEAN | 該当なし | N | N | ||
FooterMashupName | フッターに使用するマッシュアップ。SectionField および ShowFooters プロパティとともに使用する必要があります。スクロールバーを表示せずにレイアウトにはめ込んでしまう問題を回避するために、フッターマッシュアップはレスポンシブにする必要があります。 | MASHUPNAME | 該当なし | N | N | ||
FooterSectionParam | セクション識別子を受け取るマッシュアップパラメータ。 | STRING | 該当なし | N | N | ||
FooterHeight | フッターマッシュアップの高さ。SectionField および ShowFooters プロパティとともに使用する必要があります。 | INTEGER | 44 | N | N | ||
EmptyMashupName | 指定した場合、データセットが空のときにこのマッシュアップが表示されます。これは、日付フィルタウィジェットを、コレクションウィジェットの設定に使用するサービスとともに使用する場合に発生する可能性があります。"結果なし" のメッセージを含むマッシュアップを表示するために使用できます。 | MASHUPNAME | 該当なし | N | N | ||
PlaysIntroAnimation | データのロード後に、セルの "スライドイン" 遷移のアニメーションが有効になります。 | BOOLEAN | 該当なし | N | N | ||
Deselect | コレクションが呼び出されたときに、そのデータセット内のすべての行が選択解除されます。 | 該当なし | Y | N | |||
DisableWrapping | 有効にすると、セルが 1 行に表示され、使用できるスペースが制限されている場合は水平スクロールバーが表示されます。無効にすると、すべてのセルを表示するために十分な水平スペースがない場合はセルが新しい行に折り返されます。 | BOOLEAN | False | N | N | ||
SelectAll | コレクションが呼び出されたときに、そのデータセット内のすべての行が選択されます。 | 該当なし | Y | N |
イベント
CellMenuStates: CellMenuStates プロパティは、コレクションウィジェットに追加された StateDefinition に各状態のイベントを追加します。各イベントの名前は、各状態の名前に対応します。
CellWasClicked: セルをクリックまたはタップするたびにトリガーされます。
CellWasRightClicked: 右クリックするたびにトリガーされます。
CellWasDoubleClicked: セルをダブルクリックまたはダブルタップするたびにトリガーされます。
CellWasLongClicked: セルをロングクリックまたはロングタップ (長押し) するたびにトリガーされます。
MashupPropertyBinding: MashupPropertyBinding プロパティ内の各エントリのキーによって、コレクションウィジェットのソースバインドプロパティが生成されます。これらは、セルをクリックしたときに、コレクションウィジェットのセルレベルのデータと、マッシュアップ内のほかのウィジェットをバインドするために使用できます。