Los switches son una potente herramienta de personalización para los Web Components que genera WCF.
La idea básica es muy sencilla: al asignar en el componente un valor al atributo que lleva el nombre del switch, se agregan una clase de CSS, que tiene por nombre ese valor, elemento dentro del componente, como se muestra en el ejemplo:
Más allá de “on” y “off”
Los switches generados por Web Component Factory siempre funcionan para los valores “on” y “off” del atributo que nombra al switch. La fábrica, al generar el componente, se encarga de agregar las clases y valores de CSS necesarios para estos dos valores.
Pero un switch en WCF puede recibir cualquier valor válido para nombrar una clase CSS, y la API de WCF asignará al elemento indicado dentro del componente dicha clase en caso de que se cambie el valor del atributo correspondiente.
Si la clase no está declarada, naturalmente no habrá ningún cambio, pero si se agrega utilizando customCSS una clase con ese identificador, este se aplicará y el elemento se modificará de acuerdo con el CSS correspondiente, como se ve en el ejemplo.
En el customCSS del componente:
.with-border {border: 2px solid #c2c2c2; border-radius: 6px;}
.shrink {width: 30px;}
.grey-all {filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(3332%) hue-rotate(56deg) brightness(113%) contrast(75%);}Y el resultado:
Switches en sub-componentes
Cuando en un componente se incluyen subcomponentes que tienen switches, además de la posibilidad de utilizar los switches en cada subcomponente, se puede utilizar el switch en el componente principal, sencillamente agregando el atributo y el valor correspondiente.
Esto no solo facilita y hace más cómodo el uso, sino que permite asignando un solo atributo, modificar todos los subcomponentes. Siempre que se quiera modificar un único subcomponente, se puede acceder directamente, como se ve en el ejemplo:
Merece un comentario final el hecho de que la combinación entre el uso de switches en el componente y en los subcomponentes produce algunos conflictos en las clases que se asignan que hay que manejar con cuidado para que el componente siempre se muestre correctamente.
Links de switches
Los links son una de las herramientas más poderosas del ecosistema de Web Component Factory, ya que permiten muy fácilmente vincular el comportamiento de un componente a otros componentes. Vincular los switches es uno de los casos de uso más frecuentes.
En el ejemplo se muestra un link que hace que cuando en el subcomponente 1 el switch se coloca en “on”, en el subcomponente 2 se pase a “off” y en el 3 a “shrink”, y cuando se coloca en “off”, en el subcomponente 2 se pase a “on” y en el 3 a “with-border”.
Este es un ejemplo muy sencillo, que vincula el mismo switch en componentes distintos, pero se puede vincular cualquier switch de un componente con cualquier switch del mismo componente o de otro, así como con variantes y atributos personalizados.
El linkData
let linkData = [{oriAttr:'showicon' , oriValue:'on' , destTagId:'comp-comp3subcomps2.comp-compconswitch_1', destAttr:'showicon', destValue:'off'},
{oriAttr:'showicon' , oriValue:'on' , destTagId:'comp-comp3subcomps2.comp-compconswitch_2', destAttr:'showicon', destValue:'shrink'},
{oriAttr:'showicon' , oriValue:'off' , destTagId:'comp-comp3subcomps2.comp-compconswitch_1', destAttr:'showicon', destValue:'on'},
{oriAttr:'showicon' , oriValue:'off' , destTagId:'comp-comp3subcomps2.comp-compconswitch_2', destAttr:'showicon', destValue:'with-border'}
];
wcf_allInstances.setLinkData('comp-comp3subcomps2.comp-compconswitch', linkData);Los subcomponentes vinculados a través de links:
En resumen, los switches son una herramienta sencilla y potente para cambiar el comportamiento y la presentación de un componente. Vinculados a través de links permiten generar interfaces ricas en funcionalidad que responden rápidamente a las acciones del usuario.
Leave a Reply