Erstellen der Komponenten

Das Beispiel der Erweiterung 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 veröffentlichten Kommentars erfasst

Beide Komponenten müssen eingerichtet werden, insbesondere wenn das Erscheinungsbild eines veröffentlichten Kommentars angepasst wird.

HINWEIS

Pro Site-Seite ist nur ein Kommentarsystem zulässig.

Viele Communities-Funktionen enthalten bereits ein Kommentarsystem, dessen resourceType so geändert werden kann, dass er auf das erweiterte Kommentarsystem verweist.

Erstellen der Kommentarkomponente

Diese Anweisungen geben eine Gruppe Wert, der .hidden sodass die Komponente über den Komponenten-Browser (Sidekick) verfügbar gemacht werden kann.

Das Löschen der automatisch erstellten JSP-Datei erfolgt dadurch, dass stattdessen die standardmäßige HBS-Datei verwendet wird.

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

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

    • Wählen Sie die /apps Knoten

      • Ordner erstellen benannt custom
    • Wählen Sie die /apps/custom Knoten

      • Ordner erstellen benannt Komponenten
  3. Wählen Sie die /apps/custom/components Knoten

    • Erstellen > Komponente…

      • Titel: Kommentare
      • Titel: Alt-Kommentare
      • Beschreibung: Alternativer Kommentar-Stil
      • Supertyp: social/commons/components/hbs/comments
      • Gruppe: Benutzerdefiniert
    • Wählen Sie Weiter aus

    • Wählen Sie Weiter aus

    • Wählen Sie Weiter aus

    • Klicken Sie auf OK

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

  5. Wählen Sie Alle speichern aus

  6. Klicken Sie mit der rechten Maustaste comments.jsp

  7. Wählen Sie Löschen aus

  8. Wählen Sie Alle speichern aus

chlimage_1-70

Erstellen der Komponente für untergeordnete Kommentare

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

Das Löschen der automatisch erstellten JSP-Datei erfolgt dadurch, dass stattdessen die standardmäßige HBS-Datei verwendet wird.

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

  2. Rechtsklick auf den Knoten

    • Auswählen Erstellen > Komponente…

      • Titel: comment
      • Titel: Alt-Kommentar
      • Beschreibung: Alternativer Kommentarstil
      • Supertyp: social/commons/components/hbs/comments/comment
      • Gruppe: *.hidden*
    • Wählen Sie Weiter aus

    • Wählen Sie Weiter aus

    • Wählen Sie Weiter aus

    • Klicken Sie auf OK

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

  4. Wählen Sie Alle speichern aus

  5. Klicken Sie mit der rechten Maustaste comment.jsp

  6. Wählen Sie Löschen aus

  7. Wählen Sie Alle speichern aus

chlimage_1-71 chlimage_1-72

Kopieren und Ändern der standardmäßigen HBS-Skripte

Verwenden CRXDE Lite:

  • Kopieren comments.hbs

  • Bearbeiten comments.hbs an:

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

      • Von social/commons/components/hbs/comments
      • An /apps/custom/components/comments
    • Nehmen Sie die benutzerdefinierte Kommentarkomponente (~line 75) auf:

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

  • Bearbeiten comment.hbs an:

    • Ändern Sie den Wert des data-scf-component -Attributs (~ Zeile 19)

      • Von social/commons/components/hbs/comments/comment
      • An /apps/custom/components/comments/comment
  • Auswählen /apps/custom Knoten

  • Wählen Sie Alle speichern aus

Erstellen eines Client-Bibliotheksordners

Um zu vermeiden, dass diese Client-Bibliothek explizit einbezogen werden muss, kann der Kategoriewert für die clientlib des Standard-Kommentarsystems verwendet werden ( cq.social.author.hbs.comments), aber dann würde diese clientlib auch für alle Instanzen der Standardkomponente einbezogen.

Verwenden CRXDE Lite:

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

  • Auswählen Knoten erstellen

    • Name: clientlibs

    • Typ: cq:ClientLibraryFolder

    • Hinzufügen zu Eigenschaften tab:

      • Name categories Typ String Wert cq.social.author.hbs.comments Multi
      • Name dependencies Typ String Wert cq.social.scf Multi
  • Wählen Sie Alle speichern aus

  • Mit /apps/custom/components/comments/clientlibErstellen Sie als ausgewählten Knoten 3 Dateien:

    • Name: css.txt
    • Name: js.txt
    • Name: customkommentssystem.js
  • Geben Sie "customommentssystem.js"als Inhalt von ein. js.txt

  • Wählen Sie Alle speichern aus

chlimage_1-73

Registrieren des SCF-Modells und Anzeigen

Beim Erweitern (Überschreiben) einer SCF-Komponente ist resourceType anders (Überlagern nutzt den relativen Suchmechanismus, der durchsucht wird) /apps before /libs sodass der resourceType gleich bleibt). Daher ist es erforderlich, JavaScript (in der Client-Bibliothek) zu schreiben, um das SCF-JS-Modell zu registrieren und für den benutzerdefinierten resourceType anzuzeigen.

Geben Sie folgenden Text als Inhalt von ein 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);
  • Wählen Sie Alle speichern aus

App veröffentlichen

Um die erweiterte Komponente in der Veröffentlichungsumgebung zu erleben, muss die benutzerdefinierte Komponente repliziert werden.

Eine Möglichkeit ist, dies zu tun

  • Aus globaler Navigation

    • Auswählen Tools > Bereitstellung > Replikation
    • Wählen Sie nun eine der folgenden Optionen aus Activate Tree
    • Satz Start Path: nach /apps/custom
    • Deaktivieren Only Modified
    • Auswählen Activatebutton

Auf dieser Seite