Los procesos para las definiciones de clases, como el de definir la clase film app, son muy recomendables para profundizar en las prácticas relacionadas con la creación de web components. Se trata de etiquetas HTML personalizadas que puedes reutilizar en varios archivos o ficheros de un mismo programa de código. Ahora, sigue leyendo este post acerca de los procesos para definir la clase film app.
Procesos para definir la clase film app
El ejercicio práctico que vamos a desarrollar en este post tiene el objetivo de crear una aplicación web que almacene un buscador de películas, de modo que podrás acceder a la información básica y adicional, así como al rating de varias películas lanzadas a lo largo del tiempo. El ejercicio está compuesto por varios componentes para la ejecución de un mismo programa, como la clase del progress bar, film items y films app.
En este post profundizamos en cómo ejecutar y definir la clase film app. Se trata de una clase que se encargará de instanciar el buscador y almacenar toda la lista de películas sobre la pantalla.
Template para web components
En el desarrollo de un programa de web components, antes de definir la clase, necesitamos configurar una template o plantilla, que pueda copiarse en cualquier parte de código y que, además, nos ayudará a pintar los elementos que necesitamos sobre la pantalla de un sitio web.
En este caso, vamos a definir el web component dentro de las etiquetas <div> </div>, donde pasaremos la clase films-app-wrapper y el elemento add element component para añadirle los elementos al componente.
<div class "films-app-wrapper",
<add-element-component> </add-element-component>
</div>Definición de la clase y métodos
Ahora que ya tenemos nuestra plantilla lista para la ejecución de los web components, vamos a empezar a definir la clase y todos los elementos que deberían componerla. En primer lugar, nos permitiremos instanciar la clase FilmApp, la cual se va a extender desde los elementos de HTML. Allí vamos a pasar la clave y la URL de nuestra OMDB API, que es la herramienta en la que encontraremos todas las películas que se pintarán en nuestro sitio web.
Una vez realizado este proceso, podrás instanciar los métodos, como el connectedCallBack, donde tendrás que clonar el template. A su vez, tendrás que instanciar el atributo para añadirle el elemento al componente y pasarle las variables necesarias, como el fileName. Como en este caso estás creando un evento, tienes que ejecutar un escuchador que lo pueda obtener desde fuera del componente.
Para todo ello, tienes que emplear diferentes métodos y elementos, como querySelector, addEventListener y cloneNode, entre otros. Para un reconocimiento mucho más claro del proceso, puedes visualizar el siguiente extracto de código:
class FilmApp extends HTMLElement {
OMDB_API_KEY = "código"
API_URL = "link de la API"
constructor() {
super();
this.attachShadow
}
connectedCallBack() {
const template = templateElement.content.cloneNode (true);
this.shadowRoot.appendChild (template);
const addElementComponent = this.shadowRoot.querySelector ('add-element-component');
addElementComponent.addEventListener ('add-element', (event) => {
const fileName = event.detail;
this.searchfile (fileName)
})
}
customElements.define ("films-app", FilmsApp);Recuerda que para definir un web component es necesario que lo definas como un custom element con el método de customElements.define, al que le pasarás dos parámetros: la clase o web component y el nombre que le has atribuido.
Ahora, si quieres realizar este ejercicio práctico de forma completa, puedes revisar posts anteriores sobre este mismo programa para el desarrollo del web component progress bar, la clase film item y el index.html del programa del buscador de películas. En conjunto, podrás desarrollar el mejor ejercicio práctico.
En este post hemos explicado el proceso para saber cómo definir la clase film app a través de un ejercicio práctico que te podrá resultar muy útil para futuros proyectos. Si quieres seguir explorando y aprendiendo sobre los web components, puedes apuntarte a nuestra formación en Desarrollo Web Full Stack Bootcamp, que te permitirá transformar tu vida laboral en cuestión de meses. ¡Entra ahora y solicita más información!
