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 personalizar a aparência de um comentário publicado.

Criar o componente Comentários

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.

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

2. Crie um local para aplicativos personalizados:

   • Selecione o /apps nó

     • Criar pasta nomeado custom

   • 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 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

   • Selecionar OK

4. Expanda o nó recém-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

Criar o componente Comentário secundário

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.

1. Navegue até o /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 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

   • Selecionar OK

3. Expanda o nó recém-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

Copiar e modificar os scripts HBS padrão

Usando CRXDE Lite:

• Copiar comments.hbs

  • De /libs/social/commons/components/hbs/comments
  • Para /apps/custom/components/comments

• Editar comments.hbs para:

  • Altere o valor da variável 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

  • De /libs/social/commons/components/hbs/comments/comment
  • Para /apps/custom/components/comments/comment

• 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

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 :

    • 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/clientlibNo nó s selecionado, crie 3 arquivos:

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

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

• Selecionar Salvar tudo

Registre o modelo e a visualização do SCF

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:

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

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,

  • Selecionar Ferramentas > Implantação > Replicação
  • Selecionar Ativar árvore
  • Definir Start Path para /apps/custom
  • Desmarcar Somente modificados
  • Selecionar Ativar botão

Recursos do Business.Adobe.com

Cms Cloud Targeted Content Personalized Communications Customer Experience Management Content Management Digital Asset Management