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.

HINWEIS

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

Viele Communities-Funktionen beinhalten bereits ein Kommentarsystem, dessen resourceType geändert werden kann, um auf das erweiterte Kommentarsystem zu verweisen.

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

create-component

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

create-child-component

create-component-crxde

Kopieren und Ändern der Standard-HBS-Skripte

Verwenden von CRXDE Lite:

  • Kopieren comments.hbs

  • 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

  • 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

comments-clientlibs

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

Auf dieser Seite