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
Renove a sua página no site para que o Criador de Sites possa escolher alterações para o componente.
Apresente a página no modo de edição.
Arraste e largue o seu componente na página.
Arraste e largue um componente de Botão na página.
Abra o painel Definições com o componente Botão.
No separador Geral, altere o nome do botão para Clique aqui!
Selecione o separador Ligação na parte superior do painel Definições.
Selecione Ações do Trigger como o Tipo de Ligação.
Clique no trigger Clicar no Botão no componente Botão.
Na caixa de diálogo, expanda o componente A_Local_Component
no lado esquerdo.
Arraste e largue a ação Atualizar largura da imagem do componente A_Local_Component
para o lado direito.
Introduza 300 px no campo Largura da Imagem em Píxeis.
Mude a página para o modo de pré-visualização.
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.