Entendendo o Lightning Event

Vamos entender de una vez por todas o que é o Lightning Event e colocar a mão na massa para desmistificar esse conceito de eventos no Lightning, vamos entender as diferenças e como usar o Component Events e o Application Events.

O que são Eventos?

a ideia principal é que você escreva códigos que só serão executados quando um determinado evento ocorrer

Muitas linguagens de programação utilizam-se do conceito de programação orientada a eventos, tal como o JavaScript, a ideia principal é que você escreva códigos que só serão executados quando um determinado evento ocorrer, um exemplo bem simples é o clique de um botão, o evento do clique do botão só é disparado quando o evento  de clique é realizado, você pode nunca clicar no botão e o evento por sua vez pode nunca ocorrer, mas isso faz parte do conceito de programação orientada a eventos.

O conceito dentro de um Lightning Component

Agora vamos aplicar esse conceito para o Framework do Lightning, em um Lightning Component, você pode registrar-se para disparar um evento, e registrar para escutar um evento e fazer até mesmo os dois no mesmo componente, um evento pode ou não ter atributos, no Lightning, existem dois tipos de eventos, vamos entender quais são eles:

Component Events

Um Component Events (Eventos de Componentes) pode ser emitido e escutado pelo próprio componente é pelos componentes em que ele é instanciado, abaixo a estrutura de um evento de componente:

<!--c:compEvent-->
<aura:event type="COMPONENT">
    <aura:attribute name="message" type="String" />
</aura:event>

Registrando um Component Event

Para que você possa disparar um evento de componente, você precisa antes registrar essa intenção, e para fazer isso, você deve inserir no seu componente o marcador abaixo, onde o name (é o nome único do evento que deseja disparar, esse nome será utilizado para escutar um evento de componente), e  type (refere-se ao seu Lightning Event criado anteriormente):

<aura:registerEvent name="sampleComponentEvent" type="c:compEvent" />

Disparando um Component Event

Uma vez que o seu Lightning Event foi criado, o seu evento foi registrado, então chegou a hora de disparar esse evento, veja o exemplo abaixo de como disparar um evento, note que o parâmetro é opcional, e pode ter nenhum ou muitos, tudo vai depender da sua necessidade.

({
    disparaEvento: function(component, event, helper) {
        let compEvent = component.getEvent("sampleComponentEvent");
        
        //Se o seu evento espera um parâmetro, é aqui que você deve passar esses dados:
        compEvent.setParams({"message" : 'Aqui vai o seu parâmetro' });
        compEvent.fire();
    }
})

Handler de um Component Event

Um Handler é o responsável por escutar os eventos, para um evento de componente, você precisa especificar um name (deve ser o mesmo utilizado no momento de registro do evento), o event (que é o seu Lightning Event criado no passo anterior) é o action (método do Controller do seu Lightning Component que será executado ao receber o evento).

<aura:handler name="sampleComponentEvent" event="c:compEvent" action="{!c.handleComponentEvent}" />

Na nossa controller teremos algo como:

({
    handleComponentEvent : function(component, event, helper) {
        let message = event.getParam('message');
        component.set('v.message', message);
     }
})

Application Events

Já um Application Events (Eventos de aplicativo), pode ser emitido e escutado por todos os componentes de uma página, independente deles estarem na mesma estrutura hierárquica ou não, eu particularmente gosto mais do Application Events, por ser mais fácil de trabalhar/manipular, abaixo a estrutura de um evento de  aplicativo, note que o que difere um evento de aplicativo de um evento de componente é o type do evento, que pode ser “COMPONENT” ou “APPLICATION“:

<!--c:appEvent-->
<aura:event type="APPLICATION">
    <aura:attribute name="message" type="String" />
</aura:event>

Registrando um Application Event

Para que você possa disparar um evento de aplicativo, você precisa antes registrar essa intenção, assim como fizemos no evento de componente,  e para fazer isso, você deve inserir no seu componente o marcador abaixo, onde o name (é o nome único do evento que deseja disparar, esse nome é obrigatório, mas não é utilizado em nenhum outro local), e  type (refere-se ao seu Lightning Event criado anteriormente):

