¿Cómo definir la clase film item?

Saber cómo definir la clase film item en el ámbito del desarrollo de los web componentes te puede ayudar a crecer como profesional en el desarrollo web. Este mismo proceso se puede encontrar en otros ejercicios y te resultará muy útil para aplicarlo en tus propios proyectos.

¿Cómo definir la clase film item?

La definición de la clase film item viene de un ejercicio práctico mucho más amplio, donde hemos desarrollo un programa que tiene el objetivo de crear un buscador de películas a partir de los web components. Este proyecto está formado por varios componentes web, como progress-bar, para definir la barra de progreso o de rating de las películas; film app, que conforma toda la aplicación, por lo que es el componente más grande; y por último, el tema de este post, que es cómo definir la clase film item.

Plantilla del film item wrapper

La plantilla del film item wrapper es uno de los procesos más importantes que debes realizar para conformar un web component, ya que este es el momento en el que vas a configurar el texto que pasará y se pintará sobre la pantalla de un sitio web. Como podrás ver a continuación, esta plantilla se clonará dentro de la formación de la clase y del constructor para definir la clase film item.

<div class = "film-item-wrapper">
    <a href "https://www.filmaffinity.com/" targets = "_blank">
    <img src = "alt="image poster">
    <progress-bar> </progress-bar>
     </a>
</div>

La plantilla que acabamos de desarrollar tiene dos objetos importantes dentro del desarrollo del web component: el enlace que nos lleva a la página del FilmAffinity, la fuente de la imagen o portada de la película, y las etiquetas para el progress bar.

Definición de clase y métodos

Ahora, pasemos a definir la clase film item y sus métodos, lo que nos ayudarán a pintar la portada de la película y toda la información que vamos a relacionar con ella.

Para esto, tomaremos los procesos generales para la definición de una clase como un web component, por lo que tendremos que extender nuestra clase con los elementos de HTML. Después, vamos a añadir un constructor, donde vamos a instanciar cada uno de los atributos que necesita nuestra clase. Estos son el nombre o título de la película y la imagen, a la que le tendremos que pasar una imagen como valor por defecto (será un link). Por último, tendrás que instanciar la barra de progreso, que solo se pintará si tiene un valor o un rating.

Por otro lado, vamos a empezar a establecer las constantes para cada uno de los elementos dentro del estado del connectedCallback, es decir, un lugar que nos permite invocar elementos personalizados dentro del programa. Primero vamos a instanciar el clon de la plantilla; después, seguiremos con los elementos de la imagen y del link, que se establecerán como atributos con el método de querySelector.

En el siguiente paso tendrás que tener definida la clase del progress bar, para establecerla como un atributo personalizado con el método de querySelector bajo el estado de connectedCallback.

class FilmItem extends HTMLElement {
          constructor()  {
                 super();
                 
                 this.name = this.getAttribute ('name') || null;
                 this.image = this.getAttribute ('image') || 'link_para_la_imagen';
                 this.progress = this.getAttribute ('progress') || null; // no pintar barra si no hay valor

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

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

                 const imgElement = this.shadowRoot.querySelector ('img');
                 imgElement.src = this.image;

                 const linkElement = this.shadowRoot.querySelector ('a');
                 linkElement.setAttribute ( "href, 'link${this.name}');

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

customElements.define ("film-item", FilmItem);

Por último, deberás definir el web component de film item con el método customElements.define.

El proceso que acabamos de ver para definir la clase film item en la creación de un buscador de películas es similar al que podemos desarrollar con cualquier web component en otro tipo de proyectos de código. Si quieres profundizar mucho más en este tema para formarte de manera íntegra y rápida en el mundo del desarrollo web, tu mejor opción es echarle un vistazo al Desarrollo Web Full Stack Bootcamp. Con nuestra metodología propia aprenderás a nivel teórico y práctico con la guía de grandes profesionales en el sector. ¡No te pierdas esta gran oportunidad y entra ya para pedir información y cambiar tu futuro!