Criar os componentes

O exemplo de extensão de componentes usa o sistema de comentários, que na verdade é composto por dois componentes

  • Comentários - O sistema de comentários abrangente, que é o componente colocado em uma página.
  • Comentário - o componente que captura uma instância de um comentário publicado.

Ambos os componentes precisam ser implementados, especialmente se a aparência de um comentário publicado for personalizada.

OBSERVAÇÃO

Somente um sistema de comentários por página do site é permitido.

Muitos recursos de Comunidades já incluem um sistema de comentários cujo resourceType pode ser modificado para fazer referência ao sistema de comentários estendido.

Criar o componente Comentários

Essas instruções especificam um valor Group diferente de .hidden para que o componente possa ser disponibilizado no navegador de componentes (sidekick).

A exclusão do arquivo JSP criado automaticamente ocorre porque o arquivo HBS padrão será usado.

  1. Navegue até CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

  2. Crie um local para aplicativos personalizados:

    • Selecione o nó /apps

      • Criar pasta nomeada personalizada
    • Selecione o nó /apps/custom

      • Criar componentes nomeados pela pasta
  3. Selecione o nó /apps/custom/components

    • Criar > Componente…

      • Rótulo: comentários
      • Título: Comentários Alt
      • Descrição: Estilo de comentários alternativos
      • Supertipo: social/commons/components/hbs/comments
      • Grupo: Personalizado
    • Selecione Próximo

    • Selecione Próximo

    • Selecione Próximo

    • Selecione OK

  4. Expanda o nó recém-criado: /apps/custom/components/comments

  5. Selecione Salvar tudo

  6. Clique com o botão direito do mouse em comments.jsp

  7. Selecione Eliminar

  8. Selecione Salvar tudo

create-component

Criar o componente Comentário filho

Essas instruções definem Group como .hidden, pois somente o componente pai deve ser incluído em uma página.

A exclusão do arquivo JSP criado automaticamente ocorre porque o arquivo HBS padrão será usado.

  1. Navegue até o nó /apps/custom/components/comments

  2. Clique com o botão direito do mouse no nó

    • Selecione Criar > Componente…

      • Rótulo: comentário
      • Título: Comentário alternativo
      • Descrição: Estilo de comentário alternativo
      • Supertipo: social/commons/components/hbs/comments/comment
      • Grupo: *.hidden*
    • Selecione Próximo

    • Selecione Próximo

    • Selecione Próximo

    • Selecione OK

  3. Expanda o nó recém-criado: /apps/custom/components/comments/comment

  4. Selecione Salvar tudo

  5. Clique com o botão direito do mouse em comment.jsp

  6. Selecione Eliminar

  7. Selecione Salvar tudo

create-child-component

create-component-crxde

Copiar e modificar os scripts HBS padrão

Usando CRXDE Lite:

  • Copiar comments.hbs

  • Edite comments.hbs para:

    • Altere o valor do atributo data-scf-component (~linha 20):

      • De social/commons/components/hbs/comments
      • Para /apps/custom/components/comments
    • Modifique para incluir o componente de comentário personalizado (~linha 75):

      • Substituir {{include this resourceType='social/commons/components/hbs/comments/comment'}}
      • Com {{include this resourceType='/apps/custom/components/comments/comment'}}
  • Copiar comment.hbs

  • Edite comment.hbs para:

    • Alterar o valor do atributo data-scf-component (~ linha 19)

      • De social/commons/components/hbs/comments/comment
      • Para /apps/custom/components/comments/comment
  • Selecionar /apps/custom

  • Selecione Salvar tudo

Criar uma pasta da biblioteca do cliente

Para evitar a necessidade de incluir explicitamente essa biblioteca de cliente, o valor do categoria para a clientlib do sistema de comentários padrão poderia ser usado ( cq.social.author.hbs.comments), mas essa clientlib também seria incluída para todas as instâncias do componente padrão.

Usando CRXDE Lite:

  • Selecionar /apps/custom/components/comments

  • Selecione Criar Nó

    • Nome: clientlibs

    • Tipo: cq:ClientLibraryFolder

    • Adicione à guia Propriedades:

      • categories String NameTypeValue cq.social.author.hbs.comments Multi
      • dependencies String NameTypeValue cq.social.scf Multi
  • Selecione Salvar tudo

  • Com o nó /apps/custom/components/comments/clientlibs selecionado, crie 3 arquivos:

    • Nome: css.txt
    • Nome: js.txt
    • Nome: customcommentsystem.js
  • Digite 'customcommentsystem.js' como conteúdo de js.txt

  • Selecione Salvar tudo

comments-clientlibs

Registre o Modelo SCF e a Visualização

Ao estender (substituir) um componente SCF, o resourceType é diferente (a sobreposição usa o mecanismo de pesquisa relativo que pesquisa /apps antes de /libs para que o resourceType permaneça o mesmo). É por isso que é necessário gravar o JavaScript (na biblioteca do cliente) para registrar o modelo e a visualização do SCF JS para o resourceType personalizado.

Digite o seguinte texto como conteúdo de customcommentsystem.js:

customcommentsystem.js

(function($CQ, _, Backbone, SCF) {
    "use strict";

    var CustomComment = SCF.Components["social/commons/components/hbs/comments/comment"].Model;
    var CustomCommentView = SCF.Components["social/commons/components/hbs/comments/comment"].View;

    var CustomCommentSystem = SCF.Components["social/commons/components/hbs/comments"].Model;
    var CustomCommentSystemView = SCF.Components["social/commons/components/hbs/comments"].View;

    SCF.registerComponent('/apps/custom/components/comments/comment', CustomComment, CustomCommentView);
    SCF.registerComponent('/apps/custom/components/comments', CustomCommentSystem, CustomCommentSystemView);

})($CQ, _, Backbone, SCF);
  • Selecione Salvar tudo

Publicar o aplicativo

Para experimentar o componente estendido no ambiente de publicação, é necessário replicar o componente personalizado.

Uma maneira de fazer isso é:

  • Da navegação global,

    • Selecione Ferramentas > Implantação > Replicação
    • Selecione Ativar árvore
    • Defina Start Path como /apps/custom
    • Desmarque Somente Modificado
    • Botão Selecionar Ativar

Nesta página

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now