Lightning Web Components Ejemplooooo.pdf
- 1. Lightning Componentes ➔ Arquitectura de Componentes Lightning (Marco de Trabajo) ➔ Elementos que lo component ➔ Propagación de atributos entre Componentes Padre e hijo. ➔ Acciones en aura controller e interacción con apex controller. ➔ Propagación de Eventos. ➔ Diseño de componente y hoja de estilos..
- 2. Arquitectura General(Marco de trabajo)
- 4. Seleccionamos ForceCode Menu desde VS Code Escribimos New y Seleccionamos Aura Component Crear Lightning Component
- 5. Elegimos un nombre para el componente Seleccionamos Component Crear Lightning Component
- 7. Atributos de Componente Padre a Componente Hijo Componente Padre cmp css
- 8. Atributos de Componente Padre a Componente Hijo Componente Hijo cmp css
- 9. Agregar Componente a Lightning Home Page
- 10. Agregar Componente a Lightning Home Page
- 11. Agregar Componente a Lightning Home Page
- 12. Aplicaciones Lightning Escribimos New y Seleccionamos la Segunda Opción Seleccionamos Aura Component
- 13. Aplicaciones Lightning Elegimos el nombre de la Aplicación Seleccionamos App
- 14. Aplicaciones Lightning Elegimos el nombre de la Aplicación Seleccionamos App Creamos la Aplicación con los dos componentes Padre
- 15. Propagación de Eventos Eventos de Componente Seleccionamos Event
- 16. Propagación de Eventos Creamos un atributos para enviar mensajes desde el componente Hijo 1 Registramos el Evento desde el Componente Hijo
- 17. Propagación de Eventos En el controller del componente Hijo 1, llamamos al helper En el helper del componente Hijo 1, invocamos al evento le pasamos una variable como parámetro y lo ejecutamos
- 18. Propagación de Eventos Desde el Componente Padre manejamos el evento y agregamos el mensaje que vamos a recibir como atributo
- 19. Propagación de Eventos Desde el aura Controller Componente Padre agregamos la acción del evento y seteamos la variable que recibimos de éste.
- 22. Propagación de Eventos Eventos de Aplicación Seleccionamos Event Enviaremos un atributo desde el Hijo 1 al Hijo 3
- 23. Propagación de Eventos Registramos el Evento de Aplicación desde el componente Hijo 1 Agregamos un botón para Ejecutar al Evento desde ahí
- 24. Propagación de Eventos Desde el aura controller del hijo 1, llamamos a un método del helper Desde el helper del hijo 1 disparamos nuestro Evento de Aplicación Pasándole como parámetro un mensaje string
- 25. Propagación de Eventos Desde el componente hijo 3, manejamos el evento de aplicación y asignamos un atributo para recibir el mensaje del evento Desde el aura controller del hijo 3 seteamos el mensaje
- 29. Uso de Apex Controller Agregamos al componente Padre dos atributos con data y columnas, la lightning:datatable para mostrar los datos Ademas del manejador de inicio doIninit Además declaramos nuestro Apex Controller al inicio
- 30. Uso de Apex Controller Desde el aura Controller del Componente Padre llamamos al método del helper fetchData
- 31. Uso de Apex Controller En el helper seteamos las columnas y llamamos al método Apex para obtener las cuentas
- 32. Uso de Apex Controller Desde el Apex Controller, realizamos un query a Cuentas
- 33. Uso de Apex Controller
- 34. Lightning Components Creamos un Evento de Aplicación el cual enviará Los Ids de las cuentas seleccionadas desde el componente Padre al componente Padre 2, para que este muestre los Contactos relacionados a las cuentas seleccionadas
- 35. Lightning Components Desde el componente padre, registramos el evento de aplicación Y agregamos a la datatable la propiedad rowSelected
- 36. Lightning Components Desde el aura Controller del Componente Padre manejamos la acción selectedAccounts para disparar el evento con los Ids de las cuentas seleccionadas
- 37. Lightning Components Desde componete Padre 2 manejamos el evento y agregamos una datatable para colocar los contactos
- 38. Lightning Components Desde el aura Controller del Componente Padre 2 manejamos el evento que recibimos, seteamos la variable de accounts Ids a nuestro atributo y llamamos al método helper getContacts
- 39. Lightning Components Helper del Componente Padre 2
- 40. Lightning Components Creamos el Apex Controller del Componente Padre 2 Y Agregamos el método get Contacts que devuelve los contactos relacionados a los Ids de las cuentas que recibe
- 45. !Muchas Gracias!