Etapa 3: Verificar a Estrutura das Definições de Componente Local

Nesta etapa, revisaremos a estrutura das definições especificadas para um componente local.

Semelhante ao arquivo render.js no diretório /assets, há um arquivo settings.html pré-criado no mesmo diretório. O arquivo settings.html renderiza quaisquer dados de definições personalizadas para seu componente. Na implementação padrão, há uma única propriedade imageWidth nos dados de definições personalizadas.

Para conferir a estrutura do seu componente local:

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 sincronização de desktop, poderá selecionar o componente na guia Componentes da interface web 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

Abra o arquivo settings.html no diretório /assets e revise o conteúdo. Ao contrário do arquivo render.js, o arquivo settings.html usa um iframe no painel Definições do Site Builder, que é o motivo pelo qual ele também precisa de acesso aos arquivos de suporte para uma renderização correta no iframe. O Site Builder é necessário para gerenciar seu site para que quaisquer erros em seu código JavaScript possam ser isolados do Site Builder, que é o motivo pelo qual o arquivo settings.html usa um iframe.

Estas são as principais áreas do arquivo settings.html:

• Modelo do Knockout para renderizar o painel Definições.

  <!-- ko if: initialized() -->
  <div class="scs-component-settings">
    <div>
      <!-- Width -->
      <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
      <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
    </div>
  </div>
  <div data-bind="setSettingsHeight: true"></div>
  <!-- /ko -->

• Handler de Binding Personalizado para ajustar a altura do iframe uma vez renderizado o painel Definições.

  ko.bindingHandlers.scsCompComponentImpl

• Um ViewModel do Knockout a ser aplicado ao Modelo do Knockout.

  SettingsViewModel

Estes são os principais elementos do SettingsViewModel:

• Assinaturas do ciclo de vida do componente.

• Inicializaçã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.initialized = ko.observable(false);

  • Certifique-se de que não tentemos atualizar os dados até que estejamos prontos.

    self.saveData = false;

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

        SitesSDK.getProperty('customSettingsData', function (data) {
          //update observable
          self.width(data.width);
    
          // note that viewModel is initialized and can start saving data
          self.initialized(true);
          self.saveData = true;
        });

• Salve qualquer alteração de propriedade nos dados de definições personalizadas.

      self.save = ko.computed(function () {
        var saveconfig = {
          'width': isNaN(self.width()) ? self.width() : self.width() + 'px'
        };
  
        // save data in page
        if (self.saveData) {
          SitesSDK.setProperty('customSettingsData', saveconfig);
        }
      }, self);

Para adicionar outra propriedade que você queira capturar, diversas etapas são necessárias:

1. Atualize a interface do usuário para exibir o novo valor.

2. Inicialize o valor para o valor atual armazenado junto ao componente.

3. Salve de volta no componente quaisquer alterações no valor.

Para adicionar outra propriedade ao seu componente personalizado, faça estas alterações no arquivo settings.html:

1. Adicione outro elemento observável para tratar a nova propriedade. Altere este código:

   self.width = ko.observable();

   Em seu lugar, use este código:

   self.width = ko.observable();
   self.imageBannerText = ko.observable();

2. Obtenha qualquer valor atual da nova propriedade quando o painel de definições for exibido pela primeira vez. Altere este código:

   self.width(data.width);

   Em seu lugar, use este código:

   self.width(data.width);
   self.imageBannerText(data.imageBannerText);

3. Salve qualquer alteração nessa nova propriedade. Altere este código:

       'width': isNaN(self.width()) ? self.width() : self.width() + 'px'

   Em seu lugar, use este código:

   'width': isNaN(self.width()) ? self.width() : self.width() + 'px',
   'imageBannerText': self.imageBannerText()

4. Adicione uma interface do usuário para exibir o novo campo. Altere este código:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">

   Em seu lugar, use este código:

   <label id="widthLabel" for="width" class="settings-heading" data-bind="text: 'Image Width'"></label>
   <input id="width" data-bind="value: width" placeholder="example: 200px or 33%" class="settings-text-box">
   
   <label id="imageBannerTextLabel" for="imageBannerText" class="settings-heading" data-bind="text: 'Image Banner'"></label>
   <input id="imageBannerText" data-bind="value: imageBannerText" placeholder="Text to display above an image" class="settings-text-box">

5. Sincronize ou faça upload do arquivo settings.html.

Se você fosse executar isso agora, o campo seria exibido. No entanto, o tamanho do painel Definições não é alterado automaticamente. Como você aumentou o tamanho do painel, também deverá atualizar a entrada de registro components.json para o novo tamanho.

1. Faça download do arquivo appinfo.json, que está no mesmo nível do diretório assets/ para seu componente, e atualize o tamanho do painel de definições. Altere este código:

   "settingsHeight": 90,

   Em seu lugar, use este código:

   "settingsHeight": 160,

2. Sincronize ou faça upload do arquivo appinfo.json.