<aura:registerEvent name="appEvent" type="c:appEvent" />

Disparando um Application Event

Uma vez que o seu Lightning Event foi criado, o seu evento foi registrado, então chegou a hora de disparar esse evento, veja o exemplo abaixo de como disparar um application event, assim como no evento de componente, o de aplicativo também pode ter seus parâmetros opcionais, podendo ter nenhum ou muitos.

({
    disparaEvento: function(component, event, helper) {
        let appEvent = $A.get("e.c:appEvent");
        
        //Se o seu evento espera um parâmetro, é aqui que você deve passar esses dados:
        appEvent.setParams({"message" : 'Aqui vai o seu parâmetro' });
        appEvent.fire();
    }
})

Percebeu a mudança? No exemplo de componente, pegamos o a instância do evento em component, e agora pegamos ele direto do $A (Aura).

Handler de um Application Event

Para escutar um evento de aplicativo precisamos especificar apenas o nosso event e o action

<aura:handler event="c:appEvent" action="{!c.handleApplicationEvent}" />

E na nossa controller teremos algo como:

({
    handleApplicationEvent : function(component, event, helper) {
        let message = event.getParam('message');
        component.set('v.message', message);
     }
})

Mão na massa

Agora que temos todo o conceito de Lightning Event em mente, tanto para o Component Events e Application Events, vamos criar alguns componentes e ver na prática tudo isso em ação, sugiro que você realmente siga os passo a passo em uma ORG de Developer ou Playground do Trailhead, vamos lá?

PS: Nesse nosso passo a passo vou usar o Developer Console, pois acredito que todos os desenvolvedores devem conhecer ele, mas tudo isso poderia ser facilmente feito também no Visual Studio Code, se você ainda não migrou para ele, sugiro que dê uma lida no meu post anterior.

Para efeito didáticos, vamos criar um componente que terá um input, que ao digitar irá disparar um evento passando o texto digitado, dentro desse componente, terá um novo componente que irá receber esse texto e indicar a quantidade de caracteres digitados, claro que existem outras formas de fazer isso sem usar um evento, mas a ideia aqui é te expor ao uso do evento, e deixo a sua imaginação criar novos cenários de uso, se você já precisou criar mais do que um componentes do lightning, tenho certeza que não será difícil imaginar outros cenários de uso.

Criando o seu primeiro Component Events

O primeiro passo, é abrir o Console do Desenvolvedor, imaginando claro que você já esteja logado na sua ORG de Developer ou Playground do Trailhead, para isso devemos clicar na engrenagem no canto superior direito e em seguida escolher a opção Developer Console.

Na janela do Developer Console, navegue até o menu File -> New -> Lightning Event.

Em seguida insira o nome do seu evento, no nosso caso compEvent e clique no botão [Submit].

Em seguida altere o seu arquivo para ficar assim, e pressione Control + S para salvar (Command + S no macOs).

<aura:event type="COMPONENT">
    <aura:attribute name="message" type="String"/>
</aura:event>

 

Agora vamos criar um Lightning Component para fazer uso desse nosso evento, o primeiro componente será o input, responsável por obter o valor digitado, precisamos fazer ele primeiro, porque este componente será inserido dentro do próximo componente. para isso navegue novamente até o menu File -> New -> Lightning Component.

Insira o nome para o seu componente, no meu caso utilizei testandoCompEvent, mas vou deixar você usar a sua imaginação para escolher um nome melhor, e em Component Configuration, não precisa selecionar nenhuma opção, pois esse componente será inserido dentro do próximo componente.

Como eu disse anteriormente, vamos inserir nesse componente um input para que seja digitado um texto e ao digitar, ele irá disparar o nosso evento, então o componente ficará assim:

<aura:component>
    
    <!--Atributo que guardará o valor digitado-->
    <aura:attribute name="texto" type="String" />
    
    <!--Registro do evento -->
    <aura:registerEvent name="textoDigitado" type="c:compEvent" />  
    
    <!--Aqui um exemplo de escuta, estamos escutando quando o texto for alterado.
        Sim, poderíamos fazer isso de outra forma, mas resolvi fazer assim 
        para mostrar uma forma diferente de interagir com o dado -->
    <aura:handler name="change" value="{!v.texto}" action="{!c.textChange}" />
    
    <!--input que receberá o text-->
    <lightning:input label="Sua mensagem aqui" value="{!v.texto}" />
    
</aura:component>

E a nossa controller, teremos o método responsável por detectar que algo foi digitado e disparar nosso evento, nossa controller ficará assim:

({
    textChange : function(component, event, helper) {
        let texto = component.get('v.texto');
        
        let compEvent = component.getEvent('textoDigitado');
        compEvent.setParams({'message': texto});
        compEvent.fire();                    
    }
})

O próximo passo é criar o componente que irá contar os caracteres e contar também o nosso componente com o input, para isso vamos novamente no menu File -> New -> Lightning Component.

Insira o nome do componente, eu coloquei contadorCaracteres, em Componente Configuration, selecione Lightning Record Page e clique no botão [Submit], vale ressaltar que o Component Events funciona com qualquer tipo de componente do Lightning, estamos escolhendo um Lightning Record Page para conseguirmos testar de forma bem rápida, sem muitos passos.

Nosso componente ficará assim:

<aura:component implements="flexipage:availableForAllPageTypes" access="global">

    <!--Atributo que irá receber o total de caracteres e exibir na tela-->
    <aura:attribute name="caracteres" type="Integer" default="0"/>

    <!--Handler responsável por escutar o evento textoDigitado -->
    <aura:handler name="textoDigitado" event="c:compEvent" action="{!c.handleComponentEvent}"/>
    
	<div>
        <c:testandoCompEvent/>
        {!v.caracteres}
    </div>    
</aura:component>

E a controller do Lightning Component ficará assim:

({
    handleComponentEvent : function(component, event, helper) {
        //Obtém o valor do parâmetro enviado
        let message = event.getParam('message') || '';
        
        //Seta o total de caracteres
        component.set('v.caracteres', message.length);
    }
})

 

Com os nossos componentes prontos, agora basta colocar eles em uma página e ver como ficou, então volte ao Salesforce, navegue até uma página de registro (Conta, Lead, Contato) a de sua preferencia, eu escolhi Contato.

Selecione um contato, e em seguida vá até a engrenagem e selecione a opção Edit Page (Editar Página).

No menu lateral, encontre o nosso componente contadorCaracteres, clique e arraste para uma área da página.

Eu arrastei o meu para a 2 coluna, no canto superior.

Para testar, basta clicar no botão [Save] (Salvar) e em seguida no botão [Back] (Voltar).

Se tudo correu bem, este deve ter sido o seu resultado também.

 

Espero que você tenha conseguido os mesmos resultados e que tenha ficado claro o uso dos eventos, vou deixar como tarefa de casa para você a criação de um Application Event, depois me conta aqui nos comentários qual foi o resultado.

Por fim, se você quer ganhar uma Badge vou deixar aqui um módulo do trailhead que é voltado para a criação de um componente do Lightning, ele aborda muito do que foi dito aqui, mas não só de eventos, como também da criação de componentes, se você nunca criou um componente do Lightning, esse módulo lhe será útil.

Ops!

Eu acabei publicando o post antes de finalizar, e isso acabou disparando a notificações nos navegadores, minha sinceras desculpas :/, mas esta ai um belo exemplo de programação orientada a eventos, você  só recebe essa notificação no seu Browser ou Celular, porque aceitou receber, então seu Browser fica “escutando” por esse evento de novo post, e quando recebe esse evento, lhe mostra uma notificação.

 

Um forte abraço Trailblazers e até o próximo post :)