O exemplo de extensão de componentes usa o sistema de comentários, que na verdade é composto por dois componentes
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.
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.
Navegue até CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
Crie um local para aplicativos personalizados:
Selecione o nó /apps
Selecione o nó /apps/custom
Selecione o nó /apps/custom/components
Criar > Componente…
Selecione Próximo
Selecione Próximo
Selecione Próximo
Selecione OK
Expanda o nó recém-criado: /apps/custom/components/comments
Selecione Salvar tudo
Clique com o botão direito do mouse em comments.jsp
Selecione Eliminar
Selecione Salvar tudo
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.
Navegue até o nó /apps/custom/components/comments
Clique com o botão direito do mouse no nó
Selecione Criar > Componente…
*.hidden*
Selecione Próximo
Selecione Próximo
Selecione Próximo
Selecione OK
Expanda o nó recém-criado: /apps/custom/components/comments/comment
Selecione Salvar tudo
Clique com o botão direito do mouse em comment.jsp
Selecione Eliminar
Selecione Salvar tudo
Usando CRXDE Lite:
Copiar comments.hbs
Edite comments.hbs
para:
Altere o valor do atributo data-scf-component
(~linha 20):
social/commons/components/hbs/comments
/apps/custom/components/comments
Modifique para incluir o componente de comentário personalizado (~linha 75):
{{include this resourceType='social/commons/components/hbs/comments/comment'}}
{{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)
social/commons/components/hbs/comments/comment
/apps/custom/components/comments/comment
Selecionar /apps/custom
nó
Selecione Salvar tudo
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
nó
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/clientlib
s selecionado, crie 3 arquivos:
css.txt
js.txt
Digite 'customcommentsystem.js' como conteúdo de js.txt
Selecione Salvar tudo
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
:
(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);
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,
Start Path
como /apps/custom