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 personalizar a aparência de um comentário publicado.
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 estendido.
Essas instruções especificam um 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 será usado.
Navegue até CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
Crie um local para aplicativos personalizados:
Selecione o /apps
nó
Selecione o /apps/custom
nó
Selecione o /apps/custom/components
nó
Criar > Componente…
Selecione Próximo
Selecione Próximo
Selecione Próximo
Selecionar OK
Expanda o nó recém-criado: /apps/custom/components/comments
Selecionar Salvar tudo
Clique com o botão direito do mouse comments.jsp
Selecione Excluir
Selecionar Salvar tudo
Estas instruções foram definidas Grupo para .hidden
como 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 será usado.
Navegue até o /apps/custom/components/comments
nó
Clique com o botão direito do mouse no nó
Selecionar Criar > Componente…
*.hidden*
Selecione Próximo
Selecione Próximo
Selecione Próximo
Selecionar OK
Expanda o nó recém-criado: /apps/custom/components/comments/comment
Selecionar Salvar tudo
Clique com o botão direito do mouse comment.jsp
Selecione Excluir
Selecionar Salvar tudo
Usando CRXDE Lite:
Copiar comments.hbs
Editar comments.hbs
para:
Altere o valor da variável data-scf-component
atributo (~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
Editar 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ó
Selecionar Salvar tudo
Para evitar a necessidade de incluir explicitamente 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
), 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ó
Selecionar Criar nó
Nome: clientlibs
Tipo: cq:ClientLibraryFolder
Adicionar a Propriedades guia :
categories
Tipo String
Valor cq.social.author.hbs.comments
Multi
dependencies
Tipo String
Valor cq.social.scf
Multi
Selecionar Salvar tudo
Com /apps/custom/components/comments/clientlib
No nó s selecionado, crie 3 arquivos:
css.txt
js.txt
Insira "customcommentsystem.js" como o conteúdo de js.txt
Selecionar Salvar tudo
Ao estender (substituir) um componente do SCF, o resourceType é diferente (a sobreposição faz uso do mecanismo de pesquisa relativo que pesquisa por /apps
before /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 JS SCF e visualizar o resourceType personalizado.
Insira o seguinte texto como o 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
para /apps/custom