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

Primeros pasos con componentes Aura

Objetivos de aprendizaje

Después de completar esta unidad, podrá:
  • Describir qué es el marco Componentes Lightning y para qué se utiliza.
  • Mencionar cuatro diferencias clave entre Componentes Lightning y otros marcos de aplicación Web.
  • Mencionar al menos cinco formas diferentes en que puede utilizar Componentes Lightning para personalizar Salesforce.

Información general sobre Componentes Lightning

¡Sí! ¡Sigue con nosotros! Estamos muy contentos de darle la bienvenida a la fiesta de Componentes Lightning, y es una fiesta. Cuando decimos que Componentes Lightning es la tecnología de desarrollo de aplicaciones más emocionante y potente que creamos en años, es toda una declaración de intenciones. Y sabemos que es cierto, porque creamos la aplicación Salesforce y Lightning Experience con él. Creemos que cuando llegue a conocer Componentes Lightning, estará igual de emocionado que nosotros con utilizarlo.

¿Qué es el marco de trabajo de componentes Lightning?

El marco de componentes Lightning es un marco de interfaz de usuario para el desarrollo de aplicaciones Web para dispositivos móviles y de escritorio. Es un marco moderno para la creación de aplicaciones de una sola página con interfaces de usuario dinámicas y con capacidad de respuesta para aplicaciones de Plataforma Lightning. Utiliza JavaScript en el lado del cliente y Apex en el lado del servidor.

Son palabras altisonantes. Veamos si podemos intentarlo de nuevo, con palabras de uso cotidiano.

Otra vez, visualizando con una arquitectura de muy alto nivel.

“El marco de trabajo de componentes Lightning es un marco para el desarrollo de aplicaciones Web.” Parece incomprensible. Un marco de aplicación es un conjunto de código y servicios que le facilitan la tarea de crear sus propias aplicaciones personalizadas, sin necesidad de escribir todo el código en sí. Existen muchos marcos de aplicación Web, como Ruby on Rails, Grails, AngularJS, Django, CakePHP, etc. Incluso pudimos obtener uno nuestro, Visualforce, que los clientes conocen y aprecian. Pensamos que los componentes Lightning son muy especiales. Hablaremos de por qué son especiales conforme avancemos y con un poco de suerte al final de este módulo, ¡estará de acuerdo!

“Aplicaciones Web para dispositivos móviles y de escritorio.” De nuevo, parece muy sencillo de comprender. Pero, ¿observó el orden allí? Los componentes Lightning nacieron y se utilizaron para crear la plataforma Salesforce para aplicaciones móviles. La capacidad móvil está integrada en el núcleo del marco de trabajo de componentes Lightning y hace que el desarrollo de aplicaciones que funcionan en dispositivos móviles y de escritorio sea mucho más sencillo que en muchos otros marcos.

“Es un marco moderno para la creación de aplicaciones de página única.” Vale, ahora nos estamos quedando un poco aturdidos. “Moderno” es solo marketing, ¿verdad? ¿Y qué son “aplicaciones de página única”?

No creemos que moderno sea “solo” marketing. En el módulo Desarrollo para Lightning Experience, hablamos largo y tendido de cómo evolucionaron las aplicaciones Web de simples experiencias orientadas página por página a aplicaciones con altísima capacidad de respuesta que tienen todas el mismo comportamiento e interactividad de las aplicaciones nativas, en dispositivos de escritorio y especialmente móviles. Para alcanzar estas experiencias de usuario interactivas, las aplicaciones Web modernas se crean como un conjunto de código fuertemente unido que se carga desde una URL única y luego se ejecuta de forma continua cuando lo utiliza. Estas aplicaciones de página única se crean de una forma parecida a las aplicaciones nativas, con los sondeos gestionados por un marco. Un marco de trabajo como el de los componentes Lightning.

“Interfaces de usuario dinámicas y con capacidad de respuesta para aplicaciones de Plataforma Lightning” es solo la aplicación de las ideas precedentes a aplicaciones que crea en la parte superior de Salesforce. Y finalmente, “Utiliza JavaScript en el lado del cliente y Apex en el lado del servidor” es autoexplicativo en sí, incluso si deja fuera algunas especificaciones acerca de qué va a dónde. ¡Llegaremos a esto, pronto!

Un componente Aura de ejemplo

