Documentazione AEM 6.4 Guida di Communities

Creare i componenti

Ultimo aggiornamento: 4 maggio 2023

Argomenti:
Communities

Creato per:

User

CAUTION

AEM 6.4 ha raggiunto la fine del supporto esteso e questa documentazione non viene più aggiornata. Per maggiori dettagli, consulta la nostra periodi di assistenza tecnica. Trova le versioni supportate qui.

L’esempio di estensione dei componenti utilizza il sistema di commento, che in realtà è composto da due componenti

Commenti : il sistema di commenti che comprende il componente inserito in una pagina
Commento : il componente che acquisisce un’istanza di un commento pubblicato

Entrambi i componenti devono essere implementati, specialmente se si personalizzano l’aspetto di un commento pubblicato.

NOTE

È consentito un solo sistema di commenti per pagina del sito.

Molte funzionalità di Communities includono già un sistema di commenti il cui resourceType può essere modificato per fare riferimento al sistema di commenti esteso.

Creare il componente Commenti

Queste direzioni specificano Gruppo valore diverso da .hidden il componente può quindi essere reso disponibile dal browser componenti (barra laterale).

L'eliminazione del file JSP creato automaticamente è perché verrà utilizzato il file HBS predefinito.

Sfoglia per CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
Crea un percorso per le applicazioni personalizzate:
- Seleziona la /apps nodo
  - Crea cartella denominato personalizzato
- Seleziona la /apps/custom nodo
  - Crea cartella denominato componenti
Seleziona la /apps/custom/components nodo
- Crea > Componente…
  - Etichetta: commenti
  - Titolo: Commenti Alt
  - Descrizione: Stile commenti alternativi
  - Super Type: social/commons/components/hbs/comments
  - Gruppo: Personalizzato
- Seleziona Avanti
- Seleziona Avanti
- Seleziona Avanti
- Seleziona OK
Espandi il nodo appena creato: /apps/custom/components/comments
Seleziona Salva tutto
Fai clic con il pulsante destro del mouse comments.jsp
Seleziona Elimina
Seleziona Salva tutto

chlimage_1-70

Creare il componente Commento figlio

Queste direzioni Gruppo a .hidden poiché 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 a /apps/custom/components/comments nodo
Fai clic con il pulsante destro del mouse sul nodo
- Seleziona Crea > Componente…
  - Etichetta: commento
  - Titolo: Commento Alt
  - Descrizione: Stile commento alternativo
  - Super Type: social/commons/components/hbs/comments/comment
  - Gruppo: *.hidden*
- Seleziona Avanti
- Seleziona Avanti
- Seleziona Avanti
- Seleziona OK
Espandi il nodo appena creato: /apps/custom/components/comments/comment
Seleziona Salva tutto
Fai clic con il pulsante destro del mouse comment.jsp
Seleziona Elimina
Seleziona Salva tutto

chlimage_1-71 chlimage_1-72

Copia e modifica degli script HBS predefiniti

Utilizzo CRXDE Lite:

Copia comments.hbs
- Da /libs/social/commons/components/hbs/comments
- A /apps/custom/components/comments
Modifica comments.hbs a:
- Modificare il valore del data-scf-component attributo (~riga 20):
  - Da social/commons/components/hbs/comments
  - A /apps/custom/components/comments
- Modifica per includere il componente commento personalizzato (~riga 75):
  - Sostituisci {{include this resourceType='social/commons/components/hbs/comments/comment'}}
  - Con {{include this resourceType='/apps/custom/components/comments/comment'}}
Copia comment.hbs
- Da /libs/social/commons/components/hbs/comments/comment
- A /apps/custom/components/comments/comment
Modifica comment.hbs a:
- Modifica il valore dell’attributo data-scf-component (~ riga 19)
  - Da social/commons/components/hbs/comments/comment
  - A /apps/custom/components/comments/comment
Seleziona /apps/custom nodo
Seleziona Salva tutto

Creare una cartella della libreria client

Per evitare di dover includere esplicitamente questa libreria client, è possibile utilizzare il valore delle categorie per la clientlib del sistema di commenti predefinita ( cq.social.author.hbs.comments), ma questo clientlib verrebbe incluso anche per tutte le istanze del componente predefinito.

Utilizzo CRXDE Lite:

Seleziona /apps/custom/components/comments nodo
Seleziona Crea nodo
- Nome: clientlibs
- Tipo: cq:ClientLibraryFolder
- Aggiungi a Proprietà scheda:
  - Nome categories Tipo String Valore cq.social.author.hbs.comments Multi
  - Nome dependencies Tipo String Valore cq.social.scf Multi
Seleziona Salva tutto
Con /apps/custom/components/comments/clientlibcome nodo selezionato, crea 3 file:
- Nome: css.txt
- Nome: js.txt
- Nome: customcommentsystem.js
Inserisci 'customcommentsystem.js' come contenuto di js.txt
Seleziona Salva tutto

chlimage_1-73

Registrare il modello e la vista SCF

Quando estendi (sovrascrivi) un componente SCF, resourceType è diverso (la sovrapposizione fa uso del meccanismo di ricerca relativo che esegue la ricerca attraverso /apps prima /libs in modo che resourceType rimanga lo stesso). Per questo motivo è necessario scrivere JavaScript (nella libreria client) per registrare il modello SCF JS e visualizzare il resourceType personalizzato.

Inserisci il seguente testo come contenuto di 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);

Seleziona Salva tutto

Pubblicare l’app

Per provare l’esperienza del componente esteso nell’ambiente di pubblicazione, è necessario replicare il componente personalizzato.

Un modo per farlo è

Dalla navigazione globale
- Seleziona Strumenti > Implementazione > Replica
- Seleziona Activate Tree
- Imposta Start Path: a /apps/custom
- Deseleziona Only Modified
- Seleziona Activatepulsante

recommendation-more-help