Passo 6: Gerar Triggers

Neste passo, iremos mostrar como é gerado o trigger que viu como registado.

Os triggers podem ser gerados em qualquer altura por um componente. Normalmente, é gerado por uma interação do utilizador, como clicar num botão ou selecionar uma linha numa tabela. No entanto, um componente pode gerar o trigger com base em qualquer critério como, por exemplo, quando os dados são alterados devido a uma chamada REST.

Para este exemplo, quando clicar na imagem, será criado um trigger que é transmitido pelo valor atual da propriedade whoAreYou.

Reveja o ficheiro render.js e consulte o objeto SampleComponentViewModel.

Para gerar um trigger:

1. Reveja a função no objeto SampleComponentViewModel que chama o Sites SDK para a criação do trigger.

   self.raiseTrigger = function (triggerName) {
     SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
       'triggerName': triggerName, 
       'triggerPayload': { 
           'payloadData': 'some data here'
       }
     });
   };

2. Agora irá precisar de algo na interface do utilizador para chamar a função para gerar o trigger. Reveja o ficheiro render.js e atualize o objeto sampleComponentTemplate para ter esta entrada:

        '<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +

No objeto SampleComponentViewModel, existe a função de JavaScript que é chamada quando se clica na imagem. Esta função chama o Sites SDK indicando-lhe que deve desencadear todas as ações definidas para o trigger "imageClicked", que é o valor transmitido da associação click no passo 2. É transmitido também através de um triggerPayload que tem um único campo:payloadData e é transmitido através de um valor estático 'some data here'. Estes valores imageClicked e whoAreYou correspondem aos existentes no ficheiro appinfo.json onde o trigger está registado (no passo anterior).

No código de exemplo, o trigger é gerado por uma associação de dados da associação click e é transmitido no trigger denominado imageClicked. Existem atualmente três apresentações do componente <scs-image> baseado na disposição escolhida pelo utilizador. Para garantir que o trigger é gerado para cada uma das disposições, edite o ficheiro render.js para efetuar as alterações seguintes.

• Gere triggers a partir de disposições diferentes. Encontre as suas entradas deste código:

  '<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}">' +

  Altere o código para o seguinte:

  '<div data-bind="attr: {style: imageStyle, \'data-layout\': alignImage()}, click: imageClicked">' +

• Especifique o payload para ser transmitido aos triggers. Altere este código:

      self.raiseTrigger = function (triggerName) {
        SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
          'triggerName': triggerName,
          'triggerPayload': {
            'payloadData': 'some data here'
          }
        });
      };

  Utilize este código como alternativa:

      self.raiseTrigger = function (triggerName) {
        SitesSDK.publish(SitesSDK.MESSAGE_TYPES.TRIGGER_ACTIONS, {
          'triggerName': triggerName,
          'triggerPayload': {
            'payloadData': self.imageBannerText() // pass banner text as payload
          }
        });
      };

• Sincronize ou carregue o ficheiro render.js para o servidor da instância do Oracle Content Management.

Agora que já reviu o código necessário, pode ligar o trigger para que o seu componente customizado o gere quando clicar no botão.