Documentación AEM 6.5 Guía de Communities

Creación de componentes create-the-components

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

Se aplica a:
Experience Manager 6.5

Temas:
Communities

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.

Vaya a CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
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
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
Expanda el nodo creado: /apps/custom/components/comments
Seleccionar Guardar todo
Clic con el botón derecho comments.jsp
Seleccionar Eliminar
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.

Vaya al nodo /apps/custom/components/comments
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
Expanda el nodo creado: /apps/custom/components/comments/comment
Seleccionar Guardar todo
Clic con el botón derecho comment.jsp
Seleccionar Eliminar
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
- De /libs/social/commons/components/hbs/comments
- Para /apps/custom/components/comments
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
- De /libs/social/commons/components/hbs/comments/comment
- Para /apps/custom/components/comments/comment
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