Show Menu
TÓPICOS×

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.
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 de Grupo diferente .hidden para que o componente possa ser disponibilizado pelo 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 /apps
      • Criar pasta chamada personalizada
    • Selecione o /apps/custom
      • Criar pasta nomeada componentes
  3. Selecione o /apps/custom/components
    • Criar > Componente...
      • Rótulo : comentários
      • Título : Comentários Alt
      • Descrição : Estilo de comentários alternativos
      • Supertipo : social/comum/componentes/hbs/comments
      • Grupo : Personalizado
    • Selecione Próximo
    • Selecione Próximo
    • Selecione Próximo
    • Selecionar 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. Selecionar Excluir
  8. Selecione Salvar tudo

Criar o componente Comentário filho

Essas instruções definem o Grupo como somente .hidden 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 /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/comum/componentes/hbs/comments/comment
      • Grupo : *.hidden*
    • Selecione Próximo
    • Selecione Próximo
    • Selecione Próximo
    • Selecionar 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. Selecionar Excluir
  7. Selecione Salvar tudo

Copiar e modificar os scripts HBS padrão

Usando o CRXDE Lite :
  • Copiar comments.hbs
  • Editar comments.hbs para:
    • Altere o valor do 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
  • Selecione Salvar tudo

Criar uma pasta da biblioteca do cliente

Para evitar ter que incluir explicitamente essa biblioteca de cliente, o valor das categorias 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 o CRXDE Lite :
  • Selecionar /apps/custom/components/comments
  • Selecionar nó Criar
    • Nome : clientlibs
    • Tipo : cq:ClientLibraryFolder
    • Adicionar à guia Propriedades :
      • Nome categories Tipo String Valor cq.social.author.hbs.comments``Multi
      • Nome dependencies Tipo String Valor cq.social.scf``Multi
  • Selecione Salvar tudo
  • Com o nó /apps/custom/components/comments/clientlib s 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

Registrar o modelo e a exibição do quadro

Ao estender (substituir) um componente SCF, o resourceType é diferente (a sobreposição usa o mecanismo de pesquisa relativo que pesquisa /apps antes /libs para que o resourceType permaneça o mesmo). É por isso que é necessário gravar JavaScript (na biblioteca do cliente) para registrar o modelo JS SCF e exibir o resourceType personalizado.
Digite o seguinte texto como conteúdo do 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 o fazer é
  • Da navegação global
    • Selecione Ferramentas > Implantação > Replicação
    • Selecionar Activate Tree
    • Definir Start Path : to /apps/custom
    • Desmarcar Only Modified
    • Selecionar Activate botão