Creare i componenti

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.

Creare il componente Commenti

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

Creare il componente Commento figlio

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

Copia e modifica degli script HBS predefiniti

Utilizzo CRXDE Lite:

• Copia comments.hbs

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

• 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

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

• 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

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

Registrare il modello e la vista SCF

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

(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

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

Risorse Business.Adobe.com

Customer Communications Content Intelligence Responsive Forms Version History Web Content Management Dynamic Forms