Passo 11: Suportar Disposições Diferentes

Neste passo, iremos rever as disposições que permitem ao utilizador alterar a forma como o componente é apresentado.

Um componente customizado pode suportar qualquer número de disposições que o utilizador poderá escolher. Cada uma destas disposições irá alterar a forma como o componente customizado é apresentado. As disposições são outra extensão dos dados de registo.

Para rever as três camadas suportadas no código de exemplo, reveja a entrada "componentLayouts" no ficheiro appinfo.json

    "componentLayouts": [
      {
        "name": "default",
        "displayName": "IMAGE_LEFT_LAYOUT"
      },
      {
        "name": "right",
        "displayName": "IMAGE_RIGHT_LAYOUT"
      },
      {
        "name": "top",
        "displayName": "IMAGE_TOP_LAYOUT"
      }
    ],

Se abrir o painel Definições com o componente customizado, verá uma opção para alternar entre disposições. Para permitir que o seu componente reaja à alteração na seleção, o ficheiro render.js tem o código para obter o valor atualmente selecionado r monitorizar as alterações a este valor.

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

• Existe um elemento observável layout, que é referido no modelo:

  self.layout = ko.observable();

• Existe uma função de atualização para utilizar sempre que existirem alterações a este valor:

      self.updateComponentLayout = $.proxy(function (componentLayout) {
        var layout = componentLayout ? componentLayout : 'default';
        self.layout(layout);
        self.alignImage(layout === 'right' ? 'right' : 'left');
        self.showTopLayout(layout === 'top');
        self.showStoryLayout(layout === 'default' || layout === 'right');
  
        self.componentLayoutInitialized(true);
      }, self);

• O código de inicialização obtém o valor original para a disposição e chama a função de atualização:

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

  O listener da alteração de propriedade verifica se existem alterações a esta propriedade e chama a função de atualização:

  self.updateSettings = function (settings) {
    if (settings.property === 'componentLayout') {
      self.updateComponentLayout(settings.value);
    } else if (settings.property === 'customSettingsData') {
      self.updateCustomSettingsData(settings.value);
    }
  };
  
  SitesSDK.subscribe(SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(self.updateSettings, self));

  Por fim, o objeto de modelo sampleComponentTemplate tem o código para refletir as alterações neste valor:

  '<!-- ko if: alignImage() === \'right\' -->' +

Estas alterações em conjunto permitem-lhe selecionar a sua disposição do painel Definições e ter a atualização do componente.