Vale, esto es mucho bla bla bla y no mucho código. Echemos un vistazo a un componente Lightning real empleando el modelo de programación de componentes Aura y veamos de qué trata toda esa habladuría. En primer lugar, éste es el aspecto que tiene el componente cuando se representa en pantalla.

Componente Lightning: no hay mucho que añadir, pero están ocurriendo bastantes cosas

Puede no parecer mucho, pero están ocurriendo bastantes cosas. Éste es el código para ello; esto es desde un componente en el que nos adentraremos en detalle más adelante.

<aura:component>
    <aura:attribute name="expense" type="Expense__c"/>
    <aura:registerEvent name="updateExpense" type="c:expensesItemUpdate"/>
    <!-- Color the item green if the expense is reimbursed -->
    <lightning:card title="{!v.expense.Name}" iconName="standard:scan_card"
                    class="{!v.expense.Reimbursed__c ?
                           'slds-theme_success' : ''}">
        <aura:set attribute="footer">
            <p>Date: <lightning:formattedDateTime value="{!v.formatdate}"/></p>
            <p class="slds-text-title"><lightning:relativeDateTime value="{!v.formatdate}"/></p>
        </aura:set>
        <p class="slds-text-heading_medium slds-p-horizontal_small">
            Amount: <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal_small">
           Client: {!v.expense.Client__c}
        </p>
        <p>
            <lightning:input type="toggle"
                             label="Reimbursed?"
                             name="reimbursed"
                             class="slds-p-around_small"
                             checked="{!v.expense.Reimbursed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickReimbursed}"/>
        </p>
    </lightning:card>
</aura:component>

Incluso antes de conocer cualquier cosa acerca de los componentes Aura, puede observar algunas cosas acerca de este ejemplo. Lo primero de todo, es marca XML y combina etiquetas HTML estáticas con etiquetas personalizadas de componentes Aura, como la etiqueta <aura:component> que conduce al ejemplo. Si trabajó con Visualforce, el formato de esa etiqueta le será familiar: espacio de nombres: tagName . Como verá más adelante, los componentes incorporados pueden proceder de una variedad de espacios de nombre diferentes, como aura: (como aquí), o force:, lightning: o ui:.

Probablemente, ha observado que hay componentes como <lightning:input> y <lightning:formattedNumber>. De nuevo, este es un patrón familiar para los desarrolladores de Visualforce. Si este no es su caso, por ahora debe usar el componente de entrada para recopilar la entrada de usuario y los demás componentes para mostrar valores de solo lectura. Estos son algunos componentes adicionales destacados en el miniprograma.

  • <lightning:card> crea un contenedor en torno a un grupo de información.
  • <lightning:formattedDateTime> muestra la fecha y la hora con formato.
  • <relativeDateTime> muestra la diferencia horaria relativa entre la hora actual y la hora indicada.
Nota

Nota

¿Qué se incluye en un espacio de nombres? El espacio de nombres lightning proporciona muchos componentes de la interfaz de usuario que se pueden usar de inmediato en Salesforce Lightning Design System o SLDS. Se recomienda el uso de los componentes en el espacio de nombres lightning siempre que sea posible. Por ejemplo, use <lightning:input> en lugar de <ui:inputText>, <ui:inputNumber>, etc. La mayoría de los tipos de entrada, como texto, número, email y muchos otros, están a su disposición.

Llegaremos al resto de los componentes en unidades posteriores. Por ahora, una última cosa a tener en cuenta es el uso de HTML estático con un número de nombres de clase CSS que comienzan con “slds”. Vamos a usar SLDS para aplicar un estilo a los componentes. Aunque no vamos a profundizar en SLDS en este módulo, veremos algunos ejemplos en acción.

Bien, perfecto, la marca de componentes Aura es XML. Pero, ¿no dijimos algo acerca de JavaScript antes? Observe el atributo onchange="{!c.clickReimbursed}" del conmutador de alternancia, que en realidad es una útil casilla que se desplaza a derecha e izquierda para representar los valores de activación y desactivación. Eso significa que “cuando se cambia este valor, se llama a la función clickReimbursed del controlador”. Echemos un vistazo al código al que está adjunta.

({
    clickReimbursed: function(component, event, helper) {
        let expense = component.get("v.expense");
        let updateEvent = component.getEvent("updateExpense");
        updateEvent.setParams({ "expense": expense });
        updateEvent.fire();
    }
})

Este es el controlador del lado del cliente del componente, escrito en código JavaScript. La función clickReimbursed del controlador del componente se corresponde con el atributo onchange="{!c.clickReimbursed}" en la casilla de selección en la marca del componente.

