Criar e editar componentes do Aura

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:
  • Criar e editar recursos de um pacote de componentes do Aura usando o Developer Console.
  • Criar um aplicativo de “aproveitamento” para testar componentes sendo desenvolvidos.
  • Realizar o ciclo de editar e recarregar para visualizar previamente componentes sendo desenvolvidos.
  • Listar os recursos diferentes que constituem um pacote de componentes do Aura.

Criar e editar componentes do Aura

OK! Hora de escrever código! #finalmente!

O primeiro passo para escrever código dos componentes do Aura é, ahn, se preparar para escrever código. Felizmente, isso é realmente fácil. Em sua organização, abra o Developer Console em Seu nome ou no menu de acesso rápido (Ícone de engrenagem de configuração).

Lightning Experience Salesforce Classic
Abrir o Developer Console
Modo clássico: Abrir o Developer Console

Tcharam, você está pronto para escrever código dos componentes do Aura!

Tcharam: você pode começar a escrever o código do componente

Criar componentes do Aura no Developer Console

Bom, vamos escrever alguma coisa. Selecione Arquivo | Novo | Componente do Lightning para criar um componente do Aura. No painel Novo Pacote do Lightning, digite helloWorld para o nome do componente e clique em Enviar.

Painel Novo pacote do Lightning

Isso cria um novo pacote de componente helloWorld, com duas guias abertas. Feche a guia helloWorld e mantenha a guia helloWorld.cmp aberta.

helloWorld.cmp contém as marcas de abertura e fechamento para um componente do Aura, <aura:component>. Entre elas, adicione a marcação a seguir e salve:

<p>Hello Lightning!</p>

Sua marcação de componente deve parecer com o seguinte.

Marcação Hello Lightning

Uhuuuu, seu primeiro componente do Aura! Agora... como podemos ver como ele é?

Resumindo, é complicado. Você não pode executar seu componente diretamente e ver como ele se comporta. Em vez disso, seu componente precisa ser executado dentro de um aplicativo contêiner, que vamos chamar apenas de contêiner. Exemplos de contêineres são os aplicativos do Lightning Experience ou aplicativos Salesforce, ou um aplicativo construído com o Criador de aplicativo Lightning Experience – basicamente, qualquer um dos tópicos abordados no final da unidade anterior. Você adiciona seu componente a um desses contêineres e depois acessa o componente dentro daquele contêiner.

Vamos falar mais sobre os contêineres mais tarde, e em outros módulos de componentes do Lightning. Por enquanto, vamos fazer um que seja simples.

Selecione Arquivo | Novo | Aplicativo do Lightning para criar um novo aplicativo do Lightning. No painel Novo pacote do Lightning, digite “harnessApp” como nome do aplicativo e clique em Enviar.

Isso cria um novo pacote harnessApp, com duas guias abertas. Feche a guia harnessApp e mantenha a guia harnessApp.app aberta.

harnessApp.app contém as marcas de abertura e fechamento para um aplicativo do Lightning, <aura:application>. Entre elas, adicione a marcação a seguir e salve:

<c:helloWorld/>

Isso adiciona o componente helloWorld que criamos anteriormente ao aplicativo harnessApp.

Antes de explicarmos esse aplicativo enganosamente simples, clique alternadamente entre as guias harnessApp.app e helloWorld.cmp no Developer Console. Além da marcação, o que mais você percebe que é diferente?

O que é diferente?

Acertou de primeira: o botão Visualizar. Os aplicativos têm, os componentes não. Clique nele agora e uma outra janela do navegador vai abrir, onde você poderá ver seu aplicativo.

Visualize o aplicativo.

Agora estamos lidando com... bom, OK, é só um componente “hello world”. Mas existem algumas coisas interessantes para se reparar aqui, apesar da marcação ser comum.

