Creare i componenti

Nell’esempio di estensione dei componenti viene utilizzato il sistema di commenti, che in realtà è composto da due componenti

  • Commenti - Il sistema di commenti che include il componente inserito in una pagina
  • Commento: il componente che acquisisce un’istanza di un commento pubblicato

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

NOTA

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

Creare il componente Commenti

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.

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

  2. Create un percorso per le applicazioni personalizzate:

    • Selezionare il nodo /apps

      • Crea cartella personalizzata
    • Selezionare il nodo /apps/custom

      • Creare componenti con nome cartella
  3. Selezionare il nodo /apps/custom/components

    • Crea > Componente…

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

    • Seleziona Avanti

    • Seleziona Avanti

    • Selezionare OK

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

  5. Selezionare Salva tutto

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

  7. Selezionare Elimina

  8. Selezionare Salva tutto

chlimage_1-70

Creare il componente Commento secondario

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.

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

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

    • Selezionare 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

    • Selezionare OK

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

  4. Selezionare Salva tutto

  5. Fare clic con il pulsante destro del mouse su comment.jsp

  6. Selezionare Elimina

  7. Selezionare Salva tutto

chlimage_1-71 chlimage_1-72

Copia e modifica degli script HBS predefiniti

Utilizzando CRXDE Lite:

  • Copia comments.hbs

  • Modifica comments.hbs in:

    • Modificate il valore dell'attributo data-scf-component (~line 20):

      • Da social/commons/components/hbs/comments
      • A /apps/custom/components/comments
    • Modificate 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:

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

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

  • Selezionare Salva tutto

Creare una cartella libreria client

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/clientlibs selezionato, create 3 file:

    • Nome: css.txt
    • Nome: js.txt
    • Nome: customcommentsystem.js
  • Immettete 'customcommentsystem.js' come contenuto di js.txt

  • Selezionare Salva tutto

chlimage_1-73

Registra modello SCF & vista

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:

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);
  • Selezionare Salva tutto

Pubblicare l'app

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

Un modo per farlo è

  • Dalla navigazione globale

    • Selezionare Strumenti > Distribuzione > Replica
    • Seleziona Activate Tree
    • Imposta Start Path: a /apps/custom
    • Deselezionare Only Modified
    • Selezionare il tasto Activate

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now