¿Quieres realizar los métodos de la clase input action con nosotros? Si estás enfocado en el trabajo de código y de desarrollo web o de aplicaciones móviles, seguramente te has encontrado con temas relacionados con los componentes web y la definición de clases y métodos. Es por eso que, cuantos más ejercicios prácticos realices, será mucho más fácil desarrollar un proyecto en el futuro. Para lograr tus metas, aprende cómo definir los métodos de la clase input action.
Métodos de la clase input action
Una clase en programación es un artefacto que nos va a permitir crear objetos a partir de ella. Sin embargo, una clase no trabaja sola; necesita métodos, constructores y otros elementos para que pueda funcionar sin ningún problema. Cada uno de ellos va a cumplir con una función dentro del programa de código para desarrollar el sitio web.
Por tanto, si quieres saber cómo puedes llevar a cabo este proceso, te invitamos a seguir leyendo los siguientes apartados, en los que vamos a definir los métodos de la clase input action.
Definir la clase input action
Antes de pasar a los métodos de una clase, tenemos que definir la clase input action, la cual nos permitirá empezar a trabajar en el desarrollo de un web component. De este modo, primero tenemos que definir los elementos dentro de la plantilla y, después, empezar a dibujar la clase, que va a extenderse de los elementos de HTML.
Dentro de la clase vas a definir el constructor y todos los atributos necesarios para el programa de código. Es por eso que, como estamos desarrollando los atributos del componente del input action de un app de to do list, vamos a traer el icon y el placeholder, al que le pasaremos un valor por defecto que se debe pintar si no se le pasa nada. A su vez, en este mismo lugar, tienes que añadir el método para definir el custom element del web component.
A continuación, puedes ver cómo luce este proceso en un extracto de código:
<div class = "input-action-wrapper">
<input type = "text">
<button> </button>
</div>
class InputAction extends HTMLElement {
constructor() {
super();
this.icon = this.getAttribute ('icon') || '+';
this.placeholder = this.getAttribute ('placeholder') || 'Añade nuevo to do';
this.attachShadow ({ mode: "open" });
}
customElements.define ("input-action", InputAction);
Métodos de la clase
Ahora es el momento de definir los métodos de la clase, que se encargan de crear funciones para la manipulación de las variables de las clases. Puedes definir tantos métodos como necesites para caracterizar tu clase.
connectedCallBack
En primer lugar, vamos a determinar el método de ConnectedCallBack, el cual es un estado característico de los estados de un web component y se utiliza para personalizar los documentos que se añaden en un proyecto.
En este caso, vamos a duplicar el nodo del template del programa. Tendremos que traer el elemento del botón y del placeholder.
connectedCallback() {
const template = templateElement.content.cloneNode (true);
this.shadowRoot.appendChild (template);
this.shadowRoot.querySelector ('button').textContent = this.icon;
this.shadowRoot.querySelector ('input').placeholder = this.placeholder;
}
emitSendTextEvent
Otro de los métodos que vamos a definir es el de emitSendTextEvent, el cual nos permite crear un evento que va a generar el envío y la muestra del mensaje. Además, tendrás que lanzar el mismo evento con el método de dispatchEvent.
Por último, podrás definir el escuchador para el mismo evento.
emitSendTextEvent() {
const inputValue = this.shadowRoot.querySelector {'input'}.value
if (inputValue){
const event = new CustomEvent (´sendText', { detail: inputValue
})
this.dispatchEvent (event)
}
}
<body>
<input-action icon "🔎" placeholder = "cositas para hacer"></input-action>
<script src" ./input-action.js"></script>
<script>
const inputActionElement = document.querySelector ("input-action");
inputActionElement.addEventListener ('sendText', (event) => {
console.log (event.detail);
})
</script>
</body>¿Cuál es el siguiente paso?
Ahora que hemos realizado los métodos de la clase input action y has podido recordar el proceso para la definición de clases y métodos, es la hora de reproducir estos pasos en tus propios proyectos.
¿Necesitas ayuda para hacerlo? Si quieres seguir explorando las temáticas, los conceptos y las herramientas relacionadas con el sector del desarrollo web, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp. En menos de un año estarás listo para triunfar en el mercado laboral gracias a esta formación íntegra, de alta intensidad y a nivel teórico y práctico. ¿Te atreves a potenciar tus habilidades y cambiar tu futuro? ¡Solicita más información y sigue aprendiendo!
