Erstellen Sie die Komponenten

Das Beispiel zum Erweitern von Komponenten verwendet das Kommentarsystem, das eigentlich aus zwei Komponenten besteht

• Kommentare - Das umfassende Kommentarsystem, bei dem es sich um die auf einer Seite platzierte Komponente handelt.
• Kommentar: Die Komponente, die eine Instanz eines geposteten Kommentars erfasst.

Beide Komponenten müssen eingerichtet werden, insbesondere wenn das Erscheinungsbild eines geposteten Kommentars angepasst werden soll.

Erstellen der Kommentarkomponente

In diesen Anweisungen wird ein anderer Group-Wert als .hidden angegeben, damit die Komponente über den Komponenten-Browser (Sidekick) verfügbar gemacht werden kann.

Das Löschen der automatisch erstellten JSP-Datei erfolgt, weil stattdessen die Standard-HBS-Datei verwendet wird.

1. Gehen Sie zu CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

2. Erstellen Sie einen Speicherort für benutzerdefinierte Anwendungen:

   • Wählen Sie den Knoten /apps

     • Erstellen von Ordnern mit benutzerdefiniertem Namen

   • Wählen Sie den Knoten /apps/custom

     • Erstellen von Komponenten mit Ordnernamen

3. Wählen Sie den Knoten /apps/custom/components

   • Erstellen > Komponente…

     • Beschriftung: Kommentare
     • Titel: Alt-Kommentare
     • Beschreibung: Alternativkommentar
     • Super Type: social/commons/components/hbs/comments
     • Gruppe: Benutzerdefiniert

   • Wählen Sie Weiter aus

   • Wählen Sie Weiter aus

   • Wählen Sie Weiter aus

   • Wählen Sie OK aus

4. Erweitern Sie den soeben erstellten Knoten: /apps/custom/components/comments

5. Wählen Sie Alle speichern

6. Klicken Sie mit der rechten Maustaste comments.jsp

7. Wählen Sie Löschen aus

8. Wählen Sie Alle speichern

Erstellen der untergeordneten Kommentarkomponente

Diese Anweisungen setzen Gruppe auf .hidden, da nur die übergeordnete Komponente in eine Seite einbezogen werden sollte.

Das Löschen der automatisch erstellten JSP-Datei erfolgt, weil stattdessen die Standard-HBS-Datei verwendet wird.

1. Navigieren Sie zum Knoten /apps/custom/components/comments

2. Klicken Sie mit der rechten Maustaste auf den Knoten

   • Wählen Sie Erstellen > Komponente…

     • Beschriftung: Kommentar
     • Titel: Alt-Kommentar
     • Beschreibung: Alternativer Kommentarstil
     • Super Type: social/commons/components/hbs/comments/comment
     • Gruppe: *.hidden*

   • Wählen Sie Weiter aus

   • Wählen Sie Weiter aus

   • Wählen Sie Weiter aus

   • Wählen Sie OK aus

3. Erweitern Sie den soeben erstellten Knoten: /apps/custom/components/comments/comment

4. Wählen Sie Alle speichern

5. Klicken Sie mit der rechten Maustaste comment.jsp

6. Wählen Sie Löschen aus

7. Wählen Sie Alle speichern

Kopieren und Ändern der Standard-HBS-Skripte

Verwenden von CRXDE Lite:

• Kopieren comments.hbs

  • Von /libs/social/commons/components/hbs/comments
  • Nach /apps/custom/components/comments

• Bearbeiten Sie comments.hbs nach:

  • Ändern Sie den Wert des Attributs data-scf-component (~line 20):

    • Von social/commons/components/hbs/comments
    • An /apps/custom/components/comments

  • Ändern Sie die Aufnahme der benutzerdefinierten Kommentarkomponente (~line 75):

    • Ersetzen {{include this resourceType='social/commons/components/hbs/comments/comment'}}
    • mit {{include this resourceType='/apps/custom/components/comments/comment'}}

• Kopieren comment.hbs

  • Von /libs/social/commons/components/hbs/comments/comment
  • Nach /apps/custom/components/comments/comment

• Bearbeiten Sie comment.hbs nach:

  • Den Wert des Attributs data-scf-component (~ Zeile 19) ändern

    • Von social/commons/components/hbs/comments/comment
    • An /apps/custom/components/comments/comment

• Knoten /apps/custom auswählen

• Wählen Sie Alle speichern

Erstellen eines Client-Bibliotheksordners

Um zu vermeiden, dass diese Client-Bibliothek explizit einbezogen werden muss, könnte der Wert "Kategorien"für die clientlib des standardmäßigen Kommentarsystems verwendet werden ( cq.social.author.hbs.comments), aber dann würde diese clientlib auch für alle Instanzen der Standardkomponente enthalten sein.

Verwenden von CRXDE Lite:

• Knoten /apps/custom/components/comments auswählen

• Wählen Sie Knoten erstellen

  • Name: clientlibs

  • Typ: cq:ClientLibraryFolder

  • hinzufügen auf die Registerkarte Eigenschaften:

    • ​​categories ​​String NameTypeValue cq.social.author.hbs.comments Multi
    • ​​dependencies ​​String NameTypeValue cq.social.scf Multi

• Wählen Sie Alle speichern

• Wenn der Knoten /apps/custom/components/comments/clientlibs ausgewählt ist, erstellen Sie 3 Dateien:

  • Name: css.txt
  • Name: js.txt
  • Name: customommentsystem.js

• Geben Sie als Inhalt von js.txt "customommentsystem.js"ein

• Wählen Sie Alle speichern

SCF-Modell und -Ansichtregistrieren

Beim Erweitern (Überschreiben) einer SCF-Komponente ist resourceType anders (Überlagern verwendet den relativen Suchmechanismus, der /apps vor /libs durchsucht, sodass resourceType gleich bleibt). Daher müssen Sie JavaScript (in der Client-Bibliothek) schreiben, um das SCF JS-Modell und die Ansicht für den benutzerdefinierten resourceType zu registrieren.

Geben Sie den folgenden Text als Inhalt von customcommentsystem.js ein:

customommentsystem.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);

• Wählen Sie Alle speichern

Appveröffentlichen

Um die erweiterte Komponente in der Umgebung "Veröffentlichen"nutzen zu können, müssen Sie die benutzerdefinierte Komponente replizieren.

Eine Möglichkeit dazu ist:

• von der globalen Navigation,

  • Wählen Sie Werkzeuge > Bereitstellung > Replikation
  • Wählen Sie Baum aktivieren
  • Start Path auf /apps/custom setzen
  • Deaktivieren Sie Nur geändert
  • Schaltfläche Aktivieren