メディアギャラリーウィジェット (テーマ指定可能)
メディアギャラリーウィジェット (テーマ指定可能) を使用すると、イメージなどのメディアアイテムのコレクションをギャラリー形式で表示できます。このウィジェットはループ、フルスクリーンモード、動的データバインディングをサポートしているので、複数のイメージの表示に使用するマッシュアップを作成する際に便利です。
 |
メディアギャラリーは、ThingWorx Web Component SDK でカスタマイズしてからインポートし、ウィジェットとして、および Web コンポーネントとして使用できます。
|
構造
メディアギャラリーウィジェットには、次のコンポーネントが含まれます。
1. ウィジェットラベル
2. ギャラリーパネル - メディアアイテムを表示するプライマリ領域。
3. ナビゲーション矢印 - ユーザーがメディアアイテムを手動でブラウズできるコントロール。
4. サムネイルストリップ - ギャラリー内のメディアアイテムをプレビューするために追加できるサムネイル用のオプションの行。
5. ギャラリーカウンター - 現在のメディアアイテムのシーケンス番号とギャラリー内のアイテムの合計数を表示します。
6. フルスクリーンボタン - ウィジェットを展開してイメージをフルスクリーンモードで表示するコントロール。
7. メディアのタイトル
8. メディアの説明
データ形式
メディアギャラリーを表示するには、次のフィールドを持つインフォテーブルデータを返すサービスを作成する必要があります。
|
フィールド名
|
ベースタイプ
|
説明
|
|---|---|---|
|
description
|
STRING
|
オプション。メディアアイテムの説明。
|
|
title
|
STRING
|
オプション。メディアアイテムのタイトル。
|
|
url
|
STRING
|
必須。メディアアイテムの URL。
|
ウィジェットの Data プロパティの横にある「追加」ボタンを使用して、メディアギャラリーの値を手動で入力することもできます。
ウィジェットの追加と設定
メディアギャラリーウィジェットを追加および設定するには、次の手順を実行します。
1. 「ウィジェット」パネルからウィジェットをドラッグし、キャンバス上のコンテナにドロップします。
2. 必要に応じて、レイアウトに合わせてウィジェットのサイズと配置を変更します。
3. Data プロパティを、表示するメディアアイテムを含むインフォテーブルデータソースにバインドします。
4. 「プロパティ」パネルでその他のプロパティを設定します。
5. このマッシュアップを保存し、プレビューして、ウィジェットの機能を確認します。
プレビューサムネイルの表示
ShowThumbnails プロパティを True に設定すると、現在のメディアの下にプレビューサムネイルのストリップが表示されます。これらのサムネイルにより、ユーザーは特定のメディアアイテムにすばやく移動できます。データソースに適切なプレビューイメージが含まれるようにしてください。
フルスクリーンモードの設定
メディアギャラリーウィジェットではフルスクリーンモードがサポートされており、ギャラリーアイテムをフルスクリーンビューで表示できます。ランタイムで、フルスクリーンボタンをクリックすると、このモードに切り替えることができます。フルスクリーンビューを閉じるには、Esc キーを押すか、終了ボタンをクリックします。さらに、このモード用の次のプロパティを設定できます。
• メディアアイテムのラベルを表示するには、ShowLabelInFullScreen プロパティを True に設定します。
• このモードでギャラリーのサムネイルを表示するには、ShowThumbnailsInFullScreen プロパティを True に設定します。
ギャラリーのループ
メディアアイテムの連続ループを有効にするには、LoopGallery プロパティを True に設定します。これにより、ギャラリーですべてのアイテムが自動的に繰り返され、最初に戻ることができます。
メディアアイテムへのタイトルと説明の追加
タイトルと説明をインフォテーブルデータに追加することで、ギャラリー内の各メディアアイテムのコンテキストが提供され、アクセス性が向上します。次の例は、タイトルと説明の両方を含む選択したメディアアイテムを示しています。Item 2 はメディアタイトルで、その横に説明が表示されます。
HideMediaTitle プロパティおよび HideMediaDescription プロパティを使用して、メディアギャラリーアイテムのタイトルまたは説明を非表示にできます。
ウィジェットのプロパティ
次の表に、ウィジェットのプロパティを示します。
|
プロパティ名
|
説明
|
ベースタイプ
|
デフォルト値
|
バインド可能か
|
ローカライズ可能か
|
|---|---|---|---|---|---|
|
Label
|
ウィジェットラベルのテキストを指定します。
|
STRING
|
該当なし
|
Y
|
Y
|
|
LabelType
|
ウィジェットで表示するラベルのタイプを設定します。
|
STRING
|
ヘッダー
|
N
|
N
|
|
LabelAlignment
|
ラベルテキストをウィジェットの左、右、または中央に整列します。オプション: 「左」/「中央」/「右」
|
STRING
|
Left
|
N
|
N
|
|
ShowThumbnails
|
メディアアイテムのサムネイルをカルーセルビューで表示します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
ShowThumbnailsInFullScreen
|
メディアアイテムのサムネイルをフルスクリーンモードで表示します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
LoopGallery
|
メディアアイテムをループして連続でプレイバックします。このプロパティが有効になっている場合、最後のアイテムの「次へ」ボタンをクリックすると、最初のアイテムに戻ります。
|
BOOLEAN
|
False
|
Y
|
N
|
|
Data
|
ウィジェットのインフォテーブルのデータソース。
|
INFOTABLE
|
該当なし
|
Y
|
N
|
|
ShowLabelInFullScreen
|
メディアラベルをフルスクリーンモードで表示します。
|
BOOLEAN
|
False
|
Y
|
N
|
|
HideMediaDescription
|
メディアタイトルを非表示にします。
|
BOOLEAN
|
False
|
Y
|
N
|
|
HideMediaTitle
|
メディアの説明を非表示にします。
|
BOOLEAN
|
False
|
Y
|
N
|
|
MediaDescriptionLableType
|
アイテムの説明に表示するラベルのタイプを設定します。
|
STRING
|
本文
|
N
|
N
|
|
MediaTitleLableType
|
アイテムのタイトルに表示するラベルのタイプを設定します。
|
STRING
|
大きいタイトル
|