DocumentazioneAEM 6.5Guida di Communities

Creare i componenti create-the-components

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Sviluppatore

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 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 è dovuta al fatto che viene utilizzato il file HBS predefinito.

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

  2. Creare una posizione per le applicazioni personalizzate:

    • Seleziona il nodo /apps

      • Crea cartella denominata personalizzata

    • Seleziona il nodo /apps/custom

      • Crea cartella denominata componenti

  3. Seleziona il nodo /apps/custom/components

    • Crea > Componente…

      • Etichetta: commenti
      • Titolo: Commenti Alt
      • Descrizione: Stile commenti alternativo
      • Super Type: social/commons/components/hbs/comments
      • Gruppo: Personalizzato

    • Seleziona Avanti

    • Seleziona Avanti

    • Seleziona Avanti

    • Seleziona OK

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

  5. Seleziona Salva tutto

  6. Fare clic con il pulsante destro del mouse su comments.jsp

  7. Seleziona Elimina

  8. Seleziona Salva tutto

create-component

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

Queste indicazioni impostano Group su .hidden in quanto solo il componente padre deve essere incluso in una pagina.

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

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

  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. Espandere il nodo creato: /apps/custom/components/comments/comment

  4. Seleziona Salva tutto

  5. Fare clic con il pulsante destro del mouse su 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 in:

    • Modifica il valore dell'attributo data-scf-component (~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 in:

    • Modifica il valore dell’attributo data-scf-component (~ riga 19)

      • Da social/commons/components/hbs/comments/comment
      • A /apps/custom/components/comments/comment

  • Seleziona nodo /apps/custom

  • 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 nodo /apps/custom/components/comments

  • Seleziona Crea nodo

    • Nome: clientlibs

    • Tipo: cq:ClientLibraryFolder

    • Aggiungi alla scheda Proprietà:

      • Nome categories Tipo String Valore cq.social.author.hbs.comments Multi
      • Nome dependencies Tipo String Valore cq.social.scf Multi

  • Seleziona Salva tutto

  • Con il nodo /apps/custom/components/comments/clientlib selezionato, crea tre file:

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

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

  • Seleziona Salva tutto

commenti-clientlibs

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

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

Immettere 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

Publish 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 su /apps/custom
    • Deseleziona Solo Modificato
    • Seleziona pulsante Attiva
recommendation-more-help
81e2cd9d-0789-409d-b87c-2a8ce4f28791