Widget "Mediengalerie" (mit Thema versehbar)
Das Widget "Mediengalerie" (mit Thema versehbar) ermöglicht es Ihnen, eine Sammlung von Medienelementen anzuzeigen, z.B. Bilder in einem Galerieformat. Dieses Widget unterstützt Schleifen, Vollbildmodus und dynamische Datenbindung und ist daher nützlich für die Erstellung von Mashups, die zum Anzeigen mehrerer Bilder verwendet werden.
 |
Die Mediengalerie ist als Widget und als Webkomponente verfügbar, die Sie anpassen und aus dem ThingWorx Web Component SDK importieren können
|
Anatomie
Das Widget "Mediengalerie" enthält die folgenden Komponenten:
1. Widget-Beschriftung
2. Fensterbereich "Galerie" – Der primäre Bereich, in dem Medienelemente angezeigt werden.
3. Navigationspfeile – Steuerelemente, die es Benutzern ermöglichen, manuell durch die Medienelemente zu navigieren.
4. Miniaturansichtszeile – Eine optionale Zeile mit Miniaturansichten, die hinzugefügt werden können, um in der Galerie eine Vorschau von Medienelementen anzuzeigen.
5. Galeriezähler – Zeigt die Sequenznummer des aktuellen Medienelements und die Gesamtzahl der Elemente in der Galerie an.
6. Vollbild-Schaltfläche – Ein Steuerelement, mit dem sich das Widget erweitern lässt, um Bilder im Vollbildmodus anzuzeigen.
7. Medientitel
8. Medienbeschreibung
Datenformat
Wenn Sie eine Mediengalerie anzeigen möchten, müssen Sie einen Dienst erstellen, der Infotable-Daten mit den nachfolgend aufgeführten Feldern zurückgibt.
|
Feldname
|
Basistyp
|
Beschreibung
|
|---|---|---|
|
description
|
STRING
|
Optional. Die Beschreibung des Medienelements.
|
|
title
|
STRING
|
Optional. Der Titel des Medienelements.
|
|
url
|
STRING
|
Erforderlich. Die URL des Medienelements.
|
Sie können die Werte für die Mediengalerie auch manuell eingeben, indem Sie auf die Schaltfläche Hinzufügen neben der Widget-Eigenschaft Data klicken.
Widget hinzufügen und konfigurieren
Führen Sie die folgenden Schritte aus, um das Widget "Mediengalerie" hinzuzufügen und zu konfigurieren:
1. Ziehen Sie das Widget aus dem Fensterbereich Widgets, und legen Sie es in einem Container im Zeichenbereich ab.
2. Ändern Sie die Größe und die Position des Widgets nach Bedarf, damit es in Ihr Layout passt.
3. Binden Sie die Eigenschaft Data an eine Infotable-Datenquelle, die die Medienelemente enthält, die angezeigt werden sollen.
4. Konfigurieren Sie zusätzliche Eigenschaften im Fensterbereich Eigenschaften:
5. Speichern Sie das Mashup, und zeigen Sie die Vorschau an, um die Funktionsfähigkeit des Widgets zu verifizieren.
Vorschau-Miniaturansichten anzeigen
Legen Sie die Eigenschaft ShowThumbnails auf "True" fest, um eine Zeile mit Vorschau-Miniaturansichten unter dem aktuellen Medienelement anzuzeigen. Diese Miniaturansichten ermöglichen es Benutzern, schnell zu bestimmten Medienelementen zu navigieren. Stellen Sie sicher, dass Ihre Datenquelle geeignete Vorschaubilder enthält.
Vollbildmodus konfigurieren
Das Widget "Mediengalerie" unterstützt den Vollbildmodus, sodass Elemente aus der Galerie in einer Vollbildansicht angezeigt werden können. Zur Laufzeit können Sie diesen Modus aufrufen, indem Sie auf die Schaltfläche für die Vollbildanzeige klicken. Drücken Sie zum Schließen der Vollbildanzeige die ESC-Taste, indem Sie auf die Schaltfläche zum Beenden klicken. Darüber hinaus können Sie die folgenden Eigenschaften für diesen Modus konfigurieren:
• Legen Sie die Eigenschaft ShowLabelInFullScreen auf "True" fest, um die Beschriftungen der Medienelemente anzuzeigen.
• Legen Sie die Eigenschaft ShowThumbnailsInFullScreen auf "True" fest, um die Galerie-Miniaturansicht in diesem Modus anzuzeigen.
Galerie in einer Schleife anzeigen
Legen Sie die Eigenschaft LoopGallery auf "True" fest, um die Medienelemente in einer fortlaufenden Schleife anzuzeigen. Auf diese Weise kann die Galerie automatisch alle Elemente durchlaufen und dann wieder von vorn beginnen.
Titel und Beschreibungen zu Medienelementen hinzufügen
Durch das Hinzufügen von Titeln und Beschreibungen zu den Infotable-Daten wird Kontext bereitgestellt. Außerdem wird die Barrierefreiheit der einzelnen Medienelemente in der Galerie verbessert. Das folgende Beispiel zeigt ein ausgewähltes Medienelement mit Titel und Beschreibung. Item 2 ist der Medientitel, und die Beschreibung wird daneben angezeigt.
Sie können den Titel oder die Beschreibung für die Elemente der Mediengalerie mithilfe der Eigenschaften HideMediaTitle und HideMediaDescription ausblenden.
Widget-Eigenschaften
In der nachfolgenden Tabelle sind die Widget-Eigenschaften aufgeführt.
|
Eigenschaftenname
|
Beschreibung
|
Basistyp
|
Standardwert
|
Bindung möglich?
|
Lokalisierbar?
|
|---|---|---|---|---|---|
|
Label
|
Gibt den Text für die Widget-Beschriftung an.
|
STRING
|
N/A
|
J
|
J
|
|
LabelType
|
Gibt an, welcher Typ Beschriftung für das Widget angezeigt werden soll.
|
STRING
|
Kopfzeile
|
N
|
N
|
|
LabelAlignment
|
Richtet den Beschriftungstext links, rechts oder in der Mitte des Widgets aus. Optionen: Links/Rechts/Mitte
|
STRING
|
Links
|
N
|
N
|
|
ShowThumbnails
|
Zeigt Miniaturansichten für Medienelemente an, wenn Sie sich in der Karussellansicht befinden.
|
BOOLEAN
|
Falsch
|
J
|
N
|
|
ShowThumbnailsInFullScreen
|
Zeigt Miniaturansichten für Medienelemente im Vollbildmodus an.
|
BOOLEAN
|
Falsch
|
J
|
N
|
|
LoopGallery
|
Zeigt Medienelemente in einer Schleife an, für eine fortlaufende Wiedergabe. Wenn diese Eigenschaft aktiviert ist, kehrt der Benutzer durch Klicken auf die Schaltfläche "Weiter" für das letzte Element zum ersten Element zurück.
|
BOOLEAN
|
Falsch
|
J
|
N
|
|
Data
|
Die Infotable-Datenquelle für das Widget.
|
INFOTABLE
|
N/A
|
J
|
N
|
|
ShowLabelInFullScreen
|
Zeigt die Medienbeschriftung im Vollbildmodus an.
|
BOOLEAN
|
Falsch
|
J
|
N
|
|
HideMediaDescription
|
Blendet die Medientitel aus.
|
BOOLEAN
|
Falsch
|
J
|
N
|
|
HideMediaTitle
|
Blendet die Medienbeschreibungen aus.
|
BOOLEAN
|
Falsch
|
J
|
N
|
|
MediaDescriptionLableType
|
Gibt an, welcher Typ Beschriftung für die Elementbeschreibung angezeigt werden soll.
|
STRING
|
Text
|
N
|
N
|
|
MediaTitleLableType
|
Gibt an, welcher Typ Beschriftung für den Elementtitel angezeigt werden soll.
|
STRING
|
Großer Titel
|