Empiece a realizar un seguimiento de su progreso
Inicio de Trailhead
Inicio de Trailhead

Crear y modificar componentes Aura

Objetivos de aprendizaje

Después de completar esta unidad, podrá:
  • Crear y modificar recursos de paquetes de componentes Aura en Developer Console.
  • Crear una aplicación “de aprovechamiento” para probar componentes en desarrollo.
  • Llevar a cabo la modificación y la nueva carga del ciclo para realizar una vista previa de los componentes en desarrollo.
  • Enumerar los diferentes recursos que constituyen un paquete de componentes Aura.

Creación y modificación de componentes Aura

¡Bien! ¡Momento de escribir algo de código! ¡#finalmente!

El primer paso para escribir código de componentes Aura es, bueno, prepararse para escribir código. Afortunadamente, es realmente sencillo. En su organización, abra Developer Console bajo Su nombre o el menú de acceso rápido (Icono de engranaje).

Lightning Experience Salesforce Classic
Abrir Developer Console
Modo Classic: Abrir Developer Console

¡Bieeen, está listo para escribir código de componentes Aura!

Bieen: puede comenzar a escribir código de componentes

Crear componentes Aura en Developer Console

Escribamos algo. Seleccione File | New | Lightning Component (Archivo | Nuevo | Componente Lightning) para crear un componente Aura. En el panel New Lightning Bundle (Nuevo paquete Lightning), ingrese helloWorld para el nombre del componente y haga clic en Submit (Enviar).

Panel New Lightning Bundle (Nuevo paquete Lightning)

Este crea un nuevo paquete de componente helloWorld, con dos fichas abiertas. Cierre la ficha helloWorld y mantenga la ficha helloWorld.cmp abierta.

helloWorld.cmp contiene las etiquetas de apertura y cierre para un componente Aura, <aura:component>. Entre ellas, agregue la siguiente marca y guarde:

<p>Hello Lightning!</p>

Su marca de componente debe tener el siguiente aspecto.

Marca de Hello Lightning

¡Uaaau, su primer componente Aura! Ahora, ¿cómo podemos ver su aspecto?

La respuesta breve es, es complicado. No puede ejecutar su componente directamente y ver cómo se comporta. En su lugar, su componente necesita ejecutarse dentro de una aplicación de contenedor, que llamaremos un contenedor por un tiempo. Ejemplos de contenedores podrían ser las aplicaciones Lightning Experience o Salesforce, o una aplicación que crea con el Generador de aplicaciones Lightning: básicamente cualquiera de las cosas que vio al final de la unidad anterior. Usted agrega su componente a uno de estos contenedores y luego accede a él en ese contenedor.

Hablaremos más acerca de contenedores más adelante y en otros módulos de Componentes Lightning. De momento, realicemos uno sencillo nosotros mismos.

Seleccione File | New | Lightning Application para crear una nueva aplicación Lightning. En el panel New Lightning Bundle (Nuevo paquete Lightning), ingrese “harnessApp” para el nombre de la aplicación y haga clic en Enviar.

Este crea un nuevo paquete harnessApp, con dos fichas abiertas. Cierre la ficha harnessApp y mantenga la ficha harnessApp.app abierta.

harnessApp.app contiene las etiquetas de apertura y cierre para una aplicación Lightning, <aura:application>. Entre ellas, agregue la siguiente marca y guarde:

<c:helloWorld/>

Esto agrega el componente helloWorld que creamos anteriormente a la aplicación harnessApp.

Antes de explicar esta aplicación engañosamente sencilla, haga clic entre las fichas harnessApp.app y helloWorld.cmp en Developer Console. Detrás de la marca, ¿qué nota diferente?

¿Qué es diferente?

En resumen: el botón Preview (Vista previa). Las aplicaciones tienen uno, los componentes no. Haga clic en él ahora y otra ventana del navegador deberá abrirse y mostrarle su aplicación.

Realice una vista previa de la aplicación.

Ahora sí que vamos... bien; de acuerdo, solo es “hello world.” Pero existen algunas cosas interesantes que observar aquí, a pesar de que la marca sea trivial.

