Etapa 2: Verificar a Estrutura da Renderização de Componente Local

Nesta etapa, vamos verificar a estrutura dos arquivos padrão criados para um componente local.

Para um exemplo simples Hello World, quatro objetos JavaScript e várias linhas de código podem parecer muito, mas isso é para dar a você a base para construir componentes mais complexos e tratar a interação com o ciclo de vida da página do Oracle Cloud Sites Service.

Para conferir a estrutura do seu componente local:

1. Na home page do Oracle Content Management, clique em Desenvolvedor.

   A página Desenvolvedor é exibida.

2. Clique em Exibir todos os Componentes.

3. No menu, escolha Criar Componente Local.

4. Digite um nome para o componente, por exemplo, A_Local_Component.

5. Informe uma descrição opcional.

6. Clique em Criar.

   Depois de ter feito isso, você verá um componente chamado A_Local_Component em sua lista de componentes.

1. Usando o cliente de sincronização de desktop do Oracle Content Management, localize seu componente e sincronize-o com o sistema de arquivos.

   Se você não tiver o cliente de desktop, poderá exibir todos os componentes e selecionar o componente na página Componentes da interface do Oracle Content Management e fazer drill-down para ver os arquivos.

2. Se você listar os arquivos no componente, verá estes arquivos:

   assets
       render.js
       settings.html
   appinfo.json
   _folder_icon.jpg

3. Abra o arquivo render.js no diretório /assets.

   Os pontos principais do arquivo render.js são:

   • É estruturado como módulo AMD JavaScript para que possa ser “obrigatório” na página.

   • Ele também inclui referências a KnockoutJS e JQuery que já são carregados como parte da página do Oracle Content Management.

Considere a estrutura do arquivo render.js.

No conteúdo do arquivo render.js, há dois objetos JavaScript que implementam as APIs de componente obrigatório do Oracle Content Management: sampleComponentFactory e SampleComponentImpl. Esses objetos são um exemplo de implementação para criar qualquer componente baseado em KnockoutJS. A implementação desses objetos mudará com base na tecnologia que você utilizar.

• sampleComponentFactory

  • Esse objeto é retornado pelo módulo AMD render.js.

  • Esse é um objeto Factory muito simples que implementa a interface única createComponent().

  • As implementações mais complexas podem usar o valor args informado para retornar outras implementações do componente com base no parâmetro viewMode. Isso permite que você tenha uma implementação significativamente mais leve do componente no runtime em relação ao Site Builder.

• SampleComponentImpl

  • A função principal desse objeto é render, que é usada para renderizar o componente na página.

    Para renderizar o componente Knockout na página, a função render adiciona dinamicamente o modelo à página e, em seguida, aplica os bindings viewModel ao modelo.

  • O restante da implementação lida com a inicialização do parâmetro viewModel e o modelo, além do tratamento das mensagens entre a página e o componente.

Os dois últimos objetos no arquivo render.js, sampleComponentTemplate e SampleComponentViewModel, fornecem uma implementação personalizada do componente. A implementação deles vai diferir com base nos requisitos.

• sampleComponentTemplate

  • Esse objeto fornece a criação do modelo KnockoutJS. Ele aguarda até que o componente tenha todos os dados inicializados antes de tentar exibir qualquer coisa.

• SampleComponentViewModel

  • O objeto viewModel recupera as informações armazenadas pelo Oracle Content Management em nome do componente e, em seguida, seleciona como criar o layout apropriado do componente com base nesses dados.

  • Elementos observáveis gerais do Knockout usados pelo modelo para tratar o acesso aos metadados armazenados em nome do componente:

    self.imageWidth = ko.observable('200px');
    self.alignImage = ko.observable();
    self.layout = ko.observable();
    self.showTopLayout = ko.observable();
    self.showStoryLayout = ko.observable();

  • Integração de triggers e ações:

    Trigger: Uma função para acionar um trigger do Oracle Content Management do componente, que pode estar vinculado a ações de outros componentes na página.

        self.imageClicked = function (data, event) {
          self.raiseTrigger("imageClicked"); // matches appinfo.json
        };

    Ação: Uma função para tratar o callback quando o componente tiver de executar uma ação com um determinado payload.

        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);
              }
            });
          }
        };

    Callback para executar qualquer ação registrada sob demanda.

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

  • Assinaturas do ciclo de vida do componente:

    • Utilização do componente: Certifique-se de que o componente não seja renderizado até que todos os dados tenham sido extraídos. Isso é tratado pelos elementos observáveis do Knockout.

      self.componentLayoutInitialized = ko.observable(false);
      self.customSettingsDataInitialized = ko.observable(false);

      Obtenha os valores iniciais de qualquer propriedade obrigatória. Isso é tratado por callbacks para recuperar os dados.

      SitesSDK.getProperty('componentLayout', self.updateComponentLayout);
      SitesSDK.getProperty('customSettingsData', self.updateCustomSettingsData);

    • Atualizações de metadados: Faça callback sempre que os metadados do componente armazenados em nome do componente forem alterados; por exemplo, quando o usuário chama o painel Definições e atualiza os dados.

      SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, 
      $.proxy(self.updateSettings, self));