Uso de la carga diferida en un mashup
 |
Esta función se soporta en ThingWorx 9.3.2 o versiones posteriores.
|
La carga diferida permite reducir o retrasar las operaciones que exigen recursos y datos para mejorar el tiempo de carga y el rendimiento del mashup. La carga diferida se puede utilizar para configurar un mashup con el fin de cargar componentes esenciales y, a continuación, cargar datos adicionales y ejecutar servicios basados en las acciones que realice el usuario. Además, se pueden descargar contenedores del DOM para liberar recursos del sistema y mejorar el rendimiento cuando un contenedor está fuera de la vista. De este modo, se puede proporcionar a los usuarios un acceso más rápido a las funciones esenciales, lo que mejora la capacidad de respuesta general del mashup. En Mashup Builder, la carga diferida se soporta mediante propiedades, eventos y servicios para los siguientes tipos de contenedores:
• Contenedores de esquema
• Contenedores de las fichas y los widgets de panel dinámicos
El evento Loaded del mashup se utiliza normalmente para ejecutar servicios de datos y funciones en un mashup, incluso si los datos no son visibles. A medida que se diseñan mashups más complejos, los usuarios pueden experimentar tiempos de carga más largos y una disminución del rendimiento cuando un mashup contiene lo siguiente:
• Un número elevado de servicios de datos que se ejecutan al mismo tiempo.
• Entidades multimedia de gran tamaño, que pueden afectar al tiempo que se tarda en descargar recursos.
• Visualizaciones en las que se muestra una gran cantidad de datos, tales como rejillas complejas y widgets de recopilación, que pueden afectar al rendimiento de la representación fotorrealista.
Por ejemplo, considere un mashup que utiliza un widget de ficha para crear un esquema en el que cada ficha contiene un tipo diferente de visualización o un conjunto de widgets de entrada. La carga de datos de todas las fichas en paralelo, cuando un usuario solo necesita ver algunas de las fichas, aumenta el tiempo de carga y el número total de solicitudes de red al servidor. Se puede elegir cargar fichas específicas en función de las acciones que realiza el usuario, la salida de un servicio o una función de expresión. Para obtener más información sobre el uso de la carga diferida en un widget de fichas, consulte Widget de fichas (con temas).
Prácticas recomendadas y consideración de uso
• Utilice el evento Loaded del contenedor en lugar del evento de mashup para ejecutar servicios enlazados a un widget que se carga de forma diferida. Enlazar el evento Loaded del mashup para ejecutar un servicio de un contenedor cargado de forma diferida no mostrará ningún resultado, a menos que se ejecute el servicio LoadContainer.
• Diseñe el esquema de la solución y, a continuación, determine las partes del mashup que se pueden cargar por separado. Se deben tener en cuenta los casos de uso típicos de la solución y utilizar dicha información para decidir cómo cargar el contenido. En algunos casos, la carga de más datos de los necesarios inicialmente puede crear una mejor experiencia de usuario cuando un usuario tiene que cambiar entre distintas vistas rápidamente, lo que deja menos tiempo para cargar cada ficha a la vez. En lugar de cargar datos durante uno o dos segundos cada vez que se abra un contenedor o una ficha, se puede elegir cargar los datos específicos por adelantado. Después de crear el mashup, se debe medir su tiempo de carga y rendimiento y, a continuación, comparar dicha información con los casos de uso previstos para el diseño.
• Cuando un contenedor tarda múltiples segundos en cargar su contenido, se debe tener en cuenta que se carga, incluso cuando ya no está en la vista actual. Mantener el contenido cargado evita que el usuario tenga que esperar a que el contenido se vuelva a cargar cada vez que cambie a una vista diferente y luego vuelva a la anterior. Se puede añadir un botón y enlazarlo al widget ReloadContainer para permitir que los usuarios vuelvan a cargar los datos manualmente.
• Asegúrese de que otros widgets, funciones o servicios utilizan los datos de un contenedor cargado de forma diferida solo después de que se cargue el contenedor.
• Los mashups pueden contener muchos widgets y secciones que no son relevantes para todos los usuarios en todo momento. Cree reglas mediante servicios y funciones para controlar la carga y visibilidad de los widgets y datos. Se puede cargar contenido en función de los datos introducidos por el usuario o los eventos que se producen en tiempo de ejecución.
Utilice reglas de visibilidad en los contenedores cargados de forma diferida para que solo se muestren cuando sea necesario.
• Asegúrese de que las funciones que utilizan parámetros de entrada de widgets cargados de forma diferida se ejecuten después de cargar el contenedor padre. Las funciones de mashup quizás solo funcionen cuando todos los participantes enlazados están visibles o al menos han sido visibles una vez.
Para configurar las propiedades de carga diferida de un contenedor:
1. En Mashup Builder, seleccione un contenedor en el lienzo o utilice el panel Explorador.
2. En el panel Propiedades, establezca la propiedad LazyLoading del container en Verdadero. Se muestran las propiedades, los servicios y los eventos adicionales de la carga diferida.
◦ Para descargar datos para el contenedor, defina la propiedad EnableContainerUnload en Verdadero y, a continuación, enlace un evento que ejecute el servicio UnloadContainer.
◦ Para cargar el contenedor en tiempo de ejecución, enlace el servicio LoadContainer a un evento de widget, función o servicio de datos.
|
|
Los contenedores cargados de forma diferida dentro del widget de fichas se cargan, descargan y vuelven a cargar automáticamente al cambiar a una ficha que está configurada para la carga diferida.
|
◦ Para volver a cargar el contenido dentro del contenedor, enlace el servicio ReloadContainer a un evento, por ejemplo, pulsación en un botón.
3. Enlace el evento Loaded del contenedor seleccionado para ejecutar servicios en widgets, servicios de datos o funciones.
Opcionalmente, enlace el evento Unloaded para realizar acciones cuando el contenedor se quite del DOM.
4. Pulse en Guardar y, a continuación, en Ver mashup.
Cuando se ejecuta LoadContainer en tiempo de ejecución, el evento Loaded se activa y ejecuta cualquier servicio enlazado, como los datos de un gráfico o un servicio Evaluate de una función de expresión o validador.
Propiedades de carga diferida
En la siguiente tabla se enumeran las propiedades, los eventos y los servicios disponibles para activar y configurar la carga diferida de los contenedores de un mashup.
|
Propiedad
|
Descripción
|
Tipo base
|
Valor por defecto
|
|---|---|---|---|
|
LazyLoading
|
Permite cargar, descargar y recargar el contenedor mediante eventos de widgets, funciones o servicios en tiempo de ejecución.
|
BOOLEAN
|
Falso
|
|
LoadContainer
|
Un servicio enlazable que permite cargar, descargar y volver a cargar el contenedor en tiempo de ejecución mediante eventos de widget, función o servicio.
|
Servicio
|
|
|
Loaded
|
Un evento que se activa cuando se carga el contenedor y se muestra en la vista del mashup en tiempo de ejecución. Este evento se puede utilizar para ejecutar los servicios que están enlazados a los widgets dentro del contenedor.
|
Evento
|
|
|
EnableContainerUnload
|
Permite descargar el contenedor y su contenido mediante el servicio UnloadContainer cuando la propiedad LazyLoading está activada.
|
BOOLEAN
|
Falso
|
|
UnloadContainer
|
Permite descargar el contenedor y su contenido, incluidos los contenedores hijo de la vista del mashup en tiempo de ejecución. Enlace este evento a eventos en el mashup, como el evento Clicked de widget de botón o el evento True de la función de validación.
|
Servicio
|
|
|
ReloadContainer
|
Permite volver a cargar el contenedor y su contenido mediante su descarga y carga en la vista del mashup en tiempo de ejecución. Esta propiedad solo está disponible cuando se selecciona EnableContainerUnload.
|
Servicio
|
|
|
Unloaded
|
Un evento que se activa cuando el contenedor se descarga y se quita de la vista del mashup en tiempo de ejecución. Esta propiedad solo está disponible cuando se selecciona EnableContainerUnload.
|
Evento
|
Uso de la carga diferida en extensiones de widget personalizado
En la siguiente sección se describen los pasos necesarios para actualizar una extensión de widget personalizado para soportar la carga diferida. Para utilizar las funciones de carga diferida para los contenedores, se debe revisar y actualizar manualmente el fichero <nombre del widget>.runtime.js del widget.
Los widgets utilizan una función denominada beforeDestroy() que se utiliza para quitar los enlaces y datos de widget antes de quitarlos del DOM de HTML. En versiones anteriores de ThingWorx, una manera típica de quitar un widget del DOM es declarar una variable que señala al objeto de widget y, a continuación, asignar un valor null a esta variable cuando se llama a beforeDestroy. Por ejemplo:
this.beforeDestroy = function(){
/** Destroy widget
thisWidget = null;
}
/** Destroy widget
thisWidget = null;
}
La destrucción de widgets mediante este método provoca incidencias al volver a cargar el widget, ya que los métodos a los que se llama intentan utilizar esta variable. Para utilizar la carga diferida en un widget personalizado, se deben actualizar las referencias a la función beforeDestroy() en el fichero <nombre del widget>.runtime.js de las extensiones de widget personalizado. Para ello, añada el argumento domOnly. El siguiente código es un ejemplo:
this.beforeDestroy = function(domOnly) {
if (!domOnly) {
thisWidget = null;
]
};
if (!domOnly) {
thisWidget = null;
]
};
El argumento domOnly permite quitar el widget del DOM sin destruirlo y se puede volver a cargar en el DOM posteriormente.
Para actualizar una extensión existente, realice los siguientes pasos:
1. Extraiga la extensión del widget y, a continuación, abra el fichero de origen <nombre del widget>.runtime.js del widget en un editor de texto. En este fichero JavaScript se definen la estructura del widget y su comportamiento cuando se utiliza en un mashup.
2. Busque en el contenido del fichero cualquier referencia a la función beforeDestroy(). Esta función se invoca antes de que se quite el elemento DOM del widget y el widget se desconecte de su widget padre y se destruya.
◦ Si se hace referencia al método, añada el argumento domOnly de la siguiente manera:
this.beforeDestroy = function(domOnly) {
3. Añada una sentencia compuesta para la asignación de variables de modo que se destruya el widget solo si el valor del argumento domOnly es falso:
if (!domOnly) {
thisWidget = null;
}
thisWidget = null;
}
4. Guarde el fichero runtime.js del widget y, a continuación, vuelva a empaquetar la extensión personalizada.
5. Importe el widget actualizado en Composer.
Ahora se puede utilizar el widget personalizado en contenedores cargados de forma diferida.