Empecemos con Developer Console. Si la utilizó para escribir Visualforce o Apex, habrá seguramente observado los controles adicionales que aparecen en la paleta en el lado derecho de la ventana de modificación de cualquier paquete Lightning. Cada uno de los diferentes botones con una etiqueta Create (Crear) representa un recurso diferente que puede agregar al paquete. Hablaremos de recursos y paquetes en la siguiente sección. De momento, solo sepa que Developer Console le ofrece una forma sencilla de crear y cambiar entre ellos.

No lo dude, Developer Console tiene un número de funciones para trabajar con componentes Aura. También están File |Open Lightning Resources (Archivo-Abrir-Recursos Lightning), que le permite abrir muchos recursos de Lightning a la vez. ¡Útil!

Developer Console es un buen sitio para escribir código Lightning y trabajaremos con ella durante el resto de este módulo. Pero, como los recursos Lightning son accesibles a través de la API de herramientas, existen otras formas de crear y modificarlos. Salesforce DX ofrece una asistencia útil para todos los aspectos del desarrollo de componentes Lightning. Del mismo modo, Extensiones de Salesforce para Visual Studio Code es una excelente herramienta externa. ¡No sienta que está limitado solo a Developer Console!

Una última cosa antes de volver al código. La URL para nuestra “vista previa” es actualmente la página Inicio permanente de nuestra aplicación (cuando se pone a disposición de nuestros usuarios). El formato de la URL es el siguiente: https://<suDominio>.lightning.force.com/<suEspaciodeNombre>/<suNombredeAplicación>.app .

<suNombredeAplicación> representa el nombre de su paquete de aplicación, en este caso, harnessApp. En su organización de Trailhead, no debe tener un espacio de nombre configurado, por lo que debe ver una “c” en esa parte de la URL. “c” representa el espacio de nombre predeterminado… y volverá a atormentarnos más tarde. El resto del formato de URL debe ser autoexplicativo.

Bien, pasemos ahora al código de computación.

¿Qué es un componente?

No ocurre a menudo que hola mundo desencadene preguntas existenciales, pero aquí estamos. Hablemos de qué es un componente en el contexto de nuestro ejemplo helloWorld. En la práctica, un componente es un paquete que incluye un recurso de definición, escrito en marca, y puede incluir recursos opcionales adicionales como un controlador, una hoja de estilo, etc. Un recurso es como un archivo, pero almacenado en Salesforce en vez de un sistema de archivos.

Nuestro recurso de definición de componente helloWorld.cmp es fácil de comprender.

<aura:component>
    <p>Hello Lightning!</p>
</aura:component>

Están las etiquetas de apertura y cierre <aura:component>, con HTML estático entre ellas. Sería difícil ser más sencillo y es posible que esté tentado por pensar en él como una “página”. No lo haga. Volveremos a esto en breve.

Mencionamos antes los paquetes de componente, pero ¿qué son realmente? Un paquete es como una carpeta. Agrupa los recursos relacionados para un solo componente. Los recursos en un paquete se activan automáticamente a través de un esquema de nomenclatura para cada tipo de recurso. La conexión automática solo significa que la definición de un componente puede hacer referencia a su controlador, auxiliar, etc; y esos recursos pueden hacer referencia a la definición del componente. Están conectados entre sí (principalmente) automáticamente.

Veamos cómo funciona esto. Con helloWorld.cmp activo, haga clic en el botón STYLE en la paleta del componente a la derecha. Este abre una nueva ficha para el recurso de estilo que se agregó al paquete helloWorld. Comienza con un selector vacío único, .THIS. Para ver cómo funciona, agregue un estilo sencillo a la hoja de estilo, de modo que tenga el siguiente aspecto.

.THIS {
}
p.THIS {
    font-size: 24px;
}

A continuación vuelva a cargar su ventana de vista previa para harnessApp.app. ¡Voilà, texto más grande! Pero, ¿cómo funciona .THIS? ¡Es la magia de la conexión automática! En tiempo de ejecución, .THIS se sustituye por una cadena de ámbito de estilo denominada para su componente. Limita las reglas de estilo a solo este componente, por lo que puede crear estilos específicos del componente sin preocuparse de cómo podrían afectar esos estilos a otros componentes.

