Passo 3: Rever a Estrutura das Definições do Componente Local

Neste passo, revemos a estrutura das definições especificadas para um componente local.

Semelhante ao ficheiro render.js no diretório /assets, este um ficheiro settings.html pré-criado no mesmo diretório. O ficheiro settings.html apresenta quaisquer dados de definições customizadas para o seu componente. Na implementação por omissão, existe uma propriedade única imageWidth nos dados de definições customizadas.

Para rever a estrutura do seu componente local:

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 sincronização do ambiente de trabalho, pode selecionar o componente no separador Componentes da interface web do Oracle Content Management e definir o nível de detalhe inferior para ver os ficheiros.

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

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

Abra o ficheiro settings.html no diretório /assets e reveja o conteúdo. Ao contrário do ficheiro render.js, o ficheiro settings.html utiliza uma moldura inline no painel Definições no Criador de Sites, que é a razão pela qual também precisa de aceder aos ficheiro suportados para uma apresentação correta na moldura inline. O Criador de Sites é necessário para gerir o seu site pelo que todos os erros no seu código JavaScript podem ser isolados do Criador de Sites, que é a razão pela qual o ficheiro settings.html utiliza uma moldura inline.

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

• Modelo Knockout para apresentar 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 -->

• Rotina de Tratamento de Associação Customizada para ajustar a altura da moldura inline depois de apresentado o painel Definições.

  ko.bindingHandlers.scsCompComponentImpl

• Um ViewModel Knockout a aplicar ao Modelo Knockout.

  SettingsViewModel

Estes são os elementos principais do SettingsViewModel:

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

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

    self.saveData = false;

  • Obtenha os valores iniciais para quaisquer propriedades necessárias. Este procedimento é efetuado com callbacks para obter 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;
        });

• Grave quaisquer alterações de propriedade nos dados de definições customizadas.

      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 acrescentar outra propriedade que pretenda capturar, são necessários vários passos:

1. Atualize a interface do utilizador para apresentar o novo valor.

2. Inicialize o valor no valor atual armazenado no componente.

3. Grave quaisquer alterações no valor anterior ao componente.

Para acrescentar outra propriedade ao seu componente customizado, efetue estas alterações ao ficheiro settings.html:

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

   self.width = ko.observable();

   Utilize este código como alternativa:

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

2. Obtenha qualquer valor atual para a nova propriedade quando o painel de definições for primeiro apresentado. Altere este código:

   self.width(data.width);

   Utilize este código como alternativa:

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

3. Grave quaisquer alterações a esta nova propriedade. Altere este código:

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

   Utilize este código como alternativa:

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

4. Acrescente uma interface do utilizador para apresentar 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">

   Utilize este código como alternativa:

   <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 carregue o ficheiro settings.html.

Se tiver de executar agora, o campo será apresentado. No entanto, o tamanho do painel Definições não é alterado automaticamente. Uma vez que aumentou o tamanho do painel, também deve atualizar a entrada de registo components.json para o novo tamanho.

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

   "settingsHeight": 90,

   Utilize este código como alternativa:

   "settingsHeight": 160,

2. Sincronize ou carregue o ficheiro appinfo.json.