En el modelo de programación de componentes Aura, un componente es un paquete de código. Puede incluir marcas como el ejemplo anterior, en el “recurso .cmp”, y también puede incluir código de JavaScript, en un número de recursos asociados. Los recursos asociados están “conectados automáticamente” entre sí y juntos pueden constituir el paquete de componente.

Llegaremos a los detalles en la siguiente unidad, pero por ahora, puede ver los tipos más importantes de código para componentes Aura.

¿Qué hay de Visualforce?

La pregunta que recibimos de los clientes, una y otra vez, es: “¿Cuál debo utilizar, Componentes Lightning o Visualforce?” La respuesta correcta es: ¡Sí!

Tanto Visualforce como Componentes Lightning tienen sus ventajas. Están tratadas en el módulo Desarrollo para Lightning Experience, donde puede encontrar la larga respuesta acerca de los usos apropiados para cada uno. Aquí, vayamos por el medio.

Primero, conozca esto: Visualforce no va a desaparecer. Su código de Visualforce se ejecutará en Salesforce por mucho tiempo. No necesita convertir páginas de Visualforce existentes y no necesita detener la creación de aplicaciones con Visualforce.

Sin embargo, es posible que desee hacerlo, al menos en algunos casos. Por ejemplo, Visualforce se creó antes de que existieran aplicaciones móviles para celulares. Aunque puede desarrollar aplicaciones móviles con Visualforce, ninguno de los componentes incorporados está pensado para dispositivos móviles. Lo que significa que escribe más código. Componentes Lightning, por el otro lado, está específicamente optimizado para funcionar bien en dispositivos móviles.

De nuevo, tratamos muchas de las especificaciones en el módulo Desarrollo para Lightning Experience. Si aún tiene preguntas acerca de Visualforce y Componentes Lightning, es un buen destino al que dirigirse.

¿Qué hay de AngularJS, React y esos otros marcos de JavaScript?

Otra pregunta que planea con frecuencia es: “¿Cómo se compara el marco de trabajo de componentes Lightning con “MiMarcoFavorito?” donde ese marco favorito es otro marco de aplicación Web de JavaScript moderno como AngularJS, React o Ember.

¡Todos estos son buenos marcos! Varias personas los conocen y existen muchos recursos para conocerlos. ¡Le sorprendería saber que creemos que estos marcos son una fantástica forma de crear aplicaciones de Plataforma Lightning!

Recomendamos utilizarlos con Visualforce, utilizando lo que llamamos una página contenedor y empaquetando su marco y código de aplicación elegidos en recursos estáticos. El uso de una página contenedor vacía aparta Visualforce de su camino y le permite utilizar las funciones completas de su marco elegido.

Aunque es posible utilizar marcos de JavaScript externos con componentes Lightning, es algo engorroso. El marco de trabajo de componentes Lightning no tiene la noción de una página vacía y tiene algunas opiniones específicas acerca de cómo , por ejemplo, se lleva a cabo el acceso a los datos y algunos requisitos de seguridad más específicos.

Y francamente, las funciones del marco de trabajo de componentes Lightning y marcos más modernos se solapan un poco. Aunque el estilo o especificaciones pueden ser diferentes, las funciones proporcionadas son suficientemente similares desde un punto de vista conceptual que está efectivamente ejecutando código duplicado. Eso ni es eficiente ni es sencillo para trabajar.

Otra cosa que considerar: los marcos de uso general como AngularJS están diseñados para ser agnósticos acerca de la plataforma sobre la que se ejecutan, en concreto servicios de datos. El marco de trabajo de componentes Lightning, por la otra parte, está diseñado para conectar de forma nativa con servicios proporcionados por Salesforce y la plataforma Lightning. ¿Qué cree que le ayudará a crear aplicaciones con mayor rapidez?

Nota

Nota

Solo estamos hablando de marcos de aplicación aquí. Si tiene una biblioteca de elaboración de gráficos o asignación favorita de JavaScript, u otros kits de herramientas para fines especiales sujetos a algunos requisitos de seguridad, las bibliotecas modernas de JavaScript funcionan bien por lo general.

Bien, ¡basta de palabras, palabras, palabras! Realicemos una visita rápida y gráfica de la diferentes ubicaciones donde puede implementar aplicaciones de componentes Lightning. Luego adentrémonos en el trabajo divertido: el código.

