Использование отложенной загрузки в мэшапе
 |
Эта возможность поддерживается в ThingWorx 9.3.2 и более поздних версиях.
|
Отложенная загрузка позволяет сократить или отложить ресурсоемкие и интенсивно использующие данные операции, чтобы улучшить время загрузки и быстродействие мэшапа. Можно использовать отложенную загрузку, чтобы сконфигурировать мэшап для загрузки важных компонентов, а затем загружать дополнительные данные и выполнить сервисы на основе действий, выполняемых пользователем. Кроме того, можно выгружать контейнеры из DOM, чтобы освобождать системные ресурсы и повышать производительность, если контейнер находится вне вида. Это позволяет предоставлять пользователям более быстрый доступ к важнейшим функциям, что повышает общую скорость реагирования мэшапа. В Mashup Builder отложенная загрузка поддерживается с помощью свойств, событий и сервисов для следующих типов контейнеров:
• Контейнеры компоновки
• Контейнеры на виджетах вкладок и динамической панели
Событие Loaded мэшапа обычно используется для выполнения сервисов данных и функций в мэшапе, даже если данные не являются видимыми. При конструировании более сложных мэшапов пользователи могут столкнуться с увеличением времени загрузки и снижением производительности, если в мэшапе содержатся следующие элементы:
• Большое число сервисов данных, выполняемых одновременно.
• Большие медиаобъекты, которые могут влиять на время, необходимое для загрузки ресурсов.
• Визуализации, отображающие большой объем данных, таких как сложные сетки и виджеты наборов, которые могут влиять на скорость рендеринга.
Например, рассмотрим мэшап, в котором используется виджет "Вкладка", чтобы создать компоновку, в которой каждая вкладка содержит другой тип визуализации или набор виджетов для ввода данных. Загрузка данных для всех вкладок одновременно, когда пользователю требуется просматривать только некоторые из вкладок, увеличивает время загрузки и общее число сетевых запросов к серверу. Можно выбрать загрузку конкретных вкладок на основе действий, которые выполняются пользователем, функцией выражения или при выводе данных из сервиса. Дополнительные сведения об использовании отложенной загрузки в виджете "Вкладки" см. в разделе Виджет "Вкладки" (с поддержкой тем).
Рекомендации и соображения по использованию
• Используйте событие Loaded контейнера вместо события мэшапа, чтобы выполнить сервисы, привязанные к виджету с отложенной загрузкой. При привязке события Loaded мэшапа для выполнения сервиса в контейнере с отложенной загрузкой результаты не будут отображаться до выполнения сервиса LoadContainer.
• Создайте компоновку решения, а затем определите части своего мэшапа, которые могут загружаться по отдельности. Рассмотрите типичные варианты использования решения и используйте эту информацию, чтобы решить, как загружать содержимое. В некоторых случаях загрузка большего объема данных, чем требуется первоначально, будет более удобной для пользователя, когда требуется быстро переключаться между различными видами и тратить меньше времени для загрузки каждой вкладки. Вместо загрузки данных для второй или двух вкладок при каждом открытии контейнера или вкладки можно заранее загрузить конкретные данные. После создания мэшапа пользователь должен измерить время и скорость загрузки, а затем сравнить это с ожидаемыми вариантами использования своей разработки.
• Когда контейнеру требуется несколько секунд для загрузки его содержимого, рассматривайте вариант держать его загруженным, даже если он больше не отображается в текущем виде. Поддержание загруженного содержимого исключает для пользователя ожидание повторной загрузки содержимого при каждом переключении к другому виду, а затем возвращении к предыдущему. Можно добавить кнопку и привязать ее к виджету ReloadContainer, чтобы позволить пользователям перезагружать данные вручную.
• Убедитесь, что данные из контейнера с отложенной загрузкой используются другими виджетами, функциями или службами только после загрузки контейнера.
• Мэшапы могут содержать много виджетов и разделов, которые не актуальны для всех пользователей все время. Создайте правила с использованием сервисов и функций, чтобы управлять загрузкой и видимостью виджетов и данных. Можно загружать содержимое на основе входных данных пользователя или событий, возникающих во время выполнения.
Используйте правила видимости в контейнерах с отложенной загрузкой, чтобы они отображались только по мере необходимости.
• Убедитесь, что функции, которые используют входные параметры из виджетов с отложенной загрузкой, выполняются после загрузки родительского контейнера. Функции мэшапов могут работать только в случае, когда все связанные участники являются видимыми или были видимыми хотя бы один раз.
Чтобы настроить свойства отложенной загрузки для контейнера, выполните следующие действия:
1. В Mashup Builder выберите контейнер на канве или с помощью панели инструментов Проводник.
2. На панели Свойства задайте для свойства LazyLoading контейнера значение True. Отображаются дополнительные свойства, сервисы и события для отложенной загрузки.
◦ Чтобы выгружать данные для контейнера, задайте для свойства EnableContainerUnload значение True, а затем привяжите событие, которое выполняет сервис UnloadContainer.
◦ Чтобы загружать контейнер во время выполнения, свяжите сервис LoadContainer с виджетом, функцией или событием сервиса данных.
|
|
Контейнеры с отложенной загрузкой в виджете "Вкладки" автоматически загружаются, выгружаются и перегружаются при переключении на вкладку, которая сконфигурирована для отложенной загрузки.
|
◦ Чтобы перезагружать содержимое в контейнере, привяжите сервис ReloadContainer к событию, такому как нажатие кнопки.
3. Привяжите событие Loaded выбранного контейнера для выполнения сервисов в виджетах, сервисах данных или функциях.
При необходимости привяжите событие Unloaded, чтобы выполнять действия при удалении контейнера из DOM.
4. Щелкните Сохранить, а затем щелкните Просмотр мэшапа.
При выполнении LoadContainer во время выполнения событие Loaded инициирует и выполняет любой связанный сервис, такой как данные для диаграммы или сервис Evaluate функции выражения или проверки.
Свойства отложенной загрузки
В следующей таблице перечислены свойства, события и сервисы, доступные для включения и конфигурирования отложенной загрузки для контейнеров в мэшапе.
|
Свойство
|
Описание
|
Базовый тип
|
Значение по умолчанию
|
|---|---|---|---|
|
LazyLoading
|
Позволяет загружать, выгружать и перезагружать контейнер с помощью событий виджета, функции или сервиса во время выполнения.
|
BOOLEAN
|
False
|
|
LoadContainer
|
Связываемый сервис, который позволяет загружать, выгружать и перезагружать контейнер во время выполнения с помощью событий виджета, функции или сервиса.
|
Сервис
|
|
|
Loaded
|
Событие, которое инициируется, когда контейнер загружается и отображается в представлении мэшапа времени выполнения. Это событие можно использовать для выполнения сервисов, которые привязаны к виджетам в контейнере.
|
Событие
|
|
|
EnableContainerUnload
|
Позволяет выгрузить контейнер и его содержимое, используя сервис UnloadContainer, когда включено свойство LazyLoading.
|
BOOLEAN
|
False
|
|
UnloadContainer
|
Выгружает контейнер и его содержимое, включая дочерние контейнеры из представления мэшапа времени выполнения. Свяжите это событие с событиями в мэшапе, такими как событие Clicked виджета "Кнопка" или событие True функции проверки.
|
Сервис
|
|
|
ReloadContainer
|
Перезагружает контейнер и его содержимое, выгружая и загружая его в представление мэшапа времени выполнения Это свойство доступно только при выборе EnableContainerUnload.
|
Сервис
|
|
|
Unloaded
|
Событие, которое инициируется, когда контейнер выгружается и удаляется из представления мэшапа времени выполнения. Это свойство доступно только при выборе EnableContainerUnload.
|
Событие
|
Использование отложенной загрузки в пользовательских расширениях виджетов
В следующем разделе описаны шаги, необходимые для обновления пользовательского расширения виджета для поддержки отложенной загрузки. Чтобы использовать функции отложенной загрузки для контейнеров, необходимо проверить и обновить файл виджета <виджет>.runtime.js вручную.
Виджеты используют функцию beforeDestroy(), которая применяется для очистки привязок виджета и данных перед ее удалением из DOM HTML. В предыдущих версиях ThingWorx типичным способом удаления виджета из DOM является объявление переменной, которая указывает на объект виджета, а затем присваивает значение null этой переменной при вызове beforeDestroy. Например:
this.beforeDestroy = function(){
/** Destroy widget
thisWidget = null;
}
/** Destroy widget
thisWidget = null;
}
Удаление виджетов с помощью этого метода приводит к проблемам при перегрузке виджета, когда вызываемые методы пытаются использовать эту переменную. Чтобы использовать отложенную загрузку в пользовательском виджете, необходимо обновить ссылки на функцию beforeDestroy() в файле <виджет>.runtime.js пользовательских расширений виджетов, добавив domOnly аргумент. Ниже приведен пример кода:
this.beforeDestroy = function(domOnly) {
if (!domOnly) {
thisWidget = null;
]
};
if (!domOnly) {
thisWidget = null;
]
};
Аргумент domOnly позволяет удалить виджет из DOM без разрушения виджета, а также перезагрузить его в DOM позже.
Чтобы обновить существующее расширение, выполните следующие шаги:
1. Извлеките расширение виджета, а затем откройте исходный файл виджета <виджет>.runtime.js в текстовом редакторе. Этот файл JavaScript определяет структуру виджета и его поведение при использовании в мэшапе.
2. Выполните поиск в содержимом файла всех ссылок на функцию beforeDestroy(). Эта функция вызывается перед удалением элемента DOM виджета, данный виджет отсоединяется от родительского виджета и уничтожается.
◦ Если используется ссылка на метод, добавьте аргумент domOnly следующим образом:
this.beforeDestroy = function(domOnly) {
3. Чтобы уничтожать виджет, только когда аргумент domOnly имеет значение false, добавьте условный оператор для назначения переменной:
if (!domOnly) {
thisWidget = null;
}
thisWidget = null;
}
4. Сохраните файлruntime.js виджета, а затем повторно упакуйте пользовательское расширение.
5. Импортируйте обновленный виджет в Composer.
Теперь пользовательский виджет можно использовать в контейнерах с отложенной загрузкой.