Introdução aos componentes do Aura

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:
  • Descrever o que é a estrutura dos componentes do Lightning e para que ela é usada.
  • Listar quatro diferenças principais entre os componentes do Lightning e outras estruturas de aplicativos da web.
  • Listar pelo menos cinco formas diferentes de usar os componentes do Lightning para personalizar o Salesforce.

Introdução aos componentes do Lightning

Sim! Você ainda está conosco! Estamos realmente empolgados em dar-lhe as boas-vindas à festa dos componentes do Lightning – e é uma festa. Quando falamos que os componentes do Lightning são a tecnologia de desenvolvimento de aplicativos mais animadora e potente que construímos em anos, é uma declaração enfática. E sabemos que é verdadeira, porque construímos o aplicativo Salesforce e o Lightning Experience com ela. Temos certeza que, assim que você conhecer os componentes do Lightning, você estará tão animado quanto nós para usá-lo.

O que é a estrutura de componente do Lightning?

A estrutura de componente do Lightning é uma estrutura de interface de usuário para o desenvolvimento de aplicativos da web destinados a dispositivos móveis e desktops. É uma estrutura moderna para construir aplicativos de página única com interfaces de usuário dinâmicas e responsivas para aplicativos da Lightning Platform. Ela usa JavaScript no lado do cliente e Apex no lado do servidor.

Bom... muitas palavras estranhas. Vamos ver se conseguimos tentar de novo com palavras usadas por pessoas normais.

Novamente, vendo em um nível de arquitetura muito alto

“A estrutura de componente do Lightning é uma estrutura para desenvolver aplicativos da web.” Isso parece compreensível. Uma estrutura de aplicativo é uma coleção de códigos e serviços que faz com que seja fácil para você criar seus próprios aplicativos personalizados, sem ter que escrever todo o código por si mesmo. Existem várias estruturas de aplicativos da web diferentes, como Ruby on Rails, Grails, AngularJS, Django, CakePHP e assim por diante. Nós temos uma estrutura própria, o Visualforce, que os clientes conhecem e amam. Achamos os componentes do Lightning muito especiais. Vamos falar do motivo para eles serem especiais conforme avançamos, e esperamos que você concorde até o fim do módulo!

“Aplicativos da web para dispositivos móveis e desktop.” Novamente, parece bem fácil de entender. Mas... você reparou na ordem? Os componentes do Lightning foram criados a partir de e feitos para construir a Salesforce Platform para aplicativos móveis. As capacidades móveis fazem parte da essência da estrutura de componente do Lightning, e fazem com que o desenvolvimento de aplicativos que funcionam em dispositivos móveis e desktops seja muito mais simples do que em muitas outras estruturas.

“É uma estrutura moderna para criar aplicativos de página única.” OK, agora complicou um pouquinho. “Moderno” é só uma palavra de propaganda, certo? E o que são “aplicativos de página única”?

Não achamos que moderno é “só” marketing. No módulo Desenvolvimento para o Lightning Experience falamos muito sobre como os aplicativos da web evoluíram de experiências simples focadas em uma página para aplicativos muito responsivos que têm o mesmo comportamento e interatividade de aplicativos nativos, em desktops e especialmente em dispositivos móveis. Para chegar a essas experiências de usuário interativas, os aplicativos da web modernos são construídos como uma coleção muito compacta de códigos que é carregada a partir de uma única URL, e que depois é executada continuamente conforme é usada. Esses aplicativos de página única são construídos de forma similar a aplicativos nativos, com os processos internos sendo tratados por uma estrutura. Uma estrutura como a estrutura de componente do Lightning.

“Interfaces de usuário dinâmicas e responsivas para aplicativos da Lightning Platform” se trata de aplicar as ideias anteriores a aplicativos construídos por si em cima do Salesforce. E, finalmente, “usa JavaScript do lado do cliente e Apex do lado do servidor” é autoexplicativo – mesmo deixando de fora alguns detalhes sobre o que vai onde. Vamos explicar isso em breve!

Um exemplo de componente do Aura

