Widget Galerie de médias (thématisable)
Le widget Galerie de médias (thématisable) vous permet d'afficher une collection d'éléments de média, tels que des images, dans un format de galerie. Ce widget prend en charge la lecture en boucle, le mode plein écran et les liaisons de données dynamiques, ce qui le rend utile pour créer des applications composites utilisées pour afficher plusieurs images.
 |
La Galerie de médias est disponible en tant que widget et composant Web que vous pouvez personnaliser et importer à partir du ThingWorx Web Component SDK.
|
Anatomie
Le widget Galerie de médias comprend les composants suivants :
1. Etiquette du widget
2. Panneau de la galerie : zone principale qui affiche les éléments de média.
3. Flèches de navigation : contrôles permettant à l'utilisateur de parcourir manuellement les éléments de média.
4. Bande des miniatures : ligne facultative de miniatures que vous pouvez ajouter pour l'affichage d'un aperçu des éléments de média dans la galerie.
5. Compteur de la galerie : affiche le numéro de séquence de l'élément de média actuel et le nombre total d'éléments dans la galerie.
6. Bouton d'affichage plein écran : contrôle qui développe le widget pour afficher les images en mode plein écran.
7. Titre du média
8. Description du média
Format des données
Pour afficher une galerie de médias, vous devez créer un service qui renvoie des données de table d'informations avec les champs ci-après.
|
Nom du champ
|
Type de base
|
Description
|
|---|---|---|
|
description
|
STRING
|
Facultatif. Description de l'élément de média.
|
|
title
|
STRING
|
Facultatif. Titre de l'élément de média.
|
|
url
|
STRING
|
Obligatoire. URL de l'élément de média.
|
Vous pouvez également entrer manuellement des valeurs pour la galerie de médias à l'aide du bouton Ajouter situé en regard de la propriété Data du widget.
Ajout et configuration du widget
Pour ajouter et configurer un widget Galerie de médias, procédez comme suit :
1. Faites glisser le widget depuis le panneau Widgets jusqu'à un conteneur sur le canevas.
2. Redimensionnez et positionnez le widget comme il convient pour l'adapter à votre mise en page.
3. Liez la propriété Data à une source de données de table d'informations contenant les éléments de média que vous souhaitez afficher.
4. Configurez les propriétés supplémentaires voulues dans le panneau Propriétés :
5. Enregistrez l'application composite et prévisualisez-la pour vérifier la fonctionnalité du widget.
Affichage des miniatures d'aperçu
Définissez la propriété ShowThumbnails sur "vrai" pour afficher une bande de miniatures d'aperçu sous le média actuel. Ces miniatures permettront à l'utilisateur d'accéder rapidement à des éléments de media spécifiques. Assurez-vous que votre source de données inclut des images d'aperçu appropriées.
Configuration du mode plein écran
Le widget Galerie de médias prend en charge le mode plein écran, ce qui vous permet d'afficher les éléments de la galerie en mode plein écran. Lors de l'exécution, vous pouvez accéder à ce mode en cliquant sur le bouton d'affichage plein écran. Pour fermer l'affichage plein écran, appuyez sur la touche Echap ou cliquez sur le bouton de sortie. De plus, vous pouvez configurer les propriétés suivantes pour ce mode :
• Pour afficher les étiquettes des éléments de média, définissez la propriété ShowLabelInFullScreen sur "vrai".
• Pour afficher la miniature de la galerie dans ce mode, définissez la propriété ShowThumbnailsInFullScreen sur "vrai".
Lecture en boucle de la galerie
Pour activer la lecture en boucle continue des éléments de média, définissez la propriété LoopGallery sur "vrai". La galerie parcourra automatiquement tous ses éléments avant de reprendre sa lecture depuis le début.
Ajout de titres et de descriptions aux éléments de média
L'ajout de titres et de descriptions aux données de la table d'informations apporte du contexte et améliore l'accessibilité de chaque élément de média de la galerie. L'exemple suivant montre un élément de média sélectionné avec un titre et une description. Item 2 est le titre du média et sa description apparaît à côté.
Vous pouvez masquer le titre ou la description des éléments de la galerie de médias à l'aide des propriétés HideMediaTitle et HideMediaDescription.
Propriétés du widget
La table suivante répertorie les propriétés du widget.
|
Nom de propriété
|
Description
|
Type de base
|
Valeur par défaut
|
Liaison possible ?
|
Localisable ?
|
|---|---|---|---|---|---|
|
Label
|
Spécifie le texte de l'étiquette du widget.
|
STRING
|
N/A
|
O
|
O
|
|
LabelType
|
Définit le type d'étiquette à afficher pour le widget.
|
STRING
|
En-tête
|
N
|
N
|
|
LabelAlignment
|
Aligne le texte de l'étiquette à gauche, à droite ou au centre du widget. Options : Gauche/Centre/Droite
|
STRING
|
Gauche
|
N
|
N
|
|
ShowThumbnails
|
Affiche les miniatures des éléments de média dans la vue carrousel.
|
BOOLEAN
|
Faux
|
O
|
N
|
|
ShowThumbnailsInFullScreen
|
Affiche les miniatures des éléments média en mode plein écran.
|
BOOLEAN
|
Faux
|
O
|
N
|
|
LoopGallery
|
Active la lecture en boucle continue des éléments de média. Lorsque cette propriété est activée, un clic sur le bouton Suivant au dernier élément permet de revenir au premier élément.
|
BOOLEAN
|
Faux
|
O
|
N
|
|
Data
|
Source de données de table d'informations du widget.
|
INFOTABLE
|
N/A
|
O
|
N
|
|
ShowLabelInFullScreen
|
Affiche l'étiquette du média en mode plein écran.
|
BOOLEAN
|
Faux
|
O
|
N
|
|
HideMediaDescription
|
Masque le titre du média.
|
BOOLEAN
|
Faux
|
O
|
N
|
|
HideMediaTitle
|
Masque la description du média.
|
BOOLEAN
|
Faux
|
O
|
N
|
|
MediaDescriptionLableType
|
Définit le type d'étiquette à afficher pour la description de l'élément.
|
STRING
|
Corps
|
N
|
N
|
|
MediaTitleLableType
|
Définit le type d'étiquette à afficher pour le titre de l'élément.
|
STRING
|
Titre long
|