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 Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free