DocumentazioneAEM 6.5Guida di Communities

Creare i componenti create-the-components

Last update: Thu Oct 19 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • User

Nell’esempio di estensione dei componenti viene utilizzato il sistema di commenti, composto da due componenti.

  • Commenti: il sistema di commenti globale, ovvero il componente inserito in una pagina.
  • Commento: componente che acquisisce un’istanza di un commento pubblicato.

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

NOTE
È consentito un solo sistema di commenti per pagina del sito.
Molte funzioni 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 una Gruppo valore diverso da .hidden in modo che il componente possa essere reso disponibile dal browser componenti (barra laterale).

L’eliminazione del file JSP creato automaticamente è dovuta al fatto che viene utilizzato il file HBS predefinito.

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

  2. Creare una posizione 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 alternativo
      • Super Type: social/commons/components/hbs/commenti
      • Gruppo: Personalizzato

    • Seleziona Avanti

    • Seleziona Avanti

    • Seleziona Avanti

    • Seleziona OK

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

  5. Seleziona Salva tutto

  6. Clic con il pulsante destro comments.jsp

  7. Seleziona Elimina

  8. Seleziona Salva tutto

create-component

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

Queste direzioni sono impostate Gruppo a .hidden in quanto all’interno di una pagina deve essere incluso solo il componente principale.

L’eliminazione del file JSP creato automaticamente è dovuta al fatto che viene utilizzato il file HBS predefinito.

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

  2. Fare clic con il pulsante destro del mouse sul nodo

    • Seleziona Crea > Componente…

      • Etichetta: commento
      • Titolo: Commento alternativo
      • 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 creato: /apps/custom/components/comments/comment

  4. Seleziona Salva tutto

  5. Clic con il pulsante destro comment.jsp

  6. Seleziona Elimina

  7. Seleziona Salva tutto

create-child-component

create-component-crxde

Copiare e modificare gli script HBS predefiniti copy-and-modify-the-default-hbs-scripts

Utilizzo di CRXDE Liti:

  • Copia comments.hbs

  • Modifica comments.hbs a:

    • Modifica 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 questa libreria client, è possibile utilizzare il valore delle categorie per la libreria client del sistema di commenti predefinito ( cq.social.author.hbs.comments). Tuttavia, questa libreria client dovrebbe quindi essere inclusa anche per tutte le istanze del componente predefinito.

Utilizzo di CRXDE Liti:

  • 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/clientlibs nodo selezionato, crea tre file:

    • Nome: css.txt
    • Nome: js.txt
    • Nome: customcommentsystem.js

  • Immetti 'customcommentsystem.js' come contenuto di js.txt

  • Seleziona Salva tutto

comments-clientlibs

Registra il modello e la vista SCF register-the-scf-model-view

Quando si estende (si sovrascrive) un componente SCF, resourceType è diverso (la sovrapposizione utilizza il meccanismo di ricerca relativo che esegue le ricerche /apps prima di /libs in modo che resourceType rimanga invariato). Per questo motivo è necessario scrivere JavaScript (nella libreria client) per registrare il modello SCF JS e visualizzare per il resourceType personalizzato.

Immetti il testo seguente 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 avere un’idea del componente esteso nell’ambiente di pubblicazione, è necessario replicare il componente personalizzato.

Un modo per farlo è:

  • Dalla navigazione globale,

    • Seleziona Strumenti > Distribuzione > Replica
    • Seleziona Attiva albero
    • Imposta Start Path a /apps/custom
    • Deseleziona Solo Modificato
    • Seleziona Attiva pulsante
recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791