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.

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

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

Copia e modifica degli script HBS predefiniti

Utilizzando CRXDE Lite:

• Copia comments.hbs

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

• 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

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

• 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

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