Trabalhando com Eventos

O Add-on SDK suporta programação dirigida a evento.

Objetos emitem eventos sobre mudança de estados que devem ser interessantes ao código do add-on, tais como abertura de janelas, carregamento de páginas, requisições de rede completas, e cliques de mouse. Pelo registro de uma função de escuta para um emissor de evento um add-on pode receber notificações destes eventos.

Nós falamos sobre scripts de conteúdo em mais detalhes no guia Working with Content Scripts.

Adicionalmente, se você está usando scripts de conteúdo para interagir com o conteúdo web, você pode definir seus próprios eventos e usá-los para comunicar entre o código principal do add-on e os scripts de conteúdo. Neste caso, uma extremidade da conversa emite os eventos, e a outra extremidade ouve.

Portanto, há dois modos principais que você interagirá com o framework emissor de eventos:

• escutando eventos embutidos emitidos pelos objetos no SDK, tais como abertura de tab, carregamento de páginas, cliques de mouse

• enviando e recebendo eventos definidos pelos usuários entre scripts de conteúdo e o código do add-on

Este guia cobre somente o primeiro destes; o segundo é explicado no guia Working with Content Scripts.

Adicionando Escutadores

Você pode adicionar um escutador para um emissor de evento pela chamada ao seu método on(type, listener).

Ele leva dois parâmetros:

• type: o tipo de evento que nós estamos interessado, identificado por uma string. Muitos emissores de evento devem emitir mais do que um tipo de evento: por exemplo, a janela do navegador deve emitir ambos os eventos open e close. A lista de tipos de eventos válidos é específica a cada emissor de evento e é incluída em sua documentação.

• listener: o escutador em si. Esta é uma função que será chamada sempre que o evento ocorrer. O argumento que será passado para o escutador é específico a um tipo de evento e é documentado com o emissor de evento.

Por exemplo, o seguinte add-on registra uma escuta com o módulo tabs para esperar pelo evento ready, e registra uma string no console reportando o evento:

var tabs = require("sdk/tabs");

tabs.on("ready", function () {
  console.log("tab loaded");
});

Não é possível enumerar o conjunto de escutas para um dado evento.

O valor de this na função de escuta é o objeto que emitiu o evento.

Escutando Todos os Eventos

Você pode passar o curinga "*" como o argumento type. Se você fizer isso, a escuta será chamada para qualquer evento emitido por qualquer objeto, e seu argumento será o nome do evento:

var ui = require("sdk/ui");
var panels = require("sdk/panel");
var self = require("sdk/self");

var panel = panels.Panel({
  contentURL: self.data.url("panel.html")
});

panel.on("*", function(e) {
  console.log("event " + e + " was emitted");
});

var button = ui.ActionButton({
  id: "my-button",
  label: "my button",
  icon: "./icon-16.png",
  onClick: handleClick
});

function handleClick(state) {
  panel.show({
    position: button
  });
}

Esta característica do curinga não funciona ainda nos módulos tabs ou window.

Adicionando escutas em construtores

Emissores de evento podem ser módulos como no caso do evento ready acima, ou eles podem ser objetos retornados pelos construtores.

No último caso o objeto options passado para o construtor tipicamente define propriedades cujos nomes são nomes de tipos de eventos suportados prefixados com "on": por exemplo, "onOpen", "onReady" e assim por diante. Então o construtor pode atribuir uma função de escuta para aquela propriedade como uma alternativa a chamada do método do objeto on().

Por exemplo: o objeto ActionButton emite um evento quando o botão é clicado.

O add-on a seguir cria um botão e atribui uma escuta para a propriedade onClick do objeto fornecida no options do construtor do objeto botão. A escuta carrega https://developer.mozilla.org/:

require("sdk/ui/button/action").ActionButton({
  id: "visit-mozilla",
  label: "Visit Mozilla",
  icon: "./icon-16.png",
  onClick: function() {
    require("sdk/tabs").open("https://developer.mozilla.org/");
  }
});

Isto é exatamente equivalente a construir o botão e então chamar o método on() do botão

var button = require("sdk/ui/button/action").ActionButton({
  id: "visit-mozilla",
  label: "Visit Mozilla",
  icon: "./icon-16.png"
});

button.on("click", function() {
  require("sdk/tabs").open("https://developer.mozilla.org/");
});

Removendo Escutas de Evento

Escutas de evento pode ser removidos pela chamada de removeListener(type, listener), fornecendo o tipo do evento e escuta a remover.

A escuta deve ter sido previamente adicionada usando um dos métodos descritos acima.

No add-on a seguir, nós adicionamos duas escutas para o evento ready do módulo tab. Uma das funções de manipulação remove a escuta.

Então nós abrimos duas abas.

var tabs = require("sdk/tabs");

function listener1() {
  console.log("Listener 1");
  tabs.removeListener("ready", listener1);
}

function listener2() {
  console.log("Listener 2");
}

tabs.on("ready", listener1);
tabs.on("ready", listener2);

tabs.open("https://www.mozilla.org");
tabs.open("https://www.mozilla.org");

Nós devemos ver a saída como esta:

info: tabevents: Listener 1
info: tabevents: Listener 2
info: tabevents: Listener 2

As escutas serão removidas automaticamente quando o add-on for descarregado.