Пример. Применение форматирования состояния к виджету списка
Список
Можно применить сущность определения состояния к виджету списка. В этом примере форматирование состояния используется, чтобы подсветить текущий статус элементов списка соответственно строковому значению. На следующем рисунке показан виджет списка в мэшапе с виджетами меток и кнопок во время выполнения, а также до применения форматирования состояния.
В списке отображаются данные из привязанной таблицы данных. К каждому элементу списка применяются стили и цвета, для этого используются значения по умолчанию PTC Convergence Theme. Форматирование состояния в этом примере применяется для подсвечивания состояния каждого задания из списка.
 | В этом разделе предполагается, что вы знакомы с созданием и организацией данных в таблицах данных ThingWorx. |
Чтобы применить форматирование состояния, необходимо добавить столбец данных в таблицу данных виджета и использовать его, чтобы указывать состояние каждого задания. Используйте данные из этого столбца для применения форматирования состояния к виджету в Mashup Builder. Каждое задание в списке может находиться в одном из следующих четырех состояний, соответствующих строкам в столбце форматирования состояния:
Состояние | Соответствующая строка |
|---|---|
 (выполнить) | ToDo |
 (выполняется) | InProgress |
 (готово) | Done |
 (по умолчанию) | Любое другое значение рассматривается как ошибка в данных. В этом примере текст окрашивается в красный цвет, а рядом с элементом списка отображается соответствующий значок. |
Чтобы создать определение состояния и определить условия, выполните следующие действия.
1. Выгрузите значки для определений стилей как сущности мультимедиа.
2. В Composer создайте сущность определения состояния, а затем откройте вкладку Информация о состоянии.
3. Добавьте состояния и выберите стили для каждого состояния.
4. В разделе Стиль выберите сущности определения стиля, которые будут использоваться для каждого состояния, или определите пользовательские определения стилей.
Чтобы определить пользовательское определение стиля, выполните следующие действия.
a. В окне Стили средства выбора сущностей щелкните Новое определение стиля. Откроется диалоговое окно Новый пользовательский стиль.
b. Сконфигурируйте опции стиля и выберите медиаобъекты, созданные на шаге 1.
c. Щелкните Готово, чтобы сохранить определение стиля.
5. Щелкните Сохранить, чтобы сохранить сущность определения состояния.
На следующем рисунке показаны состояния, находящиеся в списке после определения условий стиля:
После создания определения состояния примените к виджету форматирование состояния:
1. В Mashup Builder выберите на канве виджет "Список".
2. На панели Свойства щелкните Форматирование состояния рядом со свойством ListFormat. Откроется диалоговое окно "Форматирование состояния".
3. Щелкните Определения стилей на основе состояния, а затем выберите сущность определения состояния, созданную в предыдущей процедуре.
4. Выберите зависимое поле в привязанной таблице данных. В этом примере этот столбец таблицы данных называется Status.
5. Щелкните Готово, чтобы закрыть диалоговое окно, а затем просмотрите мэшап.
Во время выполнения элементы списка будут отображаться, и каждый элемент будет иметь стиль в соответствии со значением в столбце Status. На следующем изображении показан виджет списка в мэшапе с примененным форматированием состояния.
В дополнение к форматированию состояния можно настроить строки и другие части виджета, используя доступные стили на панели Свойства стиля.