Por lo que ahora, nuestro paquete helloWorld tiene dos recursos, la definición del componente, helloWorld.cmp y la hoja de estilo, helloWorld.css. Puede pensar en ello como una carpeta, o una descripción:

  • helloWorld: el paquete del componente
    • helloWorld.cmp: la definición del componente
    • helloWorld.css: los estilos del componente

Como puede ver en Developer Console, existe un número de otros tipos de recursos que puede agregar a un paquete de componentes. Continúe y haga clic en los elementos CONTROLLER (Controlador) y HELPER (Auxiliar) para agregar esos recursos al paquete. Ahora su paquete tiene un aspecto parecido a este y puede comenzar a ver el sistema de nomenclatura.

  • helloWorld: el paquete del componente
    • helloWorld.cmp: la definición del componente
    • helloWorldController.js: el controlador del componente o archivo principal de JavaScript
    • helloWorldHelper.js: el auxiliar del componente o archivo secundario de JavaScript
    • helloWorld.css: los estilos del componente

En este módulo, trabajaremos solo con estos cuatro tipos de recursos. Hablaremos mucho más acerca de los recursos de controlador y auxiliar cuando ahora empecemos a escribir código para ellos. Por ahora, puede simplemente dejar las implementaciones predeterminadas. Después de todo, ¡solo es hello world!

¿Qué es una aplicación?

Ahora que sabemos qué es un componente, es fácil explicar qué es una aplicación: ¡una aplicación es simplemente un tipo de componente! Para los fines de este módulo, puede pensar en una aplicación como algo diferente a un componente de dos formas:

  • Una aplicación utiliza etiquetas <aura:application> en vez de etiquetas <aura:component>.
  • Solo una aplicación tiene un botón Vista previa en Developer Console.

¡Ya está!

¿Para qué sirven las aplicaciones?

Tan sencillo como suena, existen algunos detalles prácticos acerca de cómo puede utilizar una aplicación frente a un componente. Los elementos principales son los siguientes.

  • Al escribir una marca, puede agregar un componente a una aplicación, pero no puede agregar una aplicación a otra aplicación o una aplicación a un componente.
  • Una aplicación tiene una dirección URL independiente a la que puede acceder durante la prueba y que puede publicar para sus usuarios. A menudo hacemos referencia a estas aplicaciones independientes como “my.app”.
  • No puede agregar aplicaciones a Lightning Experience o la aplicación Salesforce: solo puede agregar componentes. Después de la última unidad, esto puede parecer extraño, ¿qué agrega exactamente al Iniciador de aplicación si no es una aplicación? Lo que agrega a Iniciador de aplicación es una aplicación de Salesforce, que incluye un componente Aura, algo definido en <aura:component>. Una aplicación componentes Aura (o sea, algo definido en <aura:application>) no se puede utilizar para crear aplicaciones de Salesforce. Un poco extraño, pero ahí está.

Entonces, ¿para qué sirve una aplicación? ¿Por qué tendría que utilizar alguna? Respondimos a esa pregunta anteriormente. Publica funciones creadas en Componentes Lightning en contenedores. Las aplicaciones Componentes Lightning son un tipo de contenedor para nuestros Componentes Lightning.

Una vez más fuimos prácticos, lo que significa que elabora todas sus funciones de “aplicación” dentro de un componente de nivel superior. Luego al final, coloca ese componente en un contenedor (quizás una aplicación Componentes Lightning, quizás la aplicación Salesforce, quizás otra cosa). Si utiliza my.app, el contenedor puede establecer servicios para su componente principal, aunque simplemente está allí para alojar el componente.

Echemos otro vistazo a la aplicación que creamos. Aquí nuevamente es el recurso de definición harnessApp.app:

<aura:application>
    <c:helloWorld/>
</aura:application>

No importa la cantidad de funciones que decidamos agregar a nuestra “aplicación” helloWorld, todo irá al componente helloWorld. Puede tener un editor de estilo de Quip integrado en ella para revisar el mensaje de bienvenida, pero nuestra definición harnessApp.app permanecerá bastante más sencilla.

