Passo 8: Executar Ações

No fim deste tópico, poderá largar componentes na página que executa ações no seu componente. Desta forma, é aproveitado o registo da ação que criou no passos anterior.

Para um componente executar uma ação, este deve monitorizar a mensagem EXECUTE_ACTION. Esta mensagem também inclui o payload transmitido à ação a partir do qual irá extrair os valores esperados.

Para monitorizar a mensagem EXECUTE_ACTION, edite o ficheiro render.js e atualize o objeto SampleComponentViewModel com a seguinte entrada:

SitesSDK.subscribe('EXECUTE_ACTION', $.proxy(self.executeActionsListener, self));

Quando a mensagem EXECUTE_ACTION for recebida, a função de callback associada é executada:

    self.executeActionsListener = function (args) {
      // get action and payload
      var payload = args.payload,
      action = args.action;

      // handle 'setImageWidth' actions
      if (action && action.actionName === 'setImageWidth') {
        $.each(payload, function(index, data) {
          if (data.name === 'imageWidth') {
            self.imageWidth(data.value);
          }
        });
      }
    }

Isto cria uma função de JavaScript para executar a ação e, em seguida, utiliza o Sites SDK para chamar a função sempre que a mensagem EXECUTE_ACTION for gerada.

O componente será chamado sempre que for gerada uma mensagem EXECUTE_ACTION e cabe ao componente processar apenas as ações cujo processamento lhe diz respeito. Para isso, deve verificar o nome da ação de modo a garantir que é a que o componente pode processar.

O payload para a ação é uma matriz de valores. Normalmente, terá de encontrar os valores do payload que lhe interessam a partir da matriz.

Nota:

Como o listener da ação é uma callback, deve utilizar um JavaScript Closure ou associar de modo adequado a função para garantir que tem acesso ao seu viewModel quando a função for executada.

Verificar os Resultados para o Passo 8

  1. Renove a sua página no site para que o Criador de Sites possa escolher alterações para o componente.

  2. Apresente a página no modo de edição.

  3. Arraste e largue o seu componente na página.

  4. Arraste e largue um componente de Botão na página.

  5. Abra o painel Definições com o componente Botão.

  6. No separador Geral, altere o nome do botão para Clique aqui!

  7. Selecione o separador Ligação na parte superior do painel Definições.

  8. Selecione Ações do Trigger como o Tipo de Ligação.

  9. Clique no trigger Clicar no Botão no componente Botão.

  10. Na caixa de diálogo, expanda o componente A_Local_Component no lado esquerdo.

  11. Arraste e largue a ação Atualizar largura da imagem do componente A_Local_Component para o lado direito.

  12. Introduza 300 px no campo Largura da Imagem em Píxeis.

  13. Mude a página para o modo de pré-visualização.

  14. Clique no botão Clique aqui!.

Neste ponto, o tamanho da sua imagem aumentará para 300 px.

Nota:

Os triggers e as ações foram concebidos para suportar a comunicação intercomponentes. Não se destinam a criar ou gerir o estado. Se renovar a página, a página será revertida para o respetivo estado original como se não existissem triggers gerados ou ações executadas.

Avance para Passo 9: Criar um Título Distinto para Cada Instância do Componente.