¿Quieres realizar el planteamiento de una progress bar con web components? ¿Quieres volver a utilizarla en otros proyectos?

Las funcionalidades de los web components te pueden ayudar a llevar a cabo ambas tareas, ya que son herramientas del desarrollo web que te permiten realizar etiquetas HTML personalizadas que puedes reciclar en los proyectos que lo necesiten. Esto hace que tu desarrollo sea mucho más efectivo y rápido.

Por tanto, si quieres profundizar en esta herramienta, vamos a dar los primeros pasos para la creación de un web component con el planteamiento de una progress bar para un buscador de películas.

¿Qué encontrarás en este post?

Creando un buscador de películas desde cero

En este ejercicio práctico queremos diseñar y producir un buscador de películas, donde se presenta un listado amplio de formatos audiovisuales y, si haces clic, te lleva a la descripción de la película en FilmAffinity. Los elementos que encontraremos en este buscador de películas son la barra de búsqueda, el input de texto (que aparecerá sobre la barra donde el usuario introduce lo que quiere buscar), un botón etiquetado con una x para borrar el contenido y el botón de buscar. En este artículo, vamos a realizar el planteamiento de una progress bar.

A continuación, puedes visualizar el buscador de películas al que queremos llegar con este planteamiento de una progress bar con web components.

Planteamiento de una progress bar

Vamos a enfocarnos en maquetar los elementos que necesitamos para el desarrollo de la progress bar. En este caso, queremos dibujar una barra de progreso que simboliza la nota de la película y que se dibujará en un escala que va de 0 a 100. Antes de desarrollar el web component, vamos a identificar las 4 variables del planteamiento de una progress bar con estos componentes del desarrollo web.

Responsabilidades

Las responsabilidades de un web component se refieren a las tareas que debe realizar un elemento para cumplir con los objetivos dentro de un programa de desarrollo web. En este caso, el web component de la progress bar tiene que mostrar un progreso, que tiene un inicio y un fin, y que se mueve en una escala numérica del 0 al 100. Esta hace referencia a la puntuación que se le otorga a cada una de las películas de la lista.

Atributos

El atributo que va a recibir el componente de la progress bar para cumplir con sus responsabilidades es el del progreso, es decir, a partir de la puntuación que se le da a cada una de las películas.

Eventos

Al profundizar en las características que puede tener una barra de progreso, podemos determinar que este web component no tiene eventos que generar dentro del programa de código.

Custom properties

Para que la barra de progreso se pueda mostrar como en la imagen que te hemos presentado de nuestro sitio web, tendremos que configurar y personalizar la barra a partir de elementos como:

El color de background o de fondo de la barra, es decir, lo que aparece detrás de la barra, en la zona que no ha sido completada por el progreso.
El color de la barra.
El alto de la barra.
Los colores y el tamaño del borde.

¿Cómo definir la clase progress bar?

En el desarrollo de web components, tener lista la plantilla de nuestros elementos escritos, antes de definir la clase que nos ayudará a ejecutar dichos elementos, es una necesidad. Por eso, para crear la template de la progress bar, vamos a emplear el método de document.createElement, que se sitúa dentro del fichero HTML. Aquí vamos a instanciar el wrapper de nuestra barra de progreso para pintarla, así como los estilos de la barra de progreso, que se irá moviendo.

A su vez, dentro de las etiquetas del estilo, vamos a pintar un div dentro de otro. Así pintaremos la barra de progreso del fondo, que nunca cambia, y la barra de progreso del frente, es decir, la que cambia porque irá progresando.

A continuación, te encontrarás con el extracto de la template de nuestro ejercicio práctico:

const templateElement = document.createElement ("template");

templateElement.innerHTML = '
<style>

.progress-bar-wrapper {
        background-color: var (--progress-bar-background-color, black);
	width: 100%;
         height: var (--progress-bar-height, 30 px);

.progress-bar {
        background-color: var (--progress-bar-background-color, orange);
        height: 100%;
 
 
}

</style>


<div class = "progress-bar-wrapper">
	<div class = "progress-bar"> <div>
</div>

';

Una vez tengas tu template, estarás listo para definir la clase, el constructor y los métodos de la barra de progreso.

Clase y constructor

Ahora es el momento de definir nuestra clase ProgressBar. Para ello, debemos extenderla desde los elementos de HTML e instanciar el constructor. Bajo este constructor, vamos a instanciar los atributos que hemos definido en el planteamiento, es decir, el atributo de progress. Esto lo podemos realizar con el método getAttribute.

Por otro lado, tenemos que ejecutar el estado de connectedCallback para implementar el clon de la plantilla. Aquí también tendremos que instanciar las constantes que nos permitirán añadir la barra y generar el progreso, al subirle o disminuirle el tamaño de largo que tendrá la barra con la variable de width.

Por último, tendrás que definir el custom element del web component, como puedes ver al final del siguiente extracto de código:

class ProgressBar extends HTMLElement {
	constructor() {
	super();

	this.progress = this.getAttribute ("progress")
	this.attachShadow ({mode: "open"});
	}


	connectedCallback() {
		const template = templateElement.content.cloneNode (true);
		this.shadowRoot.appendChild (template);

		const progressBarElement = this.shadowRoot.querySelector ('-progress-bar');

		progressBarElement.style.width = '${this.progress}$';
	}
}

customElement.define ("progress-bar", ProgressBar);

Ahora que con este ejercicio práctico de buscador de películas has aprendido cómo realizar el planteamiento de una progress bar con web components, ya estás listo para seguir planteando el resto de web components de este proyecto. Podrás ejecutar este buscador de películas si sigues practicando tus habilidades y aumentado tus conocimientos, para lo que te recomendamos nuestra formación intensiva en Desarrollo Web Full Stack Bootcamp. Si quieres formarte de manera íntegra con la ayuda de nuestros profesionales en programación, ¡entra ya y solicita más información!