A partir de este momento, daremos por supuesto que está utilizando un paquete de aplicación Lightning actual como un contenedor o para el aprovechamiento de los componentes que crea. ¡No dude en seguir utilizando harnessApp.app! Pero, cuando hablamos de crear aplicaciones, nos referimos realmente a la creación de funciones dentro de un paquete de componentes, no un paquete de aplicación, porque así es como crea “aplicaciones” en el mundo real.

Componentes que contienen componentes, contienen... ¡Componentes!

La definición harnessApp.app es también interesante porque en vez de HTML estático, tenemos nuestro componente helloWorld. Decimos que harnessApp contiene el componente helloWorld. Profundicemos en esto un poco más y hagamos que helloWorld sea un poco más complejo.

En Developer Console, cree un nuevo componente Aura denominado helloHeading. Para su marca, pegue el siguiente código.

<aura:component>
    <h1>W E L C O M E</h1>
</aura:component>

Ahora vuelva a hacer clic en helloWorld.cmp, y agréguele <c:helloHeading/>, encima de la línea “Hello Lightning”. La definición de su componente helloWorld debe ahora tener el siguiente aspecto:

<aura:component>
    <c:helloHeading/>
    <p>Hello Lightning!</p>
</aura:component>

Vuelva a cargar la aplicación para ver el cambio. La estructura de su componente, en términos de qué contiene qué, tiene ahora el siguiente aspecto:

  • harnessApp.app
    • helloWorld.cmp
      • helloHeading.cmp
      • (HTML estático)

Decimos que helloHeading es un componente secundario de helloWorld, o que helloHeading está anidado dentro de helloWorld, o... Hay muchas formas diferentes de decir que helloWorld contiene helloHeading. Además, puede seguir anidando componentes en otros componentes en más o menos cualquier nivel que le importe. Comienza a ser muy duro tener claras las ideas antes de experimentar una limitación de Componentes Lightning.

Este proceso de poner componentes dentro de otros es fundamental para crear aplicaciones Componentes Lightning. Comienza con, o crea sencillos componentes “específicos”, donde cada componente proporciona un conjunto definido de funciones independientes. A continuación reúne esos componentes en nuevos componentes con funciones de nivel superior. Y luego utiliza esos componentes y “sube” de nuevo.

Hablemos de eso con una metáfora que nos es familiar fuera del contexto de software. Imagine una casa. Mejor aún, deje que le mostremos una.

Animación de casa

Cuando ve esta casa, ¿qué ve? Si deja de pensar en ella como una “casa”, si no como un componente de casa, también empezará a ver las partes y los patrones de lo que está compuesta.

A una mayor escala, esta casa está compuesta de tres estructuras similares. Esos tres componentes tienen diseños similares, pero no idénticos. Cada uno se puede dividir aún más, en componentes aún más pequeños, como ventanas, que se pueden dividir en paneles individuales. La organización, o composición, de estos componentes más pequeños define la diferencia entre las tres grandes estructuras.

La tres estructuras se unen por dos estructuras/componentes reducidos más pequeños, que a su vez se pueden dividir en patrones más pequeños reutilizables. Estos componentes de conexión reúnen las tres estructuras separadas en un conjunto más grande: La casa.

Lo que hicimos con la arquitectura, podemos hacerlo con una aplicación Web. Más adelante en este módulo utilizará componentes de entrada específicos y creará un componente de formulario con ellos. A continuación, utilizará ese componente de formulario y lo colocará en otro componente para desarrollar funciones a nivel de aplicación.

Composición de aplicación de gastos

No es tan bonito como ver la casa, pero los principios tras el proceso de composición son muy similares. Pensar en términos de componentes y composición es una habilidad fundamental que desarrollará a lo largo de este módulo, y cada vez que cree aplicaciones con Componentes Lightning.

Hizo algo de esto aquí, pero antes de que podamos realmente crear componentes que hacen algo, necesitamos saber más de atributos, tipos, valores y expresiones. Antes de eso, no obstante, ¡su primer reto de código de computación!