OK, até agora está sendo muita conversa e pouco código. Vamos dar uma olhada em um componente do Lightning real usando o modelo de programação de componente do Aura, e ver sobre o que estamos falando tanto. Primeiro, é assim que o componente aparece quando é renderizado na tela:

Componente do Lightning: não dá para ver muito, mas muita coisa está acontecendo

Pode não parecer muito, mas tem muita coisa acontecendo. Aqui está o código respectivo; é de um componente que vamos trabalhar detalhadamente mais tarde.

<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>

Mesmo antes de você saber qualquer coisa sobre os componentes do Aura, é possível perceber algumas coisas sobre essa amostra. Primeiro de tudo, é uma marcação XML e mistura tanto marcas de HTML estático quanto marcas de componentes do Aura personalizadas, como a marca <aura:component> no começo da amostra. Se você trabalhou com o Visualforce, o formato da marca é familiar: namespace: tagName. Você verá mais adiante que os componentes embutidos podem vir de vários namespaces diferentes, como aura: (como aqui), force:, lightning: ou ui:.

Você pode ter notado que existem componentes como <lightning:input> e <lightning:formattedNumber>. Novamente, este padrão é familiar para desenvolvedores do Visualforce. Se você não for um deles, vamos supor por agora que você usa o componente de entrada para coletar entradas do usuário e os outros componentes para exibir valores somente leitura. Vejamos alguns outros componentes destacados no trecho de código.

  • <lightning:card> cria um contêiner em volta de um grupo de informações.
  • <lightning:formattedDateTime> exibe a data e a hora formatadas.
  • <lightning:relativeDateTime> exibe a diferença de tempo relativa entre a hora atual e a hora fornecida.
Nota

Nota

O que é um namespace? O namespace lightning fornece vários componentes de IU que recorrem ao Salesforce Lightning Design System, ou SLDS, pronto para usar. Recomendamos que você use componentes no namespace lightning sempre que possível. Por exemplo, use <lightning:input> em vez de <ui:inputText>, <ui:inputNumber>, e assim por diante. A maioria dos tipos de entrada, como texto, número, email e outros, está disponível para você.

Vamos tratar do resto dos componentes em unidades posteriores. Por enquanto, a última coisa a reparar é o uso de HTML estático com vários nomes de classe CSS que começam com “slds”. Vamos usar o SLDS para estilizar nossos componentes, e apesar de não estar nos planos explicar o SLDS em pormenor nesse módulo, queremos que você veja exemplos dele em ação.

OK, legal, a marcação dos componentes do Aura é em XML. Mas não falamos algo sobre o código JavaScript antes? Observe o atributo onchange="{!c.clickReimbursed}" no botão de alternância, que é, na verdade, uma caixa de seleção mais chique que desliza para a direita e para a esquerda a fim de representar os valores de marcado e desmarcado. Isso quer dizer “quando este valor for alterado, chamar a função clickReimbursed do controlador”. Vamos ver o código que está junto com o atributo.

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

Esse é o controlador do lado do cliente do componente, escrito em código JavaScript. A função clickReimbursed no controlador do componente corresponde ao atributo onchange="{!c.clickReimbursed}" na caixa de seleção da marcação do componente.

No modelo de programação dos componentes do Aura, um componente é um pacote de código. Ele pode incluir marcações como na amostra anterior, em “.cmp resource” e também pode incluir código JavaScript em vários recursos associados. Os recursos relacionados são “conectados automaticamente” entre si, e juntos eles formam o pacote de componente.

Vamos entrar em detalhes na próxima unidade mas, no momento, você viu os dois tipos mais importantes de código dos componentes do Aura.

E o Visualforce?

A pergunta que recebemos dos clientes, repetidamente, é a seguinte: “Qual eu devo usar, os componentes do Lightning ou o Visualforce?” A resposta resumida é: sim!

O Visualforce e os componentes do Lightning têm seus pontos fortes. Eles são discutidos no módulo Desenvolvimento para o Lightning Experience, onde você pode encontrar a resposta mais completa sobre o uso adequado de cada um. Aqui, vamos optar por uma resposta média.

