DocumentaciónAEM 6.5Guía de Communities

Creación de componentes create-the-components

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Desarrollador

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

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

Ambos componentes deben ponerse en marcha, especialmente si se personaliza la apariencia 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.

Creación del componente Comentarios create-the-comments-component

Estas instrucciones especifican un valor de Group distinto de .hidden, de modo que 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 utiliza 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 las aplicaciones personalizadas:

    • Seleccione el nodo /apps

      • Crear carpeta con el nombre personalizado

    • Seleccione el nodo /apps/custom

      • Crear carpeta con nombre componentes

  3. Seleccione el nodo /apps/custom/components

    • Crear > Componente…

      • Etiqueta: comentarios
      • Título: Comentarios Alt
      • Descripción: estilo de comentarios alternativos
      • Super Type: social/commons/components/hbs/comments
      • Grupo: Personalizado

    • Seleccionar Siguiente

    • Seleccionar Siguiente

    • Seleccionar Siguiente

    • Seleccionar Aceptar

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

  5. Seleccionar Guardar todo

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

  7. Seleccionar Eliminar

  8. Seleccionar Guardar todo

create-component

Creación del componente Comentario secundario create-the-child-comment-component

Estas instrucciones establecen Group en .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 utiliza el archivo HBS predeterminado en su lugar.

  1. Vaya al nodo /apps/custom/components/comments

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

    • Seleccionar Crear > Componente…

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

    • Seleccionar Siguiente

    • Seleccionar Siguiente

    • Seleccionar Siguiente

    • Seleccionar Aceptar

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

  4. Seleccionar Guardar todo

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

  6. Seleccionar Eliminar

  7. Seleccionar Guardar todo

create-child-component

create-component-crxde

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

Usando CRXDE Lite:

  • Copie comments.hbs

  • Editar comments.hbs en:

    • Cambie el valor del atributo data-scf-component (~line 20):

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

    • Modifique para incluir el componente de comentario personalizado (línea 75):

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

  • Copie comment.hbs

  • Editar comment.hbs en:

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

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

  • Seleccionar nodo /apps/custom

  • Seleccionar Guardar todo

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

Para evitar tener que incluir esta biblioteca de cliente, se puede utilizar el valor de categorías de la clientlib del sistema de comentarios predeterminado ( cq.social.author.hbs.comments). Sin embargo, esta clientlib también tendría que incluirse para todas las instancias del componente predeterminado.

Usando CRXDE Lite:

  • Seleccionar nodo /apps/custom/components/comments

  • Seleccionar Crear nodo

    • Nombre: clientlibs

    • Tipo: cq:ClientLibraryFolder

    • Agregar a la ficha Propiedades:

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

  • Seleccionar Guardar todo

  • Con el nodo /apps/custom/components/comments/clientlib seleccionado, cree tres archivos:

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

  • Escriba "customcomentsystem.js" como contenido de js.txt

  • Seleccionar Guardar todo

comments-clientlibs

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

Al ampliar (anular) un componente SCF, resourceType es diferente (la superposición utiliza el mecanismo de búsqueda relativa que busca en /apps antes de /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 la vista para el resourceType personalizado.

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

Publish en la aplicación publish-the-app

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

Una forma de hacerlo es:

  • Desde la navegación global,

    • Seleccione Herramientas > Implementación > Replicación
    • Seleccionar Activar árbol
    • Establecer Start Path en /apps/custom
    • Anular la selección de Solo modificadas
    • Seleccionar botón Activar
recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791