Vamos começar com o Developer Console. Se você usou o console para escrever Visualforce ou Apex, com certeza você reparou nos controles adicionais que aparecem em uma paleta no lado direito da janela de edição de qualquer pacote do Lightning. Cada um dos botões diferentes com um rótulo Criar representa um recurso diferente que você pode adicionar ao pacote. Vamos falar sobre recursos e pacotes na próxima seção. No momento, basta saber que o Developer Console fornece a você uma forma fácil de criar e alternar entre eles.

Na verdade, o Developer Console tem vários recursos para trabalhar com os componentes do Aura. Também existe Arquivo | Abrir |  Recursos do Lightning, que permite a você abrir vários recursos do Lightning de uma vez. Muito útil!

O Developer Console é um ótimo lugar para escrever código do Lightning, e trabalharemos com ele pelo resto desse módulo. Mas, como os recursos do Lightning são acessados através da API de ferramentas, existem outras formas de criar e editar esses recursos. Salesforce DX dá suporte eficiente a todos os aspectos do desenvolvimento de componentes do Lightning. Além disso, Extensões do Salesforce para Visual Studio Code é uma excelente ferramenta de terceiros. Não pense que você está limitado apenas ao Developer Console!

Uma última coisa antes de voltarmos ao código. A URL para a “visualização” na verdade é a página inicial permanente do nosso aplicativo (assim que for disponibilizado para os usuários). O formato da URL é o seguinte: https://MyDomainName.lightning.force.com/Namespace/AppName.app.

<yourAppName> representa o nome do pacote do aplicativo; nesse caso harnessApp. Em sua organização Trailhead, não deve haver um namespace configurado, por isso vai ver um “c” naquela parte da URL. “c” representa o namespace padrão…e ele vai voltar para nos assombrar mais tarde. O resto do formato da URL deve ser autoexplicativo.

OK, agora vamos ao código!

O que é um Componente?

Nem sempre o componente “Hello World” causa perguntas existenciais, mas cá estamos. Vamos falar sobre o que é um componente no contexto de nosso exemplo helloWorld. De um jeito prático, um componente é um pacote que inclui um recurso de definição, escrito em marcação, e pode incluir recursos adicionais opcionais, como um controlador, folha de estilo e assim por diante. Um recurso é parecido com um arquivo, mas armazenado no Salesforce em vez de em um sistema de arquivos.

Nosso recurso de definição de componente helloWorld.cmp é fácil de entender.

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

Existem marcações de abertura e fechamento <aura:component>, com um pouco de HTML estático no meio. Seria difícil ser mais simples, e você pode estar tentado a pensar nele como uma “página”. Não faça isso. Vamos voltar a esse ponto daqui a pouco.

Já mencionamos os pacotes de componente, mas o que eles são, de verdade? Um pacote é parecido com uma pasta. Ele agrupa os recursos relacionados para um único componente. Recursos em um pacote são auto conectados juntos através de um esquema de definição de nome para cada tipo de recurso. A conexão automática significa apenas que uma definição de componente pode fazer referência ao seu controlador, auxiliar, etc., e aqueles recursos podem fazer referência a uma definição de componente. Eles são conectados uns aos outros automaticamente (na maioria dos casos).

Vamos ver como isso funciona. Com o helloWorld.cmp ativo, clique no botão ESTILO na paleta do componente na direita. Isso abre uma nova guia para o recurso de estilo que foi adicionado ao pacote helloWorld. Normalmente, começa com um seletor único e vazio, .THIS. Para ver como isso funciona, adicione um estilo simples na folha de estilos, para que ela fique com a aparência a seguir.

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

Então recarregue sua janela de visualização para o harnessApp.app. Tcharam, texto maior! Mas como o .THIS funciona? É a mágica da conexão automática! Na hora da execução, .THIS é substituído por uma sequência de caracteres que inclui o estilo nomeado para seu componente. Ela limita as regras de estilo para apenas este componente, de forma que você possa criar estilos que são específicos ao componente, sem se preocupar sobre como os estilos podem afetar outros componentes.

