DocumentazioneAEM 6.4Guida di Communities

Creare i componenti create-the-components

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

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 create-the-comments-component

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.

  1. Sfoglia per CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

  2. Crea un percorso per le applicazioni personalizzate:

    • Seleziona la /apps nodo

      • Crea cartella denominato personalizzato

    • Seleziona la /apps/custom nodo

      • Crea cartella denominato componenti

  3. 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

  4. Espandi il nodo appena creato: /apps/custom/components/comments

  5. Seleziona Salva tutto

  6. Fai clic con il pulsante destro del mouse comments.jsp

  7. Seleziona Elimina

  8. Seleziona Salva tutto

chlimage_1-70

Creare il componente Commento figlio create-the-child-comment-component

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.

  1. Passa a /apps/custom/components/comments nodo

  2. 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

  3. Espandi il nodo appena creato: /apps/custom/components/comments/comment

  4. Seleziona Salva tutto

  5. Fai clic con il pulsante destro del mouse comment.jsp

  6. Seleziona Elimina

  7. Seleziona Salva tutto

chlimage_1-71 chlimage_1-72

Copia e modifica degli script HBS predefiniti copy-and-modify-the-default-hbs-scripts

Utilizzo CRXDE Lite:

  • Copia comments.hbs

  • 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

  • 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 create-a-client-library-folder

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 register-the-scf-model-view

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 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 publish-the-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
5d37d7b0-a330-461b-814d-068612705ff6