Виджет "Медиагалерея" (с поддержкой тем)
Виджет "Медиагалерея" (с поддержкой тем) позволяет отображать набор медиаобъектов, таких как изображения, в формате коллекции. Этот виджет поддерживает циклический, полноэкранный режим и привязку динамических данных, что делает его полезным для создания мэшапов, используемых для отображения нескольких изображений.
 |
Медиагалерея доступна в виде виджета и веб-компонента, которые можно настроить и импортировать из SDK веб-компонентов ThingWorx
|
Анатомия
Виджет "Медиагалерея" включает следующие компоненты:
1. Метка виджета
2. Панель "Коллекция" - основная область, где отображаются медиаобъекты.
3. Стрелки навигации - элементы управления, позволяющие просматривать медиаобъекты вручную.
4. Полоса пиктограмм - необязательная строка, которую можно добавить для предварительного просмотра медиаобъектов в галерее.
5. Счетчик коллекции - отображает порядковый номер текущего медиаобъекта и общее число элементов в коллекции.
6. Кнопка полного экрана - элемент управления, который развертывает виджет для просмотра изображений в полноэкранном режиме.
7. Название медиаобъекта
8. Описание медиаобъекта
Формат данных
Чтобы отобразить коллекцию мультимедиа, необходимо создать сервис, который возвращает данные таблицы данных, со следующими полями.
Имя поля | Базовый тип | Описание |
|---|---|---|
description | STRING | Необязательно. Описание медиаобъекта. |
title | STRING | Необязательно. Заголовок медиаобъекта. |
url | STRING | Обязательный. URL-адрес медиаобъекта. |
Можно также вручную ввести значения для коллекции медиаобъектов с помощью кнопки Добавить рядом со свойством виджета Data.
Добавление и конфигурирование виджета
Чтобы добавить и сконфигурировать виджет "Медиагалерея", выполните следующие шаги.
1. Перетащите виджет с панели Виджеты в контейнер на канве.
2. Измените размер и позицию виджета в соответствии с компоновкой.
3. Привяжите свойство Data к источнику данных таблицы данных, содержащему медиаобъекты, которые требуется отображать.
4. Сконфигурируйте дополнительные свойства на панели Свойства:
5. Сохраните мэшап и предварительно просмотрите его, чтобы проверить функциональность виджета.
Отображение пиктограмм предварительного просмотра
Задайте для свойства ShowThumbnails значение True, чтобы отображать полосу пиктограмм предварительного просмотра ниже текущего медиаобъекта. Эти пиктограммы позволяют пользователям быстро переходить к определенным медиаобъектам. Убедитесь, что источник данных включает соответствующие изображения предварительного просмотра.
Конфигурирование полноэкранного режима
Виджет "Медиагалерея" поддерживает полноэкранный режим, позволяя просматривать элементы коллекции в полноэкранном режиме. Во время выполнения можно войти в этот режим, нажав кнопку перехода в полноэкранный режим. Для закрытия полноэкранного режима нажмите клавишу ESCAPE, а затем кнопку выхода. Кроме того, для этого режима можно сконфигурировать следующие свойства:
• Чтобы показать метки медиаобъектов, задайте для свойства ShowLabelInFullScreen значение True.
• Чтобы показать пиктограмму коллекции в этом режиме, задайте для свойства ShowThumbnailsInFullScreen значение True.
Циклические переходы по коллекции
Чтобы включить непрерывный циклический переход по медиаобъектам, задайте для свойства LoopGallery значение True. Это позволяет автоматически циклически переходить по всем элементам коллекции и возвращаться к началу.
Добавление заголовков и описаний к медиаобъектам
Добавление заголовков и описаний к данным таблицы данных предоставляет контекст и повышает доступность для каждого медиаобъекта в коллекции. В следующем примере показан выбранный медиаобъект с заголовком и описанием. Item 2 - заголовок мультимедиа, рядом с которым отображается описание.
Можно скрыть заголовок или описание для элементов медиагалереи с помощью свойств HideMediaTitle и HideMediaDescription.
Свойства виджета
В следующей таблице перечислены свойства виджета.
Имя свойства | Описание | Базовый тип | Значение по умолчанию | Доступно для привязки? | Локализуемое? |
|---|---|---|---|---|---|
Label | Указывает текст метки виджета. | STRING | Н/Д | Д | Д |
LabelType | Задает тип отображаемой метки для виджета. | STRING | Заголовок | Н | Н |
LabelAlignment | Выравнивает текст метки по левому краю, по правому краю или по центру виджета. Опции: Слева/По центру/Справа | STRING | Слева | Н | Н |
ShowThumbnails | Отображает пиктограммы для медиаобъектов в представлении карусели. | BOOLEAN | False | Д | Н |
ShowThumbnailsInFullScreen | Отображает пиктограммы медиаобъектов в полноэкранном режиме. | BOOLEAN | False | Д | Н |
LoopGallery | Циклически перебирает медиаобъекты для непрерывного воспроизведения. Если это свойство включено, то при нажатии кнопки "Далее" в последнем элементе выполняется возврат к первому элементу. | BOOLEAN | False | Д | Н |
Data | Источник данных таблицы данных для виджета. | INFOTABLE | Н/Д | Д | Н |
ShowLabelInFullScreen | Отображает метку медиаобъекта в полноэкранном режиме. | BOOLEAN | False | Д | Н |
HideMediaDescription | Скрывает заголовки медиаобъектов. | BOOLEAN | False | Д | Н |
HideMediaTitle | Скрывает описания медиаобъектов. | BOOLEAN | False | Д | Н |
MediaDescriptionLableType | Задает тип отображаемой метки для описания элемента. | STRING | Основной текст | Н | Н |
MediaTitleLableType | Задает тип отображаемой метки для заголовка элемента. | STRING | Крупное название |