Então agora nosso pacote helloWorld tem dois recursos, a definição de componente helloWorld.cmp, e a folha de estilo helloWorld.css. Pense nisso como uma pasta, ou como uma estrutura:

  • helloWorld – o pacote de componente
    • helloWorld.cmp – a definição do componente
    • helloWorld.css – os estilos do componente

Como pode ser visto no Console do desenvolvedor, existem vários outros tipos de recurso que você pode adicionar a um pacote de componente. Continue e clique nos itens CONTROLADOR e AUXILIAR para adicionar esses recursos ao pacote. Agora, seu pacote está da seguinte forma, e você pode começar a ver o sistema de definição de nome.

  • helloWorld – o pacote de componente
    • helloWorld.cmp – a definição do componente
    • helloWorldController.js – o controlador do componente, ou arquivo JavaScript principal
    • helloWorldHelper.js – o auxiliar do componente, ou arquivo JavaScript secundário
    • helloWorld.css – os estilos do componente

Neste módulo vamos trabalhar apenas com estes quatro tipos de recurso. Vamos falar muito mais sobre os recursos do controlador e do auxiliar quando realmente começarmos a escrever os códigos deles. Por enquanto, você pode só deixar as implementações padrão. Afinal de contas, este é apenas um alô a este mundo!

O que é um aplicativo?

Agora que sabemos o que é um componente, fica fácil explicar o que é um aplicativo – um aplicativo nada mais é do que um tipo especial de componente! Para os fins deste módulo, pense em um aplicativo como sendo diferente de um componente por dois motivos principais:

  • Um aplicativo usa marcas <aura:application> em vez de marcas <aura:component>.
  • Somente um aplicativo tem um botão Visualizar no Console do desenvolvedor.

Pronto!

Para que servem os aplicativos?

Por mais simples que pareça, existem alguns detalhes práticos sobre como você pode usar um aplicativo vs. um componente. Os itens principais são os seguintes.

  • Ao escrever a marcação você pode adicionar um componente a um aplicativo, mas não pode adicionar um aplicativo a outro aplicativo, ou um aplicativo a um componente.
  • Um aplicativo tem uma URL independente que pode ser acessada durante os testes e que pode ser publicada para seus usuários. Geralmente, chamamos esses aplicativos independentes de “my.app.”
  • Não é possível adicionar aplicativos ao Lightning Experience ou ao aplicativo Salesforce – só é possível adicionar componentes. Depois da última unidade isso pode parecer estranho. Exatamente o que você adiciona ao Iniciador de aplicativos, se não é um aplicativo? Você adiciona ao Iniciador de aplicativos um aplicativo Salesforce, que resume um componente do Aura, algo definido em um <aura:component>. Um aplicativo dos componentes do Aura, ou seja, algo definido em um <aura:application>, não pode ser usado para criar aplicativos Salesforce. Um pouco esquisito, mas é isso.

Então, para que serve um aplicativo? Por que você usaria um? Respondemos essa pergunta anteriormente. As funcionalidades construídas nos componentes do Lightning são publicadas em contêineres. Aplicativos de componentes do Lightning são um tipo de contêiner para nossos componentes do Lightning.

Sendo prático novamente, isso normalmente significa que você constrói todas as funcionalidades do seu “aplicativo” dentro de um componente de nível superior. Depois, no fim, você coloca aquele componente em um contêiner – talvez um aplicativo dos componentes do Lightning, talvez o aplicativo Salesforce, talvez alguma outra coisa. Se usar um my.app, o contêiner pode configurar serviços para seu componente principal, mas caso contrário ele vai estar lá apenas para hospedar o componente.

Vamos dar uma olhada novamente ao aplicativo que criamos. Aqui está de novo o recurso de definição harnessApp.app:

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

Não importa quantas funcionalidades decidimos adicionar em nosso “aplicativo” helloWorld, elas vão todas para dentro do componente helloWorld. Ele poderia ter um editor no estilo Quip inserido dentro dele para revisar a mensagem de alô, mas nossa definição harnessApp.app vai continuar basicamente sendo simples assim.

