Crear los componentes

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: componente que captura una instancia de un comentario publicado

Ambos componentes deben implementarse, especialmente si se personaliza el aspecto de un comentario publicado.

Crear el componente Comentarios

Estas direcciones especifican un valor Grupo distinto de .hidden para que el componente esté 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.

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 componentes con nombre de carpeta

3. Seleccione el nodo /apps/custom/components

   • Crear > Componente…

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

   • Seleccione Siguiente

   • Seleccione Siguiente

   • Seleccione Siguiente

   • Seleccione Aceptar

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

5. Seleccione Guardar todo

6. Haga clic con el botón derecho comments.jsp

7. Seleccione Eliminar

8. Seleccione Guardar todo

Crear el componente de comentario secundario

Estas direcciones establecen Grupo como .hidden ya que sólo 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.

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

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

   • Seleccione Crear > Componente…

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

   • Seleccione Siguiente

   • Seleccione Siguiente

   • Seleccione Siguiente

   • Seleccione Aceptar

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

4. Seleccione Guardar todo

5. Haga clic con el botón derecho comment.jsp

6. Seleccione Eliminar

7. Seleccione Guardar todo

Copiar y modificar los scripts HBS predeterminados

Usando CRXDE Lite:

• Copiar comments.hbs

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

• Editar comments.hbs en:

  • Cambie el valor del atributo data-scf-component (~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):

    • Reemplazar {{include this resourceType='social/commons/components/hbs/comments/comment'}}
    • Mediante una de las opciones siguientes {{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 en:

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

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

• Seleccionar nodo /apps/custom

• Seleccione Guardar todo

Crear una carpeta de biblioteca de clientes

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

Usando CRXDE Lite:

• Seleccionar nodo /apps/custom/components/comments

• Seleccione Crear nodo

  • Nombre: clientlibs

  • Tipo: cq:ClientLibraryFolder

  • Añada a la ficha Propiedades:

    • ​​categories ​​String NameTypeValue cq.social.author.hbs.comments Multi
    • ​​dependencies ​​String NameTypeValue cq.social.scf Multi

• Seleccione Guardar todo

• Con el nodo /apps/custom/components/comments/clientlibs seleccionado, cree 3 archivos:

  • Nombre: css.txt
  • Nombre: js.txt
  • Nombre: custom comentsystem.js

• Escriba 'customcomment system.js' como contenido de js.txt

• Seleccione Guardar todo

Registrar el modelo y la Vista SCF

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

Escriba el siguiente texto como contenido de customcommentsystem.js:

customcomment system.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);

• Seleccione Guardar todo

Publicar la aplicación

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

Una manera de hacerlo es

• Desde la navegación global

  • Seleccione Herramientas > Implementación > Replicación
  • Seleccione Activate Tree
  • Set Start Path: a /apps/custom
  • Desmarcar Only Modified
  • Botón Seleccionar Activate

Recursos de Business.Adobe.com

Customer Communications Content Intelligence Responsive Forms Version History Web Content Management Dynamic Forms