Mashups dinámicos
El mashup dinámico permite organizar elementos dentro de un contenedor mediante la configuración de diseño avanzada. Esta configuración se basa en el módulo Flexible Box Layout (Flexbox) para hojas de estilo en cascada (CSS).
Con los contenedores basados en Flexbox, se puede realizar lo siguiente:
• Alinear los elementos vertical u horizontalmente en un contenedor.
• Estirar o ajustar elementos en un contenedor, en función del espacio disponible.
• Definir la altura o el ancho fijos del contenedor.
• Definir las relaciones de aumento y reducción de Flexbox cuando hay más de un contenedor en un mashup.
• Utilizar reglas de CSS personalizadas para colocar elementos.
• Personalizar el aspecto de los contenedores mediante el panel Propiedades de estilo.
Se pueden utilizar contenedores como filas y columnas para estructurar los diseños de mashup. El tamaño de los elementos de un contenedor se expande o disminuye en función del espacio disponible. Al crear un mashup, se puede utilizar el panel Esquema para controlar las opciones, como la orientación, la alineación, el estiramiento y el ajuste de los elementos de un contenedor. Se pueden definir reglas de diseño específicas para cada contenedor en el mashup.
Creación de un mashup dinámico
1. En Composer, pulse en > . Se abre la ventana Nuevo mashup.
2. Seleccione Dinámico y, a continuación, pulse en Aceptar.
3. Introduzca un nombre para el mashup y, a continuación, pulse en Guardar.
Adición de contenedores a un mashup
Por defecto, los mashups dinámicos tienen un contenedor. Para añadir más contenedores a un mashup, realice lo siguiente:
1. Seleccione un contenedor en el mashup.
2. En el panel Esquema, en la sección Añadir contenedor, seleccione una opción para añadir un contenedor a la izquierda, a la derecha, encima o debajo del contenedor seleccionado.
3. Repita los pasos 1 y 2 para añadir contenedores al mashup según sea necesario.
En ThingWorx 9.3.3. o versión posterior, se puede elegir cómo se aplican los estilos a los nuevos contenedores en el mashup bajo la opción Herencia de estilo:
◦ Por defecto: permite aplicar estilos según el tema de estilo de mashup seleccionado.
◦ Combinar: permite aplicar el estilo del contenedor actual al contenedor padre en el nuevo esquema.
◦ Duplicar: permite duplicar las propiedades de estilo del contenedor seleccionado.
4. Pulse en Guardar.
Adición de elementos a un contenedor
Después de crear el diseño del mashup, se puede comenzar a añadir elementos a los contenedores. Los elementos se clasifican en el orden en el que se añaden. Para añadir un elemento, arrástrelo desde el panel Widgets a cualquier contenedor del mashup.
Se pueden añadir widgets dinámicos y no dinámicos al mismo contenedor. Los widgets dinámicos rellenan todo el espacio disponible dentro de un contenedor vacío. Cuando se añade un widget no dinámico, el widget dinámico se define en un tamaño por defecto. Se puede utilizar el panel Esquema para controlar la alineación de los elementos dentro del contenedor. Para obtener más información sobre la organización de elementos, consulte Organización de los elementos de un contenedor dinámico.
Utilización del posicionamiento estático
Cuando el posicionamiento se define en Dinámico, los widgets se organizan según las reglas de diseño del contenedor. Cuando el posicionamiento se define en Estático, las reglas de diseño dinámico se desactivan y se pueden posicionar los widgets en cualquier área del contenedor. Para posicionar un widget, pulse en él y arrástrelo manualmente o utilice los comandos de alineación disponibles para los diseños estáticos.
Personalización del tamaño del contenedor
Se puede controlar el tamaño de cada contenedor dentro de un mashup mediante una de las siguientes opciones:
• Dinámico: permite hacer que el contenedor sea dinámico.
• Tamaño fijo: permite especificar un tamaño fijo para el contenedor.
• Rango de tamaños: permite definir el tamaño del contenedor según un rango definido de valores mínimo y máximo.