Primeiramente, saiba o seguinte: O Visualforce não vai sumir. Seu código do Visualforce poderá ser executado no Salesforce por um bom tempo no futuro. Você não precisa converter os aplicativos Visualforce existentes, e não precisa parar de criar aplicativos com o Visualforce.

Porém, você pode querer fazer isso, pelo menos em alguns casos. Por exemplo, o Visualforce foi criado antes de aparecerem os aplicativos móveis em telefones. Mesmo que você possa desenvolver aplicativos móveis com o Visualforce, nenhum dos componentes embutidos é especializado para aplicativos móveis. O que significa que você escreve mais código. Os componentes do Lightning, por sua vez, são otimizados especificamente para um bom desempenho em dispositivos móveis.

Novamente, falamos de muitos detalhes no módulo Desenvolvimento para o Lightning Experience. Se você ainda tiver dúvidas sobre o Visualforce e os componentes do Lightning, esse é um bom módulo para consultar.

E o AngularJS, React e outras estruturas JavaScript?

Outra pergunta que vemos frequentemente é: “Como a estrutura de componente do Lightning é comparada com MyFavoriteFramework?”, em que essa estrutura preferida é outra estrutura moderna de aplicativos da web em JavaScript como o AngularJS, React ou Ember.

Elas todas são boas estruturas! Muitas pessoas sabem usá-las e existem muitos recursos para aprender a trabalhar com elas. Pode ser uma surpresa para você, mas achamos que essas estruturas são uma ótima maneira de construir aplicativos da Lightning Platform!

Recomendamos usá-las com o Visualforce, usando o que chamamos de página de contêiner, e embalar sua estrutura escolhida e código do aplicativo em recursos estáticos. Usar uma página de contêiner vazia tira o Visualforce do seu caminho e deixa você usar todas as capacidades de sua estrutura escolhida.

Apesar de ser possível usar estruturas JavaScript de terceiros com componentes do Lightning, é um pouco trabalhoso. A estrutura de componente do Lightning não tem a noção de uma página vazia e tem algumas opiniões específicas sobre como, por exemplo, os acessos a dados são realizados, e alguns requisitos de segurança bem específicos.

E, sinceramente, os recursos da estrutura de componente do Lightning e da maioria das estruturas modernas estão em sobreposição boa parte do tempo. Mesmo que o estilo ou os detalhes possam ser diferentes, os recursos fornecidos são similares o bastante do ponto de vista conceitual para que você esteja na verdade executando um código duplicado. Isso não é nem fácil nem eficiente de se trabalhar.

Outra coisa a se considerar: estruturas de fins gerais como o AngularJS são feitas para serem agnósticas em relação à plataforma onde são executadas, particularmente em serviços de dados. A estrutura de componente do Lightning, por outro lado, é feita para se conectar de forma nativa com os serviços fornecidos pelo Salesforce e pela Lightning Platform. Qual deles você acha que vai ajudá-lo a construir aplicativos mais rápido?

Nota

Nota

Estamos falando aqui apenas de estruturas de aplicativo. Se você tiver uma biblioteca preferida de estruturação ou mapeamento JavaScript, ou outro conjunto de ferramentas para um fim específico, então as bibliotecas JavaScript modernas normalmente funcionam bem, desde que atendam a certos requisitos de segurança.

OK, já chega de conversa! Vamos fazer um passeio rápido e visual pelos vários lugares onde você pode implantar aplicativos dos componentes do Lightning. Em seguida, vamos ao que interessa: o código.

Onde usar os componentes do Lightning

Os componentes do Lightning podem ser usados para personalizar sua organização Salesforce de várias formas diferentes. Mas isso não é tudo! Você pode usar componentes do Lightning para criar aplicativos autônomos que são hospedados no Salesforce. Você pode até mesmo criar aplicativos que são hospedados em outras plataformas, e até mesmo fazer com que sejam embutidos em aplicativos dessas plataformas.

Adicionar aplicativos ao Iniciador de aplicativos do Lightning Experience