A partir daqui, vamos assumir que você está usando um pacote real de Aplicativo do Lightning apenas como um contêiner, ou aproveitamento, para os componentes criados. Fique à vontade para continuar usando o harnessApp.app! Mas, quando falamos de criar aplicativos, queremos dizer na verdade construir funcionalidades dentro de um pacote de componentes, não de um pacote de aplicativo, pois é assim que se constrói “aplicativos” no mundo real.

Componentes contendo componentes, contendo... componentes!

A definição harnessApp.app também é interessante porque em vez de um HTML estático, temos nosso componente helloWorld. Podemos dizer que o harnessApp contém o componente helloWorld. Vamos mergulhar um pouco nisso e tornar o helloWorld um pouco mais complexo.

No Developer Console, crie um componente do Aura chamado helloHeading. Para essa marcação, cole o código a seguir.

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

Agora, clique novamente em helloWorld.cmp e adicione a ele <c:helloHeading/>, acima da linha “Hello Lightning”. Sua definição do componente helloWorld deve estar assim:

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

Recarregue o aplicativo para ver a mudança. Sua estrutura de componente, em termos de o que contém o quê, agora deve estar assim:

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

Dizemos que helloHeading é um componente filho de helloWorld ou que helloHeading fica aninhado em helloWorld ou… Existem várias maneiras diferentes de dizer que helloWorld contém helloHeading. Além disso, você pode continuar aninhando componentes dentro de outros componentes até praticamente qualquer nível que quiser. Vai começar a ser difícil de acompanhar na sua cabeça bem antes de você chegar a uma limitação de componentes do Lightning!

Esse processo de colocar componentes dentro de outros componentes é fundamental para construir aplicativos de componentes do Lightning. Você começa com, ou constrói, componentes simples ou “específicos”, onde cada componente oferece um conjunto definido de funcionalidades autossuficientes. Depois disso esses componentes são montados em novos componentes, com funcionalidades de um nível maior. Então você usa aqueles componentes, e “aumenta de nível” novamente.

Vamos falar disso com uma metáfora que nos é familiar fora do contexto de software. Imagine uma casa. Melhor ainda, veja essa casa.

Animação de uma casa

Quando você olha para essa casa, o que vê? Se você parar de pensar nela como uma “casa”, mas pensar nela como um componente de casa, você também começará a ver as peças e padrões que a compõem.

Na maior escala, a casa é composta por três estruturas similares. Esses três componentes têm designs similares, mas não idênticos. Cada um pode ser detalhado ainda mais, em componentes ainda menores, como janelas, que podem ser divididas em peças individuais. O arranjo, ou composição, desses componentes menores define as diferenças entre as três estruturas maiores.

As três estruturas são unidas por duas estruturas/componentes menores e mais finos, que podem por sua vez serem separados em padrões menores e reutilizáveis. Esses componentes que se conectam unem as três estruturas separadas em um todo maior: A Casa.

Assim como na arquitetura, também podemos fazer isso com um aplicativo da web. Mais tarde neste módulo você vai pegar componentes de entrada específicos e criar um componente de formulário com eles. Então, você pegará o componente de formulário e colocará em outro componente, para construir uma funcionalidade de nível de aplicativo.

Composição do aplicativo de despesas

A aparência não é tão bonita quanto a da casa, mas os princípios por trás do processo de composição são muito similares. Pensando em termos de componentes, e composição, é uma habilidade fundamental que você vai desenvolver durante este módulo, e sempre que construir aplicativos com componentes do Lightning.

Você já fez um pouco disso aqui, mas antes de podermos realmente construir componentes que fazem alguma coisa, precisamos aprender sobre atributos, tipos, valores e expressões. Mas, antes disso, seu primeiro desafio de código!

Continue a aprender de graça!
Inscreva-se em uma conta para continuar.
O que você ganha com isso?
  • Receba recomendações personalizadas para suas metas de carreira
  • Pratique suas habilidades com desafios práticos e testes
  • Monitore e compartilhe seu progresso com os empregadores
  • Conecte-se a orientação e oportunidades de carreira