Creación de componentes create-the-components

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 una Grupo valor distinto de .hidden por lo tanto, el componente puede estar disponible desde el explorador 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. Navegar a CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

  2. Cree una ubicación para las aplicaciones personalizadas:

    • Seleccione el /apps nodo

      • Crear carpeta nombrado personalizado
    • Seleccione el /apps/custom nodo

      • Crear carpeta nombrado componentes
  3. Seleccione el /apps/custom/components nodo

    • Crear > Componente…

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

    • Seleccione Siguiente

    • Seleccione Siguiente

    • Seleccionar OK

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

  5. Seleccionar Guardar todo

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

  7. Seleccione Eliminar

  8. Seleccionar Guardar todo

create-component

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

Estas direcciones se establecen Grupo hasta .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 a /apps/custom/components/comments nodo

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

    • Seleccionar Crear > Componente…

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

    • Seleccione Siguiente

    • Seleccione Siguiente

    • Seleccionar OK

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

  4. Seleccionar Guardar todo

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

  6. Seleccione Eliminar

  7. Seleccionar Guardar todo

create-child-component

create-component-crxde

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

Uso de CRXDE Lite:

  • Copie comments.hbs

  • Editar comments.hbs hasta:

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

      • De social/commons/components/hbs/comments
      • A /apps/custom/components/comments
    • Modifique para incluir el componente de comentario personalizado (línea 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 hasta:

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

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

  • 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 categories para 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.

Uso de CRXDE Lite:

  • Seleccionar /apps/custom/components/comments nodo

  • Seleccionar Crear nodo

    • Nombre: clientlibs

    • Tipo: cq:ClientLibraryFolder

    • Añadir a Propiedades pestaña:

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

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

    • Nombre: css.txt
    • Nombre: js.txt
    • Nombre: customcomentsystem.js
  • Escriba "customcomment.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, el resourceType es diferente (la superposición utiliza el mecanismo de búsqueda relativa que busca a través de /apps antes /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

Publicar 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,

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