Nell’esempio di estensione dei componenti viene utilizzato il sistema di commenti, che in realtà è composto da due componenti
Entrambi i componenti devono essere implementati, soprattutto se si personalizzano l’aspetto di un commento pubblicato.
È consentito un solo sistema di commenti per pagina del sito.
Molte funzioni Community includono già un sistema di commenti il cui resourceType può essere modificato per fare riferimento al sistema di commenti esteso.
Queste indicazioni specificano un valore Group diverso da .hidden
in modo che il componente possa essere reso disponibile dal browser Componenti (barra laterale).
L'eliminazione del file JSP creato automaticamente è perché verrà utilizzato il file HBS predefinito.
Passare a CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
Create un percorso per le applicazioni personalizzate:
Selezionare il nodo /apps
Selezionare il nodo /apps/custom
Selezionare il nodo /apps/custom/components
Crea > Componente…
Seleziona Avanti
Seleziona Avanti
Seleziona Avanti
Selezionare OK
Espandi il nodo appena creato: /apps/custom/components/comments
Selezionare Salva tutto
Fare clic con il pulsante destro del mouse su comments.jsp
Selezionare Elimina
Selezionare Salva tutto
Queste indicazioni impostano Group su .hidden
, in quanto solo il componente principale deve essere incluso all'interno di una pagina.
L'eliminazione del file JSP creato automaticamente è perché verrà utilizzato il file HBS predefinito.
Passa al nodo /apps/custom/components/comments
Fare clic con il pulsante destro del mouse sul nodo
Selezionare Crea > Componente…
*.hidden*
Seleziona Avanti
Seleziona Avanti
Seleziona Avanti
Selezionare OK
Espandi il nodo appena creato: /apps/custom/components/comments/comment
Selezionare Salva tutto
Fare clic con il pulsante destro del mouse su comment.jsp
Selezionare Elimina
Selezionare Salva tutto
Utilizzando CRXDE Lite:
Copia comments.hbs
Modifica comments.hbs
in:
Modificate il valore dell'attributo data-scf-component
(~line 20):
social/commons/components/hbs/comments
/apps/custom/components/comments
Modificate per includere il componente commento personalizzato (~riga 75):
{{include this resourceType='social/commons/components/hbs/comments/comment'}}
{{include this resourceType='/apps/custom/components/comments/comment'}}
Copia comment.hbs
Modifica comment.hbs
in:
Modificare il valore dell’attributo data-scf-component (~ riga 19)
social/commons/components/hbs/comments/comment
/apps/custom/components/comments/comment
Selezionare il nodo /apps/custom
Selezionare Salva tutto
Per evitare di dover includere in modo esplicito questa libreria client, è possibile utilizzare il valore delle categorie per la clientlib del sistema di commenti predefinito ( cq.social.author.hbs.comments
), ma anche questa clientlib verrà inclusa per tutte le istanze del componente predefinito.
Utilizzando CRXDE Lite:
Selezionare il nodo /apps/custom/components/comments
Selezionare Crea nodo
Nome: clientlibs
Tipo: cq:ClientLibraryFolder
Aggiungi alla scheda Proprietà:
categories
String
NameTypeValue cq.social.author.hbs.comments
Multi
dependencies
String
NameTypeValue cq.social.scf
Multi
Selezionare Salva tutto
Con il nodo /apps/custom/components/comments/clientlib
s selezionato, create 3 file:
css.txt
js.txt
Immettete 'customcommentsystem.js' come contenuto di js.txt
Selezionare Salva tutto
Quando si estende (si sovrascrive) un componente SCF, resourceType è diverso (la sovrapposizione utilizza il meccanismo di ricerca relativa che esegue la ricerca in /apps
prima di /libs
in modo che resourceType rimanga lo stesso). Per questo motivo è necessario scrivere JavaScript (nella libreria client) per registrare il modello SCF JS e visualizzarlo per il resourceType personalizzato.
Immettete il testo seguente come contenuto di 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);
Per provare il componente esteso nell’ambiente di pubblicazione, è necessario replicare il componente personalizzato.
Un modo per farlo è
Dalla navigazione globale
Activate Tree
Start Path
: a /apps/custom
Only Modified
Activate