コレクションウィジェット (テーマ指定可能)
コレクションウィジェットは、一連のリピートされたマッシュアップをコレクション内のセルとして表示できるレスポンシブウィジェットです。高度なレイアウトを設定し、セルをグループ化することで、ユーザーはさまざまな画面サイズでコレクションを簡単に表示できるようになります。コレクションセル内にデータを表示するには、マッシュアップセルのデータから成るインフォテーブルを定義する必要があります。大きなデータセットをロードする際のパフォーマンスを最適化するために、データロードの動作を設定することもできます。
 |
このウィジェットは Web Component SDK で Web コンポーネントとしても使用できます。
|
ベストプラクティス
各コレクションマッシュアップセル内でサービスを実行することは避けてください。コレクション内のセルごとに複数のサービスを繰り返し実行するには、多数のネットワークリクエストが必要です。親マッシュアップが初期化されるときにコレクションマッシュアップ内のサービスが繰り返し実行されるため、各セルがロードすることによって重大なパフォーマンスの問題が生じる可能性があります。パフォーマンスの問題を防止するには、親マッシュアップでデータサービスを実行してから、マッシュアップパラメータと MashupPropertyBinding プロパティを使用してデータを組み込みマッシュアップに渡します。パラメータの操作の詳細については、マッシュアップパラメータの設定を参照してください。
プロパティ
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能
|
ローカライズ可能か (Y/N)
|
|---|---|---|---|---|---|
|
Data
|
コレクションウィジェットのインフォテーブルのデータソース。
|
INFOTABLE
|
Y
|
N
|
|
|
ItemLoadBehavior
|
コレクションデータのロードの動作を制御します。スクロール中にデータをロード/アンロードでき、データをオンデマンドで段階的にロードすることも、データセット全体を最初にロードすることもできます。
|
STRING
|
ロード/アンロード
|
N
|
N
|
|
Layout
|
コレクションセルに使用するレイアウトのタイプを指定します。オプション: フレキシブル、グリッド、テーブル。
|
STRING
|
フレキシブル
|
Y
|
N
|
|
Mashup
|
コレクションデータの表示に使用するマッシュアップ。
|
MASHUPNAME
|
Y
|
N
|
|
|
Width
|
ウィジェットの幅を設定します。
|
NUMBER
|
400
|
N
|
N
|
|
Height
|
ウィジェットの高さを設定します。
|
NUMBER
|
300
|
N
|
N
|
|
MashupHeight
|
コレクションマッシュアップの高さを設定します。
|
NUMBER
|
Y
|
N
|
|
|
MashupWidth
|
コレクションマッシュアップの幅を設定します。
|
NUMBER
|
Y
|
N
|
|
|
MashupWidthField
|
サービスを使用してセル幅を定義するインフォテーブルフィールドを指定します。値は MashupHeight をオーバーライドします。
|
インフォテーブル列
|
N
|
N
|
|
|
MashupHeightField
|
サービスを使用してセル高さを定義するインフォテーブルフィールドを指定します。値は MashupHeight をオーバーライドします。
|
インフォテーブル列
|
N
|
N
|
|
|
UIDField
|
必須。各セルの一意の識別子を持つインフォテーブルフィールドを指定します。
|
インフォテーブル列
|
N
|
N
|
|
|
LastRowAlignment
|
コレクションの最後の行内にあるセルの整列を制御します。オプション: 「デフォルト」、「等間隔」、「間隔」、「左」、「中央」、「右」、「伸縮」
|
STRING
|
デフォルト
|
N
|
N
|
|
HorizontalAlignment
|
コレクションの行内にあるセルの水平方向の整列を制御します。オプション: 「等間隔」、「間隔」、「左」、「中央」、「右」、「伸縮」
|
STRING
|
等間隔
|
N
|
N
|
|
VerticalAlignment
|
コレクションの行内にあるセルの垂直方向の整列を制御します。オプション: 「上」、「中央」、「伸縮」、「下」
|
STRING
|
中央
|
N
|
N
|
|
UniformRowHeight
|
同じ高さを使用して行を表示します。
|
BOOLEAN
|
False
|
N
|
N
|
|
RowGap
|
コレクション行間のスペースを設定します。
|
NUMBER
|
40
|
N
|
N
|
|
ColumnGap
|
コレクション列間のスペースを設定します。
|
NUMBER
|
40
|
N
|
N
|
|
SectionGap
|
コレクションセクション間のスペースを設定します。
|
NUMBER
|
48
|
N
|
N
|
|
TopPadding
|
コレクションの上部余白と最初のセルとの間のパディングを設定します。
|
NUMBER
|
24
|
N
|
N
|
|
BottomPadding
|
コレクションの下部余白と最後のセルとの間のパディングを設定します。
|
NUMBER
|
24
|
N
|
N
|
|
RightPadding
|
ウィジェットの右側の境界とセルコレクションの間のパディングを設定します。
|
NUMBER
|
24
|
N
|
N
|
|
LeftPadding
|
ウィジェットの左側の境界とセルコレクションの間のパディングを設定します。
|
NUMBER
|
0
|
N
|
N
|
|
MashupBackground
|
コレクションマッシュアップとそのすべてのコンテナの背景を制御します。マッシュアップの背景が透明な場合、セルの背景に適用されているスタイルが表示されます。オプション: 「透明」、「表示」
|
STRING
|
表示
|
N
|
N
|
|
MashupNameField
|
データサービスを使用して、マッシュアップ名を指定するインフォテーブルフィールドを指定できます。このプロパティはマッシュアッププロパティをオーバーライドします。
|
インフォテーブル列
|
N
|
N
|
|
|
MashupPropertyBinding
|
インフォテーブルフィールドをそのキーとして持ち、マッシュアップパラメータを値として持つ、シリアル化された JSON オブジェクト。例: {\"min_temp\":\"minTemp\"}
|
JSON
|
N
|
N
|
|
|
MashupGlobalPropertyBinding
|
グローバルパラメータ名をそのキーとして持ち、データ型を値として持つ、シリアル化された JSON オブジェクト。これらはコレクションウィジェットにバインド可能なプロパティであり、各セルマッシュアップに送信されます。{\"minTemp\":\"STRING\"}
|
JSON
|
N
|
N
|
|
|
SelectedCellMashupField
|
コレクション内の各セルの選択した状態を設定するインフォテーブルフィールドを指定できます。
|
インフォテーブル列
|
N
|
N
|
|
|
UseMashupDimensions
|
セルサイズをマッシュアップ寸法と一致させます。
|
BOOLEAN
|
False
|
N
|
N
|
|
SelectionMode
|
ランタイムにユーザーが選択することができるセルの数を制御できます。オプション: 「なし」、「単一」、「複数」
|
STRING
|
なし
|
N
|
N
|
|
HasSelectedCells
|
選択されたセルがウィジェットにある場合、True を返します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
SelectedCellsCount
|
コレクションで選択されたセルの数を返します。
|
NUMBER
|
0
|
N
|
N
|
|
ScrollToSelectedCell
|
セルが選択されているときに、そのセルに自動的にスクロールします。
|
BOOLEAN
|
False
|
N
|
N
|
|
AutoSelectFirstRow
|
データがコレクションにロードされたときに、最初の行を自動的に選択できます。
|
BOOLEAN
|
False
|
N
|
N
|
|
SelectedCells
|
インフォテーブルを使用して選択するコレクションセルを指定します。
|
INFOTABLE
|
Y
|
N
|
|
|
SelectedCellMashup
|
コレクションで選択されたセルに表示する代替マッシュアップを指定します。このマッシュアップには、デフォルトのマッシュアップと同じプロパティが含まれている必要があります。
|
マッシュアップピッカー
|
Y
|
N
|
|
|
HandleSelectionUpdates
|
有効な場合、ウィジェットは選択の更新を、そのデータサービスに送信したり、そのデータサービスから受信したりします。
|
BOOLEAN
|
True
|
N
|
N
|
|
CellMenu
|
タッチデバイスのセル上でスライドしたときに表示されるセルメニューを定義するときに使用される状態定義を指定します。タッチインタフェースがないデバイスでは、セルを右クリックすることでこのメニューが表示されます。
|
STATEDEFINITION
|
N
|
N
|
|
|
CellMenuIconSize
|
セルメニュー内のアイコンのサイズを指定します。
|
NUMBER
|
20
|
N
|
N
|
|
CellTabKeyScope
|
キーボードを使用してセルのコンテンツを操作するときのナビゲーションの範囲を制御します。オプション: 「セル」、「コレクション」。範囲がセルに設定されている場合、Tab キーを押すと、セル内のエレメントでフォーカスがループします。範囲がコレクションに設定されている場合、Tab キーを押すと、最後のエレメントが選択された後にフォーカスがセルに戻ります。
|
STRING
|
セル
|
N
|
N
|
|
SectionField
|
セクション内でセルをグループ化するために使用できる識別子の値を持つインフォテーブルフィールドを指定します。
|
INFOTABLE
|
N
|
N
|
|
|
SectionInsetLeft
|
セルをグループ化する際のセクションの左差込図の値を設定します。
|
NUMBER
|
0
|
N
|
N
|
|
SectionInsetTop
|
セルをグループ化する際のセクションの上差込図の値を設定します。
|
NUMBER
|
0
|
N
|
N
|
|
SectionInsetRight
|
セルをグループ化する際のセクションの右差込図の値を設定します。
|
NUMBER
|
0
|
N
|
N
|
|
SectionInsetBottom
|
セルをグループ化する際のセクションの下差込図の値を設定します。
|
NUMBER
|
0
|
N
|
N
|
|
SortField
|
セクションのコンテンツを並べ替えるインフォテーブルフィールドを指定します。並べ替えはクライアント側で実行され、ソースインフォテーブルやデータセットにバインドされているその他のウィジェットには影響しません。
|
INFOTABLE
|
Y
|
N
|
|
|
SortAscending
|
SortField プロパティが有効になっているときに、セクションコンテンツを昇順に並べ替えます。デフォルトでは、セクションは降順に並べ替えられます。
|
BOOLEAN
|
False
|
Y
|
N
|
|
SectionHeaders
|
コレクション内のセルをグループ化する際のセクションヘッダーの表示を制御します。オプション: 「なし」、「表示」、「ピン留め」
|
STRING
|
なし
|
N
|
N
|
|
HeaderMashup
|
コレクション内のセルをグループ化する際にセクションヘッダーに使用するマッシュアップを指定します。
|
MASHUPNAME
|
なし
|
N
|
N
|
|
HeaderSectionParam
|
セクション識別子を受け取るヘッダーマッシュアップパラメータの名前。
|
STRING
|
N
|
N
|
|
|
HeaderHeight
|
コレクションのセクションヘッダーの高さを設定します。
|
NUMBER
|
40
|
N
|
N
|
|
SectionFooters
|
コレクション内のセルをグループ化する際のセクションフッターの表示を制御します。オプション: 「なし」、「表示」、「ピン留め」
|
STRING
|
なし
|
N
|
N
|
|
FooterMashup
|
コレクション内のセルをグループ化する際にセクションフッターに使用するマッシュアップを指定します。
|
MASHUPNAME
|
N
|
N
|
|
|
FooterSectionParam
|
セクション識別子を受け取るフッターマッシュアップパラメータの名前。
|
STRING
|
N
|
N
|
|
|
FooterHeight
|
コレクション内のセルをグループ化する際のセクションフッターの高さを設定します。
|
NUMBER
|
40
|
N
|
N
|
|
EmptyMashup
|
コレクション内のセルにデータが含まれていない場合に表示するマッシュアップを指定します。
|
MASHUPNAME
|
なし
|
N
|
N
|
|
Deselect
|
コレクション内のすべての選択をクリアするバインド可能なサービス。
|
サービス
|
Y
|
N
|
|
|
SelectAll
|
コレクション内のすべてのセルを選択するバインド可能なサービス。
|
サービス
|
Y
|
N
|
|
|
DisableWrapping
|
有効にすると、1 つの行にセルが水平スクロールバー付きで表示されます。無効にすると、水平方向のスペースがコレクション全体を表示するために十分でない場合に、セルは新しい行に折り返されます。このプロパティは、「フレキシブル」レイアウトモードを使用してコレクションが設定されている場合にのみサポートされます。
|
BOOLEAN
|
False
|
N
|
N
|
イベント
|
プロパティ名
|
説明
|
ベースタイプ
|
バインド可能
|
ローカライズ可能か (Y/N)
|
|---|---|---|---|---|
|
CellClicked
|
ユーザーがコレクション内のセルをクリックまたはタップしたときにトリガーされるイベント。
|
イベント
|
Y
|
N
|
|
CellDoubleClicked
|
ユーザーがコレクション内のセルをダブルクリックまたはダブルタップしたときにトリガーされるイベント。
|
イベント
|
Y
|
N
|
|
CellLongClicked
|
ユーザーが 400 ミリ秒を超える間コレクション内のセルをクリックして押し続けるか、タップしてホールドしたときにトリガーされるイベント。
|
イベント
|
Y
|
N
|
|
CellRightClicked
|
ユーザーがコレクション内のセルを右クリックしたときにトリガーされるイベント。
|
イベント
|
Y
|
N
|