Show Menu
ARGOMENTI×

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.
È 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 questo per rendere il componente disponibile dal browser Componenti (barra laterale).
L'eliminazione del file JSP creato automaticamente è perché verrà utilizzato il file HBS predefinito.
  1. Create un percorso per le applicazioni personalizzate:
    • Selezionare il /apps nodo
      • Crea cartella denominata custom
    • Selezionare il /apps/custom nodo
      • Creare componenti con nome cartella
  2. Selezionare il /apps/custom/components nodo
    • 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
  3. Espandi il nodo appena creato: /apps/custom/components/comments
  4. Seleziona Salva tutto
  5. Clic con il pulsante destro del mouse comments.jsp
  6. Seleziona Elimina
  7. Seleziona Salva tutto

Creare il componente Commento secondario

Queste direzioni impostano Gruppo su .hidden come 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 /apps/custom/components/comments nodo
  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. Seleziona Salva tutto
  5. Clic con il pulsante destro del mouse comment.jsp
  6. Seleziona Elimina
  7. Seleziona Salva tutto

Copiare e modificare gli script HBS predefiniti

Utilizzo di CRXDE Lite :
  • Copia comments.hbs
  • Modifica comments.hbs in:
    • Modificate il valore dell' data-scf-component attributo (~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
  • Seleziona /apps/custom nodo
  • Seleziona Salva tutto

Creare una cartella libreria client

Per evitare di dover includere esplicitamente questa libreria client, è possibile utilizzare il valore delle categorie per la clientlib del sistema di commenti predefinito ( cq.social.author.hbs.comments ), ma tale clientlib verrà incluso anche per tutte le istanze del componente predefinito.
Utilizzo di CRXDE Lite :
  • Seleziona /apps/custom/components/comments nodo
  • Seleziona Crea nodo
    • Nome : clientlibs
    • Tipo : cq:ClientLibraryFolder
    • Aggiungi alla scheda Proprietà :
      • Nome categories Tipo ​Valore String Valore cq.social.author.hbs.comments Multi
      • Nome dependencies Tipo ​Valore String Valore cq.social.scf Multi
  • Seleziona Salva tutto
  • Con /apps/custom/components/comments/clientlib il nodo s selezionato, create 3 file:
    • Nome : css.txt
    • Nome : js.txt
    • Nome : customcommentsystem.js
  • Immettete 'customcommentsystem.js' come contenuto di js.txt
  • Seleziona Salva tutto

Registrazione del modello e della vista SCF

Quando si estende (ignora) un componente SCF, resourceType è diverso (la sovrapposizione utilizza il meccanismo di ricerca relativa che esegue la ricerca /apps prima di /libs fare 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.
Inserite 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);

  • Seleziona 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
    • Select Tools > Deployment > Replication
    • Seleziona Attiva albero
    • Imposta Start Path su /apps/custom
    • Deseleziona solo modifica
    • Pulsante Seleziona Attiva