Passo 2: Rever a Estrutura da Apresentação do Componente Local

Neste passo, revemos a estrutura dos ficheiros por omissão criados para um componente local.

Para um exemplo simples de Hello World, quatro objetos JavaScript e o número de linhas de código poderão parecer demasiado, mas destina-se a fornecer-lhe a base para criar componentes mais complexos, bem como processar interações com o ciclo de vida da página do Oracle Cloud Sites Service.

Para rever a estrutura do seu componente local:

1. Na página principal do Oracle Content Management, clique em Programador.

   É apresentada a página Programador.

2. Clique em Visualizar todos os Componentes.

3. No menu, escolha Criar Componente Local.

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

5. Introduza uma descrição opcional.

6. Clique em Criar.

   Depois de efetuar este procedimento, verá um componente denominado A_Local_Component na sua lista de componentes.

1. Utilizando o cliente de sincronização de ambiente de trabalho do Oracle Content Management, localize o seu componente e sincronize-o com o sistema de ficheiros.

   Se não tiver o cliente de ambiente de trabalho, pode visualizar todos os componentes e selecionar o componente na página Componentes da interface do Oracle Content Management e definir o nível de detalhe para ver os ficheiros.

2. Se listar os ficheiros no componente, poderá ver estes ficheiros:

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

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

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

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

   • Inclui também referências a KnockoutJS e JQuery que já estão carregadas como parte da página do Oracle Content Management.

Considere a estrutura do ficheiro render.js.

No conteúdo do ficheiro render.js, existem dois objetos JavaScript que implementam as APIs de componente do Oracle Content Management necessárias: sampleComponentFactory e SampleComponentImpl. Estes objetos são um exemplo de uma implementação para criar quaisquer componentes baseados em KnockoutJS. A implementação destes objetos será alterada com base na tecnologia que utiliza.

• sampleComponentFactory

  • Este objeto é devolvido pelo módulo AMD render.js.

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

  • As implementações mais complexas poderão utilizar o valor args transmitido para devolver implementações diferentes do componente com base no parâmetro viewMode. Desta forma, pode ter uma implementação de largura significativamente mais leve do componente para runtime versus Criador de Sites.

• SampleComponentImpl

  • A função principal deste objeto é a função render, que é utilizada para apresentar o componente na página.

    Para apresentar o componente Knockout na página, a função render acrescenta de forma dinâmica o modelo à página, em seguida, aplica as associações viewModel ao modelo.

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

Os últimos dois objetos no ficheiro render.js, sampleComponentTemplate e SampleComponentViewModel, fornecem uma implementação customizada para o componente. A implementação destes será diferente com base nos seus requisitos.

• sampleComponentTemplate

  • Este objeto fornece a criação de modelos KnockoutJS. Aguarda até o componente ter todos os dados inicializados antes de tentar apresentar qualquer objeto.

• SampleComponentViewModel

  • O viewModel obtém as informações armazenadas pelo Oracle Content Management em nome do componente e, em seguida, seleciona o modo de disposição correta para o componente com base nesses dados

  • Elementos observáveis gerais Knockout utilizados pelo modelo para processar 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 entre triggers e ações:

    Trigger: Uma função para gerar um trigger do Oracle Content Management a partir do componente que pode ser associado 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 processar o callback para quando o componente deve 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 quaisquer ações registadas a pedido.

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

  • Subscrições no ciclo de vida do componente:

    • Inicialização do componente: Certifique-se de que o componente não é apresentado até todos os dados serem extraídos. Este procedimento é efetuado com elementos observáveis Knockout.

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

      Obtenha os valores iniciais para quaisquer propriedades necessárias. Este procedimento é efetuado com callbacks para obter os dados.

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

    • Atualizações de metadados: Callback sempre que os metadados do componente armazenados em nome do componente são alterados; por exemplo, quando o utilizador invoca o painel Definições e atualiza os dados.

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