Etapa 11: Suportar Diferentes Layouts

Nesta etapa, revisaremos os layouts que permitem ao usuário alterar o modo como o componente é exibido.

Um componente personalizado pode suportar qualquer número de layouts que você queira permitir que o usuário escolha. Cada layout mudará a forma como o componente personalizado é exibido. Os layouts são outra extensão aos dados de registro.

Para rever os três layouts suportados no código de amostra, verifique a entrada "componentLayouts" no arquivo appinfo.json

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

Se você abrir o painel Definições pelo componente personalizado, verá uma opção para alternar entre os layouts. Para permitir que seu componente reaja à alteração na seleção, o arquivo render.js tem o código para obter o valor selecionado no momento e fazer listening das alterações nesse valor.

Edite o arquivo render.js e examine o objeto SampleComponentViewModel.

• Há um elemento observável layout, que é referenciado no modelo:

  self.layout = ko.observable();

• Há uma função de atualização para tratar as mudanças desse valor sempre que elas ocorrerem:

      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 do layout e chama a função de atualização:

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

  O listener de alteração de propriedade verifica se há alterações nessa 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));

  Finalmente, o objeto de modelo sampleComponentTemplate tem o código para refletir as alterações nesse valor:

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

Juntas, essas alterações permitem que você selecione seu layout no painel Definições e tenha a atualização do componente.