ComunicaciĆ³n entre elemento secundario y principal
Objetivos de aprendizaje
En este proyecto, alcanzarĆ” los siguientes objetivos:
- Crear componentes web Lightning que se comuniquen entre ellos.
- Gestionar la comunicaciĆ³n desde un componente secundario hasta su componente principal.
- Gestionar la comunicaciĆ³n desde un componente principal hasta un componente secundario.
- Gestionar la comunicaciĆ³n desde un componente hasta un componente no relacionado.
Este proyecto estĆ” pensado para desarrolladores de Salesforce que tengan algo de experiencia con la creaciĆ³n de componentes web Lightning. Si todavĆa no domina mucho los componentes web Lightning, le recomendamos completar algunas de las insignias de la ruta Crear componentes web Lightning antes de seguir con este proyecto.
CĆ³mo se comunican los componentes
Cuando varios componentes web Lightning conforman una aplicaciĆ³n, lo habitual es querer que compartan informaciĆ³n entre ellos. La forma en que se comunican los componentes depende de si se relacionan y cĆ³mo lo hacen. Cuando hay un componente dentro de otro, se genera una relaciĆ³n principal-secundario. La comunicaciĆ³n desde un principal a un secundario es distinta de la comunicaciĆ³n desde un secundario a un principal. Y estos tipos de comunicaciĆ³n son distintas a la que se establece entre los componentes no relacionados (componentes en Ć”rboles secundarios de DOM diferentes).
En este proyecto, vamos a establecer comunicaciones entre componentes que tienen cada uno de estos tipos de relaciĆ³n.
Antes de comenzar
Se presupone que tiene configurado un entorno de desarrollo de Salesforce DX tiene experiencia utilizĆ”ndolo para desarrollar componentes web Lightning e implementarlos en una organizaciĆ³n. Si todavĆa no estĆ” familiarizado con este proceso, complete el proyecto Inicio rĆ”pido: Lightning Web Components antes de continuar con el proyecto.
Crear un nuevo Trailhead Playground
En este proyecto, tendrĆ” que crear un nuevo Trailhead Playground. DesplĆ”cese hasta el final de la pĆ”gina, haga clic en el nombre del Playground y haga clic en Create a Trailhead Playground (Crear un Trailhead Playground). La creaciĆ³n de un nuevo Trailhead Playground suele tardar entre 3 y 4 minutos.
Obtener el nombre de usuario y la contraseƱa de su Trailhead Playground
Vamos a empezar. Vaya a su Trailhead Playground. Si no estĆ” abierto, desplĆ”cese hasta la parte inferior de esta pĆ”gina y haga clic en Launch (Iniciar). Si ve una ficha en su organizaciĆ³n etiquetada como Obtener sus credenciales de inicio de sesiĆ³n, Ā”excelente! Vaya al primer paso. De lo contrario, en App Launcher (), busque y abra Playground Starter y siga los pasos.
- Haga clic en la ficha Get Your Login Credentials (Obtener sus credenciales de inicio de sesiĆ³n) y anote su nombre de usuario.
- Haga clic en Reset My Password (Restablecer mi contraseƱa). Con esta acciĆ³n se envĆa un correo electrĆ³nico a la direcciĆ³n asociada a su nombre de usuario.
- Haga clic en el vĆnculo en el correo electrĆ³nico.
- Introduzca una nueva contraseƱa, confĆrmela y haga clic en Change Password (Cambiar contraseƱa).
Configurar el proyecto
- En Visual Studio Code, cree un proyecto de Salesforce DX con el nombre
Event Comms
.
- Autorice su Trailhead Playground.
Comunicarse con un evento personalizado
Vamos a empezar con un escenario sencillo. Un componente secundario envĆa un evento personalizado que desencadena una actualizaciĆ³n en el componente principal.
Cuando se envĆa un evento, puede elegir entre enviar datos y permitir que el evento aparezca por el DOM. Vamos a empezar con un escenario sencillo. Un componente secundario envĆa un evento personalizado que desencadena una actualizaciĆ³n en el componente principal.
ComunicaciĆ³n desde el componente "controls" hasta el componente "numerator"
- Cree una pĆ”gina de aplicaciĆ³n Lightning de tres regiones con el nombre
Event Comms
- En su organizaciĆ³n (su Trailhead Playground), abra Setup (ConfiguraciĆ³n).
- En el cuadro Quick Find (BĆŗsqueda rĆ”pida), escriba
Lightning App Builder
y, a continuaciĆ³n, seleccione Lightning App Builder.
- Haga clic en New (Nuevo).
- Con App Page (PĆ”gina de aplicaciĆ³n) seleccionado, haga clic en Next (Siguiente).
- En Label (Etiqueta), escriba
Event Comms
y haga clic en Next (Siguiente).
- Seleccione Three Regions (Tres regiones) y luego haga clic en Done (Listo).
- Haga clic en Save (Guardar), Activate (Activar), Save (Guardar) y Skip and Save (Omitir y guardar).
- Haga clic en
para salir de Lightning App Builder.
- Cree el componente web Lightning principal con el nombre
numerator
.
- En Visual Studio Code, en force-app/main/default, haga clic con el botĆ³n derecho en la carpeta lwc y seleccione SFDX: Create Lightning Web Component (Crear un componente web Lightning).
- Escriba
numerator
como nombre del componente nuevo.
- Pulse Enter (Intro) y luego vuelva a pulsar Enter (Intro) para aceptar la carpeta predeterminada
force-app/main/default/lwc
.
- Codifique los archivos del componente "numerator":
- En numerator.js, pegue este cĆ³digo dentro de la clase
Numerador
(Numerador): - Guarde el archivo.
- Abra numerator.html y agregue este cĆ³digo entre las etiquetas
template
: - Guarde el archivo.
- Para que el componente "numerator" estĆ© disponible en pĆ”ginas de aplicaciĆ³n Lightning, abra numerator.js-meta.xml y sustituya la etiqueta
isExposed
por estas lĆneas: - Guarde el archivo.
- Agregue el componente "numerator" a la aplicaciĆ³n Event Comms:
- Haga clic con el botĆ³n derecho en la carpeta lwc y seleccione SFDX: Deploy This Source to Org (SFDX: Implementar este cĆ³digo fuente en la organizaciĆ³n) para implementar la carpeta lwc en la organizaciĆ³n.
- Desde App Launcher (Iniciador de aplicaciĆ³n,
) en su Playground, busque y abra Event Comms.
- Haga clic en
y seleccione Edit Page (Modificar pĆ”gina) para abrir la pĆ”gina de la aplicaciĆ³n Event Comms para editarla.
- Arrastre el componente numerator (en Custom [Personalizados] en la lista de componentes) a la regiĆ³n izquierda de la pĆ”gina.
- Haga clic en Save (Guardar).
- Haga clic en
para salir de Lightning App Builder.
- Cree y codifique el componente secundario con el nombre
controls
:
- Vuelva a Visual Studio Code y cree un componente web Lightning con el nombre
controls
.
- En controls.js, pegue este cĆ³digo dentro de la clase
Controls
(Controles): - Guarde el archivo.
- Abra controls.html y agregue este cĆ³digo entre las etiquetas
template
: - Guarde el archivo.
- Agregue el componente secundario (controls) al componente principal (numerator):
- Abra numerator.html y sustituya el comentario
controls go here
(aquĆ van los controles) por el siguiente cĆ³digo: - Guarde el archivo.
- Verifique las comunicaciones:
- Para ver los cambios en Salesforce, implemente la carpeta lwc y actualice la pĆ”gina de la aplicaciĆ³n Event Comms en su organizaciĆ³n de Trailhead Playground.
- Haga clic en Add (Sumar) y observe cĆ³mo aumenta el recuento.
- Haga clic en Substract (Restar) y observe cĆ³mo disminuye el recuento.
Ahora tenemos un componente secundario (controls) que enviar un evento add
(sumar) al componente principal (numerator), desencadenando asĆ la funciĆ³n handleIncrement
en el componente principal (numerator).
Enviar datos con el evento personalizado
Ahora vamos a hacer que el componente secundario envĆe datos con el evento al componente principal. La empresa quiere multiplicar el recuento. Vamos a ofrecerle mĆ”s de una opciĆ³n. Una opciĆ³n es usar un evento personalizado para enviar datos del secundario al principal.
- Agregue botones de multiplicaciĆ³n y una funciĆ³n de multiplicaciĆ³n al componente secundario (controls):
- Abra controls.html y sustituya el comentario
buttons go here
(aquĆ van los botones) dentro de la segunda etiquetalightning-layout-item
por el siguiente cĆ³digo: - Guarde el archivo.
- Abra controls.js y agregue esta funciĆ³n
handleMultiply
despuĆ©s de la funciĆ³nhandleSubstract
:FĆjese en que enviamos el eventoonclick
a la funciĆ³nhandleMultiply
y esta envĆa el valor dedata-factor
del botĆ³n aevent.target.dataset.factor
. DespuƩs enviamos el valor defactor
junto con el nuevo evento personalizado (multiply
) al componente principal (numerator).
- Guarde el archivo.
- Actualice el componente principal (numerator):
- Abra numerator.html y agregue este atributo a la etiqueta
c-controls
: - Guarde el archivo.
- Abra numerator.js y agregue esta funciĆ³n
handleMultiply
despuĆ©s de la funciĆ³nhandleDecrement
:AquĆ, la funciĆ³nhandleMultiply
obtiene el eventoonmultiply
enviado y utiliza sus datos (event.detail
) para actualizar el recuento (counter).
- Guarde el archivo.
- Verifique las comunicaciones:
- Para ver los cambios en Salesforce, implemente la carpeta lwc y actualice la aplicaciĆ³n Event Comms.
- Haga clic en Add (Sumar) y observe cĆ³mo aumenta el recuento.
- Haga clic en X 2 y observe cĆ³mo se multiplica el recuento por dos.
- Haga clic en X 3 y observe cĆ³mo se multiplica el recuento por tres.
El componente "controls" envĆa datos (data-factor
) a su componente principal (numerator) junto el evento personalizado multiply
.
Permitir que aparezcan eventos personalizados
Los dos botones de multiplicaciĆ³n han sido todo un Ć©xito. Ahora la empresa quiere mĆ”s opciones para multiplicar. Vamos a hacer que sea fĆ”cil agregar todos los botones que quieran. Vamos a agregar otro componente web Lightning para los botones. Para permitir las comunicaciones, vamos a usar la opciĆ³n de propagaciĆ³n de eventos. La propagaciĆ³n permite que el evento personalizado del componente de botĆ³n se propague al Ć”rbol de DOM.
- Cree un componente con el nombre
button
(botĆ³n):
- Cree un componente web Lightning con el nombre
button
(botĆ³n).
- En button.js, pegue este cĆ³digo dentro de la clase
Button
(BotĆ³n): - Importe el decorador
api
desde el mĆ³dulolwc
. - Guarde el archivo.
- Abra button.html y agregue este cĆ³digo entre las etiquetas
template
: - Guarde el archivo.
- Convierta el componente "button" en un componente secundario del componente "controls":
- Abra controls.html y elimine el
lightning-layout-item
que contiene dos etiquetaslightning-button
.
- En su lugar, pegue el siguiente cĆ³digo:Observe que hemos trasladado la llamada a la funciĆ³n
handleMultiply
al controladoronbuttonclick
enlightning-layout-item
. Esto nos permite ahorrarnos tener que agregar un controlador en todos los botones, por lo que se genera un cĆ³digo mĆ”s limpio de forma mĆ”s rĆ”pida.
- Guarde el archivo.
- Abra controls.js y agregue esta propiedad
factors
en la claseControls
(Controles): - Guarde el archivo.
- Verifique las comunicaciones:
- Para ver los cambios en Salesforce, implemente la carpeta lwc y actualice la pĆ”gina de la aplicaciĆ³n Event Comms.
- Haga clic en Add (Sumar) y observe cĆ³mo aumenta el recuento.
- Haga clic en X 2 y verĆ” que no ocurre nada. ĀæPor quĆ©? De forma predeterminada, un evento personalizado no se propaga pasando por el host.
[Texto alternativo: Evento personalizado que no pasa por su contenedor.]
Para que el evento (buttonclick
) se propague alightning-layout-item
, tenemos que agregarbubbles:true
enCustomEvent
.
- Abra button.js y quite el comentario (elimine las barras
//
de delante)bubbles:true
.
[Texto alternativo:: Ahora, el evento personalizado se propaga pasando por su contenedor.]
- Guarde el archivo y vuelva a llevar a cabo la implementaciĆ³n.
- Actualice la pĆ”gina de la aplicaciĆ³n Event Comms.
- Ahora haga clic en Add (Sumar) para definir el recuento en 1.
- Haga clic en X 2 y observe cĆ³mo se multiplica el recuento por dos.
- Haga clic en X 6 y observe cĆ³mo se multiplica el recuento por seis.
- Haga clic en X 0 y observe se restablece el recuento en cero.
- Pruebe con los siguientes clics: Add (Sumar), X 2, X 5, X 2, Add (Sumar), X 2. O bien: Add (Sumar), X 3, X 2, X 2, Subtract (Restar), X 2, Subtract (Restar), X 2. TambiĆ©n puede probar con otra combinaciĆ³n.
PĆ³ngase a prueba (es opcional, no vamos a revisar el cĆ³digo)
Agregue una segunda instancia del componente "button" (botĆ³n) en el componente "controls" (controles) para crear botones de divisiĆ³n que aparezcan en el componente "numerator".
Resumen
En este paso, ha establecido la comunicaciĆ³n desde un componente secundario a su principal mediante un evento personalizado. Ha enviado el evento con y sin datos, y ha visto cĆ³mo afecta la propagaciĆ³n a las comunicaciones de componente secundario a componente principal. En el siguiente paso, vamos a centrarnos en las comunicaciones de componente principal a secundario.
Recursos
- Trailhead: Inicio rĆ”pido: Explore the LWC Recipes Sample App (Explorar la aplicaciĆ³n de muestra LWC Recipes)
- GuĆa del desarrollador de componentes web Lightning: Create and Dispatch Events (Crear y enviar eventos)
- GitHub: LWC Recipes: eventSimple (Recetas de LWC: eventSimple)
- GitHub: LWC Recipes: eventWithData (Recetas de LWC: eventWithData)
- GitHub: LWC Recipes: eventBubbling (Recetas de LWC: eventBubbling)
- MDN Web Docs: Creating and triggering events (CreaciĆ³n y desencadenamiento de eventos)
- Blog de Salesforce Developers: Inter-Component Communication Patterns for Lightning Web Components (ComunicaciĆ³n entre componentes web Lightning)
- Blog de Salesforce Developers: How Events Bubble in Lightning Web Components (CĆ³mo se propagan los eventos en los componentes web Lightning)