DocumentaçãoAEM 6.5Guia do Communities

Criar os componentes create-the-components

Last update: Thu Oct 19 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • User

O exemplo de extensão de componentes usa o sistema de comentários, que é 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 devem ser implementados, especialmente se você personalizar a aparência de um comentário publicado.

NOTE
Somente um sistema de comentários por página do site é permitido.
Muitos recursos das Comunidades já incluem um sistema de comentários cujo resourceType pode ser modificado para fazer referência ao sistema de comentários estendidos.

Criar o componente de Comentários create-the-comments-component

Estas direções especificam uma Grupo valor diferente de .hidden assim, o componente pode ser disponibilizado no navegador de componentes (sidekick).

A exclusão do arquivo JSP criado automaticamente ocorre porque o arquivo HBS padrão é usado em seu lugar.

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

  2. Criar um local para aplicativos personalizados:

    • Selecione o /apps nó

      • Criar pasta nomeado personalizado

    • Selecione o /apps/custom nó

      • Criar pasta nomeado componentes

  3. Selecione o /apps/custom/components nó

    • Criar > Componente…

      • Rótulo: comentários
      • Título: Comentários Alternativos
      • Descrição: Estilo alternativo de comentários
      • Super Type: social/commons/components/hbs/comments
      • Grupo: Personalizado

    • Selecione Próximo

    • Selecione Próximo

    • Selecione Próximo

    • Selecionar OK

  4. Expanda o nó que foi criado: /apps/custom/components/comments

  5. Selecionar Salvar tudo

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

  7. Selecione Excluir

  8. Selecionar Salvar tudo

create-component

Criar o componente de Comentário secundário create-the-child-comment-component

Essas direções definem Grupo para .hidden já que somente o componente principal deve ser incluído em uma página.

A exclusão do arquivo JSP criado automaticamente ocorre porque o arquivo HBS padrão é usado em seu lugar.

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

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

    • Selecionar Criar > Componente…

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

    • Selecione Próximo

    • Selecione Próximo

    • Selecione Próximo

    • Selecionar OK

  3. Expanda o nó que foi criado: /apps/custom/components/comments/comment

  4. Selecionar Salvar tudo

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

  6. Selecione Excluir

  7. Selecionar Salvar tudo

create-child-component

create-component-crxde

Copiar e modificar os scripts HBS padrão copy-and-modify-the-default-hbs-scripts

Usar CRXDE Lite:

  • Copiar comments.hbs

  • Editar comments.hbs para:

    • Altere o valor de data-scf-component atributo (~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

  • Editar 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 nó

  • Selecionar Salvar tudo

Criar uma pasta da biblioteca do cliente create-a-client-library-folder

Para evitar a necessidade de incluir essa biblioteca do cliente, o valor das categorias para a clientlib do sistema de comentários padrão pode ser usado ( cq.social.author.hbs.comments). No entanto, essa clientlib também teria que ser incluída para todas as instâncias do componente padrão.

Usar CRXDE Lite:

  • Selecionar /apps/custom/components/comments nó

  • Selecionar Criar nó

    • Nome: clientlibs

    • Tipo: cq:ClientLibraryFolder

    • Adicionar a Propriedades guia:

      • Nome categories Tipo String Valor cq.social.author.hbs.comments Multi
      • Nome dependencies Tipo String Valor cq.social.scf Multi

  • Selecionar Salvar tudo

  • Com /apps/custom/components/comments/clientlibComo nó selecionado, crie três arquivos:

    • Nome: css.txt
    • Nome: js.txt
    • Nome: customcommentsystem.js

  • Insira "customcommentsystem.js" como o conteúdo de js.txt

  • Selecionar Salvar tudo

comments-clientlibs

Registrar o modelo e a visualização do SCF register-the-scf-model-view

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

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

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);
  • Selecionar Salvar tudo

Publicar o aplicativo publish-the-app

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

Uma maneira de fazer isso é:

  • Na navegação global,

    • Selecionar Ferramentas > Implantação > Replicação
    • Selecionar Ativar árvore
    • Definir Start Path para /apps/custom
    • Desmarcar Somente modificados
    • Selecionar Ativar botão
recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791