Seus aplicativos e guias personalizadas de componentes do Lightning estão disponíveis a partir do Iniciador de aplicativos, que pode ser acessado ao clicar em Ícone do Iniciador de aplicativos na barra de navegação e selecionar Exibir tudo para obter o modo de exibição completo.

Adicionar componente ao Iniciador de aplicativos

Clique em um aplicativo personalizado (1) para ativá-lo. Os itens no aplicativo são exibidos na barra de navegação, inclusive quaisquer guias dos componentes do Lightning que você adicionou ao aplicativo. Note que você precisa adicionar seus componentes a guias para que eles possam ser acessados no Iniciador de aplicativos. As guias dos componentes do Lightning que não estão em aplicativos podem ser encontradas em Todos os itens (2).

Adicionar aplicativos ao Lightning Experience e navegação do aplicativo Salesforce

Como descrito no exemplo anterior, você pode adicionar guias dos componentes do Lightning em um aplicativo e elas serão exibidas como itens na barra de navegação do aplicativo.

Adicionar componentes embutidos na navegação principal

Criar componentes arrastar e soltar para o Criador de aplicativo Lightning e o Experience Builder

Usando seus próprios componentes do Lightning ou aqueles instalados a partir do AppExchange, construa interfaces de usuário personalizadas para computadores e dispositivos móveis.

Criar componentes arrastar e soltar para o aplicativo Lightning e o Experience Builder

Adicionar componentes do Lightning às Páginas do Lightning

Uma página do Lightning é um layout personalizado que permite a você criar páginas para uso no aplicativo móvel Salesforce ou no Lightning Experience. Você pode usar uma Página do Lightning para criar uma página inicial de aplicativo e adicionar a ela seu componente do Lightning preferido, como o aplicativo de Despesas que vamos criar neste módulo.

Adicionar componentes do Lightning às páginas de registro do Lightning Experience

Como sugerido pelo título, você pode personalizar as páginas de registro do Lightning Experience ao adicionar um componente do Lightning.

Como sugerido pelo título, personalize as páginas de registro do Lightning Experience ao adicionar um componente do Lightning

Lançar um componente do Lightning como uma ação rápida

Crie ações usando um componente do Lightning e, em seguida, adicione a ação ao layout de página do objeto para que ela possa ser acessada instantaneamente de uma página de registro.

Ação rápida de componente do Lightning em uma página de registro

Substituir ações padrão com componentes do Lightning

Substitua uma ação com um componente do Lightning, que se assemelha a substituir uma ação com uma página do Visualforce.

Substituir ações com componentes do Lightning

Criar aplicativos independentes

Um aplicativo independente abrange componentes que usam seus dados do Salesforce e podem ser usados de forma independente do ambiente Salesforce padrão.

aplicativos independentes são componentes que usam dados do Salesforce e podem ser usados de forma independente do aplicativo Salesforce

Executar aplicativos de componentes do Lightning dentro das páginas do Visualforce

Adicione componentes do Lightning em suas páginas do Visualforce para combinar recursos construídos usando as duas soluções. Implemente novas funcionalidades usando componentes do Lightning e use-as com as páginas existentes do Visualforce.

Executar aplicativos de componentes do Lightning em outras plataformas com o Lightning Out

Lightning Out é um recurso que amplia os aplicativos Lightning. Ele age como uma ponte para trazer à tona componentes do Lightning em qualquer contêiner da web remoto. Isso quer dizer que você pode usar seus componentes do Lightning dentro de um site externo (por exemplo, Sharepoint ou SAP), ou até mesmo em algum outro lugar na plataforma, como no Heroku.

Caixa de diálogo Lightning Out no Heroku

Personalizar telas de fluxo

Crie um fluxo para orientar seus usuários através de um processo de negócios. Por padrão, você pode adicionar campos simples, como entradas ou botões de opção, a uma tela de fluxo. Mas com um componente personalizado do Lightning, você pode personalizar totalmente a aparência e a funcionalidade de sua tela.Tela de fluxo exibindo um componente personalizado do Lightning