Atributos

Los componentes creados con Web Component Factory están concebidos para brindar un manejo sencillo y sofisticado a través de la inclusión de atributos.

La personalización de textos, imágenes y vínculos, la personalización a través de variantes y los cambios del componente a través de switches, todo se maneja agregando, cambiando y quitando atributos.

No solo tag del componente utiliza atributos para facilitar su manejo: también los elementos del componente tienen atributos que permiten reconocerlos y cambiarlos según las necesidades.

La API de WCF permite además tener esas facilidades para cualquier atributo de usuario que se desee agregar.

Atributos que funcionan como parámetros

Cuando se crea un componente con Web Component Factory, para cada texto, vínculo o imagen se creará un atributo que permite modificarlo en tiempo de ejecución.

El valor que trae el componente pasa a ser el valor por omisión para el atributo, el que se muestra en caso de que no se especifique nada. En caso de que se especifique un valor para el atributo, se utilizará este valor en su reemplazo.

Por ejemplo, en el siguiente componente action-button se previó un parámetro text para modificar el texto, y un valor por omisión Text Action. Por tanto el tag sin parámetros genera el botón default:

<comp-action-button id="comp-action-button"
></comp-action-button>

Mientras que por su parte, el siguiente ejemplo muestra como utilizando el atributo text se puede modificar el contenido del componente.

<comp-action-button id="comp-action-button"
   text="Siguiente"
></comp-action-button>

Cuando se descarga un componente de WCF, dentro del zip se incluye un HTML de ejemplo que incluye todos los atributos del componente que funcionan como parámetro y su valor por omisión. Este es el ejemplo que viene en el zip correspondiente al componente action-button visto más arriba:

<comp-action-button id="comp-action-button"
	text="Text action"
	vector_arrowforward="./comps/img/vectors7221810.svg"
></comp-action-button>

Atributos para vínculos

En el caso de que un componente incluya un vínculo (tag a de HTML) se generarán 2 atributos: uno para el texto y otro para el destino del vínculo.

El atributo para el destino del vínculo tiene la particularidad de que si se le asigna una string que corresponde al nombre de una función válida, el link ejecutará esa función al ser clickeado. La función recibirá como parámetro el vinculo clickeado.

En el siguiente ejemplo, un click en el vínculo hará que el navegador cargue la página https://wcf.tools

<comp-mi-enlace id="comp-mi-enlace"
	a_texto_de_enlace="Enlace a un sitio"
	a_texto_de_enlace_href="https://wcf.tools"
></comp-mi-enlace>

Y el componente se ve así, pruebe clickearlo:

En el siguiente ejemplo, por su parte, un click en el vínculo hará que se ejecute la función funcEjemplo

<script>
	function funcEjemplo(instance) {
		console.log(instance);
		alert("soy una funcion");
	}
</script>

<comp-mi-enlace id="comp-mi-enlace"
	a_texto_de_enlace="Enlace a una función"
	a_texto_de_enlace_href="funcEjemplo"
></comp-mi-enlace>

Ahora el componente se ve así. Pruebe clickear este también:

A diferencia de lo que sucede habitualmente con las funciones de tipo callback en JavaScript, en este caso hay que pasar el nombre de la función como una string (entre comillas).

Atributos predefinidos

data-wcfid

Un componente puede ser utilizado muchas veces en la misma página, lo que implica que si cada elemento tienen un atributo id, estos se repitan la misma cantidad de veces, violando el criterio de que un id debe necesariamente ser único dentro de todo el documento.

Para salvar este inconveniente, WCF agrega un atributo data-wcfid[1] que identifica cada elemento dentro de un componente.

En el caso de nombres repetidos, se agrega automáticamente un ordinal para diferenciarlo generando nombres de tipo boton, boton_1, boton_2 y así sucesivamente

Se puede acceder a los elementos dentro de la instancia de un componente muy fácilmente utilizando la función getInstanceElemByWcfid.

El atributo data-wcfid se crea a partir de los datos que provee la fuente según el siguiente criterio:

Figma

En el caso de Figma el wcfid se toma el nombre del elemento (el que figura en la columna derecha de la interfaz). Los espacios son rellenados con guiones, y se cambian las letras con tilde por sus correspondientes sin tilde.

Es importante resaltar que si no se cambia el nombre de un elemento de texto, Figma asigna como nombre el texto que forma el contenido, lo que genera identificadores muy largos y un sinnumero de identificadores “Lorem ipsum dolor sit amet…”

HTML

En el caso de HTML, el wcfid se toma de los siguientes atributos, con la prioridad de la lista:

1. id: el valor del atributo id, si existe
2. name: el valor del atributo name, si existe y no hay id.
3. data-name: como solo los elementos de formulario tienen atributo name, se prevé el uso del atributo data-name.
4. tagName: la propiedad tagName del elemento (div, p, img, etc.)
5. En caso de que no existiera ninguno de los anteriores, el atributo data-wcfid será node_name.

Palabras reservadas

En el caso de que el nombre resulte en una palabra reservada de JavaScript, como default, class o continue, por ejemplo, el generador de componentes agregará el prefijo my.

no-subcomps

Un problema muy común en el uso de componentes es que en la creación se incluyen subcomponentes, que luego en el producción deben desaparecer.

Una solución sería crearlos y luego de terminar eliminar los subcomponentes para generar la versión de producción. Pero esto es tremendamente incómodo, sobre todo porque durante el desarrollo y en las modificaciones que implica el mantenimiento habría que realizar este procedimiento decenas de veces.

Para resolver este problema se agregó el atributo no-subcomps, que cuando vale true hace que desaparezcan todos los subcomponentes de un componente. De este modo se puede crear fácilmente un componente con subcomponentes de relleno, y quitarlos en producción agregando el atributo no-subcomps

variant

Web Component Factory permite la creación de componentes que se desdoblan en variantes, es decir, que cambian de propiedades CSS y agregan o quitan elementos dinámicamente. Un componente que tiene múltiples variantes se denomina un set, porque podría concebirse como un set de componentes distintos.

El atributo variant aplicado al tag del componente cambia la variante.

variant recibe solamente valores numéricos. Si el atributo no está, está vacío, vale 0 o vale cualquier valor que no tenga asignada una variante, el componente seleccionará la variante default.

Atributos y switches

Un switch es una variable que permite modificar un elemento dentro de un componente. Esto incluye mostrarlo, modificarlo o agregar cualquier atributo de CSS.

Como todo el comportamiento dentro de WCF esto se maneja a través de atributos.

Todo switch tiene un nombre, y ese será el nombre del atributo a utilizar. Todo switch acepta dos valores:

• on: muestra el elemento sin modificaciones
• off: elmina el elemento (y los elementos que integran la lista children del elemento) agregando una clase que contiene solamente display:off;

Cualquier otro valor que se asigne al switch, agregará una clase al elemento switcheado con ese valor, de modo que si la clase existe porque fue agregada como customCSS, entonces el elemento tomará los valores de CSS que la clase incluye.

Puede conocer más sobre Switches y customCSS en las notas específicas.

_____________________

[1] Según el estándar que define el HTML 5, los atributos de usuario deben siempre comenzar con el prefijo data-