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.
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.
-
Navegar a CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
-
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
-
-
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
-
-
Expanda el nodo que ha creado:
/apps/custom/components/comments
-
Seleccionar Guardar todo
-
Clic con el botón derecho
comments.jsp
-
Seleccione Eliminar
-
Seleccionar Guardar todo
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.
-
Vaya a
/apps/custom/components/comments
nodo -
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
-
-
Expanda el nodo que ha creado:
/apps/custom/components/comments/comment
-
Seleccionar Guardar todo
-
Clic con el botón derecho
comment.jsp
-
Seleccione Eliminar
-
Seleccionar Guardar todo
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
- De
-
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'}}
- Replace
-
-
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
- De
-
-
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
TipoString
Valorcq.social.author.hbs.comments
Multi
- Nombre
dependencies
TipoString
Valorcq.social.scf
Multi
- Nombre
-
-
Seleccionar Guardar todo
-
Con
/apps/custom/components/comments/clientlib
Como nodo seleccionado, cree tres archivos:- Nombre:
css.txt
- Nombre:
js.txt
- Nombre: customcomentsystem.js
- Nombre:
-
Escriba "customcomment.js" como contenido de
js.txt
-
Seleccionar Guardar todo
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