DocumentaciónAEM 6.4Guía de Communities

Crear los componentes create-the-components

Last update: Fri May 05 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • User
CAUTION
AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.

El ejemplo de ampliación de componentes utiliza el sistema de comentarios, que en realidad está compuesto por dos componentes

  • Comentarios : el sistema de comentarios que incluye el componente colocado en una página.
  • Comentario : El componente que captura una instancia de un comentario publicado.

Se deben implementar ambos componentes, especialmente si se personaliza el aspecto de un comentario publicado.

NOTE
Solo se permite un sistema de comentarios por página de sitio.
Muchas funciones de Communities ya incluyen un sistema de comentarios cuyo resourceType se puede modificar para hacer referencia al sistema de comentarios ampliado.

Crear el componente Comentarios create-the-comments-component

Estas direcciones especifican un Grupo valor distinto de .hidden por lo tanto, el componente puede estar disponible desde el navegador de componentes (barra de tareas).

La eliminación del archivo JSP creado automáticamente se debe a que se utilizará el archivo HBS predeterminado en su lugar.

  1. Vaya a CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

  2. Cree una ubicación para aplicaciones personalizadas:

    • Seleccione el /apps node

      • Crear carpeta named custom

    • Seleccione el /apps/custom node

      • Crear carpeta named componentes

  3. Seleccione el /apps/custom/components node

    • Crear > Componente…

      • Etiqueta: comentarios
      • Título: Comentarios Alt
      • Descripción: Estilo de comentarios alternativo
      • Super Tipo: social/commons/components/hbs/comments
      • Grupo: Personalizado

    • Seleccione Siguiente

    • Seleccione Siguiente

    • Seleccione Siguiente

    • Select OK

  4. Expanda el nodo recién creado: /apps/custom/components/comments

  5. Select Guardar todo

  6. Clic con el botón derecho comments.jsp

  7. Seleccione Eliminar

  8. Select Guardar todo

chlimage_1-70

Crear el componente de comentario secundario create-the-child-comment-component

Estas direcciones están configuradas Grupo a .hidden ya que solo el componente principal debe incluirse en una página.

La eliminación del archivo JSP creado automáticamente se debe a que se utilizará el archivo HBS predeterminado en su lugar.

  1. Vaya a la /apps/custom/components/comments node

  2. Haga clic con el botón derecho en el nodo

    • Select Crear > Componente…

      • Etiqueta: comment
      • Título: Comentario alternativo
      • Descripción: Estilo de comentario alternativo
      • Super Tipo: social/commons/components/hbs/comments/comment
      • Grupo: *.hidden*

    • Seleccione Siguiente

    • Seleccione Siguiente

    • Seleccione Siguiente

    • Select OK

  3. Expanda el nodo recién creado: /apps/custom/components/comments/comment

  4. Select Guardar todo

  5. Clic con el botón derecho comment.jsp

  6. Seleccione Eliminar

  7. Select Guardar todo

chlimage_1-71 chlimage_1-72

Copiar y modificar los scripts HBS predeterminados copy-and-modify-the-default-hbs-scripts

Uso CRXDE Lite:

  • Copie comments.hbs

  • Editar comments.hbs a:

    • Cambiar el valor de la variable data-scf-component (~line 20):

      • De social/commons/components/hbs/comments
      • A /apps/custom/components/comments

    • Modifique para incluir el componente de comentario personalizado (~line 75):

      • Replace {{include this resourceType='social/commons/components/hbs/comments/comment'}}
      • con {{include this resourceType='/apps/custom/components/comments/comment'}}

  • Copie comment.hbs

  • Editar comment.hbs a:

    • Cambiar el valor del atributo data-scf-component (~ línea 19)

      • De social/commons/components/hbs/comments/comment
      • A /apps/custom/components/comments/comment

  • Select /apps/custom node

  • Select Guardar todo

Crear una carpeta de biblioteca de cliente create-a-client-library-folder

Para evitar tener que incluir explícitamente esta biblioteca de cliente, se podría usar el valor de categorías para la clientlib del sistema de comentarios predeterminado ( cq.social.author.hbs.comments), pero entonces esta clientlib se incluiría también para todas las instancias del componente predeterminado.

Uso CRXDE Lite:

  • Select /apps/custom/components/comments node

  • Select Crear nodo

    • Nombre: clientlibs

    • Tipo: cq:ClientLibraryFolder

    • Agregar a Propiedades pestaña:

      • Nombre categories Tipo String Valor cq.social.author.hbs.comments Multi
      • Nombre dependencies Tipo String Valor cq.social.scf Multi

  • Select Guardar todo

  • con /apps/custom/components/comments/clientlibcomo nodo seleccionado, cree 3 archivos:

    • Nombre: css.txt
    • Nombre: js.txt
    • Nombre: customcomentsystem.js

  • Introduzca 'customcomentsystem.js' como contenido de js.txt

  • Select Guardar todo

chlimage_1-73

Registrar el modelo y la vista de SCF register-the-scf-model-view

Al ampliar (anular) un componente SCF, resourceType es diferente (al superponer se utiliza el mecanismo de búsqueda relativo que busca /apps before /libs para que resourceType siga siendo el mismo). Por este motivo es necesario escribir JavaScript (en la biblioteca de cliente) para registrar el modelo JS de SCF y ver el resourceType personalizado.

Introduzca el siguiente texto como contenido de customcommentsystem.js:

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);
  • Select Guardar todo

Publicar la aplicación publish-the-app

Para experimentar el componente ampliado en el entorno de publicación, es necesario duplicar el componente personalizado.

Una forma de hacerlo es

  • Desde la navegación global

    • Select Herramientas > Implementación > Replicación
    • Seleccionar Activate Tree
    • Establezca Start Path: a /apps/custom
    • Desmarcar Only Modified
    • Select Activatebotón
recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6