Dónde puede utilizar Componentes Lightning

Puede utilizar componentes Lightning para personalizar su organización de Salesforce de diferentes formas. ¡Pero eso no es todo! Puede utilizar componentes Lightning para crear aplicaciones independientes alojadas en Salesforce. Incluso puede crear aplicaciones alojadas en otras plataformas, incluso integrándolos en aplicaciones desde esas plataformas.

Agregar aplicaciones al iniciador de aplicación de Lightning Experience

Las aplicaciones de su componente Lightning y fichas personalizadas están disponibles desde el Iniciador de aplicación, al que llega haciendo clic en Icono del Iniciador de aplicación en la barra de navegación y seleccionando Ver todo para obtener la vista completa.

Agregar componentes al iniciador de aplicación

Haga clic en una aplicación personalizada (1) para activarla. Los elementos en la aplicación aparecen en la barra de navegación, incluyendo cualquier ficha de Componentes Lightning que agregó a la aplicación. Recuerde que necesita agregar sus componentes a fichas para que sean accesibles en el Iniciador de aplicación. Las fichas de Componentes Lightning que no son aplicaciones pueden encontrarse en Todos los elementos (2).

Agregar aplicaciones a la navegación de Lightning Experience y la aplicación Salesforce

Como se describe en el ejemplo precedente, puede agregar fichas de Componentes Lightning a una aplicación y aparecen como elementos en la barra de navegación de la aplicación.

Agregar componentes integrados a la navegación principal

Crear componentes de arrastrar y soltar para Generador de aplicaciones Lightning y Experience Builder

Cree interfaces de usuario personalizadas utilizando sus propios componentes Lightning o aquellos que instaló desde AppExchange, para dispositivos de sobremesa y móviles.

Crear componentes de arrastrar y soltar para Generador de aplicaciones Lightning y Experience Builder

Agregar Componentes Lightning a páginas Lightning

Una página Lightning es un formato personalizado que le permite diseñar páginas para utilizarlas en la aplicación móvil Salesforce o en Lightning Experience. Puede utilizar una página Lightning para crear una página de inicio de aplicación y agregarle su componente Lightning favorito, como la aplicación Expenses que crearemos en este módulo.

Agregar Componentes Lightning a páginas de registro de Lightning Experience

Al igual que sugiere el título, puede personalizar páginas de registro de Lightning Experience agregando un componente Lightning.

Al igual que sugiere el título, personalice páginas de registro de Lightning Experience agregando un Componente Lightning

Iniciar un Componente Lightning como una acción rápida

Cree acciones utilizando un componente Lightning y luego agregue la acción al formato de página de un objeto para hacerlo accesible al instante desde una página de registro.

Acción rápida de componente Lightning en página de registro

Sustituir acciones estándar por componentes Lightning

Puede sustituir una acción por un componente Lightning, lo cual es muy parecido a sustituir una acción por una página de Visualforce.

Sustituir acciones por componentes Lightning

Crear aplicaciones independientes

Una aplicación independiente está compuesta de componentes que utilizan sus datos de Salesforce y se pueden utilizar independientemente del entorno estándar de Salesforce.

Las aplicaciones independientes son componentes que utilizan datos de Salesforce y se pueden utilizar independientemente de la aplicación Salesforce.

Ejecutar aplicaciones de Componentes Lightning en páginas de Visualforce

Agregue Componentes Lightning a sus páginas de Visualforce para combinar funciones que creó utilizando ambas soluciones. Implemente nuevas funciones utilizando Componentes Lightning y luego utilícelas con páginas existentes de Visualforce.

Ejecutar aplicaciones de Componentes Lightning en otras plataformas con Lightning Out

Lightning Out es una función que amplía aplicaciones Lightning. Actúa como un puente para hacer aflorar componentes Lightning en cualquier contenedor Web remoto. Esto significa que puede usar sus componentes Lightning en un sitio externo (por ejemplo, Sharepoint o SAP), o incluso en cualquier otra parte de la plataforma como en Heroku.

Cuadro de diálogo Lightning Out en Heroku

Personalizar pantallas de flujo

Cree un flujo para guiar sus usuarios por un proceso de negocio. De forma predeterminada, puede agregar campos sencillos como entradas o botones de opción a una pantalla de flujo. Pero con un componente Lightning personalizado, puede personalizar por completo el aspecto y las funciones de su pantalla.Pantalla de flujo mostrando un componente Lightning personalizado